Making Google PageSpeed Scores Stress-free

In: Smart Tips
Jul 7, 2018


improving Google Pagespeed scoresWe all know about Google.  That it’s the biggest search engine on the planet and is one of the most profound influences of social community of all time.  Ok, that’s it for my promotion of Google, they know who they are.  However, the point that relates to this article is that, even with all of their immense data-shaping power, they are a thorn in the side of website developers, SEO experts and social media marketers.  We spend vast amounts of time as a collective species dicing up, analyzing, cross-extrapolating, and inferring data from Google and how to make this data work for our Internet properties.  And at the heart of it is Google Analytics and Google PageSpeed Insights.

I am going to discuss PageSpeed, partially because a conversation about how to make Google Analytics stress-free would fill a book, but also because PageSpeed more directly influences how site developers understand the mechanics of their site from a public perspective.

First, what is PageSpeed Insights?  In Google’s words:

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.  

PageSpeed Insights (PSI) measures site performance to arrive at two factors, Speed Score and Optimization Score.  Without getting too technical, PSI arrives at its Speed Score from real-world performance data about a page which describes two attributes, First Contentful Paint (how long it takes for the first bit of visual content arrives to and is rendered by your browser) and DOMContentLoaded (how long all page elements are ready).  Optimization Score is a juicier measurement of which we have more immediate control.  It evaluates how well a webpage achieves common performance practices and grades both the Time to Above-the-Fold Load and Time to Full Page Load.  In many ways our actions to improve the Optimization Score will influence the Speed Score, so let’s concentrate on the former.

Optimization Score

Most of our efforts to maximize performance will focus on PSI’s Optimization Score.  Before we get too far into this topic, I have a disclaimer to make and some advice to lend:

First, keep in mind that the tips and techniques dispensed here are in no way to be seen as a “magic bullet”, that somehow instantly your site will go from a score of 21 to 100 in a night — or even that you will be able to attain 100% at all.  These steps are simply recipes to help you improve your score if you follow and understand them.

Second, please do not spend all your site building time chasing a high score on Google PageSpeed Insights like it’s a video game or you are a player in a World Series baseball team.  It’s a waste of your time to scrutinize every recommendation or report that comes from PSI.  They are guidelines to help you get to the goal not a blueprint.  And in many respects, as I will discuss as we go, several of the recommendations are unattainable or will not matter that much.

Great, that’s out of the way!

Since the network architecture that serves webpages varies tremendously, the Optimization Score reports the aspects of the page that are not dependant on the hardware system: the code, scripts, images, stylesheets, and digital resources.  In doing so, the score measures two areas: render-blocking round-trips, and resource size.

Render-Blocking Round-Trips

A render-blocking resource is any file or content that causes the browser to stop displaying or processing the page until it is downloaded.  This can lead to delays in rendering the page and cause a drop in page performance.  There are three ways to improve render-blocking resources:

Inlining Scripts

One technique is to convert the external script into inline content, or placing its code directly in the HTML of the page, so that it is loaded with the page programming rather than force the browser to pause and download the file from an external source.

For example, an externally loaded script might look like this:

<html>
  <head>
    <script type="text/javascript" src="http://www.site.com/small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

And the contents of small.js might be:

/* contents of a small JavaScript file */

You can inline this code as follows:

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

The caveat to this is that it is best used when the script is small (a few lines of code), and you are able to incorporate it into the page construction.  If both cannot be met, then the second option is to load the render-blocking resource asynchronously.

Asynchronous Loading

asynchronous loading of scriptsAn asynchronously loaded script is one that is downloaded and processed when the browser is ready rather than at the point it is introduced in the page code.  This allows the browser to continue rendering page elements which significantly improves performance.  Browsers, by default, are configured to suspend page rendering when a script file is encountered and resume processing once that script has been downloaded and executed.  By adding the “async” attribute to the script instruction, it is loaded when resources are available:

<html>
  <head>
    <script type="text/javascript" src="http://www.site.com/small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

to:

<html>
  <head>
    <script type="text/javascript" async="async" src="http://www.site.com/small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

Deferring Downloads

When a script file or stylesheet can be downloaded later, for instance below-the-fold or nearer to the footer, another technique called “deferring” can speed up page load times.

Like asynchronous processing, deferring is not done by default.  That is because the decision to defer a script can only be done selectively; not all scripts work well when deferred.  For example, one such script, Google Analytics, needs to run before other page elements are presented (ironic seeing that both Analytics and PageSpeed are Google products and Analytics defies two PageSpeed recommendations — deferring render-blocking scripts and loading scripts inline).  Other social media scripts that should not be deferred are Facebook Pixel and ShareThis.  So the rule of thumb with both asynchronous and deferred loading is to test each script out and follow PageSpeed’s recommendations as guidelines.

To defer a script, simply add the “defer” attribute to the script instruction:

<html>
  <head>
    <script type="text/javascript" defer="defer" src="http://www.site.com/small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

If you have added CodeDragon SmartCache Premium to your site performance strategy you are on the right track to making your job easier.  SmartCache and SmartCache Premium offer automated script deferring and asynchronous loading services.  And SmartCache Premium is further enhanced with a script and stylesheet File Tuning mechanism.  This allows you to surgically determine which script is to be minified, loaded asynchronously, and/or deferred.  It is a powerful feature provided by exclusively by SmartCache.

Reducing Response Size

shrinking file sizesSometimes the best way to speed up a webpage is to instruct the browser to request less data.  Reducing the load size of the main HTML document, images, fonts, scripts and stylesheets will result in less costly round trips to get all resources.  On high latency networks like mobile connections, this can help lower delays in page loading.

Google Pagespeed recommends investigating several ways to reduce response size, among them are: leveraging browser caching, compression, minification and optimizing images.

Leveraging Browser Caching

Establishing caching policies, while not technically a way to reduce response sizes, does reduce the overall bytes downloaded by from your server.  PSI recommends that all server requests employ a caching policy to help determine when a resource should be retrieved from a local source or re-downloaded from the origin.

At minimum static resources, like images that are infrequently changed, should be set to be cached for a week and upwards a year.  Material that changes more often could be set to shorter periods.  Our SmartCache plugin includes the following caching mechanisms:

  • Leverage Browser Caching
  • Last Modified Header
  • Vary Accept Encoding
  • Entity Tag Header

All of which are designed to follow the recommendations laid out by Google PageSpeed Insight.

Compression

Not to be confused with minification, compression is an encoding negotiated between your server and the user’s browser where text content is represented using as few bits as possible.  All modern browsers are able to decode compressed content, and all web servers can be equipped with gzip, a program that compresses requested information.  In practice, gzip can compress text content (scripts, stylesheets, and HTML) between 70% to 90% of the original size.  That’s significant!

In order to use gzip:

  1. your server will need to have it enabled
  2. you will need to add the gzip instructions to your site’s .htaccess (for Apache mod_deflate) or conf files (for NGINX ngx_http_gzip_module)
  3. install and use SmartCache Premium, which will help automate the compressions

Minification

Minification is the work of reducing the size of downloaded files, typically text-based Javascript and CSS stylesheets, by removing extraneous spaces, line-returns, and comments.  While these spaces improve readability for developers, browsers do not need it.  Furthermore, every extra space and line-return adds bytes to the download.  And bigger files take longer to serve.

We recommend using an online minification service or on-site performance plugin, such as SmartCache, to automatically minify text resources.

Optimizing Images

You will possibly achieve the greatest gains by optimizing images.  Similar to minification, optimizing images involves removing unneeded bits and camera information from the visual image file.  Savings will vary, but with large images and banners you might see more than 70% reduction in size!

If possible, we also recommend incorporating small images into the stylesheets as text files take less time to download.

Services such as TinyPNG.com are very useful for optimizing images.

Keep in mind that Google PageSpeed Insights will always report that your images can still be optimized.  I would focus on the relative improvement that their recommendation states and look at the potential byte savings.

Other Tips

We could go on for pages, but there are a couple of final techniques that could give you a nominal boost:

  • Combining script and stylesheets into fewer files — when used with minification and compression, the trio are potent
  • Prioritize visible content — load content before external resources
  • Avoiding landing page redirects — configure redirections properly or consult a server technician

Ultimately, consulting PageSpeed Insights should be a campaign in which you test, understand the recommendations, employ the tips where able, and re-test.  If you do this, and of course install an effective performance tool such as SmartCache, you will start to see incremental improvements and better scores from Google.

Please follow and like us: