Site Audit in Core

We are implementing Google Lighthouse on all of our builds to test the performance of our sites to ensure we are giving our customers quality websites. Google Lighthouse audits overall site performance, encompassing many items like site speedaccessibility and SEO. Every audit of Google Lighthouse will detail what items a site is doing poorly in so we can properly troubleshoot the site’s overall performance to above a threshold of 75%.

Run an Audit

How to Run a Google Lighthouse Audit:

  1. Go to the dashboard in WordPress, then hover over the Appearance tab and click on GD cORe.
  2. Click on Site Audit tab and click the button Generate New Report.

Example of a Poor Performing Site

If the “Performance” section is below a score 75%, an audit will need to be performed to troubleshoot the site’s issues. 

🡰 An audit of the site's issues will be displayed as shown in the image in the column to the left.


Using the information from the report under "Opportunities," you are now able to troubleshoot to the best of your ability to increase the site’s performance.

The graph in the following section "Performance Guide" will describe the steps to take to troubleshoot the issues shown in the audit image.

Performance Guide

How To

This section uses a table layout, on the left will be the issue reported in the Lighthouse Report. On the right will be a list of things you can do to resolve it or an explanation on why you may be getting that error. Find your issue and read the resolution.

Guide

IssueResolution
Defer offscreen images We currently do this by using Smush and their lazy load settings. This should take care of these and if you are getting this error please make sure this setting is enabled. Some images won't lazy load such as parallax headers. so sometimes this is unavoidable.
Efficiently encode imagesIf this is showing up on your report then most likely Smush has not ran. Simply go into the WordPress admin and bulk smush the images.
Eliminate render-blocking resourcesThis is a difficult fix and currently we do not have a strong resolution. The problem comes from rearranging the scripts and then losing functionality. We could do this on a site by site basis but it's nearly impossible at scale currently. We are looking into tools and ways to do this in the future. Currently no resolution.
Minify CSSWe are currently working on a clean solution to resolve this. Due to caching and some CSS changing on the fly we have had difficulty minifying CSS. We hope to have a solution in place soon that will work at scale. Currently no resolution.
Minify JavaScriptWe are currently working on a clean solution to resolve this. Due to caching and some JS changing on the fly we have had difficulty minifying JS. We hope to have a solution in place soon that will work at scale. Currently no resolution.
Preconnect to required originsThis is something we are working on having a solution for. In the future we will have an option where you can take the urls it suggests pre loading in this error and add them to a list so the site starts to preload them. Currently no resolution.
Properly size imagesIf you are getting this error, confirm that you are not loading large images onto a website and then using CSS to make them much smaller. If an image is going to be CSS'ed down to 400x400 and the image is 1000x1000 this should be resized first.
Reduce server response times (TTFB)When you see this error please first rerun the report. A lot of the time the MWP Caching will kick in and remove this error from the report. MWP is built to function with Varnish cache so we want a result with this in effect. If this error persists then this may be a server based performance issue and this needs to be taken to the Hosting Tech leads. If you are a vendor this can be ignored and you can continue troubleshooting the other issues and inform us of this error when you deliver the site.
Remove unused CSSUnfortunately the amount of effort to reduce CSS on a WordPress is very high. This is due to the fact that 99% of all css is brought in from Plugins and Themes. So for us there are two things we can do.
  1. Ensure any css you have added is condensed as much as possible example (https://developers.google.com/web/tools/lighthouse/audits/minify-css)
  2. Make sure any plugin you have installed is 100% needed because any plugin you install and use in even the slightest way will bring in all of its CSS and JS.
Serve Images in Next-Gen FormatsThis is a newer push by modern browsers and there is not a ton of plugin support within WordPress currently. We have isolated a couple plugins that can do this and we are looking into making this happen. Currently no resolution.

Fixing Performance

This section will explain what steps we can take to try and improve a sites performance score.

Plugins

WPMU DEV Dashboard

This plugin allows us to authorize smush and hummingbird. Authorizing these plugins unlocks their full potential which we take advantage of on our builds.

Smush

For all image optimization and lazy loading we use smush from WPMU DEV. If your performance is returning issues with lazy loading and image optimization please run through the settings on smush to ensure they are enabled properly.

Hummingbird

Humming bird helps by adding a second layer of caching and setting expire headers and much more. By default hummingbird enables some settings and all of these do not need to be changed. We will need to add a few based on your lighthouse results. Below we list possible lighthouse issues that humming bird can solve for.

  • 1
    Page Caching

    Under the hummingbird settings > click on caching and then on this page there will be a few tabs.
    On the first tab > click activate for page caching.

  • 2
    Browser Caching

    Under the hummingbird settings > click on caching and then on this page there will be a few tabs.
    On the browser caching tab > scroll down to the bottom and click activate for browser caching. 

  • 3
    Advanced Tools

    Under the hummingbird settings > click on advanced settings.
    Here we want to enable the removal of the default wordpress emoji css and js.
    Click this to activate and save changes.

  • 3
    Preconnect to required origins

    Under the dropdown arrow on this error it will tell you a list of urls your site is loading that can be pre loaded.
    Copy this list > and go to the hummingbird pro settings on the left side of wordpress > and select advanced settings.
    In the Prefetch DNS Requests box paste these urls.

Best Practices

Image Sizing

It is imperative when trying to save page load times that we pay attention to content sizing. If you are loading a 1000px by 1000px image on a page where the images is CSS'ed down to 200x200 that is a waste of load time. Ensure you size your images based on your needs first. 

  • Image Specs

    Click here for a comprehensive list of image specifications in regards to the web. 

  • Resizing images before you upload: 

    Click here for a detailed run down on how to use Adobe Photoshop's "save for web" feature, or read the section below it for batch processing in lightroom (only doable if you have access to Adobe Creative Cloud)

  • Resizing images after you upload: 

    Click here for a detailed run down on how to use Smush Pro. 

Table of Contents
    Add a header to begin generating the table of contents