Part 2: Road to PageSpeed 100/110

Part 2: Road to PageSpeed 100/100: Google PageSpeed Insights

19 June 2017 - Umbraco CMS - Internet marketing

Leestijd: 6 minutes

Check your website

To have it check your site, simply put in the sites URL and sit back. Google’s PageSpeed Insights will analyze the website and will point out anything that negatively impacts the site’s loading and/or rendering performance. Among other things, the tool will look for slowdowns like unnecessarily large images, render-blocking JavaScript or CSS, unminified JavaScript/CSS/HTML, slow server response times, and inefficient browser caching instructions. It yields a score between 0 (terribly slow) and 100 (blazingly fast). In fact, it will compute 2 such scores, one for desktop and one for mobile. Of course, we aim for 100/100 on both – ambition is a good thing, right?

The good news is that the majority of issues can be fixed fairly quickly by following the recommendations presented by the PageSpeed tool, assuming you have control over both the website’s source code and the webserver itself. Both are generally required to fix all issues. However, most of the optimizations can actually be performed in the website code itself. Such optimizations include decreasing server response time by caching slow queries (or better yet, don’t write slow queries), making sure render-blocking JavaScript is moved out of the <head> or is loaded asynchronously loaded, and minifying static resources such as JavaScript and CSS, and even the HTML itself. Webserver configuration might have to be adjusted to enable features like gzip compression for all HTTP requests and headers instructing the browser to cache static resources.

1. Optimize images

By optimizing your images you can often make very large gains due to the fact that many pages mostly consist of images nowadays.

By optimizing your images you can often make very large gains due to the fact that many pages mostly consist of images nowadays. If we take a look at the statistics it becomes clear that the average, modern day webpage is at least 2.5 megabytes of which nearly 65 percent (1.6 mb) consists of images.

To optimize images and offer them in the right format, we use ImageProcessor. This is package is part of Umbraco core functionality. It allows the user to set the desired aspect ratio and dimensions for each image. The actual cropping and optimizing takes place in the background. Combined with the HTML picture element, which allows us to declare which image to use under any given circumstance, we can optimize the image shown to the device used to view the image.

2. Minimize CSS and JavaScript

By "bundling" the CSS- and JavaScript files, you will give the browser the ability to download these files in one go. This frees up the amount of available connections on your server, allowing you to serve your resources more efficiently.

By "minifying" these files you can improve the way you serve these files even further. Optimizing a stylesheet this way, reduced its size by 32kb (roughly 25%). For one of our JavaScript files, we even managed to reduce its file size by 128kb. And while these gains may sound small, after all what is a mere couple of kilobytes right? A lot of small gains such as these do add up!

3. Turn compression on

By enabling compression (gzip) the webpage will be compressed before being served to a user. Because compressed content can be send much faster, the page will load faster as well. And not only does gzip compress the content (HTML) of a page, it also compresses other required files such as SVG, CSS, Javascript and webfonts.

5. Use browser-caching

By using browser-caching, it is no longer necessary to retrieve the files shared across multiple pages, like CSS- or JavaScript files, separately. Instead, the browser will simply retrieve these previously downloaded files from the disk. Unfortunately it isn't possible to set an expiration date for externally hosted files. An example of would be the scripts needed to run Google Analytics. They are hosted on server owned by Google and can, and will, have a negative impact on the PageSpeed-score. A simple way around this, is to host these files yourself.

6. Remove Javascript and CSS that block content above the fold

By placing unnecessary JavaScript- and CSS-files in the "head" of a webpage, you block the rendering of the page and it will take longer to show the page to your visitors. A simple solution is placing the all JavaScript at the end of the HTML-document. This way, the browser will render all HTML before downloading the needed JavaScript files.

This poses a slight problem for CSS however. You don't want your visitors to see a page devoid of styling before it's done loading do you? Well, we found the solution to this conundrum. Manually, or with a tool like Critical Path CSS Generator, determine which styles are essential for the part of your page above the fold. This is called the critical css.

You can place this critical css, within a <style>-tag in the head of your page and then load the rest seperatly (async). This way, the user will see a fully styled page. By the time he starts scrolling, the rest will have been downloaded with the user none the wiser.