chore: Lighthouse improvements

macx · Apr 2, 2024 · 5ebd43c · 5ebd43c
1 parent b49b044
commit 5ebd43c
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 3 deletions.
diff --git a/src/components/Figure.astro b/src/components/Figure.astro
@@ -8,9 +8,10 @@ interface Props {
   imageFormat?: string
   alt?: string
   caption?: string | boolean
+  lazy?: boolean
 }
 
-const { imagePath, imageFormat, caption, alt } = Astro.props
+const { imagePath, imageFormat, caption, alt, lazy = true } = Astro.props
 
 const images = import.meta.glob<{ default: ImageMetadata }>(
   '/src/images/**/*.{jpeg,jpg,png}'
@@ -32,6 +33,7 @@ if (imagePath !== undefined && !images[imagePath]) {
         sizes={`(max-width: 480px) 380px, (max-width: 800) 670px, 710px`}
         format={imageFormat ? 'png' : undefined}
         alt={alt}
+        loading={lazy ? 'lazy' : 'eager'}
       />
     ) : (
       <slot />

diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -15,7 +15,7 @@ const filteredPages = pages
   .sort((a, b) => (a.frontmatter.sort > b.frontmatter.sort ? 0 : -1))
 ---
 
-<nav role='navigation' class='navigation' aria-role='navigation'>
+<nav role='navigation' class='navigation'>
   <div class='navigation-items'>
     <ul>
       <li class='home'>
@@ -86,7 +86,11 @@ const filteredPages = pages
       <ThemeButton />
     </li>
     <li>
-      <a href='#top' class='header-button js-toggle-nav'>
+      <a
+        href='#top'
+        class='header-button js-toggle-nav'
+        title='Nach oben scrollen'
+      >
         <Icon name='material-symbols:arrow-upward-rounded' />
       </a>
     </li>

diff --git a/src/components/ThemeButton.astro b/src/components/ThemeButton.astro
@@ -6,6 +6,7 @@
   id='themeToggle'
   aira-hidden='true'
   arial-labeledby='theme-toggle-button'
+  title='Theme ändern'
 >
   <svg
     width='30px'

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -84,6 +84,7 @@ const { title, description, pubDate, toc, cover, ogType } =
           let button = document.createElement('button')
           button.className = 'copy-code-btn'
           button.innerHTML = copyIcon
+          button.title = 'Code in die Zwischenablage kopieren'
           codeBlock.appendChild(button)
 
           button.addEventListener('click', async () => {

diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro
@@ -52,6 +52,7 @@ const toc = true
           imagePath={cover.path}
           caption={cover.caption}
           alt={cover.alt}
+          lazy={false}
         />
       )
     }