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.
Speed
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.
Optimization
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
Eliminate render-blocking Javascript and CSS in above-the-fold content
- Javascript
Wordtracker uses AngularJS for the majority of its javascript. When we originally ran the report we found that we were loading a large amount of unused javascript on the sales page. Code that is only used in the core application and wasn’t accessible on the sales page was loaded anyway. To combat this we split our angular application into two. We had already designed our application around modules, so it allowed us to pick and choose more easily what should be included and where. This meant we now had a super lightweight version just for the sales pages, and a full fat version only accessible to search.
- CSS
We use SASS to generate our CSS and this was shared between the sales site and the core application. By splitting the SASS much like we did with the Javascript, we were able to produce a much smaller CSS file to download.
- Above-the-fold content
Be sure to move slow loading items like third party Javascript to the bottom of your page’s body tag. This will mean the script loading does not block the rest of the page from loading.
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.
- Cache-Control
“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.
- Content-Encoding
This defines the encoding of the response. We set ours to GZIP to show that it is compressed.
- Expires
This tells the browser at which date the cache should expire.
Optimize images
One of the easier first steps is to download the optimized resources for the page, and replace them where possible. For Wordtracker we didn’t need to use the javascript and css files they provided, as we already optimize those via compression and minification in our deployment process. But we did utilize the images they provided, and it gave a healthy bump in performance.
Set up a CDN
If you’re not already caching your resources, you should consider using a Content Delivery Network.
A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos.
Source: Cloudflare
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.
The result
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.
