Optimizing the Speed of Your Website

Gzip compression configuration

First we will begin with Gzip File Compression. This type of optimization will cause the response time of your website on the client’s browser to be reduced by reducing the size of the content sent to the client.

It is important to remember that not all of the components your website uses should be under the Gzip Compression layer. For example the images and pdf files are already compressed and you will not need to compress them once again. However your websites elements like HTML, CSS, Javascript elements and other static contents should be under that layer.

In order to activate the compression layer you will need to add the following line into the .htaccess file of your website:

<ifModule mod_deflate.c> 
    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript 
</ifModule>

Once these lines are added and you refresh your website you will clearly notice the difference in the loading speed which will be more than enough.

ETag configuration

Secondly we will proceed with some configuration for the ETags mechanism. This mechanism servers for client browsers to determinate if the component they have cached is matching the same component on the original server. If these are disabled this check will be terminated and the loading speed will be increased.

In order to disable them you will need to add the following lines in the .htaccess file for your website:

Header unset ETag 
FileETag None

The final step will be for a configuration for the browser’s cache to be added again to the .htaccess file of your website.

Client browser cache configuration

Browser caching is used for you to specify the exact time client browser should cache contents from your website and after this time expires for the cache to be renewed.

Once a client makes a request for accessing your website in, his/her browser will attempt to download the static elements of your website and also the result of the php execution each time the visitor access pages on your website. By adding the bellow provided lines you will enable the Expires and Cache-Control headers so the files which your visitor are downloading each time to remain on his computer so the browser cannot redownload them each time the visitor browse a page on your website.

Mod_expires serves for controlling the expiration time of HTTP headers (HTML, CSS, Javascript components):

# BEGIN Expire headers 
<ifModule mod_expires.c> 
    ExpiresActive On 
    ExpiresDefault "access plus 5 seconds" 
    ExpiresByType image/x-icon "access plus 2592000 seconds" 
    ExpiresByType image/jpeg "access plus 2592000 seconds" 
    ExpiresByType image/png "access plus 2592000 seconds" 
    ExpiresByType image/gif "access plus 2592000 seconds" 
    ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" 
    ExpiresByType text/css "access plus 604800 seconds" 
    ExpiresByType text/javascript "access plus 216000 seconds" 
    ExpiresByType application/javascript "access plus 216000 seconds" 
    ExpiresByType application/x-javascript "access plus 216000 seconds" 
    ExpiresByType text/html "access plus 600 seconds" 
    ExpiresByType application/xhtml+xml "access plus 600 seconds" 
</ifModule> 
# END Expire headers 

Mod_headers is controlling the HTTP request and response headers.

# BEGIN Cache-Control Headers 
<ifModule mod_headers.c> 
    <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> 
        Header set Cache-Control "public" 
    </filesMatch> 
    <filesMatch "\.(css)$"> 
        Header set Cache-Control "public" 
    </filesMatch> 
    <filesMatch "\.(js)$"> 
        Header set Cache-Control "private" 
    </filesMatch> 
    <filesMatch "\.(x?html?|php)$"> 
        Header set Cache-Control "private, must-revalidate" 
    </filesMatch> 
</ifModule> 
# END Cache-Control Headers

With these changes in the .htaccess file for your website you might drop the loading time of your website with up to 80% especially if your website uses large amount of static components. 

Congratulations! You have successfully optimized the loading speed of your website!