SEO & Pagespeed
Last updated
Last updated
© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH
We are very often asked whether ThemeWare® can do anything even better in terms of SEO/pagespeed, or how to improve your shop with the theme.
This is interesting because there is obviously a belief that themes are almost solely responsible for SEO/Pagespeed, i.e. that when you optimize the theme or when the theme is SEO/Pagespeed-optimized, the issue is almost completely resolved.
This is actually not the case.
In fact, it is completely the opposite. The theme itself only plays a small part in this. The rest are conceptual and content-related things on which the theme has almost no influence.
In this article you will find many useful tips that will help you to optimize your shop.
Of course, a CMS system like Shopware and an extremely configurable theme is always at a slight "disadvantage" compared to a highly individually programmed and specialized system that has been reduced to the bare essentials. However, this removes the comfort that is offered to you in reverse. And you probably can't set up such a shop yourself just like that.
With ThemeWare® you benefit from over 7 years of development time and experience in programming Shopware themes. From the ground up, optimization is an inherent part of ThemeWare® and is a constant process that is taken into account with every change and every update.
Be certain in any case: ThemeWare® is SEO-optimized, ThemeWare® is pagespeed-optimized.
We have applied (almost*) all of the above tips in our PageSpeed Demo Shop. Convince yourself of the result:
An important factor for Pagespeed is the Server Performance itself. How fast are files accessed, how quickly are requests processed, how high is the workload (e.g. shared hosting), is the server configuration optimal, etc.?
There are many differences in the server performance block, but also many opportunities for optimization.
A possible measured value in the pagespeed test would be the TTFB value (Time to First Byte). If the measured value goes upwards, optimization is probably still possible in this direction. GZip compression, for example, can provide a significant boost here.
Neither Shopware nor ThemeWare100% PageSpeed Insights – Unique Performance, Accessibility, Best Practices and SEO have any influence on this block. However, you can optimize a lot here yourself.
Tip
Use the free plugin "Tools" from Friends of Shopware to check the performance of the server and Shopware. Apply the recommended optimizations to improve server response times. This is a critical factor, as the server response time influences the loading speed directly.
In order for the source code to be loaded quickly, a cleaned up source code makes sense. Of course, with a CMS system, your hands are tied in a certain way, but Shopware is already very well optimized in this respect.
ThemeWare® has been a pioneer in the field of Shopware themes for several years and only delivers the source code that is actually needed.
Tip
Install and activate the free "HTML Minify plugin" from Friends of Shopware. This plugin reduces the file size of your HTML files by removing unnecessary spaces and comments, which shortens the loading time.
The most important topic besides server performance is the block "Images", at least it is the most underestimated topic, which has a lot of potential.
The topic of "images" is pretty extensive, but especially when many large images have to be loaded, for example in product listings or Shopping Experiences, there is plenty of room for optimization.
Shopware generates thumbnails for different viewports from all the images you are uploading. Therefore, it is not a big problem to upload large images as Shopware automatically creates smaller variants.
However, what you are able to influence is the compression. With free tools such as TinyPNG you are often able to significantly reduce the file size of your images. This is beneficial for the loading time.
Hint: The images that we provide you with our image download package are deliberately not compressed because you are supposed to process them further.
You just have to find the perfect balance between good performance and good image quality.
As you can see, the block "image optimization" is a very important aspect in your sphere of influence.
Most of the images in the shop are user-defined content. It is therefore up to you to optimize them.
Hint: The ThemeWare® graphics that are intended to be used permanently and unchanged, such as the payment and shipping logos have all already been perfectly optimized!
Tips
Use the "LazySizes and LazyLoading for matching image sizes" plugin, again from Friends of Shopware, to load images only when they are in the user's field of vision. This reduces the initial loading time, as not all images have to be loaded immediately.
.webp Images: The
.webpformat offers higher compression while maintaining the same quality compared to conventional formats such as.jpegor.png. This further reduces the loading times.Add alt texts to all images via the Media Manager to improve accessibility and SEO.
Another important aspect for your shop are your shop pages' meta-data. A precise "title" and an accurate "description" are not only important for SEO, but also for the user experience.
Tip
Make sure that all pages have a precise title and description, which is not only important for SEO, but also for the user experience.
When configuring your colors, make sure that the contrast ratio for text and background colors is sufficient.
Another important aspect is the specifying of the image size (width/height) in the source code.
If for instance the image size is not specified in the source code, the browser has no information about how much space it should take up. Therefore, it does not calculate any space for the image. When the image has been loaded, the image is rendered in the appropriate size. As a result, the surrounding content may shift (layout shift), which is not ideal for SEO optimization.
Unfortunately, the whole thing is not as easy to solve as it sounds. The majority of images in Shopware are added by the shop operator. Therefore, the actual image size is not known in the storefront. You can only optimize manually using CSS:
Example: .header-logo-main-link img { aspect-ratio: auto 220 / 40; }
Tips
A sufficient contrast ratio is essential for the accessibility of your shop. The recommendations from PageSpeed Insights are a valuable guideline in this regard. The Deque University's tool(https://dequeuniversity.com/rules/axe/4.8/color-contrast) can help to precisely check and improve these aspects.
Defining
widthandheightfor images helps browsers to reserve the necessary space in the layout of the page before the image has been loaded. This avoids layout shifts and improves the user experience. Use CSS aspect-ratio for images without fixedwidthandheight.
The control over browser caching through the .htaccess file is really practical in order to reduce loading times for frequent visitors. By setting specific file types for caching, visitors can access the content faster because they load it from their local storage instead of having to download it every time they visit your shop. This means less time waiting and a generally more pleasant shopping experience.
Tip
Controlling browser caching via the
.htaccessfile is an effective method for serving returning visitors more quickly. By defining caching rules for certain file types, you can ensure that users load content from their local storage instead of re-downloading it every time they visit.
We have applied (almost) all* of the above tips in our PageSpeed demo shop. Convince yourself of the result:
Sometimes customers ask us why ThemeWare® has got more CSS, more JS or more HTML code than the Shopware standard theme or other themes from different providers.
Well, that's simply because with ThemeWare® you get the most comprehensive theme in the Shopware Store. The comparison with the Shopware standard theme therefore is a rather lopsided one. It's like comparing apples and oranges: ThemeWare® offers more than 400 configuration fields, the Shopware standard theme 30.
For the numerous sales-promoting configurations, extensions and additional features, more codes are naturally necessary. This simply applies to all custom themes.
We are well aware of this, therefore we put a lot of effort into code optimization and scrutinize each line of a code at least twice and pin as much code as possible to conditions. We are pioneers in this regard and have gained a lot of experience with thousands of customers in recent years. Like everywhere else, there are certainly imitators, but we have designed and developed ThemeWare® for Shopware 6 from the ground up for compatibility (HC-Architecture®) and code reduction. Thanks to ThemeWare® you can benefit from this every day.
Shopware compiles the entire JS code and the entire CSS code of all extensions (plugins, apps and themes) each into a JS file and a CSS file. In terms of file access, this is not wrong, but there is no way to move code for non-visible elements to the end of the HTML document.
With Shopware 6.6, Shopware has made considerable improvements here, especially in the "JavaScript" block, thereby significantly speeding up the storefront.
Tip
Use as few individual JS or CSS codes as possible for individual customizations.
Hint: Anything that ThemeWare® does not need for the representation of the storefront, for example because a feature is not being used, will not be compiled into the storefront. There are also various configuration fields to manually reduce CSS code for unneeded features.
ThemeWare® does not use any external scripts and does not load any external files. You can nevertheless load external scripts or files, of course, but do so thoughtfully.
In this context, we would like to take a brief look at the topic of "fonts": With ThemeWare® you can integrate two fonts into the storefront that are located locally on your server. You can of course also load additional "fonts", but we recommend sticking to two fonts in order to avoid having to load too many font files.
Tip:
Use as few external scripts and files as possible (e.g. Google Fonts or Font Awesome).
These optimizations should improve the PageSpeed of your Shopware installation and ThemeWare® themes significantly. Please note that regular checks and adjustments are necessary to maintain continuous performance.
Tip
Update your Shopware shop regularly to the latest version (e.g. Shopware 6.6).
Update your ThemeWare® Theme regularly to the latest version.
*) Certainly, our server could be a little faster in terms of response time, but for a pure demo shop this is a bit excessive.
