IT.COM

advice Chasing the Perfect Score on Google PageSpeed with WordPress.

NameSilo
Subscribe to blog Watch
If you need technical explanations of why and how the following works, I'm not your guy. If you want links to the plugins and the packages you need to achieve a 100/100, read on!

Google PageSpeed Insights is a web performance tool that allows you to evaluate your webpage against a variety of best practices. These best practices include:

Avoiding landing page redirects
Redirects trigger an additional HTTP request-response cycle and delay page rendering. In the best case, each redirect will add a single roundtrip (HTTP request-response), and in the worst it may result in multiple additional roundtrips to perform the DNS lookup, TCP handshake, and TLS negotiation in addition to the additional HTTP request-response cycle. As a result, you should minimize use of redirects to improve site performance.

Here are some examples of redirect patterns:
  • example.com uses responsive web design, no redirects are needed - fast and optimal.
  • example.com → m.example.com/home - multi-roundtrip penalty for mobile users.
  • example.com → www.example.com → m.example.com - very slow mobile experience.
Click to expand...
Eliminating render-blocking JavaScript and CSS in above-the-fold-content
Before the browser can render a page it has to build the DOM tree by parsing the HTML markup. During this process, whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML. In the case of an external script the parser is also forced to wait for the resource to download, which may incur one or more network roundtrips and delay the time to first render of the page.
Click to expand...

Enabling compression
All modern browsers support and automatically negotiate gzip compression for all HTTP requests. Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to first render of your pages.
Click to expand...

Leveraging browser caching
Fetching resources over the network is both slow and expensive: the download may require multiple roundtrips between the client and server, which delays processing and may block rendering of page content, and also incurs data costs for the visitor. All server responses should specify a caching policy to help the client determine if and when it can reuse a previously fetched response.
Click to expand...

Minifying CSS, HTML, and JavaScript
Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.
Click to expand...

Optimizing images
Images often account for most of the downloaded bytes on a page. As a result, optimizing images can often yield some of the largest byte savings and performance improvements: the fewer bytes the browser has to download, the less competition there is for the client's bandwidth and the faster the browser can download and render content on the screen.
Click to expand...

Prioritizing visible content
If the amount of data required exceeds the initial congestion window (typically 14.6kB compressed), it will require additional round trips between your server and the user’s browser. For users on networks with high latencies such as mobile networks this can cause significant delays to page loading.
Click to expand...

Reducing server response time
Server response time measures how long it takes to load the necessary HTML to begin rendering the page from your server, subtracting out the network latency between Google and your server. There may be variance from one run to the next, but the differences should not be too large. In fact, highly variable server response time may indicate an underlying performance issue.
Click to expand...

Why should I care?
Website speed was introduced as a signal in Google's search ranking algorithms back in 2010.

What not?
I will explain how I managed to achieve the following:
​
Mobile_PS.png

Desktop_PS.png


Avoiding landing page redirects: I used a customized responsive WordPress theme. No separate mobile site, no subdomain, just PTSD.org.

Eliminating render-blocking JavaScript and CSS in above-the-fold-content: I used the Wordpress plugin Async JS and CSS to solve this problem. Follow the link to learn more.

Enabling compression: I used GZIP. Follow the link to learn more.

Leveraging browser caching: I choose to optimize using Varnish. Follow the link to learn more.

Minifying CSS, HTML, and JavaScript: There are plugins for this but I chose to do it manually. Use Google PageSpeed Insights, enter your domain, scroll to the bottom of the page, and click the link that contains all of your optimized files.

Optimizing images: I use the plugin Compress JPEG & PNG images. It automatically optimizes all of your uploads. It's a very convenient automated solution.

Prioritizing visible content: This category is primarily based on your theme. There is no plugin to fix this. You have to use an optimized design to please the big G.

Reducing server response time: To satisfy this requirement, you must get your server response time under 200 milliseconds. I use a Cloud VPS at OVH. The server alone did not meet the 200 milliseconds requirement without installing Varnish. This reduced my response time by over 100%.
 
Click to expand...
14
7 Like
7 Thanks
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
Sort by date Sort by points
Nice Shane, 100/100 is no easy task. Did you find that you had to make any content or design sacrifices that you would have preferred to increase your score?
 
Click to expand...
Reply
1
1 Like
0 Thanks
•••
This is great cheers Shane, just looked into a site that requires a few tweeks I'm developing on Apache.
 
Click to expand...
Reply
1
1 Like
0 Thanks
•••
DomainVP said:
Nice Shane, 100/100 is no easy task. Did you find that you had to make any content or design sacrifices that you would have preferred to increase your score?
Click to expand...

It's not an easy task. It took me a couple of days to figure it out. I had to do some research on caching and load balancing (Varnish) and I also tested out many plugins.

I did have to make a few sacrifices. The Async JS and CSS plugin conflicted with a couple of other plugins. I found a happy medium though.

DotDigi said:
This is great cheers Shane, just looked into a site that requires a few tweeks I'm developing on Apache.
Click to expand...

Nice! Do you do your own server work? I'm just starting to learn now. :)
 
Click to expand...
Reply
0
0 Like
0 Thanks
•••
Thanks!
Really useful information.
 
Click to expand...
Reply
1
1 Like
0 Thanks
•••
Click to expand...
Reply
0
0 Like
0 Thanks
•••
Submited Flippa's Sales Page to the test and they are nearly perfect:

Mobile
- Speed 86/100
- User Experience 95/100

Desktop
- Suggestions Summary 91/100
 
Click to expand...
Reply
1
1 Like
0 Thanks
•••
Goncalo said:
Submited Flippa's Sales Page to the test and they are nearly perfect:

Mobile
- Speed 86/100
- User Experience 95/100

Desktop
- Suggestions Summary 91/100
Click to expand...

There is a HUGE difference between a low 9x and a 100! It gets increasingly difficult to get the perfect score. Check out Google though. Pretty funny stuff. ;)
 
Click to expand...
Reply
0
0 Like
0 Thanks
•••
Click to expand...
Reply
1
1 Like
0 Thanks
•••
I'm curious to know if you've used W3Total cache? If so do you feel these individual plugins do a better job?

I don't think you can achieve this score on shared hosting, though I'm open to correction. For those on shared hosting, Cloudflare is a good option.
 
Click to expand...
Reply
0
0 Like
0 Thanks
•••
iAchilles said:
I'm curious to know if you've used W3Total cache? If so do you feel these individual plugins do a better job?

I don't think you can achieve this score on shared hosting, though I'm open to correction. For those on shared hosting, Cloudflare is a good option.
Click to expand...

I've used W3 Cache in the past but Varnish is better at caching. This time I was going for the title. ;)

CloudFlare is a great solution. It's definitely helpful if you're on shared hosting. However, their server response time is ~200 milliseconds slower than mine.
 
Click to expand...
Reply
1
1 Thanks
0 Like
•••
Shane Bellone said:
I've used W3 Cache in the past but Varnish is better at caching. This time I was going for the title. ;)
Click to expand...

Interesting. I'll have to do some testing.
 
Click to expand...
Reply
0
0 Like
0 Thanks
•••
Excellent work done mate. Thank you for this. !!!
 
Click to expand...
Reply
0
0 Like
0 Thanks
•••
Click to expand...
Reply
1
1 Like
0 Thanks
•••
Good job getting the 100%!

A couple of comments on Google and Page Speed Insights in general:

1) Page Speed Insights only reports on the page you give it, not the entire site. It's a good idea to test a few internal pages also, especially if you have something image-intensive or script-heavy on them.

2) 100% may not be do-able sitewide for every site - depends on your hosting situation, site functionality ... We generally recommend shooting for 85% or so and a page load time of around 1 second or less, but that's an ideal. On most sites, from an seo standpoint, there are bigger fish to fry.

2a) Google.com doesn't score 100% on its own test ;).
https://developers.google.com/speed/pagespeed/insights/?url=www.google.com&tab=mobile
Though it does better than BIng -
https://developers.google.com/speed/pagespeed/insights/?url=http://www.bing.com/&tab=mobile

3) Keep in mind speed is just one ranking factor out of hundreds. Google won't send you to search oblivion just because some page scores a 40. Case in point, Yelp - which you'll find in the top organic results for just about any local-intent search:
https://developers.google.com/speed/pagespeed/insights/?url=http://www.yelp.com/&tab=mobile
Not hurting this site either ...
https://developers.google.com/speed/pagespeed/insights/?url=https://www.namepros.com/&tab=desktop

However you should try to keep up with or do better than competing sites - if your competition is appreciably faster, you can lose real visitors to them- especially on mobile.
 
Last edited:
Click to expand...
Reply
4
3 Like
1 Thanks
•••
enlytend said:
Good job getting the 100%!

A couple of comments on Google and Page Speed Insights in general:

1) Page Speed Insights only reports on the page you give it, not the entire site. It's a good idea to test a few interior pages also, especially if you have something image-intensive or script-heavy on them.

2) 100% may not be do-able sitewide for every site - depends on your hosting situation, site functionality ... We generally recommend shooting for 85% and a page load time of around 1 second or less, but that's an ideal. On most sites, from an seo standpoint, there are bigger fish to fry.

2a) Google.com doesn't score 100% on its own test ;).
https://developers.google.com/speed/pagespeed/insights/?url=www.google.com&tab=mobile
Though it does better than BIng -
https://developers.google.com/speed/pagespeed/insights/?url=http://www.bing.com/&tab=mobile

3) Keep in mind speed is just one ranking factor out of hundreds. Google won't send you to search oblivion just because some page scores a 40. Case in point, Yelp - which you'll find in the top organic results for just about any local-intent search:
https://developers.google.com/speed/pagespeed/insights/?url=http://www.yelp.com/&tab=mobile

However you should try to keep up with or do better than competing sites - if your competition is appreciably faster, you can lose real visitors to them- especially on mobile.
Click to expand...

Agreed. However, it's important, at least to me, to master the on-page factors that we do know about.

Thanks for your insight!
 
Click to expand...
Reply
1
1 Thanks
0 Like
•••
If you have control over your server, mod_pagespeed is something to look into. I say this because I don't know exactly how the plugin you're using is optimizing images, it could be compressing them as soon as they're added to your gallery and not keeping the quality 100% of the original image, which you may want at a later time at the highest quality possible (photographers, etc.).

mod_pagespeed allows you to upload the greatest quality/size in png, gif, jpeg, etc. and it serves out a cached version of a compressed image that is determined by the request (png, jpeg, etc. if it is different). It will also minify, cache, etc. -- which will drastically reduce workload done by the WordPress plugins on the loop, when they need to be re-run for a new cache.
 
Click to expand...
Reply
1
1 Thanks
0 Like
•••
David Walker said:
If you have control over your server, mod_pagespeed is something to look into. I say this because I don't know exactly how the plugin you're using is optimizing images, it could be compressing them as soon as they're added to your gallery and not keeping the quality 100% of the original image, which you may want at a later time at the highest quality possible (photographers, etc.).

mod_pagespeed allows you to upload the greatest quality/size in png, gif, jpeg, etc. and it serves out a cached version of a compressed image that is determined by the request (png, jpeg, etc. if it is different). It will also minify, cache, etc. -- which will drastically reduce workload done by the WordPress plugins on the loop, when they need to be re-run for a new cache.
Click to expand...

You are right! Mod_pagespeed is a better alternative, however, this plugin is just easier for most people. :)

How does it work?
After you upload an image to your WordPress site, each resized image is uploaded to the TinyJPG or TinyPNG service. Your image is analyzed to apply the best possible compression. Based on the content of your image an optimal strategy is chosen. The result is sent back to your WordPress site. On average JPEG images are compressed by 40-60% and PNG images by 50-80% without visible loss in quality. Your website will load faster for your visitors, and you’ll save storage space and bandwidth!
Click to expand...
 
Click to expand...
Reply
0
0 Like
0 Thanks
•••
Nice guide, Shane. Thank you!
 
Click to expand...
Reply
1
1 Like
0 Thanks
•••
Shane Bellone said:
However, their server response time is ~200 milliseconds slower than mine.
Click to expand...

You sure that apply all over the world? The best thing about CDN:s (enduser experiance-wise) are that they have servers all over the world and the endusers download all static files from there instead of downloading it from another part of the globe.

This of course is not important if one is running a local site.
 
Click to expand...
Reply
1
1 Like
0 Thanks
•••
Good article. I wouldn't put too much into the speed part of https://developers.google.com/speed/pagespeed/insights/

It's kind of a known joke. You can try it yourself and it will jump all over the place. I got 65/100 for Mobile and 75/100 for Desktop for the ptsd site.
 
Click to expand...
Reply
2
2 Like
0 Thanks
•••
tiawood said:
Nice guide, Shane. Thank you!
Click to expand...

No problem.

vivaldi said:
You sure that apply all over the world? The best thing about CDN:s (enduser experiance-wise) are that they have servers all over the world and the endusers download all static files from there instead of downloading it from another part of the globe.

This of course is not important if one is running a local site.
Click to expand...

Ironically, I just added Cloud Flare to the website and my PageSpeed dropped like a rock.
 
Click to expand...
Reply
0
0 Like
0 Thanks
•••
Click to expand...
Reply
1
1 Like
0 Thanks
•••
Mine went from 54-59-56-54-54 with just the 2 plugins. BTW, google.com does not have a 100/100.

Google.com has
92 / 100 desktop
79 / 100 mobile.
 
Click to expand...
Reply
1
1 Like
0 Thanks
•••
Shane Bellone said:
Nice! Do you do your own server work? I'm just starting to learn now. :)
Click to expand...

Well, I'm just developing on Apache 2 as an open source via a dedicated IP, using some hand code, but I'm certainly not a coder! If that's what you mean ;) But I'm learning plenty. Cheers.
 
Click to expand...
Reply
1
1 Like
0 Thanks
•••
You must log in or register to comment here.

Similar threads

Bob Hawkes
  • Article
information Stay On Top of Upcoming Domain Name Price Increases with TLD Price Changes Website
6 comments
2K views
Sperry8
Sperry8
Bob Hawkes
  • Article
guide Get More from TLD-LIST
10 comments
3K views
Bob Hawkes
Bob Hawkes
Bob Hawkes
  • Article
strategy The Branding Power of Two: Duet, Gemini, Copilot and More
7 comments
2K views
PermanentPlace.com
PermanentPlace.com
DomainBoxio
Save up to 70% off KVM VPS-Instant Deploy-Rad Web Hosting
0 replies
211 views
DomainBoxio
DomainBoxio
lucky0406
website WORLD'S TOP FREELANCING MARKETPLACE-WEBSITE FOR SALE WITH 1200+ LISTED GIGS (High Profitable Website)
1 reply
156 views
lucky0406
lucky0406

We're social

Escrow.com

New posts

Auction activity

Domain Recover

What non .com extensions have you sold in 2024?

Polls of interest

Popular this week

Community favorite

Popular this month

Blog favorites

  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back