If you’re wondering about improving your Google Page Speed rating, great!
This is a good first step, but it’s not the only one you should take.=
How to improve Google Page Speed
This should be self-explanatory, as the results are accompanied by recommendations on what to do to fix them.
But what if a lot of the recommendations go beyond your technical knowledge? There are some tools you can use to get you started on the road to better performance too.
Front-end improvements
One of them is Cloudflare, which has a good range of improvements even at the free tier level. After you switch your domain to using Cloudflare’s DNS, these are the improvements you can do right away:
- Auto Minify
- Activate Rocket Loader
- Adjust Browser Cache Expiration to a year
These require no code changes and are easy to apply.
Image improvements
Image optimization should be part of your process, and here’s a good starting point.
- Use the right image format for the job:
- JPEGs for photos or rich colored imagery
- PNGs for images with few colors or which require transparency
- Compress your images. The visually perceived difference between high and low quality JPEGs can be minimal, but the file size would decrease greatly.
- Losslessly optimise the graphics using tools like ImageOptim.
With WordPress, activating the Image Performance feature from the Jetpack plug-in not only applies lossless compression to your content image, it also delivers them using the new webp image format when your visitors are coming from a browser supporting it.
These improve the delivery of assets, but it’s worth remembering that no request is faster than any request. Removing assets that don’t add value is one of the top strategies to improve your scoring. Ask yourself whether a custom font is worth the extra wait.
Server improvements
If you’re being flagged with “Reduce server response time”, adding a caching layer would come in handy. If you’re using WordPress, check out this comparison of the most popular WordPress Caching Plugins for potential next steps.
Another optimization where the server configuration plays a role is file compression. The widely adopted standard is gzipping of the assets, but the Brotli has gained popularity and offers even smaller file sizes, which makes it a solid contender for further decreasing the network payload.
Render-blocking
You might already be tired of this render-blocking buzzword.
CSS is render-blocking, which means no painting happens on the screen until all of your linked stylesheet are loaded and processed. Shrinking the CSS, for example by avoiding bloated frameworks, or removing assets you don’t need for the page you are displaying. The smaller the CSS, the better, and when it is small enough (<10KB), you can even inline it for the ultimate performance. Don’t inline large CSS files, as that would discard the benefits of caching.
JavaScript is render-blocking if it’s added to the head. You should use the async attribute for JS assets without dependencies, or the defer attribute when they have dependencies and need to be ran in a specific order. You can also use both async and defer on low priority JS assets with no dependencies.
Beyond Google Page Speed
The Google Page Speed being is only a set of best practices although it doesn’t tell the entire story. There are things which can have an even greater impact on making your site faster.
Enable SSL
If you haven’t already, moving to HTTPS has great performance benefits, as all major browsers have HTTP/2 support only while on HTTPS. This allows for a faster transmission of assets without the need for concatenation.
Time to Interactive – Measure it and Improve
The Lighthouse tool from Chrome computes this metric representing the time it takes for the browser to finish all of the CPU intensive processing. Beyond the time to first paint (which is a metric Google Page Speed caters for), this is the next one in importance for the user experience.
You might have too much JavaScript on your site – even if it’s loaded in a not render-blocking way.
While browser waits for the scripts to finish running the visitor is unable to use the interactive components after the page is painted which can be a cause for frustration.
Animation jank
Google Chrome offers an easy way to spot animation jank. Scroll through your site with these tools turned on and click on interactive elements to uncover areas where the user experience might need some love and attention.
3rd party assets can sometimes keep running in the background and make your website feel sluggish. CSS might be the primary area to look for improvements when discovering jank. JavaScript can also slow down the browser enough for it to not to be able to keep up to 60fps.
Test on value phones
Although in some areas the internet is becoming faster by the day, that’s not the norm world-wide. That and the difference in performance between latest and greatest vs. value devices needs emphasis.
Things will most likely be very fast on flagship devices, but you’d rather look beyond them. If you don’t have an old phone around, pick something from the Motorola Moto E family of phones and see how fast (or slow) your website loads on an average device. That will give you a good metric on how much improvement you still have to do in order to give the majority of your visitors a pleasant experience.
Next steps
As technology evolves, so do the number of improvements we can do to make a site fast.
Here’s some free resources especially relevant to the performance topic which can take your game to the next level: