How to Get a High Google PageSpeed Insights Score

PageSpeed Insights Score

Share:

To get a perfect Google PageSpeed Insights Score is not easy. Your goal should be to make improvements. In this guide, we explain exactly what we did to get a near perfect Google PageSpeed Insights score without spending a ton of time and energy.

Google PageSpeed Insights is a handy tool that will tell you where your bottlenecks are and provide suggestions to fix them. And, it doesn’t really measure speed as much as it grades your page on the best practices to improve speed.

If you spent a lot of time (or money) building the perfect website, like us, you probably have a heavy visual experience. Images, video and functionality are important to keep users engaged with your web pages, but each element adds to the load time.

Since the first commercial web page, businesses have been concerned with page speed. Website performance directly impacts business success. A slow experience will frustrate users and affect the length of time they stick around. And, today, it also affects your ability to rank well. Google now includes site speed in their mobile ranking algorithm – hence the urgency to get things fixed!

There are many things that can prevent you from getting a perfect score like type of the device used to access the page and network speed. There are even times when you get points off for a simple image that, after optimization, would only shave off 2% of the weight. The bottom line is you should use the tool as guide… not as your bible.

Try the tool here.

What is a good score?

A score of 85 or above indicates your website is performing well. Scores below 85 show there could be improvements. The tool measures both the desktop and mobile versions of your website. Don’t be obsessed with getting 100… depending on your individual website, you don’t want to make so many visual or functional sacrifices that it affects visitor engagement.

Our problem…

Our scoring wasn’t terrible to start. We’ve always optimized images, minified CSS and continually made small improvements. Our perceptual speed was good. However, with WordPress, there have always been those little issues that were difficult to solve. Especially on the mobile side – I never thought I would see a 95 without making sacrifices to the design.

Our first attempt involved everything you read about all the time… install caching plugins, use a CDN, install more plugins, disable WordPress gravatar, etc. etc. Over the course of a couple months, these methods did show some improvements. But, the improvements were small, and we began to question the sanity of adding more and more plugins to do one darn job. In fact, our perceptual speed seemed to suffer.

The Fastest and Easiest Fix We Found

Then we tried a plugin called “PageSpeed Ninja”.  We had to uninstall all the other speed plugins we used previously. We did spend some time tweaking the settings, checking the website and re-testing. It was a few hours of trial and error.

The bottom line is this one plugin pretty much did the job of all the others combined.

pagespeed ninja

I don’t know if it will work for every site (it’s still in beta), but, if it works for you, it will save you countless headaches (and hours) trying to get a great score.

Google PageSpeed Insights Score Improvement

When we checked PageSpeed Insights, we scored a 95 and 98 on mobile and desktop – that was about 15-20% improvement. We then went a step further and checked with Google’s speed tool too.

If your website loads in 3 seconds or less (on a 3g network); you are doing far better than average.

speed test screenshot

If PageSpeed ninja doesn’t work for you – you can read our complete guide with recommendations for each issue and a long list of plugins to help with your efforts. But, I would try Ninja first!

Another tool that more accurately measures the actual speed of your website is Pingdom.

How to Avoid Landing Page Redirects

Typically, if the page has HTTP redirection you will see a header response code of 301, 302 or 30X. An HTTP response code of 200 indicates no redirection. There are many valid reasons you may use redirects on your website including a moved page, click tracking, multiple domain names or switching from HTTP to HTTPs.

Google even recommends you use them when moving content around or you move from HTTP to HTTPs. So, you may be wondering why you triggered this rule when testing your page…

Think of it like this: each redirect cost additional waiting time for your users.

Scoring Impact:

Your score will be impacted if you have MORE THAN ONE redirect from the given URL to the final landing page.

Why do redirects negatively impact my score?

Redirects take a little more time to retrieve since there needs to be multiple steps for the correct resource (HTTP request-response cycle) to be located and parsed. This is especially noticeable on mobile devices since the network tends to be slower.

One of the common uses is to send visitors from a site’s desktop version (http://www.site.com) to the mobile version (http://mobile.site.com). This type of redirect is not necessary if the site is using responsive design (which Google recommends).

For example: site.com redirecting to mobile.site.com, although it does require multiple steps – it is only one redirect. However, if site.com redirects to www.site.com and then to mobile.site.com – this would be much slower and trigger the PageSpeed rule.

Redirect Chains

In some cases, there are redirect chains where a page links to another and then another, etc. Too many redirects in a chain can have a negative effect on speed and search engine crawling. If you have a couple, it should be fine… more than that is going to slow down the user experience.

http://www.redirect-checker.org/how-many-redirects.php

redirect chainJavaScript redirection

You can use JavaScript to redirect users but beware it can cause latency because it is another script that must be downloaded and parsed before it can work.

Video: https://youtu.be/5aT9qgCkDaY

https://appendto.com/2016/04/javascript-redirect-how-to-redirect-a-web-page-with-javascript/

Meta Refresh Redirects

Sometimes used as an instant client-side redirect these are bad for crawlers and not recommended.

These are technically not redirects but occur when you are using an HTML meta element with the http-equiv parameter set to “refresh” and a content parameter giving the time interval in seconds.

More Information:

https://www.redalkemi.com/blog/post/the-seo-war-of-redirects-301-vs-302-vs-meta-refresh-tag

Resources

Check your Redirects here:

http://www.redirect-checker.org

Google’s Reference

https://developers.google.com/speed/docs/insights/AvoidRedirects

What is compression?

HTTP requests can be compressed using GZIP compression. GZIP compression on your web server can reduce the transferred size by up to 90%. All modern browsers support this type of compression.

The two main causes of a low score are render blocking round trips and response size. Simple image compression tools like those found on the web or in Photoshop; can reduce the size of images by up to 50%. It is also one of the easiest fixes to help increase your score.

Scoring Impact:

This will impact your score if PageSpeed Insights detects compressible resources being served without compression.

NOTE: This is configured at the web server level. And, it is possible for PageSpeed Insights to not recognize the compression even if it has been configured. See Google’s FAQ on this topic.

Can you implement GZIP without doing it at the server level?

No, your web server will encode the files upon delivery to the browser. Most modern browser today can interpret this type of content encoding. GZIP is used to reduce the size of your CSS, HTML, and JavaScript files, for image files you should use another method like Photoshop, so you can control image quality.

Google’s Reference:

https://developers.google.com/speed/docs/insights/EnableCompression

According to Google’s PageSpeed Insights, your server response time should be under 200ms. There are so many variables that can affect your server response time, it’s a good idea to save this one for last. If you optimize your site speed, use a CDN (content delivery network) and have a decent hosting account – this will go a long way toward fixing your speed issue. On the other hand, if you have a bargain hosting account on a shared server with a huge resource load… it may be time to find another host.

More Information on Server Speed:

https://varvy.com/pagespeed/improve-server-response.html

Google’s Reference:

https://developers.google.com/speed/docs/insights/Server

https://rigor.com/blog/2017/09/best-ways-reduce-server-response-times Modern browsers all can cache data. A web page may link to multiple resources and external files and each one of these requires a round trip from the server to the client browser which take time and bandwidth. Your server returns a response that defines how long the resource should be cached.  If the caching policy of your server is too short – this can cause unnecessary round trips.

WordPress Information:

https://codex.wordpress.org/WordPress_Optimization/Caching

Google’s Reference:

https://developers.google.com/speed/docs/insights/LeverageBrowserCaching Minification is the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser. Typically this includes white space, comments, etc. Your HTML, CSS and JavaScript files should be minified and can be done using a web tool, your server or manually (Google provides optimized files you can use to replace your CSS and JavaScript).

Web tools:

https://www.willpeavy.com/minifier/

http://minifycode.com/html-minifier/

Google’s Reference:

https://developers.google.com/speed/docs/insights/MinifyResources
Images are the biggest culprit when it comes to download times. Because of this, Google offers some good advice in the reference for this issue. When you use Google PageSpeed Insights and this rule is triggered, it also provides a zipped copy of the images that could be better compressed.

I feel that images should be trial and error. Using PhotoShop or a web tool; you want to make sure the visual integrity of the image isn’t compromised when you start compressing it.

Additionally, if you are using WordPress; you may want to install a plugin since images usually are present on every page. It does you no good to optimize one page of your site for speed and neglect the others.

If you decide to use a plugin, always visually inspect your images after you run it. Images can make or break your web page and work to keep your visitors engaged.

Web Tools

https://tinypng.com/

https://imagecompressor.com/

WordPress Plugins

https://wordpress.org/plugins/wp-smushit/

https://wordpress.org/plugins/resmushit-image-optimizer/

https://wordpress.org/plugins/shortpixel-image-optimiser/

Google’s Reference

https://developers.google.com/speed/docs/insights/OptimizeImages This rule refers to the CSS files (style sheets) that are used to style your pages. In some cases, you’ve added them for your website and in other cases a plugin you’ve installed has added its own stylesheet. In any case, they can add up quickly.

Normally, all your style sheets must be processed before the page can load. This means multiple round trips to download all the needed resources. If you have a static site, try combining style sheets into one file. You can then inline small amounts of CSS which is a little tricky to accomplish. Google provides a great reference on how to do it.

If you are using WordPress, you’ll probably need to rely on a plugin to optimize CSS delivery:

https://wordpress.org/plugins/autoptimize/

https://wordpress.org/plugins/search/optimize-css-delivery/

Google’s Reference

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery This rule is triggered when the tool detects that additional network round trips are required to render the above the fold content of the page. This rule is also connected to optimizing CSS delivery and removing render-blocking JavaScript. If fixing the other issues doesn’t take care of this one; your page may need some design changes.

Google’s Reference

https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent Both CSS files and JavaScript can block rendering of your web page while it retrieves these resources from your server or an external source. Typically, these resources are linked in the Head of your document and Google recommends you remove or defer loading of these files. Easier said than done… removing these files from the head of the document will usually result in a drastic change in how your page appears upon loading.

If you simply defer these files (placing them in the footer); the browser will render the HTML quickly before any styling which results in a flash of unstyled content (FOUC). In some cases, nothing can be rendered which defeats the purpose of trying to speed it up.

Use Asynchronous Scripts

When a browser reads the script from your web page it must retrieve the script and parse it. Without any instruction, everything comes to a halt while this occurs. A script can have two attributes, async and defer. This allows more control over how and when the script is executed.

The async attribute tells the browser to NOT pause while it reads the script, execution can happen whenever while the parser is reading the rest of the document.

The defer attribute tells the browser to only execute the script file once the HTML has been fully parsed.

Whether you call the script asynchronous, deferred or normal depends on a lot of variables including how your page uses the script.

WordPress

There are a ton of plugins designed to solve this issue. However, in some cases your JavaScript and CSS must appear in the original location to prevent breaking the site. We used at least 4 different plugins before we finally found PageSpeed ninja. Of the four; none of them completely solved the issue and they all required tweaking, testing and re-testing. Most of them did provide a measure of improvement to our score. In some cases, a plugin like W3 Total Cache may take care of more than one issue.

Once installed, it’s important to adjust the settings, test, tweak and re-test.

Plugins:

https://wordpress.org/plugins/w3-total-cache/

https://wordpress.org/plugins/speed-booster-pack/

https://wordpress.org/plugins/async-javascript/

Resources

https://kinsta.com/blog/eliminate-render-blocking-javascript-css/

Google’s Reference

https://developers.google.com/speed/docs/insights/BlockingJS

We’d love to discuss your next project!

OR CALL TODAY:

1-800-783-1799

Follow us: