1. WPMU DEV Performance Optimization Guide
This usage document covers configuring Smush Pro, Hummingbird Pro, and other WPMU DEV Performance tools for the specific purpose of improving Google PageSpeed Insights recommendations and opportunities.
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.
Smush Pro and Hummingbird Pro have configuration options for directly impacting the results of the following Google Speed Recommendations:
- 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 CSS
- Remove unused CSS
- Preconnect to required origins
Smush Pro and Hummingbird Pro are designed to find additional savings and finetune 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 ScoreCopy chapter anchor to clipboard
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 InsightsCopy chapter anchor to clipboard
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 imagesLink to chapter 2
This recommendation occurs when one or more of the images on the page is incorrectly sized for the container in which it appears.
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.
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.
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.
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.
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.2 Defer offscreen imagesLink to chapter 2
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.
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.
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.3 Efficiently encode imagesLink to chapter 2
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.
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.4 Serve images in next-gen formatsLink to chapter 2
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.
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.
There are 2 options for serving WebP images with Smush Pro:
- Using the feature built into the Smush CDN
- Using the Local WebP feature
WebP with Smush CDN
The feature is active by default once the Smush CDN is enabled.
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.
Local WebP option
If you do not wish to use the Smush CDN, you can instead opt to enable the Local WebP feature in Smush Pro.
Once enabled and configured according to your server type, you’d need to run the Bulk Smush feature again to generate a .webp version of every image. Those new .webp images are stored in a new /smush-webp/ folder on your server.
Any time an image is requested by the browser, Smush will check that folder and, if the .webp version exists, it will be served to browsers that support that format. Otherwise, your original .jpg or .png image will be served.
For more info on the Local WebP feature, and how to configure it for your site, see the Smush Pro > WebP documentation.
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 InsightsCopy chapter anchor to clipboard
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.
1.3.1 Enable text compressionLink to chapter 3
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.
For Apache servers, use the Automatic setting to automatically apply Gzip compression by allowing it to write the rules to your .htaccess file.
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.
If modifying the .htaccess file does not work, and you have access to vhosts.conf or httpd.conf you can try:
- 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.
- Reload Apache.
- 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.
- Copy the code generated by Hummingbird into your nginx.conf file. This is usually located at /etc/nginx/nginx.conf or /usr/local/nginx/conf/nginx.conf.
- Add the code to the HTTP or inside server section in the file.
- Reload NGINX
If you do not have access to your NGINX config files, you will need to contact your hosting provider to make these changes.
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.2 Preconnect to required originsLink to chapter 3
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.
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 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.3 Use efficient cache policy on static assetsLink to chapter 3
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.
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 Pro also gives you control over the expiry time for each file type by choosing the Individual file types.
Developers use this additional code to make it more readable for humans but are unnecessary for loading the site.
Use the Advanced Asset Optimization guide for instructions on how to do Asset Optimization the right way.
1.3.5 Minify CSSLink to chapter 3
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.
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.
Use the Advanced Asset Optimization guide for instructions on how to do Asset Optimization the right way.
1.3.6 Eliminate render-blocking resourcesLink to chapter 3
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.
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.
Visit the Advanced Asset Optimization guide for more information on how to do Asset Optimization the right way.
1.3.7 Remove unused CSSLink to chapter 3
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.
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.
Use the Advanced Asset Optimization guide for instruction on how to use the Asset Optimization tool.
1.3.8 Advanced Asset Optimization with HummingbirdLink to chapter 3
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 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.
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:
- 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.
- 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:
- Run Hummingbird Asset Optimization scan
- Move as many files to the footer as possible.
- 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.
- Defer the scripts that are not needed immediately.
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 Resolving Other Google RecommendationsCopy chapter anchor to clipboard
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.
- 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.
- 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.
- 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.
- Preload key requests – Consider using
<link rel="preload">to prioritize code that is being requested later in page load.
- 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.
- 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.
- 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 SupportCopy chapter anchor to clipboard
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.