Domain Empire

advice Chasing the Perfect Score on Google PageSpeed with WordPress.

Spaceship Spaceship
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.
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.

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.

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.

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.

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.

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.

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.

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%.
 
14
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
Good Post.... I use drupal and just by server compression image compression aggregating java and css im at 98 on insights but glad you posted this because it made me remember to look for the final 2 percent answer in drupal community. Thanks! If I use wordpress for anything I will follow this list :)
 
1
•••
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back