Diese Seite ist auch auf Deutsch verfügbar. Zur deutschen Seite wechseln

Shopware 6: PageSpeed optimisation for "mobile only"

Shopware 6: PageSpeed optimisation for "mobile only"

To the German article

2021 is the year of a major change at Google – “mobile-first” is being replaced by “mobile-only”. The search engine website operator has been preparing for mobile indexing since 2016 and mobile-first indexing was introduced in July 2019. Specifically this means that: the crawler is switched off for desktop and the user experience (UX) of websites has become part of the ranking system. Likewise, the user experience is made measurable through the Core Web Vitals. What does this now mean for SEO and what measures does Shopware 6 offer for PageSpeed optimisation? Find out the answers to this and much more in this blog post. It was written by Martin Ritter, Managing Director of our solution partner WEBneo.

What happened to “mobile-first” and what can we expect from “mobile-only”?

Google has been including an increasing number of mobile factors in the ranking for a few years now. It is no surprise then that the visitor numbers to web shops from mobile devices have risen significantly over the last few years. On average, more than half the traffic to online merchants comes from smartphones (56.2%), whilst desktop access has fallen to approximately 34.5% Many website operators have already reacted to this and are presenting their websites in a responsive design on mobile devices. From a technical perspective, mobile indexing means that Google visits their websites using a mobile browser and a simulated screen size of 412 x 732. It thereupon calculates the initial length and the layout. Everything which is transmitted with the first page view is indexed. As the content on a mobile display differs in part from the desktop version, Google visits the website from time to time with a desktop browser to make a comparison.

With the introduction of “mobile-only”, however, and the associated Google page experience update, only the mobile view is used as a basis for search results on Google. If certain contents such as videos or images are no longer loaded on the mobile device for performance reasons, Google will also no longer index them. Equally, Google will no longer find content such as texts which are only downloaded through a user interaction with JavaScript. It is very clear here that: the website content on desktop and mobile devices should no longer differ very much in future. This also applies to non-visible elements, such as URLs, title tags and meta descriptions, hreflang and canonical tags, structured data etc. In addition, user experience will be a ranking factor. This has been the focus for several years now, whereby Google not only displays the most relevant results, but also those with reliable user-friendliness. What’s at the centre of all this? PageSpeed!

Basics first: What you should look out for in terms of PageSpeed optimisation

Before the Google update was published, people avoided showing exactly the same amount of content on mobile devices as on desktop versions. This was due to both the required user friendliness, as well as loading times (= PageSpeed) on the mobile network. Due to the “mobile-only” update, all website operators are now required to display their entire content on mobile devices, otherwise they risk a drop in the rankings. It is therefore necessary to optimise PageSpeed as this is an important factor in user experience. A few areas of activity to improve PageSpeed are already well-known:

  • Reduce HTML, JavaScript and CSS
  • Reduce the size of resources by using gzip or deflate compression
  • Reduce the server response time
  • Use browser caching
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content
  • Avoid redirections

Three new metrics have now also been added to the ranking, which are covered by the term “Core Web Vitals”. This supersedes the general loading speed of a website as a ranking factor and replaces it with three usability performance indicators: LCP, FID und CLS, which are illustrated with a traffic light system. You will find out in the next step what these actually mean and how they can be optimised with Shopware 6.

The Core Web Vitals: LCP, FID and CLS

LCP (largest contentful paint)

This Core Web Vital measures the loading time of your website – from when the user first opens the page until the greatest visible content elements are fully rendered within the viewport. Google evaluates it depending on how long it takes for the main content of your website to appear. The search engine has specified the following metrics for the evaluation:

  • Good: under 2.5 seconds
  • Needs improvement: up to 4 seconds
  • Poor: over 4 seconds

FID (first input delay)

The second Core Web Vital measures how quickly the user can interact with your website once it is loaded, by clicking on a link or an image, for example. A rating is given based on how much time elapses between this interaction and the time when the browser is actually able to respond to it. Google has published the relevant metrics for this too:

  • Good: under 0.1 seconds
  • Needs improvement: up to 0.3 seconds
  • Poor: over 0.3 seconds

CLS (cumulative layout shift)

The third Core Web Vital ensures the visual stability of a website. It measures how much the page’s layout shifts during the loading process. Unexpected movement of page content usually happens when some resources are loaded asynchronously on complex websites, i.e. in the background. This is usually to keep load times lower. If the load times are not synchronised, however, it results in layout shifts and users cannot read the content which jumps around. Google’s published metric is based on how often a visible element subsequently shifts. The scores can be between 0 and 1, where 0 means there are no shifts and 1 represents the most pronounced shifts.

  • Good: less than 0.1
  • Needs improvement: up to 0.25
  • Poor: over 0.25

How do you get the respective figures?

Core Web Vitals can be measured using the following tools

There are a few tools at your disposal for measuring Web Vitals. The three most important ones are Google PageSpeed Insights, Lighthouse and Webpagetest.org.

Google PageSpeed Insights

Google itself allows you to use its own PageSpeed Insights tool to check whether the most important performance indicators are being used. It also gives useful tips on improving your website.

Lighthouse

Lighthouse is another useful tool by Google which is available in the Chrome developer console. It is an open-source, automated tool for improving the quality of your website. It can test all websites as well as non-public or local development environments.

Webpagetest.org

Webpagetest.org does not come from Google, but is one of the most comprehensive free tools available for measuring load times. It provides large amounts of complex data and optimisation potential as well as the effects of various measures on the loading time of your website.

What Shopware 6 can offer you in terms of performance

Shopware provides a solid basis for a high-performance system. It is not only designed for small or very small merchants, but also for Enterprise customers.

One of the most striking changes compared to Shopware 5 is the switch to Symfony. Symfony is probably one of the most popular and high-performance PHP frameworks. Thanks to Symfony’s prevalence, it is always at the cutting edge and is constantly being further developed. Equally, thanks to its popularity among developers, the switch to Symfony provides an incentive for in-house developments thereby also promoting close collaboration with the community. OPCache and APCu Polyfill components are just some of the components that can be used in Shopware 6.

In frontend development, Shopware 6 is moving away from its long-standing partner Smarty to one of the most popular and high-performance template engines - Twig. Twig is a project by the makers of Symfony and therefore completes their logical and seamless integration with Shopware 6. It compiles templates down to plain, optimised PHP code, whereby the overhead is reduced to a minimum compared to regular PHP code.

Shopware 6 automatically combines the SCSS files produced by CSS preprocessor SASS and extended with the popular frontend CSS framework Bootstrap 4 in an ‘all.css’ file. Line breaks, comments etc are thereby removed, reducing the entire styling to a single line. This considerably reduces the file size and increases performance.

Finally, we would like to address something which has only been made possible by the use of the abovementioned modern technologies. The state-of-the-art technology of the Webpack module bundler not only converts and compiles the JavaScript used, but also takes over the minification and compression of JavaScript and CSS. Moreover, with Webpack it is possible to provide clients with only the code they actually need to display the current page. Conversely, this has a hugely positive impact on performance. It means the browser only has to work with the code it really needs.

Conclusions regarding PageSpeed optimisation with Shopware 6

With its modern technologies and approaches, Shopware 6 offers a high-performance and future-proof basis for the future. With Shopware 6 you are ideally positioned to meet the requirements of Web Vitals and user experience.

However, it has to be said that everyone is the architect of their own fortune. If a good basis is filled with a superficial knowledge of Web Vitals, mobile design, optimised images, additional functions and third party software, even a very good basis will eventually give way. That is why you should always keep in mind the issue of performance, even when you are only at the conceptual design stage of your online shop. Every new functionality and image will affect the performance of the system in one way or another.

Newsletter

Never miss out - get all the latest news sent straight to your inbox.