Website Performance Tutorials

General Optimization Tutorial

This tutorial covers the following topics:

Leverage Browser Caching
Cache Control Headers
Use Application Caching
Use Server-Side Caching
Avoid Redirect Chains
Optimize Images
Serve Scaled Images
Avoid HTTP errors
Avoid Big Homepages
Defer Parsing of JavaScript

● Leverage Browser Caching

What browser caching does is to memorize the resources that the browser has already loaded. When a visitor goes to another page on your website, and the new page is using the same resources as the previously visited pages ( e.g. your logo, CSS files, etc.), those do not need to be loaded again. This means that the browser will not initiate a new connection to fetch these resources, but instead, it will load them from its local cache. This is because the browser already memorized and saved them. This is quite useful for speeding up a website as when you leverage browser caching, the necessary caching files will be stored locally.

It is quite easy to leverage browser caching. You should just open your .htaccess file for editing and add the lines below:

● Cache Control Headers

Cache-control is an HTTP header used to specify browser caching mechanism both on the client and server side. This includes how a resource is cached, where it's cached and its maximum age before expiring. One of the most commonly used rules is the one below:

Header set Cache-Control "max-age=2628000, public"

It also should be added to the .htaccess file. It is used to setup maximum age of the browser caching. You may change the number for maximum age before expiring to your preferences. The maximum age before expiring variable is defined in second.

If you want to set up maximum age of the caching but just for certain resources (e.g. static resources only), you should use a directive similar to this: The public part of the header indicates that the rule would apply globally.

● Use Application Caching

Most applications have in-built caching system that can be enabled for a better performance. Make sure to check what are the available application caching options for your website and enable them. Depending on the application you are using, you may need to search on the Internet how to enable it's in-built caching.

● Use Server-Side Caching

Using server-side caching system is also quite important for your website's performance. We provide server side caching in three different layers -
Level 1 cache which is for static content such as images, HTML files, etc.
Level2 cache - for dynamic content such as PHP script and Level 3 - for the results of the execution of database queries.

● Avoid Redirect Chains

A redirect chain occurs when there is more than one redirect between the initial and destination URL. Having more than one redirect between them would additionally slow down the website with the redirects waiting time.

In most cases such redirect chains occur when there is one redirect from the non-www domain to the www domain (both non-HTTPS),and then another redirect from the non-HTTPS www domain to HTTPS and www. The best course of action here is to combine them and create a single redirect from the non-HTTPS non-www domain (http://domain.com) to the HTTPS www domain (https://www.domain.com).

● Optimize Images

Images are essential part of your website and it is important to have them optimized as much as possible.

By a simple resize, compress and optimization of your image files you may decrease your home page's size significantly, speed up your website and improve your score in online speed testers. There are many plugins and online tools that may help you optimize your images and save you lots of time.

● Serve Scaled Images

A scaled image is an image that has been scaled down to match the size in which it is displayed. Avoid using images with higher dimension than you need. This is not efficient due to the fact the browser has to download the large image and then scale it to the necessary size.

For example: if you have an image that is displayed 40x40 on your website, there is no need to keep the physical file with dimensions 400x400. Make sure that the file is resized to the dimension that would be displayed.

● Avoid HTTP errors

If your website's page renders a URL resulting in 403, 404, 500, 502 or another HTTP error, that might significantly slow down the website's overall performance.

Your website would try to load the faulty resource for a certain amount of time until an error is finally received as a response.

You may check your website for such links using the Network tab of your preferred browser console or by using an online speed testing tool. For example - with GTmetrix you may review those resources in the Waterfall tab and in Pingdom - in the Response codes section.

● Avoid Big Homepages

For the purpose of this tutorial, we would give an example with a page that is 5MB big. A few calculations: a 2Mbits connection would need 25 seconds to transfer the data, a 1Mbits connection would need 50 seconds and the fastest ADSL (and some people are still using these) would take a minute and a half just to transfer the data. As you may notice - having a big homepage can impact your website's loading speed a lot. So make sure to keep only the necessary resources on the page and as mentioned above - use well optimized and scaled images.

Another tip for keeping the page optimized is to embed videos from an external source (e.g. YouTube) instead of uploading them to your website.

● Defer Parsing of JavaScript

This means that your JavaScript files should be moved from the HEAD part of the HTML to the absolute bottom, just before the closing HTML tag.

By doing so, you are allowing all other content to be loaded before the JS files are executed in the browser, which eventually make your website look faster.