Get a perfect score on Google Page Speed.
Google Page Speed (PageSpeed) Insights are a set of tools that analyses your website and provide feedback on ways that it could be better optimised for speed.
The tool scores your site on a scale of 1 to 100 for mobile usability, mobile speed and desktop speed.
Site optimisation is important. A well-optimised site should load swiftly and will thus provide a better user experience for your visitors. The speed at which your site loads also affects your ranking on Google’s search results page.
Optimisation is often overlooked on many sites, and even webmasters who actively try and improve their Google Page Speed score will struggle to get a perfect 100/100.
This tutorial will demonstrate how to get a perfect score of 100/100 in all three categories that are analysed. We’ll also cover other steps that can be taken to further improve the speed at which your site loads.
Enable Compression
The simplest way to do this is by editing the .htaccess file at your site’s root. If you don’t have one, you create one using an app like Notepad.
Try adding the following to your .htaccess file:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
Leverage Browser Caching
Browser caching will save a copy of your site in the user’s browser so that it doesn’t have to repeatedly load the same content when revisiting the site. This too can be done by adding some code to your .htacess file:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 year"
ExpiresByType text/x-javascript "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"
</IfModule>
## EXPIRES CACHING ##
Optimise Images
When you run Google Page Speed Insights, you will see an option at the bottom to download optimised images. Simply download the Zip file and then upload the images to your server in the correct locations.
Prioritise Visible Content
Above the fold content is the part of the page you which can see without scrolling down. You can increase page efficiency by including the necessary code to correctly render above the fold content on the same page. For example, if you have a heading that is above the fold and requires a particular style, then try adding the CSS inside the <head> section of that page or inline.
The same applies to any other scripts necessary to render that content correctly.
Reduce Server Response Time
You can improve the server response time by ensuring that your server receives as few requests as possible. Look into reducing the amount of CSS and JS files for your page and using image sprites.
Aside from that, choosing a quality, reputable web host is very important.
Minify JavaScript, CSS and HTML
The ZIP file containing your optimised images will also contain minified JavaScript and CSS files. Minified files are smaller in size as gaps and spaces have been removed so that all of the code is usually on a single line.
You can upload these minified resources back to the site. Some forms of compression will do this automatically, which is good because minified scripts can be a pain to modify.
Some tools can minify code that you paste in, which you can use to minify your HTML.
Google Page Speed Optimisation for WordPress
WordPress sites tend to have a lot of stuff going on in the background, and sadly much of it is often superfluous. Stay tuned for a future article on optimising WordPress websites.
In the meantime, plugins like W3 Total Cache can automate a lot of the optimisation measures that we’ve discussed.
Conclusion
Ironically, it is Google’s own scripts that may stand in the way of your 100/100 Page Speed score. Scripts that are needed for Google Analytics, YouTube embeds, and Google Map embeds are loaded externally, so if you’re using any of these features, you will always fall short by a few points. You can make the scripts load internally; however, this could cause issues as the scripts would not update.
It’s important to note that Google Page Speed insights are a measure of specific facets of optimisation rather than an actual measure of how quickly a page loads. In theory, a site could take a minute to load and still score much higher than a site that loads almost instantaneously, so consider this as just one part of a much larger picture that is site optimisation and stay tuned to the blog as we’ll be covering a lot more in the coming weeks.
