Performance Issue: Improve LCP by Optimizing and Sizing Images Properly

[billychen0894]

Description: When working with images in Next.js apps, it's recommended to use the component provided by Next.js. This component extends the functionality of the HTML element and handles image optimization automatically. However, after conducting performance tests using Lighthouse, the results suggest there is significant room for improvement in image optimization. This inefficiency is impacting the loading time of the first page.

Steps to Reproduce:

1. In a Next.js app, utilize the component.
2. Specify the necessary properties for the , including src, width, and height for image sourcing. This applies to both static and dynamic image imports.
3. Run the app and conduct Lighthouse tests.

Current Behavior: While Next.js offers automatic image optimization through the component, its effectiveness is compromised when handling large image sizes. Without correctly specifying the width and height properties to maintain the correct aspect ratio, it may result in layout shifts. Additionally, the sizes property, while not mandatory, becomes crucial when working with larger images. Specifying sizes instructs Next.js to generate an appropriate srcset for various viewport sizes, allowing the browser to select the most suitable image size from the server based on the current viewport. Failing to specify sizes may lead to the unnecessary download of larger images, causing delays in loading time. Not to mention that priority is also crucial when working with larger images, especially when they are the largest contentful elements. While is not specified with priority, these elements will be lazy-loaded by default. However, this is not the case for the largest contentful elements.

Expected Behavior: Optimizing the component by specifying the correct aspect ratio and sizes will prevent layout shifts and improve the Largest Contentful Paint (LCP) metric. To determine the correct aspect ratio, inspect the "rendered size" in the DevTools by hovering over the rendered image. For determining the proper sizes values, you can use the Image Linter to inspect linting errors in rendering images on the web. By bookmarking this tool and running your app with the image in view, you can generate linting results, which will provide the correct sizes values. By specifying priority on , Next.js disables lazy loading of the and considers the as high priority, triggering preloading.

Environment: Next.js version: 14.0.1 Node.js version: 18

Screenshots of the Performance before Optimization:

[billychen0894]

After following the best practice of optimizing images from the resource of Next.js docs and Lighthouse as well as utilizing Cloudinary service, the Largest Contentful Paint(LCP) metric has been dramatically reduced by an average of 3 seconds. This helps the first homepage load fast enough and prevents from page load delay and blocking time.

The images has been optimized in terms of the following:

• Sizes: makes images to be responsive to the device viewport.
• Aspect ratio: keeps images remain in an aspect ratio to prevent layout shift
• Quality: keeps image quality at minimum qualified visualization to reduce image file size
• Format: uses webp image format to keep file size as small as possible while maintaining good quality
• Placeholder: utilizes image placeholder for loading images until the browser completes downloading the file

The below is the PR that relates to the image optimization:

• Dev: Image optimization for reducing image file size #76
• Dev: add business logics to products SKU and deletion & major optimization on images #75

The below is the snippets of the Lighthouse performance result after optimization: