Why Increasing Your Google PageSpeed Insights Score Benefits Your SEO

It’s no secret that search engine results matter. Where you place in those results can be the difference between success and failure for marketing efforts. To that end, paying attention to how Google determines the order of search results is important, because knowing the methods Google uses allows you to take action in order to improve your placement.

For the past few years, Google has used performance as a means by which to rank websites in search engine results. This makes sense, because people are inherently impatient, especially when it comes to viewing websites. In a test back in 2006, Google discovered that an extra 500ms in search-page generation time dropped traffic by 20 percent. Performance also has an effect on sales. In 2008, Amazon found that every 100ms of latency cost them 1 percent in sales. In terms of search engine results, if a website is perceived to be slow or difficult to use, it isn’t as good a resource, and therefore Google penalizes it.

In 2021, Google is set to roll out changes to their search results algorithm that further increases the importance of performance in search results. Google will continue to prioritize search results based on content, but will rank sites with similar content depending on “core web vitals”, a term Google uses to identify these three metrics:

Largest Contentful Paint

This metric measures the time a site takes to show the visitor the largest content on the screen that’s ready to interact with, and that appears without having to scroll (also referred to as “above the fold”). Only certain page elements that are important to the user experience count towards this metric, such as images and text.

First Input Delay

This refers to how fast your site is able to respond to the user’s first action (such as clicking on a link). If there’s a delay before the intended action happens, it could mean that the page is busy doing something else, like running a Javascript process in the background, and isn’t able to respond right away. This leads to visitor frustration.

Cumulative Layout Shift

This measures visual stability, or how often the website reorganizes the content as the browser draws the page on screen. If you’ve ever been on a mobile site and tried to click on a link, only to find that the page content has shifted because parts of the page are still loading, causing the link to be pushed down the screen, you’ve seen this in action.

How Google PageSpeed Insights Fits In

Google PageSpeed Insights is a tool that allows you to see a numerical rating of your site, based on the same criteria they’ll be using to place your site in a search results listing. Desktop and mobile are given different scores, with the tests for mobile being more critical. There are a few reasons for this, including slower networks speeds for mobile (when not on Wi-Fi), and the slower processor speeds for some mobile devices.

For our website, kalyber.com, the initial Google PageSpeed Insights scores were 78 on desktop and 70 on mobile. These aren’t bad scores to start with, as we’ve seen much worse when testing other sites. We’ve purposely tailored the design and development of our site to be as efficient as possible, which helps those initial scores. But our goal was to get both desktop and mobile scores as high as possible. Fortunately, along with the numerical score, Google offers suggestions on how to do just that. What follows is a summary of our efforts to increase our scores, and the steps we took. When you test your own site, you may see suggestions that we haven’t listed here, because they didn’t apply.

Eliminating Render-Blocking Resources

When a web page loads, information is sent from the server hosting the site to the visitor’s browser. This information includes the content on the page (the HTML), the way it looks (the CSS) and other files that provide additional features like animation and form validation (JavaScript files). The browser processes the files as they are received. In a perfect world, the HTML and CSS are loaded first, so the visitor sees the page content as it’s intended as quickly as possible. Sometimes however, a file blocks the rendering of the page, which results in a delay before the page is fully seen on the screen. Google suggests either deferring the loading of these resources until after the page loads, or loading them asynchronously, which means the resource can be loaded alongside the HTML and CSS, instead of stopping the loading of the HTML and CSS until the resource has finished loading.

For the Kalyber website, there were several resources that Google flagged as render blocking. The biggest offender was jQuery, a popular JavaScript library. Because we’re using WordPress as our CMS of choice, jQuery is loaded by default. Our initial reaction was to remove jQuery entirely, since the site doesn’t rely on it. In the end, we instead decided that, because some WordPress plugins we could use in the future require jQuery to function, we’d continue to use it, but load a newer version asynchronously. In addition, we’ve added the ability to turn off jQuery on a per-page basis if the page doesn’t feature a plugin that uses it. This one change to the site increased our scores by several points. In addition to jQuery, we also deferred the CSS and JavaScript required by some plugins we use, which also had the effect of raising our score by several points.

Minify CSS and JS

Usually, when a web developer is writing the CSS for a website, it looks like this:


body {
	font-size: 1rem;
	line-height: 1.5;
}

While this is very readable for the developer, the formatting (indents and line breaks) aren’t necessary for the browser, and lead to the file being larger to download than it needs to be. When you minify the CSS, the result is this:


body{font-size:1rem;line-height:1.5;}

The process of removing formatting from CSS and JavaScript is called minification. For our website, we made sure that our minified CSS and JavaScript were as small as possible in order to increase our Google Insight scores.

Remove Unused CSS

Anything that the browser has to load that doesn’t affect the content on the page you are currently viewing can be considered wasted bandwidth. This causes an unnecessary delay in the loading of the page.

In WordPress, some CSS files related to the back end admin section load even if you’re just viewing a page as a visitor and not an administrator. So we took steps that prevented that CSS from loading if you aren’t logged into the admin section.

Properly Size Images

On mobile, it’s not necessary to load the same large size images that you would for the desktop version of the site, since the screen size of mobile devices is obviously smaller. Doing so increases the time it takes to load the site, since a larger sized image takes longer to download. On the Kalyber site, we take advantage of the fact that in WordPress, when you upload an image to the media gallery, several images are created at different sizes. This allows us to serve up a smaller size image for mobile, while maintaining the larger size for desktop.

Lazy Load Images

Normally when a web page loads, all the assets for that page are downloaded together, including images that appear below the fold, and aren’t seen on screen when the page first appears. This can cause bottlenecks if images below the fold are preventing the downloading of critical resources necessary to properly view the content above the fold. The Kalyber site uses a technique called lazy load to deal with images that appear farther down on the page to prevent this from happening. This technique defers the loading of images below the fold until the viewer has scrolled to where an image would be visible, and then downloads it from the server. Using lazy load improved the overall performance of our website, which in turn raised our Google PageSpeed Insights score.

Results

After following the suggestions that we felt were most important, we increased our desktop score from 78 to 99, and our mobile score from 70 to 91. We feel these should be good enough to reduce the possibility of being penalized by Google in search engine results. Perfect scores of 100 are difficult to achieve, and those final few points can entail more work than what you’re going to realistically get out of it.

You can see that by making some changes to your site now, you can get ready for next year when performance becomes even more important. At Kalyber, we’re always available to help with any website optimization you need. Get in touch with us at hello@kalyber.com