Google wants you to improve the speed of your site, and if you do so it’ll give you a better ranking. In addition, there’s plenty of evidence showing that faster times correlate with lower bounce rates.
Enter Google’s PageSpeed Insights Tool:
PageSpeed Insights reports on the real-world performance of a page for mobile and desktop devices and provides suggestions on how that page may be improved.
Now I don’t know about you, but everything about that sentence sounds great. I only know how well my website performs on my devices. This tool will help you improve it globally, on desktop and mobile.
Great, how do I use it?
Visit https://developers.google.com/speed/pagespeed/insights/ enter the URL you want to optimize and hit analyze.
Here’s what we got for wordtracker.com on mobile before started optimizing.
Slow and Low, wow that’s pretty bad.
How about Desktop?
Ouch, not much better. Slow and Medium.
Looks like we’ve got some work to do here.
PageSpeed Insights incorporates data from the Chrome User Experience Report (CrUX) to display real-world performance data about a page.
What does this mean?
Speed metrics are median values of all devices that report to Google. So don’t expect them to update each time you perform a report. It’ll take time for those metrics to update with whatever changes you make to your site, so you’ll see the effect of changes over time.
PageSpeed Insights evaluates how well a page follows common performance best practices and computes a score from 0-100 that estimates its performance headroom
Fortunately Google helps you with this, identifying issues and providing pointers and help on how to start fixing things.
These were the suggestions it gave for the Wordtracker site:
Most of these areas are very site specific and clicking on the “Show how to fix” link will bring up suggestions specifically for your site.
How to proceed will depend heavily on the structure of your website and hosting options.
How we moved forward
- Above-the-fold content
Leverage browser caching & Enable Compression
We already had browser caching enabled, the only change we needed to make was with the expiration header. The best way to discover which headers your web server is serving, is through Chrome.
If you open the “developer tools” and switch to the Network tab, you should see a list of resources being used by your website. If your list is blank, press F5. Choose one file which is served by your webserver, you will see a new window pop up which has the response headers in. The screenshot below highlights the important ones, these are optimal for best performance.
“Public” indicates that it may be cached, “s-maxage” is time in seconds till expiry of cache. “Max-age”, contrary to Expires, is relative to the time of the request.
This defines the encoding of the response. We set ours to GZIP to show that it is compressed.
This tells the browser at which date the cache should expire.
Set up a CDN
If you’re not already caching your resources, you should consider using a Content Delivery Network.
CDNs can be quite simple to set up, and depending on your setup can provide a good increase in performance. Some good ones include Cloudflare and Amazon Cloudfront + S3.
After working through the documentation provided by Google to improve our performance we retested the site. The Optimization score will show the immediate change and the Speed score will take a few days to change as data is resampled from across devices.
Much better! From 56 up to 92. It’s only been a day or two and we can already see the speed improving as well.
The same trend can be seen with desktop, from 72 up to 90, with an even better improvement in speed.
Over time we should see the speeds rising as a result of this work and I’ll keep an eye on progress. I’m happy with the optimizations we’ve made with the site - it feels much snappier as a result.