• Home
  • Blog
  • Part 2: Optimizing Google PageSpeed

Google PageSpeed Insights: Reaching a 100/100 score

Mobile is becoming more and more important and with it, so is the loading time of your page. The Pagespeed-score is factored into the sites ranking after all. Because of this, Google Pagespeed Insights has been created. With this free tool, it is easy to discover how Google ranks your website in terms of speed and performance.

Using the recommendations the tool hands out, you can improve the Pagespeed-score. For our own website, the goal was reaching a 100/100 score. So we rolled up our sleeves and got to work. The 6 best practices we picked up, will be detailed in this blog.

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.

"Keep the amount of necessary resources required to show the content of the page as low as possible and offer them in the most optimal ways possible."

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!

"For one of our JavaScript files, we even managed to reduce its file size by 128kb."

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.

4. Minifying HTML

Don't stop with removing the unneeded spaces and enters from your CSS- and JavaScript files. By minifying the HTML of your pages you can also get small performance gains. As soon as these gains are over a certain percentage, Google PageSpeed will give you a warning about it.

Google Pagespeed Insights

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.

Find out more?

Wondering what you can do to improve your PageSpeed score and where Perplex can support you? Contact us to discuss the possibilities!

Lees ook

Road to PageSpeed 100/100: Load Analytics.js from your own server