Adopt lighthouse recommendations

2021-12-26 20:04:29 +01:00
parent 2a44103ba3
commit a497edd437
11 changed files with 24 additions and 8 deletions
@@ -22,7 +22,7 @@ export default class extends Controller {
    connect() {
        window.addEventListener('scroll', () => {
            this.load()
-        })
+        }, { passive: true })
    }

    disconnect() {
@@ -12,7 +12,7 @@ export default class extends Controller {
    connect() {
        window.addEventListener('scroll', () => {
            this.toggle()
-        })
+        }, { passive: true })
    }

    toggle() {
@@ -19,13 +19,13 @@ export default class extends Controller {
    connect() {
        window.addEventListener('scroll', () => {
            this.toggle()
-        })
+        }, { passive: true })
    }

    disconnect() {
        window.removeEventListener('scroll', () => {
            this.toggle()
-        })
+        }, { passive: true })
    }

    toggle() {
@@ -15,6 +15,8 @@
                    <f:if condition="{image}">
                        <f:then>
                            <img class="block rounded-full w-full h-auto lazyload"
+                                 width="400"
+                                 height="400"
                                 data-src="{f:uri.image(image: image, width: '400', height: '400c')}"
                                 alt="{image.alternative}" title="{image.title}">
                        </f:then>
@@ -10,7 +10,9 @@
            <a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
                <f:if condition="{image}">
                    <f:then>
-                        <img class="scale lazyload" data-src="{f:uri.image(image: image, width: '400')}"
+                        <img class="scale lazyload"
+                             data-src="{f:uri.image(image: image, width: '400')}"
+                             width="400"
                             alt="{image.alternative}" title="{image.title}">
                    </f:then>
                    <f:else>
@@ -12,6 +12,8 @@
                    <f:if condition="{image}">
                        <f:then>
                            <img class="block w-full h-auto rounded-full lazyload"
+                                 width="400"
+                                 height="400"
                                 data-src="{f:uri.image(image: image, width: '400', height: '400c')}"
                                 alt="{image.alternative}" title="{image.title}">
                        </f:then>
@@ -16,6 +16,8 @@
                        <f:then>
                            <img class="block rounded-full w-full h-auto lazyload"
                                 data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
+                                 width="400"
+                                 height="400"
                                 alt="{teaserImage.alternative}" title="{teaserImage.title}">
                        </f:then>
                        <f:else>
@@ -12,6 +12,8 @@
                    <f:if condition="{teaserImage}">
                        <f:then>
                            <img class="block w-full h-auto rounded-full lazyload"
+                                 width="400"
+                                 height="400"
                                 data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
                                 alt="{teaserImage.alternative}" title="{teaserImage.title}">
                        </f:then>
@@ -160,6 +160,8 @@
                       title="Global Compact">
                        <img class="w-full h-auto lazyload"
                             data-src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/global_compact.png')}"
+                             width="100"
+                             height="121"
                             alt="Global Compact"/>
                    </a>
                </div>
@@ -9,9 +9,9 @@
                <a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
                   class="block lg:pb-4"
                   title="{settings.defaultTitle}">
-                    <img class="block w-auto {ep:themeClasses(classes: '{ep: \'h-10 lg:h-12\', sbw: \'h-14 lg:h-24\', snz: \'h-14 lg:h-24\', uch: \'h-12 lg:h-20\'}', key: settings.themekey)}"
-                         src="{f:uri.image(src: settings.logoImage)}"
-                         alt="{settings.defaultTitle}">
+                    <f:image src="{settings.logoImage}"
+                             class="block w-auto {ep:themeClasses(classes: '{ep: \'h-10 lg:h-12\', sbw: \'h-14 lg:h-24\', snz: \'h-14 lg:h-24\', uch: \'h-12 lg:h-20\'}', key: settings.themekey)}"
+                             alt="{settings.defaultTitle}"/>
                </a>
                <div class="hidden lg:block">
                    <f:render section="FirstLevel" arguments="{_all}"/>
@@ -18,6 +18,8 @@
            )}  350w"/>
            <img class="scale lazyload" title="{image.title}" alt="{image.alternative}"
                 src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '500', height: '250')}"
+                 width="500"
+                 height="250"
                 data-src="{f:uri.image(image: image, width: '500', height: '250c-100')}"
             >
        </picture>
@@ -46,6 +48,8 @@
            )}  320w"/>
            <img class="scale lazyload" title="" alt=""
                 src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '500', height: '250')}"
+                 width="500"
+                 height="250"
                 data-src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', width: '500', height: '250c-100')}"
             >
        </picture>