Tips for Improving Website Performance

Tips for Improving Website Performance

Specify width and height for <img> and <video> elements

By specifying the width and height of images and videos, the browser can allocate space in advance. This reduces the occurrence of page redraw and layout shifts, resulting in an improved user experience.

info

For more information on layout shifts, refer to the following documentation:
Understanding Cumulative Layout Shift (CLS)

Add the loading="lazy" attribute to <img> and <iframe> elements outside the first view

To shorten page loading time, you can use the loading="lazy" attribute to enable lazy loading of images outside the first view. This ensures that images are loaded only when the images are scrolled into view.

Optimize the loading of web fonts

When using web fonts, there is a possibility of increased loading time. To prevent this, you can optimize font loading using the rel="preload" attribute and subset the fonts to display only the necessary text.

Load JavaScript at the end of the body

By loading JavaScript at the end of the body, HTML and CSS can be loaded first, allowing the content to be displayed to users more quickly.

Minify HTML, CSS, and JS

Minifying reduces file size by removing unnecessary whitespace and comments. This improves loading speed and overall performance.

Use next-generation image formats like WebP

Next-generation image formats such as WebP offer smaller file sizes compared to JPEG and PNG, resulting in improved performance.

info

For information on using WebP with Kuroco, refer to the following documentation:
Dynamic conversion of images

Compress image and SVG sizes

Compressing image and SVG sizes reduces file size and shortens loading time.

Perform operations using payload when generating pages with SSG

When generating pages using a static site generator (SSG), the pages are pre-rendered, reducing the client-side rendering load. Performing operations using payload allows loading only the necessary data and improves performance.

info

For reducing API requests during page generation with Nuxt.js SSG, refer to the following documentation:
Is there any way to reduce API requests when generating pages in Nuxt.js SSG?

Utilize CDN caching

Using a CDN allows resources to be served from servers closer to the users, reducing loading time. Additionally, leveraging CDN caching can further improve performance.

info

For improving LCP (Largest Contentful Paint) score using CDN, refer to the following documentation:
Improving LCP Score with Kuroco

Reduce third-party JavaScript, such as ads and social media buttons, and load them asynchronously

Third-party JavaScript can increase loading time and degrade performance. By reducing and loading them asynchronously, you can improve performance.

Improve the display of ads, <iframe>, and dynamic content

By specifying the size of these elements, the browser can allocate space in advance and prevent cumulative layout shifts (CLS).

info

For improving CLS (Cumulative Layout Shift) score, refer to the following documentation:
Understanding Cumulative Layout Shift (CLS)

Reduce the number of requests

Reducing the number of requests decreases the server load and shortens page loading time. This can be achieved by combining CSS and JavaScript files, using sprite images, and other techniques.