CLS avoidance through width and height for the shop logo

CLS avoidance through width and height for the shop logo

by Tanmar Webentwicklung no ratings yet 24 Downloads
Current version:

Version:

To use the wish list, you must accept the necessary cookies. Accept cookies
Can be used in:
Not available
This extension cannot be used in a Shopware Cloud shop.
Cloud
Self-hosted
Shopware 6 status
There will be no Shopware 6 successor for this app.
Support
This manufacturer responds very quickly to support requests
Details
  • Tanma94594822120
  • Tanmar Webentwicklung
  • 1.0.1
  • 14 Apr 2021
  • de_DE en_GB
  • 5.3.0 – 5.3.7
    5.4.0 – 5.4.6
    5.5.0 – 5.5.10
    5.6.0 – 5.6.10
    5.7.0 – 5.7.5
Google Pagespeed Insights outputs the message "Image elements do not have explicit width and... more

Product information

Highlights

  • Improved CLS rating in Google Pagespeed Insights

Features

  • Can be activated per subshop
  • Width and height per subshop
  • Easily configurable

Description

Google Pagespeed Insights outputs the message "Image elements do not have explicit width and height" for Shopware shops that are based on the responsive theme.


The reason is that the logo is displayed without the HTML attributes width and height. Then it is scaled using CSS max-width and max-height so that it adapts to the screen size.

In order to decide how big the logo should actually be displayed, the browser must first download the file and then scale it based on the height of the header.

During this process, a so-called layout shift can occur in which the logo is initially displayed larger and then subsequently reduced. The result is a poorer rating on the Cumulative Layout Shift parameter.

With our plugin you can add these HTML attributes. Simply enter the width and height in the plugin settings with which your logo will be displayed on common mobile devices. This allows the browser to reserve space for the logo before the file itself has been loaded and the CSS has been parsed.

Read, write and discuss reviews... more

Customer reviews

Installation manual

After the installation, set the width and height of your logo in the plugin settings.


You can determine these dimensions, for example, by activating the developer tools of your browser (Ctrl-Shift-I) and reducing the display to the size of a common smartphone (Ctrl-Shift-M). Now click with the right mouse button on the logo and choose "Examine" in the context menu that opens. The browser now frames the logo and shows you the size in which it is displayed.

After you have done this for all desired subshops and selected the "Active" setting for the subshop, activate the plugin and confirm the dialog for clearing the cache.

Changelog

Version 1.0.1

  • Adjustments due to plugin guidelines

Version 1.0.0

First release Shopware Community Store

Bundles (1)

No bundles available for the selected variant. Please select another variant for bundle offers.
Optimize Google pagespeed 2 Extensions
PageSpeed Preload Optimierung: Wichtige Anforderungen vorab laden
CLS Vermeidung durch Breite und Höhe für das Logo
€ 29.75 * € 35.00 *
Open bundle
An error occurred while saving the bundle configuration.
PageSpeed preload optimization: Preload key requests
1x PageSpeed preload optimization: Preload key requests
Tanmar Webentwicklung   € 25.00 *
CLS avoidance through width and height for the shop logo
1x CLS avoidance through width and height for the shop logo
Tanmar Webentwicklung   € 10.00 *

About the manufacturer

Tanmar Webentwicklung Tanmar Webentwicklung Shopware Business Partner Shopware Business Partner 24 Extensions 5 Ø Rating
Current version:

Version:

To use the wish list, you must accept the necessary cookies. Accept cookies

Recently viewed

Shopware Logo
Your opinion matters to us!

Honest feedback is valuable and our basis for improvement. That's why we're asking you to take part in our latest survey on Shopware as a brand. It will probably take you less than 5 minutes.