PageSpeed Optimizations

PageSpeed is Google's server extension for optimizing websites based on their Web Vitals recommendations.

We recommend testing on staging first but then enabling it on live. Publishing staging will not change the PageSpeed settings on the live store.

We recommend reviewing the changes and performing speed tests after each individual change.

Images

Converts images to WebP when it's beneficial (might not convert all images on a page).
Cannot be disabled.

Combine

Combines multiple CSS and JS files into one large file while adhering to the recommended size (below 1.4 MB).

Preload

Inserts server headers that tell the browser to preload certain content before it starts to parse HTML.
Use it when the Web Vitals test recommends preload.
Might worsen page load time if you have large or a lot of assets (includes CSS, JS, fonts, images, etc.).
Might conflict with plugins doing the same thing (like WP Rocket).

Responsive

Serves images based on the actual browser size.
Helps decrease page size on mobile devices.
Often conflicts with gallery and slider plugins.

Load only critical CSS

Loads only the required CSS that is used above the fold.
Helps when the store CSS file is large.
Might break the design, use the Preview link before applying.

Defer JS

Moves all JS files from head to body.
Might break the design, use the Preview link before applying.

Lazy load images

Load images when they appear in the browser.
Use if your theme does not have lazy load.

Advanced

You can also customize all parameters that PageSpeed provides, by creating the /var/www/public_html/wp-content/.nginx-pagespeed.

Example content:

pagespeed EnableFilters "inline_images,hint_preload_subresources,insert_dns_prefetch,inline_google_font_css,extend_cache,combine_css,combine_javascript,rewrite_images,recompress_images,responsive_images,responsive_images_zoom,resize_images,resize_rendered_image_dimensions";

After you make changes you also need to restart the PHP Workers under the WP-CLI tab.