Google PageSpeed Best Practise
Introduction
PageSpeed is a tool by Google to indicate the performance of a website. It checks the site for some of the best practice techniques in web development. Google wants to ensure that every site offers a great experience for the user. It is not clear, if the ranking of the tool really affects the visibility of the site in the Google search algorithm. Although the performance of your website has an affect at the bounce rate and the user experience. So a better ranking in the PageSpeed tool is always a good goal you should work on.
This guide will cover some key metrics which have a great impact on the score and how to optimize them.
Enable compression
Shopware is configured out-of-the box to enable on-the-fly deflate compression for text based content like HTML, CSS or Javascript. If for some reason Pagespeed tells you to enable compression to reduce transfer sizes of CSS or Javascript files, please check the configuration of your server.
Images
The size and implementation of images have a great impact on the Google PageSpeed score. If they are too big in file size or to big in dimensions for the viewport, you'll get an error like Compressing and resizing xx could save xxKiB (xx% reduction).
Optimization
Like the error already says, your images should be compressed either using external services or with the built-in image compression and optimization in Shopware.
If your server has tools available like optipng or jpegtran, they already optimize your thumbnails using these tools. The compression of the tools is disabled by default as it can be managed in an album in the media manager.
Recommendation for the best score
- Install
optipngon your server - Install
jpegtranon your server - Optional: Run
sw:media:optimizeto optimize all existing images in the Shopware media folder
Responsive images
Most images in Shopware provide the full range of the defined thumbnail sizes so the browser can choose which one to display. But to select the suitable addition, the browser needs to know, how big the image that will be displayed is.
Recommendation for the best score
If you develop your own custom theme, you should follow our Responsive images guide to implement your images correctly.
CSS
PageSpeed expects that your site shows useful content in the least amount of time. This means, that your website should be renderable without additional network round trips.
Shopware delivers all theme styles in a single CSS file which will be loaded on page load. This works well as we only have 1 request to fetch all styles, but it reduces the score as the rendering is blocked until the styles have been fully loaded.
Recommendation for the best score
Google explains the concept of Critical CSS where the smallest needed part of CSS will be rendered into the DOM inside your <head/> element. The content of the style should contain everything to render the first visible part your website without loading any other remote styles.
Open your website and locate all components which are finally visible for all viewports. Then, gather all needed styles to show this page and put the styles into the <head/> element.
You can test your changes by temporarily removing all remote styles from your theme and reload the website. The visible part should not have changed.
JavaScript
Similar to the CSS section above, JavaScript is a blocking member too. Therefore JavaScript resources should be loaded asynchronously.
Shopware compiles all JavaScript files into a single file which will be loaded asynchronously. That also means, that libraries like jQuery are not instantly available on page load.
Recommendation for the best score
If your script depends on Shopware modules or libraries, you should add your files to the theme compile process. It will be then included into the single JavaScript file and includes all dependencies.
In case you can't add your files to the compile process, you should include your files with the async attribute.
<script src="https://..." async>