This guide covers how to configure Smush Pro, Hummingbird Pro, and other WPMU DEV performance tools for the specific purpose of improving Google PageSpeed Insights results.

RECOMMENDED READING

Our blog post, How To Ace Google’s Image Page Speed Recommendations With Smush, focuses on Smush features that directly impact your Google PageSpeed score.

If you haven’t installed both plugins, then visit the Hummingbird Pro and Smush Pro pages to download them, then install and activate both plugins before proceeding.

Smush Pro and Hummingbird Pro have configuration options for directly impacting the results of the following Google PageSpeed Recommendations:

Images:

  • Properly size images
  • Defer offscreen images
  • Efficiently encode images
  • Serve images in next-gen formats

Files and Code:

  • Eliminate render-blocking resources
  • Enable text compression
  • Uses efficient cache policy on static assets
  • Minify JavaScript
  • Minify CSS
  • Remove unused CSS
  • Preconnect to required origins

NOTE

Smush Pro and Hummingbird Pro are designed to find additional savings and fine-tune performance. A good hosting provider, a well-designed theme, properly configured plugins, and optimized system settings all play a role in optimizing performance. For best results, we recommend using Smush and Hummingbird as the final step after everything else has been optimized.

A list of Google recommendations that Hummingbird and Smush do not address is located in the Resolving Other Google Recommendations section of this document.

1.1 About Your Google PageSpeed Insights Score

Measure PageSpeed

There are many variables when running a PageSpeed test on a real-world website, and it’s important to understand that not every site can expect a score of 100.

Ads, scripts, and network conditions will cause results to vary for each visit. It is important to note that some very valid tools, such as anti-virus scanners, complex extensions, programs that impact page load or inconsistent ad behavior, can all impact PageSpeed scores. In fact, we recommend that anti-virus scanners and any program known to interfere with pagespeed be disabled during PageSpeed tests.

The following are some general guidelines regarding Google PageSpeed scores:

  • 0 to 49 is considered slow
  • 50 to 89 is good or average
  • 90 to 100 is fast

For context, a website with a score of 100 is in the 98th percentile of the million top-performing sites. A site with a score of 50 is in the 75th percentile, which is still quite good relative to the vast majority of websites.

So what should your performance success metric be? A realistic PageSpeed score expectation for your website must take into account your host’s servers, content location, the number scripts or third-party calls your page is making, and the plugins and theme you are running.

1.2 Optimize Smush Pro Settings for Google PageSpeed Insights

This chapter guides you through the configuration options for optimizing images with Smush Pro to improve performance based on the image recommendations from the Google PageSpeed Insights scan.

1.2.1 Properly size images
resize responsive images

This recommendation occurs when one or more of the images on the page is incorrectly sized for the container in which it appears.

Google PageSpeed Properly size image metric

The Google PageSpeed test compares the size of the rendered image– that is, the image as it appears on users’ screens– against the size of the actual image– that is, the size of the image being served. If the rendered image is 25KB or more smaller than the actual image, it fails the audit.

To properly size images with Smush, activate the Smush Pro CDN and enable the Automatic Resizing option.

Automatic Resizing creates additional size variations on your CDN based on common screen sizes, filling in the gaps left by the default WordPress-generated thumbnails and uses the srcset attribute to serve the image closest in size to the size of its container.

This method will successfully resolve the Properly resize images audit on any theme that is properly utilizing the image sizes feature.

1.2.2 Page builder considerations

In an attempt to give users more freedom, page builders use various methods to size and resize images. This freedom comes at the cost of resources, and images may have to be manually resized to fit their containers.

If you are using a page builder or have activated the image CDN and consistently still fail the “Properly size images” audit, you can locate the images with Wrong Size Detection and choose the appropriate thumbnail if it is included in the list of generated images.

If the size you need is not available, you will need to provide a new image in the correct size in order to pass the audit.

To enable the Wrong Size Detection feature in Smush Pro, go to plugin settings, and in the image Resizing section, enable Detect and show incorrectly sized images. Then save your settings.

Smush pro image resize detection

This setting will highlight incorrectly sized images for the admin. Use the information tab (yellow “i” icon) to see what size to scale the image.

Image resize feature Smush Pro

Watch our instructional video to see how the Smush wrong size detection feature works.

If you need to scale your images manually, we have written an in-depth tutorial for properly resizing and serving scaled images with WordPress.

NOTE

Automated image scaling with the CDN may not work well for images on themes or page builders that do not use the srcset attribute to define images.

1.2.3 Defer offscreen images

This audit lists all offscreen or hidden images on your page along with the potential savings in kilobytes. Use the Smush Lazy Load feature to defer your offscreen images from loading until they are needed.

Google PageSpeed Defer Offscreen images

To activate lazy loading with Smush Pro, click the Lazy Loading option in the Smush dashboard and click the Activate button.

Watch our instructional video to see how the Smush lazy loading feature works.

This feature stops offscreen images from loading until a visitor scrolls to them, making your pages load faster, uses less bandwidth, and fixes the failed “defer offscreen images” audit.

The default settings work well for most sites. But keep in mind the audit is only for images located offscreen so it is a good idea to exclude any images in the viewport. Smush Pro Lazy Loading gives you controls for excluding file types, output locations, animation speed, and pages you may want to exclude.

NOTE

Do not use the Smush Pro Lazy Load feature if you have lazy loading active with another plugin or it is built-in to your theme or page builder. Having the same function active in multiple plugins can cause a conflict that makes your images appear broken.

If you are looking for more information about manually implementing Lazy Load on your site, visit the How to Defer Offscreen Images guide on our blog.

1.2.4 Efficiently encode images

The is a list of all unoptimized images, with potential savings in kilobytes. To check if your images are correctly encoded, Google’s PageSpeed test collects all the JPEG or BMP images on the page, sets each image’s compression level to 85, and compares the original version with the compressed version. If the potential savings are 4KB or higher, the images will fail the audit.

Google PageSpeed efficiently encode images metric

To resolve this with Smush Pro, use the “Automatic compression” option, to automatically web optimize your images on upload.

If you already have images in your media library when installing Smush, use Bulk Smush to optimize any existing images.

To optimize images up to 2x more than the default Smush option with multi-pass lossy compression activate Super-Smush.

Remember to click Save whenever making changes to Smush settings. Run Bulk Smush to apply changes to any existing image files.

1.2.5 Serve images in next-gen formats
Next-gen WebP Video Thumbnail

Next-gen image formats are modern image formats with superior compression capabilities. WebP is the leanest and typically achieves 30% more compression than JPEG and JPEG 2000.

Google PageSpeed next-gen image metric

Smush Pro can be used to serve images in the WebP next-gen format for supported browsers. If the browser does not support WebP, Smush will use the original image format as a fallback.

This feature is active by default when using the Smush CDN.

You can check to see if it is activated in Smush Pro under the CDN menu item. Scroll to WebP Conversion and toggle Enable WebP conversion.

Watch our instructional video to see how to serve images in WebP format.

Click the Update Settings button to save your changes.

To learn how to manually convert images into a WebP format and set up fallback images with srcset, follow our guide for serving images in next-gen formats.

You can verify your images are being served in a next-gen format on your support browser using the Chrome inspect tool. Right-click on an image, choose inspect and check that the link uses the WebP extension.

Inspect image for webp format

NOTE

Remember to clear your cache after making changes and give time for the image changes to complete before running a new PageSpeed test.

1.3 Hummingbird Pro Settings for Google PageSpeed Insights

This chapter guides you through the best configuration options for optimizing file and code assets with Hummingbird Pro to improve performance based on asset optimization recommendations from the Google PageSpeed Insights performance scan.

Gzip tutorial

Text-based resources, like JavaScript or CSS code files, should be served with compression to minimize total network bytes.

Google PageSpeed text compression metric

The Google PageSpeed test compresses each of your uncompressed files with GZIP to compute the potential savings.

If the original size of a response is less than 1.4KB or if the potential compression savings is less than 10% of the original size, then the file will pass the audit.

If you are failing the “Enable text compression” audit, you can use Hummingbird Pro to activate Gzip compression. After installing Hummingbird Pro, visit the Gzip Compression tab.

If your Gzip is not active, Hummingbird Pro has options for activating Gzip on NGINX, Apache, and IIS servers.

1.3.1 Apache

For Apache servers, use the Automatic setting to automatically apply Gzip compression by allowing it to write the rules to your .htaccess file.

Configure GZIP

If you are unable to get the automatic method working, click Manual , then copy the Hummingbird generated code into your .htaccess file to activate Gzip compression. Click the Re-check Status button to verify that it is connected.

Hummingbird Apache server code
1.3.2 Troubleshooting Apache

If modifying the .htaccess file does not work, and you have access to vhosts.conf or httpd.conf you can try:

  1. Look for your site in the file and find the line that starts with <Directory> – and add the code into that section and save the file.
  2. Reload Apache.
  3. If you don’t know where those files are, or you aren’t able to reload Apache, you would need to consult with your hosting provider or a system administrator who has access to change the configuration of your server.
1.3.3 NGINX
  1. Copy the code generated by Hummingbird into your nginx.conf file. This is usually located at
  2. Add the code to the HTTP or inside server section in the file.
  3. Reload NGINX
nginx Hummingbird code

If you do not have access to your NGINX config files, you will need to contact your hosting provider to make these changes.

1.3.4 IIS 7 Servers and Above

Follow the Microsoft TechNet documentation.

For more information or help enabling Gzip from the WPMU DEV support team, open a Live Chat.

1.3.5 Preconnect to required origins

Preconnect, or dns-prefetch, tells the browser that your page intends to establish a connection to another origin and that you’d like the process to start as soon as possible.

Google PageSpeed preconnect to required origins metric

This saves time on pages loading social sharing buttons (e.g., Twitter, Facebook), video player embeds (e.g., YouTube, Vimeo), advertising iframes, analytics & metrics scripts, and more.

To activate prefetch, in Hummingbird Pro’s advanced tools, activate Prefetch DNS requests to pre-resolve DNS.

Hummingbird Pro prefetch feature

Hummingbird Pro includes a few common DNS requests to get you started.

Add additional host entries one per line replacing the http:// or https:// with // (e.g. //fonts.googleapis.com).

Be sure and click the Save Changes button after adding or updating the Prefetch DNS Requests setting.

1.3.6 Uses efficient cache policy on static assets
Caching tutorial

If your site is not passing the “Uses efficient cache policy on static assets,” use the Browser Caching feature located under the Cache menu item.

Google PageSpeed efficient cache policy metric

Browser Cache stores temporary data on your visitors’ devices so that they don’t have to download assets twice. This results in a much faster second time around page load speed.

Hummingbird Pro allows you to set the expiration time that recommends expiry time. The Google benchmark recommends 1 year or longer.

Hummingbird expiry setting

Hummingbird Pro also gives you control over the expiry time for each file type by choosing the Individual file types.

Hummingbird expiry by file type
1.3.7 Minify JavaScript

JavaScript Minification is the process of removing whitespace and any code that is not necessary to create a smaller but valid code.

Google PageSpeed minify javascript metric

Developers use this additional code to make it more readable for humans but are unnecessary for loading the site.

Hummingbird Pro will minify your JavaScript files, generating a version that loads faster.

The Opportunities section of your PageSpeed report lists unminified JavaScript files, along with an estimate of potential savings based on the comments and whitespace characters.

Use Hummingbird Pro’s Advanced Asset Optimization to compress all your JavaScript files.

Google PageSpeed minify javascript metric

Use the Advanced Asset Optimization guide for instructions on how to do Asset Optimization the right way.

1.3.8 Minify CSS

Minification is the process of stripping blank space or unnecessary characters or lines of code from your file to make it more compact. Developers use this additional code to make it more readable for humans but are unnecessary for loading the site.

Google PageSpeed minify CSS metric

Hummingbird Pro will minify your CSS files, generating a version that loads faster.

The Opportunities section of your PageSpeed report lists unminified CSS files, along with an estimate of potential savings based on the comments and whitespace characters that it finds in your CSS.

Use Hummingbird Pro’s Advanced Asset Optimization to compress all your CSS files.

Google PageSpeed minify javascript metric

Use the Advanced Asset Optimization guide for instructions on how to do Asset Optimization the right way.

1.3.9 Eliminate render-blocking resources

If you fail the Eliminate render-blocking resources audit, the Opportunities section of your PageSpeed report will list all the URLs blocking the first paint of your page.

Google PageSpeed render blocking metric

You can reduce the impact of these render-blocking URLs by moving critical resources inline, deferring non-critical resources, and removing anything unused.

The Hummingbird Advanced Asset Optimization feature has tools for moving, compressing, deferring, inlining and blocking resources.

Google PageSpeed minify javascript metric

Visit the Advanced Asset Optimization guide for more information on how to do Asset Optimization the right way.

1.3.9.1 Remove unused CSS

The Opportunities section of your PageSpeed test lists all stylesheets with unused CSS with a potential savings of 2 KBs or more. Removing unused CSS reduces unnecessary network activity.

Google PageSpeed remove unused CSS metric

Before using Hummingbird Pro to remove unused CSS, consider reducing, or switching, the number of the plugins loading unused CSS in your page.

You can identify plugins that are adding unnecessary CSS by running code coverage in Chrome DevTools. Use the stylesheet URL to identify the theme/plugin responsible. Look out for plugins that have a lot of stylesheets in the list with a lot of red in code coverage. A plugin should only enqueue a stylesheet if it is actually used on the page.

After you’ve settled on your plugin and themes if you are still getting the “Remove unused CSS” error, use Hummingbird Pro’s Advanced Asset Optimization “Don’t load file” toggle to stop unused CSS from loading.

Hummingbird Pro Don't load file button

Use the Advanced Asset Optimization guide for instruction on how to use the Asset Optimization tool.

1.3.9.2 Advanced Asset Optimization with Hummingbird
Asset-optimization-tutorial

Getting Advanced Asset Optimization right requires customizing sites individually based on the plugins and themes installed and activated on each.

Asset optimization addresses failed audits in four Google PageSpeed metrics:

  • Eliminate render-blocking resources
  • Minify JavaScript
  • Minify CSS
  • Remove Unused CSS

Hummingbird simplifies advanced configuration in a few ways:

  • It moves all the configuration settings to the dashboard for compressing, combining, moving, making it Inline, deferring, and stopping code from loading
  • It allows you to make changes, test, and quickly revert for worry-free editing
  • It includes filters for locating files by extension name, file type, plugin, and theme.

This section covers steps for using Hummingbird’s advanced Asset Optimization tool for successfully compressing, combining, and moving CSS and JS files without breaking the style or functionality of your website.

For a description of each of the Asset Optimization tools in Hummingbird, visit our Hummingbird documentation.Note

When configuring and testing Asset Optimization, turn off or clear cache, including page, browser, and server-side object cache.

Recommended workflow for configuring Advanced Asset Optimization:

  1. Install and configure all plugins and a theme.
    If you add or delete a plugin or theme, it will change available assets and alter your configuration. Hummingbird Asset Optimization should be the last thing you configure. If you do not see assets from a specific plugin or theme, clear your cache and use the Re-Check Files button to reload available assets.
  2. Optimize plugins and your theme using their built-in settings
    Premium themes and page builders sometimes include an asset optimization feature and will resolve 80% of your issues. Here are some examples of popular themes with built-in asset optimization tools:
  3. Run Hummingbird Asset Optimization scan
    After your plugins and theme are activated and optimized with their built-in settings, run the Hummingbird Asset Optimization scan.Compress and combine everything. To bulk compress and combine, click the CSS/JavaScript checkbox above each section, then click the Bulk Update button to open the Bulk Updater module. Select the Compress and Combine options and click Apply. Then click the Publish Changes button to push the changes live.After making changes check your site to ensure everything is functioning as it should. If everything is working, continue to the next step. If something seems off, check your inspector for errors or reach out to support.
  4. Move as many files to the footer as possible.
    Move all your files to load in the footer except the JQuery, JQuery-migrate, and core theme JavaScript files. Use the Filter > Theme and Plugin sort tool if you are unsure what files are from your theme. Click the Publish Changes button to push your changes live. If something breaks, stay calm and continue testing.
  5. Move files with an error to the header.
    Visit key pages on your site and use the browser console to check for errors. To check for errors with Google Chrome, visit a page on your site, right-click, select Inspect, and open the Console tab. Return to the Hummingbird Asset Optimization tab and move files flagged with an error to load in the header.
  6. Defer the scripts that are not needed immediately.
    Finally, select the Force load this file after the page has loaded button available in the JavaScript section to defer scripts that you don’t need immediately (like a form script or a spam protection script).

If you run into any issues, you can deactivate Advanced Asset Optimization under the Asset Optimization Settings tab, and contact our support team. Your WPMU DEV membership includes performance optimization consulting from our support experts. Open a support ticket to get started.

1.4 Other Google Recommendations

The Google PageSpeed Insight audit provides recommendations in three sections:

  • Opportunities provide suggestions for improving the page’s speed. The suggestions in this section estimate how much faster the page will load if the improvement is implemented.
  • Diagnostics is information about how a page follows best practices for web development.
  • Passed Audits are audits that meet the basic PageSpeed requirements.

It is important to note that improving Opportunities and Diagnostics do not directly affect the Google performance score. This means you may be able to make a page load faster without seeing an increase in your overall performance score.

There are about 20 Opportunities the Google PageSpeed test can recommend, and Smush Pro and Hummingbird Pro can be used to improve the results on 11 of these. The remaining recommendations are based on server quality, scripts, and the burdens created by connected 3rd-party services.

This section offers tips for resolving PageSpeed recommendations that cannot be addressed with our optimization plugins.

  1. Server response times are low – This audit fails when the browser waits more than 600 ms for the server to respond to the main document request. On WordPress websites, the server, plugins, and theme all have an impact on TTFB. Ensure you are using a quality host like WPMU DEV Hosting or upgrade your plan if you are failing this audit.
  2. Avoid multiple page redirects – The Google PageSpeed test flags pages that are redirected multiple times. Limit the number of redirects a page does. If you have both a desktop and mobile version you are redirecting to, consider using a responsive.
  3. Avoid an excessive DOM size – The DOM structure is based on the size and amount of content your site contains, and the theme, page builder, and plugins that are producing your HTML. If you are failing this audit, consider shifting to a new theme. If you are working on a site that has a lot of content, this will be difficult to resolve as Google flags sites that:
    • Have more than 1,500 nodes in total.
    • Have a depth greater than 32 nodes.
    • Have a parent node with more than 60 child nodes.
  4. Preload key requests – Consider using <link rel="preload"> to prioritize code that is being requested later in page load.
  5. Use video formats for animated content – Convert Animated GIF files to looping mp4 and/or WebM video files to save space and speed up load times.
  6. JavaScript execution time – Compression only goes so far, execution time still depends on how much there is actually going on in the scripts.
  7. Avoid enormous network payloads – This is the total size in kilobytes of all resources requested by your page. Optimizing images and minifying and compressing code files will help. You will fail this audit if your page’s total network requests exceed 5,000 KB. For optimal page performance, shoot to keep your total byte size below 1,600 KB.
  8. Minimize third-party usage – Calling third-party services with scripts slow things down. Examples of third-party scripts include social sharing buttons (e.g., Twitter, Facebook), video player embeds (e.g., YouTube, Vimeo), advertising iframes, analytics and metrics scripts, and A/B testing scripts for experiments. It is important to note that even running the Google Analytics script to track information on your site will likely make it near impossible to score a 100 on your Google PageSpeed test.

1.5 Performance Support

WPMU DEV Members have a variety of support options available based on your plan. If you are having issues configuring Hummingbird Pro or Smush Pro, you can start a live chat with our team for settings consultation and to get answers to your performance questions.

As noted throughout this document, performance results for each site vary greatly based on your server, scripts, theme, page builder, and active plugins.

Blog Writing EstimateUse this form to request a cost estimate for all content types except technical documentation. Tech docs should be requested using the Documentation form. Thanks!

Asterisks (*) indicate required fields. This form is highly compact, so most fields require responses.

Experience

NOTABLE WRITING EXPERIENCE

European Stars and Stripes — Darmstadt, DE
Produced news, feature and investigative reports for Germany-based American newspaper.

The Advocate — Baton Rouge, LA, USA
Produced news, feature and investigative reports for daily American newspaper.

Ruston News Group — Ruston, LA, USA
Editor for weekly newspaper published in rural North Louisiana.

NOTABLE TECH PROJECTS

WPMU DEV, Incsub, LLC — Documentation developer
Mar 2018 - Aug 2020
Developed usage documentation and provided general editorial support to international WordPress development, hosting and support company.

William Allison - A Law Firm — Business Development Project Manager
Nov 2015 - Nov 2016
Responsible for evaluating, purchasing and implementing technology solutions to enhance the law firm’s business development and practice management systems. My areas of responsibility were twofold: modernization of the firm’s electronic case management system and building an online marketing presence that generated quality case leads.

Carrollton Group — Technical Writer
Oct 2014 - Nov 2015
Documented testing procedures for the Deepwater Horizon Claims Center online claims processing network of sites.

Industrial Training Institute — Technical Writing Instructor
Aug 2011 - May 2013
Developed a comprehensive technical writing training program for technical college students entering the industrial, medical and information technology fields.

Georgia Pacific — Training Documentation Specialist
Aug 2009 - Dec 2010
Developed training documentation and testing materials in support of project to migrate GP's massive training program to an online environment.

EDUCATION
LSU — Mass Communications
Baton Rouge, LA

RFP EstimateUse this form to submit a Request for Proposal or other document(s) that clearly defines your content needs. If no such document exists, please use the Blog Writing or Documentation form to request estimates.

Documentation EstimateUse this form to request a cost estimate for the development of online user, product or process documentation and any supporting image or video content. All other projects should be submitted using the Blog Writing form. Thanks!

Asterisks (*) indicate required fields. This form is highly compact, so most fields require responses.