18 Tips for Website Performance Optimization

1. Image Optimization

We recently asked 20+ web performance experts to share their advice and mistakes they see people making. And guess what 46% of them said should be the number one focus when it comes to optimization? That’s right, image optimization! So now you’ve heard it from the experts, don’t just take our word for it.

2. Reduce HTTP Requests

When your browser fetches data from a server it does so using HTTP (Hypertext Transfer Protocol). It is a request/response between a client and a host. In general the more HTTP requests your web page makes the slower it will load.

3. Minify CSS and Javascript

Minification of resources means removing unnecessary characters from your HTML, Javascript, and CSS that are not required to load, such as:

White space characters
New line characters
Comments
Block delimiters

This speeds up your load times as it reduces the amount of code that has to be requested from the server.

4. Critical Path and Render Blocking Resources (CSS + JS)

When it comes to analyzing the speed of your web pages you always need to take into consideration what might be blocking the DOM, causing delays in your page load times. These are also referred to as render blocking resources, such as HTML, CSS (this can include web fonts), and Javascript. Here are a few recommendations on how to prevent your CSS and Javascript from blocking the DOM by optimizing your critical rendering path.

5. Reduce Latency with a Content Delivery Network (CDN)

If you are not familiar with a content delivery network (CDN) we highly recommend you read our complete CDN guide. Besides speeding up the delivery of your assets around the globe a CDN also can dramatically decrease your latency.

6. TTFB

Time to first byte (TTFB) is the measurement of the responsiveness of a web server. Basically it is the time it takes your browser to start receiving information after it has requested it from the server. A website’s TTFB is calculated as:

7. Avoid 301 Redirects

Redirects are performance killers. Avoid them whenever possible. A redirect will generate additional round trip times (RTT) and therefore quickly doubles the time that is required to load the initial HTML document before the browser even starts to load other assets.

8. Caching

Browser Cache

Leveraging the browser cache is crucial for assets that are rarely changing. It is recommended to have a max-age of 7 days in such cases. There are different types of HTTP headers such as:

Cache-control
Pragma
Expires
Validators

Learn more about different control mechanisms in this article: A Guide to HTTP Cache Headers

9. Prefetch and Preconnect

Domain name prefetching is a good solution to already resolve domain names before a user actually follows a link. Here an example how to implement it in the HEAD section of your HTML:

10. HTTP/2

Jeff Atwood, the co-founder of Stack Exchange and Discourse answered in our web perf questions that the number one piece of advice he would give is “HTTP/2 adoption across the board — huge improvements for everyone.” We love Jeff’s answer as we definitely agree that HTTP/2 is the future and there are huge performance benefits.

11. PHP7 and HHVM

Keeping the various components of a web server up to date is critical for reasons such as security patches, performance upgrades, and so on. If you are using PHP, upgrading to PHP7 can help greatly improve performance as compared to PHP 5.6. As well as taking advantage of HHVM.

12. Web Font Performance

According to the HTTP Archive, 60% of websites are now using custom fonts. Which is over an 850% increase since 2011. The disadvantages of web fonts, such as Google Fonts, are that they add extra HTTP requests to external resources. Web fonts are also render blocking. Below are some recommendations for better web font performance.

Prioritize based on browser support
Choose only the styles you need
Keep character sets down to a minimum
Host fonts locally or prefetch
Store in LocalStorage with Base64 Encoding

13. Hotlink Protection

Hotlink protection refers to restricting HTTP referrers in order to prevent others from embedding your assets on other websites. Hotlink protection will save you bandwidth by prohibiting other sites from displaying your images.

Example: Your site URL is www.domain.com. To stop hotlinking of your images from other sites and display a replacement image called donotsteal.jpg from an image host, place this code in your .htaccess file:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?domain\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|bmp|png)$ http://i.imgur.com/donotsteal.gif [L]

14. Enable Gzip Compression

Gzip is another form of compression which compresses web pages, CSS, and javascript at the server level before sending them over to the browser. You can check if your site is already compressed by using Check GZIP Compression. This website performance optimization is easy to implement and can make a big difference.

15. Infrastructure

Having a fast web host is equally as important as any website performance optimization you could make, as it is the backbone of your site. Stay away from cheap shared hosting. We suggest going with a VPS or if you are running WordPress or Drupal, a managed host, depending upon your level of expertise and time.

16. Fix 404 Errors

Any missing file generates a 404 HTTP error. Depending upon the platform you are running 404 errors can be quite taxing on your server. For example, Drupal has very expensive 404 errors. On an ‘average’ site with an ‘average’ module load, you can be looking at 60-100MB of memory being consumed on your server to deliver a 404.

We don’t recommend installing plugins or modules to check for 404s, instead we advise you occasionally run your website through an external service such as the “Online Broken Link Checker” or a tool like Screaming Frog. This ensures that you aren’t wasting any of your server’s resources on this task. You can also see these in Google Search Console.

17. Serve Scaled Images

You should always upload your images at scale and not rely on CSS to size them down. If you do you will run into this little Google Pagespeed recommendation: “Optimization suggestion: “By compressing and adjusting the size of … you can save 5.8 KB (51%).”

This recommendation refers to your images being scaled down by your browser. For example, maybe the image you upload has a 400px width, but the column it was placed in is only 300px wide. This results in your image being scaled down to 300px due to CSS so that it matches the column size. It is better to always upload images at scale and also upload multiple resolutions of your images and serve the right resolution for the right device.

Note: It is not always possible to avoid scaling with CSS, especially if you are working with high resolution retina devices.

18. Database Optimization

And last but not least is database optimization. Whether it is cleaning out old unused tables or creating indexes for faster access there are always things that can be optimized.
MySQL Tuning

Optimizing MySQL is also very important. Unfortunately this is very specific to your environment and your setup so we can’t provide recommended configurations. The MySQL/MariaDB configuration file is normally located in /etc/my.cnf. Here are a few settings though to keep an eye on.

tmp_table_size
query_cache_type
query_cache_size
query_cache_size
join_buffer_size
max_heap_table_size

A highly recommended tool is the MySQL Tuner script. It is read-only and won’t make configuration changes. It will give you an overview of your server’s performance and make some basic recommendations about improvements that you can make after it completes. Here are a couple other tools you can use as well:

MySQL tuning primer script
phpMyAdmin

See our WordPress database optimizations
See our Joomla database optimizations
See our Magento database optimizations

Summary

As you can see there are hundreds of different website performance optimization tweaks you can implement to further improve on the delivery and speed of your content. From image optimization, to implementing a CDN, to browser and server caching, taking advantage of HTTP/2, Gzip, PHP7, HHVM, and much more!