A high-performing webpage is essential today. This article covers how to optimize your Nuxt app for Google PageSpeed with practical tips to improve load times, boost performance, and enhance user experience. Because our website uses Nuxt, we will explore how did what technics and modules did we use for otpimization to get good score.
Why Google PageSpeed score matters?
Google PageSpeed score is an important metric because it provides insights into how well a webpage is optimized for speed and performance.
It helps us to find how to improve our website performance.
User Experience: A high PageSpeed score typically indicates a faster website, leading to better user experiences. Faster websites tend to keep users engaged longer, increasing the chances they will explore more content. On the contrary, if a page takes too long to load, users may abandon it, resulting in higher bounce rates.
SEO (Search Engine Optimization): On Search Rankings, pages with higher speed scores are more likely to rank better in search results because Google prioritizes user experience and promotes content that loads quickly.
Mobile Optimization: A significant portion of web traffic comes from mobile devices, which often have slower network connections. Google indexes content based on the mobile version of a site. A high PageSpeed score can indicate that the mobile version is well-optimized.
What is the ideal Google PageSpeed score?
The ideal Google PageSpeed Insights score for mobile is 90 or above, it means that your page is well optimized, and meet Google criteria for Search Rankings.
Anyway, achieving a score of 90 or above can be challenging, especially on mobile due to various factors like network conditions and device performance.
Here's a breakdown of what different scores mean for mobile:
- 90-100 (Good): Your page is well-optimized, and users should experience fast load times and smooth interactions. This range is the target for most website owners as it indicates strong performance.
- 50-89 (Needs Improvement): The page has reasonable performance but can benefit from optimization efforts. While it may not be considered slow, there are areas to improve to enhance user experience and SEO rankings.
- 0-49 (Poor): The page is significantly under-optimized and may have slow load times. Users are likely to experience delays, potentially leading to higher bounce rates and reduced engagement.
How about using Nuxt?
For a website with few interaction and less content, we are sure that you will get a good score (90+) on Nuxt. But when you add more content and interaction, third-party library, you endup with 30 - 49 score. If you use best practice for optimization, you will get about between 50 and 60.
So, how to get good score even if you have many interactions and more contents?
We will see, how to use the plugins bellow, to improve our Google PageSpeed score. And how SAHA Technology Google PageSpeed score increase drastically, from 46 to 85+ on mobile.
Here's the list:
Improve your Nuxt Google PageSpeed score using nuxt-delay-hydration.
This module helps us to improve our hydration by delaying some script load. Using this module increase your Google PageSpeed score.
Installation
Terminal
npx nuxi@latest module add delay-hydrationThe module is added automatically into your nuxt.config.ts
nuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-delay-hydration',
],
delayHydration: {
debug: process.env.NODE_ENV === 'development'
}
})The nuxt-delay-hydration module has 3 modes:
nuxt.config.ts
export default defineNuxtConfig({
// ... other config
delayHydration: {
mode: 'init' // init | mount | manual
}
})The result
Only with this module, our website goes from 46 to 80 for mobile and 60 to 90+ for desktop.
For more advanced docs, visit their documentations site.
Automatically optimized font fallback with @nuxtjs/fontaine.
This module is used to reduce layout shift, which is among Google PageSpeed criteria for better user experience.
Installation
Terminal
npx nuxi@latest module add fontaineLike we see before, this will add the module automatically into nuxt.config.ts
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxtjs/fontaine'],
})The result
Using this module reduce our Content Layout Shift, and make our Google PageSpeed score better, 80+ on mobile and 99+ on desktop.
Relocate resource intensive scripts into a web worker with @nuxtjs/partytown.
Partytown is a lazy-loaded library to help relocate resource intensive scripts into a web worker, and off of the main thread.
Installation
Terminal
npm install --save-dev @nuxtjs/partytown
# or with yarn
yarn add --dev @nuxtjs/partytownnuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxtjs/partytown'],
})Our score decrease because of Google Tag Manager.
Because of using Google Tag Manager, which is a powerfull tool for user navigation tracking, our Google PageSpeed score went from 80+ to about 60 on mobile and 99 to 87 on desktop.
Using a third-party library can always penalize a site's performance and negatively impact its Google PageSpeed score.
We know that our score isn't bad at all, but needs to be improved. So after searching everywhere, we found that @nuxtjs/partytown is the right module that we need. This module, is our final Hero.
Usage
nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
script: [
...(
process.env.NODE_ENV === 'production'
? [{ src: 'https://www.googletagmanager.com/gtag/js?id=YOUR-KEY&l=dataLayer&cx=c', type: 'text/partytown' }]
: []
),
],
},
},
})server/plugins/html.render.js
import { defineNitroPlugin } from "nitropack/runtime/plugin";
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook("render:html", (html) => {
const isProduction = process.env.NODE_ENV === "production";
html.head.unshift(`
<script ${isProduction ? ' type="text/partytown"' : ""}>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','YOUR-KEY');</script>`);
});
});
Note that we use isProduction so we can use Google Tag Manager debuger on development.
Using script type text/partytown, doesn't allow Google Tag Manager debug. It generates CORS error. But don't be afraid, the tracking still works in production but can't be debugged using Google Tag Manager. If we have a Google Tag Manager issue on production, we have the possibility to debug it on development.
The result
Using this module increase our score even using Google Tag Manager.
Google PageSpeed score in 05 November 2024
Note: as we know, the score may vary because of many criteria. But you can see bellow our highest Google PageSpeed score screenshot for both mobile and desktop which are both 90+.
Conclusion
Google PageSpeed score is crucial for user experience, SEO, and mobile optimization. Higher scores mean faster load times, better engagement, and improved search rankings. While Nuxt.js can deliver good scores with minimal content, complex sites may need optimization strategies. Using plugins like nuxt-delay-hydration for faster hydration, @nuxtjs/fontaine for optimized font loading, and @nuxtjs/partytown for offloading scripts helps boost scores. SAHA Technology improved their score from 46 to 85+ on mobile using these tools and about 60 to 99 on desktop.
At SAHA Technology, we know that your website's Google PageSpeed score is crucial. A low score can impact your ranking and user experience. We offer a free website audit to help you enhance performance and engagement. You can explore our works if you still hesitate.
Need advice on improving your site? Contact us!