CLS avoidance through width and height for the shop logo

by Tanmar Webentwicklung

Rating: no rating ( write a review )

Downloads: <50

With this plugin you define a fixed size for the shop logo. In this way you can avoid layout shifts and improve the CLS rating measured by Google in Pagespeed Insights.

Annually €2.00* /month €24.00* /year

Monthly €2.00* /month Cancelable monthly

Compatible with:

5.3.0 - 5.7.19

Includes:

Free trial month

The subscription starts with a free trial month during which it can be canceled at any time.

All updates

During the subscription all released updates are included for free

Support from the Extension Partner

In case you have any questions or problems with your extension you can always ask the Extension Partner for help during the subscription.

Shopware 6 status:

There will be no successor for this extension

Description

Highlights

Improved CLS rating in Google Pagespeed Insights

Features

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

About the Extension

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.