opti

assets/styles/main.sass

@@ -18,26 +18,36 @@ $breakPointXXL: 1400px
     font-family: 'Mainfont'
     src: url('@/assets/fonts/montserrat/Montserrat-Light.otf') format("opentype")
     font-weight: normal
+    font-style: normal
+    font-display: swap
 
 @font-face
     font-family: 'Mainfont-Bold'
     src: url('@/assets/fonts/montserrat/Montserrat-Medium.otf') format("opentype")
     font-weight: normal
+    font-style: normal
+    font-display: swap
 
 @font-face
     font-family: 'Comfortaa'
     src: url('@/assets/fonts/Comfortaa-Light.ttf') format("truetype")
     font-weight: normal
+    font-style: normal
+    font-display: swap
 
 @font-face
-    font-family: 'Comfortaa-bold'
+    font-family: 'Comfortaa-Bold'
     src: url('@/assets/fonts/Comfortaa-Bold.ttf') format("truetype")
     font-weight: normal
+    font-style: normal
+    font-display: swap
 
 @font-face
     font-family: 'Typewriter'
     src: url('@/assets/fonts/JMH_Typewriter.ttf') format("truetype")
     font-weight: normal
+    font-style: normal
+    font-display: swap
 
 $fontSizeRoot: 18px
 $fontSizeLarge: calc(1.2rem + 2vw)

components/template/PageFooter.vue

@@ -6,6 +6,7 @@
         xmlns:xlink="http://www.w3.org/1999/xlink"
         viewBox="0 0 500 20"
         class="svgwavetop"
+        aria-hidden="true"
         style="
           transform: scaleY(-1) scaleX(-1) translateY(99%);
           fill: rgba(38, 38, 38, 0.95);
@@ -234,7 +235,7 @@ footer
 
     .footerNav
         h3
-            color: #888
+            color: #b2b2b2
             font-size: .8rem
             text-transform: uppercase
             font-weight: 800

pages/index.vue

@@ -9,8 +9,6 @@
         sizes="100vw"
         alt=""                  
         aria-hidden="true"    
-        loading="eager"
-        preload
         priority  
       />
       <div class="container-10">
@@ -19,7 +17,7 @@
         <h3>{{ $t('home.heroBox.h3') }}</h3>
       </div>
       <!-- Nach dem Container: Spiegelwelle unten -->
-      <svg class="sectionWave wave-bottom" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
+      <svg class="sectionWave wave-bottom" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
             <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
       </svg>  
     </section>
@@ -31,7 +29,8 @@
           src="/uploads/web_wireframe_Strategie_0bae802a68.png"
           alt="Wireframe Web Strategie"
           width="300"   
-          format="webp"  
+          :modifiers="{ format: 'webp' }"
+          sizes="300px"
           loading="lazy"
         />
          
@@ -48,7 +47,7 @@ class="mintBtn"
       </div>
     </section>
     <section class="targetGroup" aria-labelledby="invitation-title">
-      <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
+      <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
             <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
       </svg>  
       <div class="container-10">
@@ -65,7 +64,7 @@ class="pinkBtn" role="button"
           </div>
         </div>
       </div>
-      <svg class="sectionWave wave-bottom" style="transform: scale(-1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
+      <svg class="sectionWave wave-bottom" style="transform: scale(-1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
             <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
       </svg>  
     </section>