Quick & Easy Optimisation Tips

Quick & Easy Optimisation Tips

Quick & Easy Optimisation Tips

Some of the most overlooked optimisation tips from both GTMetrix and Pingdom Tools is the simple “leverage browser caching”.

Leveraging browser caching is super easy, and only requires you to enter some code into your .htaccess file.

The code is as follows:

# Expires headers (for better cache control)
<IfModule mod_expires.c>
ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6
ExpiresByType text/cache-manifest "access plus 0 seconds"

# Your document html
ExpiresByType text/html "access plus 0 seconds"

# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"

# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"

# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"

# Media: images, video, audio
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"

# HTC files
ExpiresByType text/x-component "access plus 1 month"

# Webfonts
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/x-font-woff2 "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"

</IfModule>


What is browser caching?



Every time a browser loads a web page, it has to download all of the files on the website to display the page correctly. This includes all of the HTML, CSS, Javascript, and images. Many pages might only consist of very few files, and be small in size – perhaps only a few kilobytes. For others, there may be many files, and these can add up to several megabytes. An example is Twitter, which is 2mb+.

Browser caching stores some of these frequently accessed files locally in the user’s browser. When they first visit your website, it will take the same time to load, but when that same user revisits your website, they already have some of the files they need stored locally. This also happens when navigating to a different page, or refreshing the page.

This means the amount of data the user’s browser has to download is less. Therefore fewer requests need to be made to the server where your website is hosted. The result being decreased page loading times.

How does it work?



Browser caching works by making certain pages, or the parts of pages, as being needed to be updated at different intervals (as explained in the code). Your logo is unlikely to change on a daily basis. So by caching the logo image, the code tells the browser only to download this image once a week (or whatever is set in the code) and so would not require another download of the image.

By the web server telling the browser to store these files, and not download them every time the user comes back, saves your users time and your bandwidth.

cPanel Optimization



For added benefit, we can also use cPanel’s inbuilt optimisation.
First – login to your cPanel and in the search bar type “Optimize Website” then click on this button:

Optimise in cPanel 1

 Then select "Compress all content" - 

Optimise in cPanel 2

cPanel’s inbuilt optimisation uses mod_deflate, which allows you to configure your website to automatically compress specified types of content when visitors access that content.

What is Mod_deflate?



To take advantage of cPanel’s inbuilt optimisation, we need Mod_deflate, which is an Apache module that allows the output from your website to be compressed before being sent to the visitors.
Once the size of your website content is compressed – it’s smaller, so clients can download it faster. This is necessary – not only for your bandwidth, but it is also taken into consideration by search engines when they evaluate your site performance.

What is gzip compression?



Mod_deflate only supports gzip, this is to ensure complete compatibility with older browsers. Website gzip compression makes it possible to reduce the size of web pages – and other typical web files as well. It’s important for speed – as it compresses files before sending them over to the browser.

It’s a relatively straightforward idea this is incredibly powerful when put to good use.

The technical details



When checking gzip compression, we can see the Localnode website has saved 75.9% of data. Meaning our uncompressed size was 42,336 bytes – but our compressed size is 10,199 bytes.

Final notes



Website speed remains a big deal: it continues to be one of the factors Google uses to determine your site’s ranking. Not only that but it’s also important because the faster a page loads – the more satisfied your visitors will be..