Over the years average page speed has been a key focus for a most successful business. But it has only got its mainstream importance ever since Google / Bing / DuckDuckGo has started penalising the slow page speeds. A lot of businesses are struggling to maintain the web presence they used to have or gain more because of long page load times.
So in this article, I will go through a step-by-step process of improving page speed. But before we start fixing, let’s identify what the problems are.
Current state
So there are multiple tools that can help you with this, but here are my favourite tools –
Pingdom – https://www.pingdom.com/
I have used Pingdom for years now and its very reliable and really helpful. It’s free to do a quick assessment. It breaks down the speed and shows the issues. Really helpful.
Google Developer Tools – https://developers.google.com/speed/pagespeed/insights/
Again this is one of my favourites and have used this for a while.
Lighthouse – https://developers.google.com/web/tools/lighthouse
A new addition to Google arsenal but really really good.
I prefer to use this tools in conjunction and make sure that I am covering all my basis.
Why should you improve?
Here is a tool by Google which show why this is so important.
https://www.thinkwithgoogle.com/feature/testmysite/
Also Google has published a great article on benchmarks –
How to improve page speed?
As many people will tell you there are multiple factors contributing to this, but here are somethings that you should definitely consider.
Caching –
What is browser caching?
Every time a browser loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, JavaScript and images.
Some pages might only consist of a few files and be small in size – maybe a couple of kilobytes. For others however there may be a lot of files, and these may add up to be several megabytes large. Twitter.com for example is 3 MB+.
The issue is two fold.
These large files take longer to load and can be especially painful if you’re on a slow internet connection (or a mobile device).
Each file makes a separate request to the server. The more requests your server gets simultaneously the more work it needs to do, only further reducing your page speed.
Browser caching can help by storing some of these files locally in the user’s browser. Their first visit to your site will take the same time to load, however when that user revisits your website, refreshes the page, or even moves to a different page of your site, they already have some of the files they need locally.
This means the amount of data the user’s browser has to download is less, and fewer requests need to be made to your server. The result? Decreased page load times.
How does it work?
Browser caching works by marking certain pages, or parts of pages, as being needed to be updated at different intervals. Your logo on your website, for instance, is unlikely to change from day to day. By caching this logo image, we can tell the user’s browser to only download this image once a week. Every visit that user makes within a week would not require another download of the logo image.
By the web server telling the browser to store these files and not download them when you come back saves your users time and your web server bandwidth.
Why is it important?
The main reason why browser caching is important is because it reduces the load on your web server, which ultimately reduces the load time for your users.
How to leverage browser caching?
To enable browser caching you need to edit your HTTP headers to set expiry times for certain types of files.
Configuring Apache to serve the appropriate headers
Find your .htaccess file in the root of your domain. This file is a hidden file but should show up in FTP clients like FileZilla or CORE. You can edit the .htaccess file with notepad or any form of basic text editor.
In this file we will set our caching parameters to tell the browser what types of files to cache.
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>
Depending on your website’s files you can set different expiry times. If certain types of files are updated more frequently, you would set an earlier expiry time on them (ie. css files)
When you are done save the file as is and not as a .txt file.
If you are using any form of CMS, cache extensions or plugins might be available.
Recommendations
Be aggressive with your caching for all static resources
Expiry at a minimum of one month (recommended: access plus 1 year)
Don’t set your caching more than a year in advance!
CDN
If you have the money to invest and are thinking of having massive amount of content on the website. This is a must.
Update your image formats
https://squoosh.app/editor is google based tool which can help you this. Convert PNG and JPG to web formats.
Minify CSS and JS and Eliminate render-blocking resources
Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn more.
Now this is where things get really technical. So if you are not sure and you are not a developer yourself. Contact your developer, if you don’t have one, I have team which can easily help you. www.alkye.com
Conclusion
There are many other things you can be doing to improve this, and you can always be chasing the 100% score. My opinion is to start small and keep making changes, it might not get to 100% but atleast make sure you get above 80.
Things to also keep in mind
Just remember that after making these changes. Cache is very persistent, so make sure clear you cache from the backend
For WordPress users
I recommend both the below plugins –