LogoLogo
SearchService PortalManualOthersDeutschRequest support
  • Welcome
  • Knowledge Base
    • Introduction
      • Testing ThemeWare®
      • Installing ThemeWare®
      • Activating ThemeWare®
      • Assigning ThemeWare®
      • ThemeWare® Utilities downloaden
      • Überblick Theme-Konfiguration
      • ThemeWare® bearbeiten
      • Themes kombinieren
      • Farben konfigurieren
      • Schriften konfigurieren
      • Logo einbinden
      • Logo konfigurieren
      • Text-Logo konfigurieren
      • Shop-Navigation konfigurieren
      • Texte im Theme bearbeiten
      • USP-Bar konfigurieren
      • Erlebniswelten verstehen
      • ThemeWare® Demoshops
      • Setting up the home page (ThemeWare® Shopping Experience)
      • Design der Kategorie-Seite anpassen
      • Shopseiten bearbeiten und anlegen
      • Service-Navigation konfigurieren
      • Footer-Navigation konfigurieren
      • Footer konfigurieren
      • Zahlungs- und Versandanbieter Logos
      • Mehrsprachigkeit mit ThemeWare®
      • Mehr als ein ThemeWare® Theme nutzen
      • ThemeWare® erwerben
      • Getting support
      • Updates and news
    • Tutorials
      • Administration
        • Testing ThemeWare®
        • Buying ThemeWare®
        • Renting ThemeWare®
        • Uploading ThemeWare®
        • Installing ThemeWare®
        • Activating ThemeWare®
        • Assigning ThemeWare®
        • Editing ThemeWare®
        • Resetting ThemeWare®
        • Rating ThemeWare®
        • Updating ThemeWare®
        • Cleaning up ThemeWare®
        • Deactivating ThemeWare®
        • Uninstalling ThemeWare®
        • Deleting ThemeWare®
        • Returning ThemeWare®
        • Determining the ThemeWare® version
        • Shopware Updates and ThemeWare®
      • Categories
        • Assign a category layout
        • Cooking pleasure & Provence (Demoshop)
        • Craft & Tradition (Demoshop)
        • Create a category
        • Create a category layout
        • Create a category layout with sidebar
        • Make product boxes more compact
        • Make product listings more compact
        • Mountain air & Adventure (Demoshop)
      • Configuration
        • Child theme
        • Color configuration field
        • Field types in the theme configuration
        • Font configuration field
        • Using SCSS functions in the configuration
        • Using theme variables in the configuration
        • ThemeWare® duplicates
        • Creating a ThemeWare® duplicate
        • Renaming a ThemeWare® duplicate
        • Orphaned configuration fields
      • Custom Fields
      • Debugging
        • Identifying the extension as the cause of the error
        • Debugging error messages
        • Narrowing down errors
        • Identifying the theme as the cause of error
        • Debug mode
      • Demoshops
        • Home page
        • Category "Mountain air & Adventure"
        • Category "Cooking pleasure & Provence"
        • Category "Craft & Tradition"
        • Configuration
      • Fonts
        • Embedding fonts locally
        • Embedding fonts locally using the ThemeWare® Customizing Plugin
        • Font configuration
        • Importing Google Fonts
      • Header
        • Configuring the Shopping Experiences Header
      • Individual customizations
        • Individual customizations by means of CSS
        • Individual customizations by means of SCSS
        • Individual template customizations (Twig, HTML)
        • Individual customizations with the ThemeWare® Customizing Plugin
        • Individual customizations with the ThemeWare® Customizing App (Cloud)
        • Embed custom JavaScript code
        • CSS hierarchy
        • Using Bootstrap in the Storefront
        • Show custom fields in the storefront
      • Landing pages
        • Create a landing page
        • Create a landing page layout
        • Assign a landing page layout
        • Create a home page
      • Miscellaneous
        • Clearing / warming up the Shopware cache
        • Clearing the browser cache
        • Compiling the theme
        • Refreshing the storefront
      • Product pages
        • Create a product layout
        • Create a product layout with sidebar
        • Assign a product layout
      • Shop pages
        • Creating a shop page layout
        • Linking shop pages in the storefront
        • Creating a contact page
        • Creating a GTC page
        • Creating a newsletter page
        • Creating a payment and shipping information page
        • Creating a privacy page
        • Creating a revocation notices page
        • Creating an imprint page
      • Shopping Experiences
        • ThemeWare® CMS styling for Shopping Experiences
        • ThemeWare® CSS classes for Shopping Experiences
        • Adjusting column spacings in CMS blocks
        • Adjusting gaps in CMS blocks
        • CSS classes for full-width sections
        • CSS spacing classes for Shopping Experiences
        • Designing headlines in CMS blocks
        • Designing Shopping Experiences with Bootstrap CSS classes
        • Designing Shopping Experiences with Bootstrap HTML code
        • Embellishing images in CMS blocks
        • Embellishing images in CMS blocks with hover effects
        • Embellishing Shopping Experiences with CSS animations
        • Hide CMS blocks on mobile devices
        • Mark CMS blocks as favourites to find them faster
        • Mark CMS elements as favourites to find them faster
        • Recreating category Shopping Experiences of the demoshops
        • Responsive Shopping Experiences
        • Responsive Shopping Experiences with Bootstrap
        • Show custom fields in Shopping Experiences
      • Shopware Account
        • Renew ThemeWare® Subscription
        • Switch to rental license
      • Shopware Store
        • Finding ThemeWare®
        • Testing ThemeWare®
        • Buying ThemeWare®
        • Renting ThemeWare®
        • Purchasing ThemeWare® after the trial period
        • Renting ThemeWare® after the trial month
      • Solving errors
        • Examining extensions or plugins
        • Examining individual customizations
        • Examining Shopware default theme
        • Performing a ThemeWare® Soft Reset
        • Fixing representation errors
        • Reinstalling ThemeWare®
        • Solving known errors by yourself easily
        • Update the shop
      • Texts: Edit and translate
    • Basic knowledge
      • Update guide
      • Color configuration
      • Font configuration
      • HTML code
      • Identifying the current ThemeWare® Version
      • Images
        • Display mode of images
        • Image sizes
      • Licences
      • Payment methods
      • Plugin Compatibility (HC-Architecture®)
      • Shipping methods
      • Shopping Experiences
        • CMS layout
        • CMS section
        • CMS block
        • CMS element
      • Shopware Compatibility
      • Snippets
      • Supported browsers
      • ThemeWare® data
    • Profi knowledge
      • The ultimate Professional Knowledge
      • Backup of the ThemeWare® configuration
      • Backing up and restoring the ThemeWare® configuration
      • Column CSS classes in ThemeWare® CMS elements
      • Deactivating ThemeWare® via the database
      • Debug mode
      • Editing the database with the Adminer
      • Establishing compatibility with ThemeWare® for Shopware 6
      • Expert mode
      • Expert settings in CMS elements
      • Expert settings in the theme configuration
      • Exporting and importing the ThemeWare® configuration
      • HTML Sanitizer
      • Installing ThemeWare® manually
      • Optimizing Shopping Experiences with Bootstrap CSS classes
      • Optimizing Shopping Experiences with Bootstrap HTML elements
      • Resetting the ThemeWare® configuration
      • SCSS
      • ThemeWare® in the database
      • ThemeWare® on the FTP server
      • Twig
      • Updating ThemeWare® manually
      • Uploading ThemeWare® via FTP
      • Using Bootstrap CSS classes
      • Using Bootstrap HTML code
    • Frequent questions
      • Frequently searched features in ThemeWare®
      • Can I extend the trial month?
      • Can I extend the trial period?
      • Do I have to purchase ThemeWare® again for another domain?
      • Do I have to purchase ThemeWare® again for another Sales Channel?
      • How can I change or translate a text (e.g. of widgets)?
      • How can I change the number of levels in the flyout?
      • How can I embed Google Fonts in a GDPR compliant manner locally?
      • How do I cancel a extension rent?
      • How can I customise snippets for individual Sales Channels?
      • How can I customise texts for individual Sales Channels?
      • How can I fix representation errors?
      • How can I hide CMS blocks on mobile devices?
      • How can I hide the product description in product boxes?
      • How can I make individual customisations?
      • How can I make the listing look more compact?
      • How can I make product boxes more compact?
      • How can I remove the border around a CMS block?
      • How can I remove the borders around CMS blocks?
      • How can I remove the spaces in the listing?
      • How can I use a different configuration for a Sales Channel?
      • How can I use an individual configuration for an additional Sales Channel?
      • How do I configure the autoplay in the image slider?
      • How do I use webfonts in a GDPR compliant manner?
      • How to delete licences correctly?
      • The subscription expires - what now?
      • What does "Already compatible" mean?
      • What does "Not compatible" mean?
      • What does "Now avaiable" mean?
      • What does "With new Shopware version" mean?
      • What does the "Extension Warning" window mean when opening my admin?
      • What image sizes should I use with ThemeWare®?
      • When does the trial month end?
      • When does the trial period end?
      • Why does the header overlay the Shopping Experience?
      • Why does the subscription have to be renewed for bought extensions?
      • Why is the new ThemeWare® version not available?
      • Why is ThemeWare® available several times in the Shopware store?
    • Common issues
      • Storefront
        • Branding is shown despite Licence Key
        • CMS blocks are not displayed in Shopping Experience
        • Gallery sliders have a wrong height on mobile devices
        • Header overlays the Shopping Experience on the home page
        • Listing subcategories are not displayed
        • Oops! An Error Occurred
        • Pop-up (e.g. privacy) is displayed without content
        • Privacy pop-up is displayed without content
        • Representation errors in the storefront
        • Representation errors with a theme duplicate after an update
        • Shipping costs pop-up is displayed without content
        • Sticky top navigation does not work
        • T&C pop-up is displayed without content
        • Unfortunately something went wrong on the product page
      • Administration
        • Administration not accessible
        • Allowed memory size of ... bytes exhausted
        • Bad Request...
        • $color: 0 is not a color
        • $color2: 0 is not a color
        • Configuration fields are missing
        • Configuration fields in the "General" tab
        • Configuration required. Please fill in data in all elements.
        • Error 400 / Theme cannot be saved
        • Error 500 / Themes cannot be saved
        • Error: argument '$color'
        • Error compiling theme
        • Errors occurred. Please check the error list in the editor.
        • Features or configurations are missing
        • New configuration fields are missing in a theme duplicate after update
        • Parse error: failed at $...
        • Preview images in the Shopping Experience editor show placeholder images
        • Saving the theme configuration takes a very long time
        • Simplified representation of the theme configuration
        • Some blocks were not configured sufficiently
        • Theme could not be assigned to sales channel
        • ThemeWare® cannot be updated
        • ThemeWare® update not available
        • Unable to compile theme
        • Unable to compile the theme...
        • Unable to deactivate or uninstall theme
        • Unable to find the theme
        • Undefined variable $...
    • Tips and tricks
      • Image optimization
      • Logo design tips
      • Recommended Extensions or Plugins
      • Technical terms explained
      • The top 10 tips
      • Useful Links
      • Ideales Vorgehen bei der Konfiguration
      • Konfigurationsfelder schnell finden
      • Wie du jede Farbe im Theme Manager findest
    • Shopware
      • Getting Started
        • System Requirements
      • Migration
      • Configuration
        • Shopping Experiences
          • Inserting images into text fields
        • Themes
          • Assign Shopware default theme
        • Extensions
          • Activate extensions
          • Deactivate extensions
          • Install extensions
          • Install extensions manually
          • Purchase extensions
          • Rate extensions
          • Remove extensions
          • Rent extensions
          • Return extensions
          • Uninstall extensions
          • Update extensions
          • Update extensions manually
        • Sales channel
          • Maintenance mode
        • Settings
          • Caches & Indexes
      • Cloud
      • Shopware Extensions
      • Tutorials
      • Update Guides
      • Support
      • Shopware Account
        • Linking up the Shopware Account with the shop
        • Moving Licenses in the Shopware Account to a different Domain
        • Registering the Shopware Account in the administration
        • Rename shop domain
        • Setting up the shop in the Shopware Account
        • Transfer licenses
  • More knowledge
    • ThemeWare® Extras
    • ThemeWare® Tools
      • ThemeWare® Customizing Plugin
      • ThemeWare® Customizing App (Cloud)
      • ThemeWare® Shopping Experiences Import (Plugin)
    • Lexicon
    • Accessibility
    • SEO & Pagespeed
      • PageSpeed Insights
  • Others
    • About ThemeWare®
    • ThemeWare® Demoshops
    • ThemeWare® Manual
    • ThemeWare® Video Tutorial
    • ThemeWare® Utilities
    • 🇩🇪Deutsch
Powered by GitBook
On this page
  • ThemeWare®
  • Convince yourself in our PageSpeed Demo Shop:
  • Pagespeed 🚀
  • Server-Performance
  • HTML-Optimization
  • Image optimization
  • Meta-data
  • Accessibility and SEO
  • Browser-Caching
  • Convince yourself in our PageSpeed demo shop:
  • Reducing unnecessary source code
  • Reducing JavaScript and CSS
  • Reducing external data
  • Conclusion

Was this helpful?

  1. More knowledge

SEO & Pagespeed

PreviousAccessibilityNextPageSpeed Insights

Last updated 3 months ago

Was this helpful?

LogoLogo

ThemeWare®

  • About ThemeWare®
  • ThemeWare® Demoshops
  • ThemeWare® Service Portal
  • ThemeWare® Utilities

Informations

  • Legal notice
  • Newsletter
  • Privacy
  • Support

© 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.

With ThemeWare® we can do a lot for you, but not everything – because SEO & Pagespeed also depend on your settings and individual content.

In this article you will find many useful tips that will help you to optimize your shop.


ThemeWare®

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.


Convince yourself in our PageSpeed Demo Shop:

We have applied (almost*) all of the above tips in our PageSpeed Demo Shop. Convince yourself of the result:


Pagespeed 🚀

Server-Performance

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.


HTML-Optimization

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.


Image optimization

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 .webp format offers higher compression while maintaining the same quality compared to conventional formats such as .jpeg or .png. This further reduces the loading times.

  • Add alt texts to all images via the Media Manager to improve accessibility and SEO.


Meta-data

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.


Accessibility and SEO

Contrast ratio

When configuring your colors, make sure that the contrast ratio for text and background colors is sufficient.

Explicit width and height of image elements

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 width and height for 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 fixed width and height.


Browser-Caching

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 .htaccess file 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.

Example

htaccess
<IfModule mod_headers.c>
    <FilesMatch "\.(ico|jpg|jpeg|webp|gif|png|pdf|mp3|mp4|webm|mov|svg)$">
        Header set Cache-Control "public, max-age=31536000, no-transform"
    </FilesMatch>
    <FilesMatch "\.(html|htm|xml|txt|xsl|css|js|woff2|ttf)$">
        Header set Cache-Control "public, max-age=7200, must-revalidate"
    </FilesMatch>
</IfModule> 

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 week"
    ExpiresByType image/jpeg "access 1 week"
    ExpiresByType image/webp "access 1 week"
    ExpiresByType image/gif "access 1 week"
    ExpiresByType image/png "access 1 week"
    ExpiresByType text/css "access 1 day"
    ExpiresByType text/html "access 1 day"
    ExpiresByType application/pdf "access 1 week"
    ExpiresByType text/x-javascript "access 1 day"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 week"
    ExpiresDefault "access 1 week"
</IfModule>

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE application/atom+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/json
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-web-app-manifest+json
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/webp
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/x-component
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/javascript
</IfModule>

Convince yourself in our PageSpeed demo shop:

We have applied (almost) all* of the above tips in our PageSpeed demo shop. Convince yourself of the result:


Reducing unnecessary source code

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.


Reducing JavaScript and CSS

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.


Reducing external data

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).


Conclusion

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.

LogoThemeWare® PageSpeed InsightsThemeWare® Pagespeed
Discover our PageSpeed Demo Shop
LogoThemeWare® PageSpeed InsightsThemeWare® Pagespeed
Discover our PageSpeed demo shop
100% PageSpeed Insights – Unique Performance, Accessibility, Best Practices and SEO
100% PageSpeed Insights