Website loading speed is a priority for the overall user experience, and it’s also one of the hundreds of SEO ranking factors. Page speed may depends on many different factors, however, following the essential recommended tips will make a significant difference on page loading speed.
Here you will find a list of best practices to follow when creating and optimising your website:
1. Reduce image sizes
Images can play a major role in your site speed. They’re often very large files, which can slow down page load times.
We highly recommend using appropriately sized images and make sure to compress the large images before uploading them into the page, you can use a tool like tinypng.com where you can upload your images to be compressed the download the compressed version which can you upload and use into your website.
2. Enable gzip compression
The smaller your files, the faster your pages will load. Compression files is one of the easiest ways to reduce load times, and today, enabling compression with Gzip is considered standard practice.
Gzip is a file format and software application that essentially locates strings of similar code in your text files, then temporarily replaces them to make the files smaller.
Gzip will reduce the size of files sent from your server to increase the speed to which they are transferred to the browser.
- Reduce sizes of pages by up to 70%
- Increase page speed
- Cost-benefit ratio: high
- Access needed to the .htaccess files or server administration files
This works well with CSS and HTML, because these files typically have repeated code and whitespace.
If you’re not sure if your site has Gzip enabled, you can use checkgzipcompression.com to check. Just enter your site’s URL, and if you have Gzip enabled, you’ll see something like this:
If you don’t have Gzip enabled, however, you’ll want to fix this as soon as possible.
Gzip in your .htaccess file. The exact code you need depends on your server but if your site runs on Apache you will need to add the following lines to your .htaccess file:
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0 no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
To enable compression in NGINX you will need to add the following code to your config file:
gzip_buffers 16 8k;
# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";
# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
3. Enable browser caching
Page load times can be significantly improved by asking visitors to save and reuse the files included in your website.
- Reduces page load times for repeat visitors
- Particularly effective on websites where users regularly re-visit the same areas of the website
- Benefit-cost ratio: high
- Access needed
You can enable caching on your Apache server by adding these lines to your .htaccess file:
## EXPIRES CACHING ##
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
## EXPIRES CACHING ##