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.
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 the size of resources by using gzip or deflate compression
- Reduce the server response time
- Use browser caching
- 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 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 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.
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.