try to improve google page speed

hlassiege · Nov 12, 2023 · d71a7e9 · d71a7e9
1 parent 084e372
commit d71a7e9
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 29 deletions.
diff --git a/components/BlogCard.vue b/components/BlogCard.vue
@@ -4,19 +4,21 @@
         class="mb-4 bg-white border border-gray-200 min-h-[400px] border-b-2 border-b-slate-400 hover:drop-shadow-xl hover:border-gray-300 transition-all hover:-translate-y-1"
     >
         <NuxtLink class="overflow-hidden" :to="postLink">
-            <img
+            <NuxtImg
                 v-if="img"
                 class="object-cover w-full h-52"
                 :src="'/images/' + img"
                 loading="lazy"
-                alt=""
+                format="webp"
+                alt="Blog post cover"
             />
-            <img
+            <NuxtImg
                 v-else
                 class="object-contain w-full h-52"
                 src="/images/post-anonymous.jpg"
                 loading="lazy"
-                alt=""
+                format="webp"
+                alt="Blog post cover"
             />
         </NuxtLink>
         <div class="p-3">
@@ -34,6 +36,7 @@
                     v-for="tag in tags"
                     :key="tag"
                     :href="'/blog?tag=' + tag"
+                    :aria-label="`More about ${tag}`"
                     class="m-1 leading-loose text-slate-400 border border-current lowercase px-2 rounded font-medium"
                     @click.prevent="$emit('changeCurrentTag', tag)"
                     >#{{ tag }}</a

diff --git a/components/HeroSection.vue b/components/HeroSection.vue
@@ -1,6 +1,6 @@
 <template>
     <section class="hero-banner">
-        <img src="lofi.svg" class="hero-banner-img" />
+        <NuxtImg src="lofi.svg" class="hero-banner-img" alt="Blog Banner" />
         <slot name="content"> </slot>
     </section>
 </template>

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -18,7 +18,7 @@ export default defineNuxtConfig({
     },
 
     css: ["@/assets/css/main.css", "@/assets/scss/main.scss"],
-    modules: ["@nuxt/content", "@nuxtjs/tailwindcss", "@nuxt/image-edge"],
+    modules: ["@nuxt/content", "@nuxtjs/tailwindcss", "@nuxt/image"],
     content: {
         markdown: {
             remarkPlugins: ["remark-reading-time"],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@nuxt/content": "2.9.0",
-    "@nuxt/image-edge": "1.0.0-28324167.9427c1c",
+    "@nuxt/image": "1.0.0",
     "@nuxtjs/feed": "2.0.0",
     "@nuxtjs/redirect-module": "0.3.1",
     "@nuxtjs/sitemap": "2.4.0",

diff --git a/pages/fr/index.vue b/pages/fr/index.vue
@@ -73,6 +73,7 @@
                                 <NuxtLink
                                     class="relative inline-block group focus:outline-none focus:ring"
                                     to="/blog"
+                                    aria-label="Read more blog posts"
                                 >
                                     <span
                                         class="absolute inset-0 transition-transform translate-x-1.5 translate-y-1.5 bg-pink-300 group-hover:translate-y-0 group-hover:translate-x-0"
@@ -81,7 +82,7 @@
                                     <span
                                         class="relative inline-block px-8 py-3 text-sm font-bold tracking-widest text-black uppercase border-2 border-current group-active:text-opacity-75"
                                     >
-                                        Read more
+                                        Read more blog posts
                                     </span>
                                 </NuxtLink>
                             </div>
@@ -91,6 +92,7 @@
                             <NuxtLink
                                 class="relative inline-block group focus:outline-none focus:ring"
                                 to="/blog"
+                                aria-label="Read more blog posts"
                             >
                                 <span
                                     class="absolute inset-0 transition-transform translate-x-1.5 translate-y-1.5 bg-pink-300 group-hover:translate-y-0 group-hover:translate-x-0"
@@ -99,7 +101,7 @@
                                 <span
                                     class="relative inline-block px-8 py-3 text-sm font-bold tracking-widest text-black uppercase border-2 border-current group-active:text-opacity-75"
                                 >
-                                    Read more
+                                    Read more blog posts
                                 </span>
                             </NuxtLink>
                         </div>

diff --git a/pages/index.vue b/pages/index.vue
@@ -73,6 +73,7 @@
                                 <NuxtLink
                                     class="relative inline-block group focus:outline-none focus:ring"
                                     to="/blog"
+                                    aria-label="Read more blog posts"
                                 >
                                     <span
                                         class="absolute inset-0 transition-transform translate-x-1.5 translate-y-1.5 bg-pink-300 group-hover:translate-y-0 group-hover:translate-x-0"
@@ -81,7 +82,7 @@
                                     <span
                                         class="relative inline-block px-8 py-3 text-sm font-bold tracking-widest text-black uppercase border-2 border-current group-active:text-opacity-75"
                                     >
-                                        Read more
+                                        Read more blog posts
                                     </span>
                                 </NuxtLink>
                             </div>
@@ -91,6 +92,7 @@
                             <NuxtLink
                                 class="relative inline-block group focus:outline-none focus:ring"
                                 to="/blog"
+                                aria-label="Read more blog posts"
                             >
                                 <span
                                     class="absolute inset-0 transition-transform translate-x-1.5 translate-y-1.5 bg-pink-300 group-hover:translate-y-0 group-hover:translate-x-0"
@@ -99,7 +101,7 @@
                                 <span
                                     class="relative inline-block px-8 py-3 text-sm font-bold tracking-widest text-black uppercase border-2 border-current group-active:text-opacity-75"
                                 >
-                                    Read more
+                                    Read more blog posts
                                 </span>
                             </NuxtLink>
                         </div>