feat(seo): load img lazily

adrien-chinour · Feb 10, 2024 · 6c1725f · 6c1725f
1 parent 1b8e896
commit 6c1725f
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git a/templates/components/ArticleCardHorizontal.html.twig b/templates/components/ArticleCardHorizontal.html.twig
@@ -3,6 +3,7 @@
         <img class="rounded aspect-video sm:w-64"
              width="600"
              height="337"
+             loading="lazy"
              src="{{ this.article.imageUrl }}"
              alt="{{ this.article.title }}">
 

diff --git a/templates/components/ArticleCardVertical.html.twig b/templates/components/ArticleCardVertical.html.twig
@@ -3,6 +3,7 @@
         <img class="rounded mb-2 aspect-video"
              width="600"
              height="337"
+             loading="lazy"
              src="{{ this.article.imageUrl }}"
              alt="">
         <div class="px-2 md:px-0">

diff --git a/templates/components/ArticleContent.html.twig b/templates/components/ArticleContent.html.twig
@@ -13,6 +13,7 @@
         <img class="rounded mt-4 mx-auto"
              width="1200"
              height="675"
+             loading="lazy"
              src="{{ article.imageUrl }}"
              alt="">
     </header>

diff --git a/templates/components/ArticleSuggestions.html.twig b/templates/components/ArticleSuggestions.html.twig
@@ -5,7 +5,12 @@
             {% for article in this.articles %}
                 <li class="rounded bg-zinc-100 dark:bg-zinc-900 border-zinc-400 border">
                     <a class="group sm:flex analytics-suggestions" href="{{ path('article_view', {slug: article.slug}) }}">
-                        <img width="400" height="225" class="sm:h-16 w-full sm:w-auto aspect-video" src="{{ article.imageUrl }}" alt="{{ article.title }}">
+                        <img width="400"
+                             height="225"
+                             loading="lazy"
+                             class="sm:h-16 w-full sm:w-auto aspect-video"
+                             src="{{ article.imageUrl }}"
+                             alt="{{ article.title }}">
                         <div class="p-2">
                             <p class="font-serif text-lg group-hover:underline">{{ article.title }}</p>
                             <p class="text-sm line-clamp-1 overflow-ellipsis">{{ article.description }}</p>