Optimizing Your Site For A High Score On Google PageSpeed Insights

If you’ve ever looked at improving your site’s SEO or Google Adwords campaigns, you’ve likely used Google’s PageSpeed Insights tool to see your site’s PageSpeed score. Unfortunately, Google doesn’t get very specific about optimizations for WordPress with this tool. To show how you can improve these metrics, WP Engine is here to help!

Google’s PageSpeed Insights provides a score of 0-100, based on how well your site performs on a set of specific metrics for both mobile and desktop users. It uses a page rendering tool to measure these metrics, so keep in mind that they are not rendering the site as a real visitor would.

With that in mind, Google PageSpeed Insights is intended to help provide general best practices for all kinds of websites, internet-wide. However, your score in this tool could affect the kind of ads your sites using Google Adwords receive, and potentially even your page ranking. Many developers try to reach a higher score with Google PageSpeed Insights as a result. We are here to help identify common areas where a PHP site running WordPress can be optimized to increase your score.

Optimize Images

If your Google PageSpeed score says you need to optimize images, first check out which images could be optimized by clicking the blue “Show how to fix” option. This will show you which images on your site are larger than the frame that the browser loaded them in.

Most often these images will show as loading from your site’s domain or your CDN URL. If this shows images pulled from other sources online, consider downloading these images locally and uploading them through your WordPress Admin Dashboard to load them natively on your site.

To fix this issue, you can easily use a lossless image compression plugin like WP Smush or EWWW Image Optimizer Cloud.

Either of these plugins will help compress your site’s images so it serves them at the right scale for each device connecting to your site. WordPress already does the work of deciding which is the correct image size to serve to your users once it is compressed.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

This recommendation may sound like a lot of jargon, but what it really means is that the javascript and CSS files being loaded on your site are being required to load before your site can start showing your page’s content (rendering the page).

If you use a tool like http://www.webpagetest.org/, it will give you a better a visual of this:

Often times these files can be “deferred” or relocated to load in your site’s footer instead, which allows the site to start displaying content before those files are loaded later on.

JavaScript files should be enqueued and loaded asynchronously to avoid blocking the page render. The Async JavaScript plugin allows you to “async” or “defer” the parsing of JavaScript to avoid this issue.

Avoid landing page redirects

This recommendation should be pretty self-explanatory. Don’t redirect your site’s home page to somewhere else! For example, redirecting myhomepage.com to m.homepage.com for mobile requests would have negatively impacted the amount of time it takes a mobile user to load your site.

These days, most WordPress themes are responsive, meaning they automatically can load your mobile version of your theme for mobile browsers without having to redirect to a different site.

This warning could also be a red herring – for instance, if you tested www.myhomepage.com but your site uses myhomepage.com as its primary domain, it would register as a redirect even though most users would request myhomepage.com by default. Be sure you test the URL each user lands on when requesting your site when using Google PageSpeed Insights.

Minify HTML, CSS, and/or Javascript

If you have an excess amount of comments or formatting (spaces and line breaks) in your HTML, Javascript, or CSS files being loaded by the site, you might encounter this warning. Google PageSpeed Insights will show an alert for this if any of these types of files on your site show they could be minified to reduce the amount of time it takes your browser to parse (read and interpret) these files.

Most of your web pages on WP Engine will not be HTML since WordPress uses PHP instead. However, you may see a warning regarding CSS and/or Javascript. If you see this warning, you can use a plugin like Autoptimize to minify those resources. Autoptimize also plays nice with CDN, if you’re using this feature on WP Engine. Just put your CDN URL in the Autoptimize settings to get this configured.

Prioritize visible content

Google PageSpeed Insights analyzes your site to see if there is a large amount of content that’s required to process or download in your visitor’s browser before the “render” of the page can start. Improving your score for this check involves structuring your page properly, and minifying and combining resources like javascript and CSS. Using Autoptimize to minify the javascript and CSS on your site is a great place to start for this warning as well.

Leverage browser caching

This warning could be very confusing for some users on WP Engine because WP Engine already configures browser-level caching directives for pages and files on sites. This warning typically comes up if your site is referencing external resources like Google fonts, Google analytics javascript, or even ads.

Troubleshooting this warning can be difficult–since those resources aren’t being loaded from WP Engine’s servers, they can’t add headers to those resources to direct the browser to cache them. To fix this issue, download the scripts or files to your website and load them from your own domain–when loading from your domain, WP Engine will automatically add the caching directives to these files.

Enable compression

On WP Engine, we already use gzip compression on the server to compress the following resources automatically:

application/rss+xml
application/vnd.ms-fontobject
application/wasm
application/x-javascript
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
application/xml+rss
font/otf
image/bmp
image/svg+xml
image/x-icon
text/cache-manifest
text/calendar
text/css
text/javascript
text/log
text/markdown
text/plain
text/richtext
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy
text/xml
text/xsd
text/xsl

Click the blue “Show how to fix” section to see which resources should use gzip compression. Most often these will be external resources, which are beyond WP Engine’s control to compress. However, if you download those resources and load them from WP Engine’s servers, our server directives will tell the server to gzip them by default.

If you do see resources served from your site itself in the list, check to see what kind of file the resource is, and see if it matches the list. If it isn’t one of the file types we automatically gzip, you can add these rules in your site’s .htaccess file instead.

Reduce server response time

Server response time can be affected by a number of factors. Google measures this metric by looking at the “Time to First Byte,” or TTFB. This can be influenced by things like network traffic and server load, but most often it has to do with the amount of time it takes to process the PHP code and database queries required to generate the page.

If you are intermittently seeing poor scores in Google PageSpeed Insights where it shows the server response time as an issue, this means your site’s cached pages are fine, but uncached pages are taking longer. To some extent, this is normal (since cached requests don’t need to process the PHP code and queries like uncached ones do). But for anything over 2 seconds, you may want to look into our article Troubleshooting Time to First Byte or our site speed tool for general page speed insights