Vaah Docs
Guide

Vue and Nuxt Performance Improvement

Introduction

  • This is a guide to improve Vue & Nuxt app performance.
  • A test-case list named HTML Common Mistake has been added to the WebReinvent Teams portal to enhance page speed.

How to import the test list

  • Login to the webreinvent teams portal.
  • Navigate to the task you're working on.
  • Scroll down and locate the HTML Common Mistakes in the search bar under Test Cases List.
  • Import the test list.

What Is A Page Loading Time

Page loading time is how long it takes for a website page to show up on your screen, from the moment you click on it to when it's fully loaded in your web browser. This matters for both mobile and desktop users.

A slow page speed can make your website seem glitchy, affect search engine rankings, and drive away visitors. Losing mobile and desktop users happens quickly.

How To Measure Page Speed

Discovering your page loading time is crucial.

Utilize tools like:

By regularly monitoring and optimizing your page speed, you'll ensure a seamless experience for your users, keeping them engaged and satisfied.

Improve Page Speed

Preload Critical Assets to Improve Page Speed

When you visit a website, your browser asks the server for the main webpage, reads it, and then asks for other stuff the page needs. If you're a developer, you know what your page needs and what's really important. You can be smart about it and ask for the important stuff first, making the webpage load faster. It's like telling the computer what to get first, so you see the webpage quicker!

So to achieve this, you can preload important resources by adding a <link> tag with rel='preload' and as={script/style} to the head of your HTML document.

Example

<!--preload js file-->
<link rel="preload" as="script" href="critical.js">

<!--preload css file-->
<link rel="preload" as="style" href="critical.css">

Learn more about How preload works

Optimize Images

Use srcset Attribute In Image Tag

Using srcset isn't just about making your images look good—it's a powerful tool to supercharge your website's performance. By serving different images to different screens, you're not only optimizing visuals but also increasing page speed.

Smaller screens get smaller images, and larger, high-res screens get the quality they deserve. This smart approach reduces unnecessary data loading, making your website lightning-fast. Faster load times not only delight visitors but also impress search engines.

Example

<img src="default.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px" alt="Description">

Here's a breakdown:

src: The default image that will be displayed if the browser doesn't support srcset.

srcset: Specifies a list of images with their corresponding widths. The browser chooses the most appropriate image based on the user's device characteristics.

sizes: Defines a set of media conditions and corresponding image sizes, helping the browser to select the appropriate image based on the viewport size.

Click here to see this in action.

Speed Up with WebP Image Format

WebP is a modern image format offering superior compression, maintaining high quality while reducing file sizes. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

Consider using WebP for:

  • Improved Compression: Faster loading times with smaller files.
  • Quality Retention: Crisp visuals without sacrificing performance.
  • Transparency Support: Both lossy and lossless compression, plus transparency.
  • Browser Compatibility: Widely supported across modern browsers.

How to Use WebP

Conversion Tools: Use webp converter, cwebp, online converters, or graphic design software.

HTML Implementation: Use or source elements to include WebP versions.

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

See how webP works .

Use of fetchpriority Attribute

The fetchPriority property of the HTMLImageElement interface represents a hint given to the browser on how it should prioritize the fetch of the image relative to other images.

Value

A string representing the priority hint. Possible values are:

high: Fetch the image at a high priority relative to other images.

low: Fetch the image at a low priority relative to other images.

auto: Default mode, which indicates no preference for the fetch priority. The browser decides what is best for the user.

Example

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high">
  <img src="img/carousel-2.jpg" fetchpriority="low">
  <img src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>

You can specify fetchpriority='high' to boost the priority of the LCP or other critical images.

Lazy-load Images

Lazy loading is like waiting to fetch pictures until you're about to see them. It's like saving time by only getting what you need right now, instead of everything all at once. This trick helps websites load faster.

Why Do It instead Of Simply Loading Them?

Lazy loading images or videos is a smart move because, otherwise, you might load things the user won't even see. Here's why that's not great:

  • Data Waste: On unlimited data, not a big deal, but on limited plans, it's like spending money on something you don't use. Better to use that data for things the user will actually see.
  • Resource Waste: Loading stuff that's never seen takes up processing time, battery, and other system resources. After downloading, the browser has to do extra work to show it.

Benefits of Lazy Loading:

  • Faster Page Load: Lazy loading trims down the initial page load time.
  • Lighter Page: Initial page weight reduces because only necessary things load first.
  • Efficient Resource Usage: Saves system resources by only loading what's necessary.

Example

<img src="your-image.jpg" alt="Description" loading="lazy">

Specify height and width to Avoid Cumulative Layout Shift (CLS)

What is CLS

Cumulative Layout Shift (CLS) is like reading a webpage, and suddenly the words or pictures move around unexpectedly. It's when the layout changes while you're trying to see or click something.

For example, if an image makes the text you're reading jump, that's CLS. It's measured to make sure websites stay steady and don't surprise you with annoying shifts while you're using them.

Improve CSL

When adding images in HTML, use correct width and height attributes to inform the browser about the space needed for the image in the layout.

Example

<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">

Instead of explicitly setting the width and height for images, you can use the CSS aspect-ratio property. It maintains a consistent aspect ratio for the container, similar to specifying width and height. However, be aware that it might use a different aspect ratio than the image provided. To avoid distortion, use the object-fit: 'cover' setting.

Example

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

Using NuxtImage Module

Installation

Add @nuxt/image dependency to your project:

npm install @nuxt/image

Add it to modules in your nuxt.config:

export default defineNuxtConfig({
  modules: [
    '@nuxt/image',
  ]
})

You can now start using <NuxtImg> and <NuxtPicture> components in your application

<NuxtImg>

  • Use <NuxtImg> in replacement for the native <img> tag.

Benefits of <NuxtImg>

  • Uses built-in provider to optimize local and remote images
  • Converts src to provider optimized URLs
  • Automatically resizes images based on width and height
  • Generates responsive sizes when providing sizes option
  • Supports native lazy loading as well as other <img> attributes

Example

<NuxtImg src="/nuxt-icon.png" />

Will result in

<img src="/nuxt-icon.png" />

With default provider you should put /nuxt-icon.png inside public/ directory for Nuxt 3 make the above example work.

Using NuxtImg you can do much more optimization refer to <NuxtImg> component.

<NuxtPicture>

  • Use <NuxtPicture> in replacement for the native <picture> tag.
  • <NuxtPicture> allows serving modern formats like webp when possible.

Example

<NuxtPicture format="avif,webp" src="/nuxt-icon.png" ... />

Learn more about <NuxtPicture> component.

Nuxt

VaahCLI

Copyright © 2024