Adopt lighthouse recommendations

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/ajax_content_controller.js

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

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/scroll_top_controller.js

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

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/sticky_controller.js

@@ -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() {

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html

@@ -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>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Reminder.html

@@ -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>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html

@@ -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>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html

@@ -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>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html

@@ -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>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html

@@ -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>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html

@@ -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)}"
+                    <f:image src="{settings.logoImage}"
-                         src="{f:uri.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}">
+                             alt="{settings.defaultTitle}"/>
                 </a>
                 <div class="hidden lg:block">
                     <f:render section="FirstLevel" arguments="{_all}"/>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html

@@ -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>