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.
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 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.
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.
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.
This article is brought to you by the G3 Group. We are recognized as a top E-Commerce Design & Development Company on DesignRush
Avoid landing page redirects
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.
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.
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.
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.
Check your Redirects here:
How to Enable Compression
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.
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?
Improve server response time
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:
Leverage Browser Caching
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.
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.
Optimize CSS Delivery
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:
Prioritize visible content
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.
Once installed, it’s important to adjust the settings, test, tweak and re-test.