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. However, when you create a new staging store from that live version, they do get copied.

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.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us