Teachnique
      CourseRoadmaps
      Login

      Introduction

      Project SetupCLI

      IntroductionAPP RouterTemplateLoading UIError Handling404 Page

      Linking and Navigating

      Dynamic RoutesRoute groupsParallel RoutesIntercepting Routes

      Route handlersCacheCommon Questions

      Middleware

      CSRSSR & SSGISR

      React Server ComponentsServer-Side Rendering

      SuspenseStreaming

      Server & Client ComponentServer vs. Client ComponentBest Practices

      Server-Side Rendering Strategies

      Data Fetching & Caching & RedirectThird-Party Request Libraries on the Server SideBest Practices

      Request MemoizationData CacheFull Route CacheRouter Cache

      Server Actions IFormServer Actions IIOptimistic Update

      Tailwind CSSCSS-in-JSSass

      Environment VariablesAbsolute Imports& Module Path AliasesRoute Segment Config

      Image & LCPImage IImage IIOptimizing IOptimizing II

      Next FontFont ParameterApply Styles

      Feedback

      Submit request if you have any questions.

      Course
      Image & LCP

      Next.js Mastery: From Fundamentals to Full-Stack

      Unlock the power of Next.js with this comprehensive course! Starting with the basics, you’ll learn essential skills such as routing, data fetching, and styling. Progress through practical projects, including building your own React Notes app, to gain hands-on experience. Dive into the source code to understand the inner workings and core principles of Next.js. Perfect for developers with a basic knowledge of React and Node.js, this course ensures you’ll be ready to create high-performance full-stack applications efficiently. Join us and master Next.js, backed by industry experts and a supportive learning community.
      

      Introduction

      This chapter marks the beginning of our exploration into the components section, where we'll delve into four built-in Next.js components: <Image>, <Font>, <Link>, and <Script>. These components are abstractions of native HTML elements, enhanced with optimizations specific to Next.js. Whenever possible, you should utilize these components in your development process.
      • <Image>: Implements lazy loading and automatically adjusts image sizes based on device dimensions.
      • <Link>: Pre-fetches resources in the background, enabling faster and smoother page transitions.
      • <Script>: Allows you to control the loading and execution of third-party scripts, among other features.
      We'll discuss these functionalities and their APIs in detail throughout this section.
      

      Focus on the <Image> Component

      In this chapter, we'll focus on the <Image> component. Images often occupy a significant portion of a webpage's size, making their optimization crucial. Understanding the various props and configurations of the <Image> component will help you use it more effectively, leading to a better user experience.
      

      Images and LCP

      1. Image Proportion

      According to the Web Almanac, images constitute a substantial portion of the typical website's page size. Statistics from June 2021 indicate that the median total size of a website (on mobile devices) was 2019 KB, with images alone accounting for 881 KB. This figure surpasses the combined sizes of HTML (30 KB), CSS (72 KB), JavaScript (461 KB), and fonts (97 KB).
      On most pages (70% on mobile devices, 80% on desktops), images are the most impactful element. The Largest Contentful Paint (LCP) is a web performance metric that identifies the largest content element within the viewport. In most cases, this element is an image.

      2. LCP Background

      Since LCP isn't widely known, let's take a moment to introduce it.
      For web developers, measuring the loading speed of a webpage's primary content has always been a challenge. Traditionally, methods like load and DOMContentLoaded have been used, but these don't accurately reflect the time users see content on the screen.
      Other metrics, such as First Contentful Paint (FCP), can also be misleading, especially if the page has a loading animation. There are also metrics like First Meaningful Paint (FMP), but these can be complex and often incorrect, making them unsuitable for determining the loading time of primary content.
      Based on discussions within the W3C Web Performance Working Group and Google's research, a more accurate method for measuring the loading time of the main content is to observe when the largest element is rendered. This is where LCP comes in.

      3. LCP Concept and Standards

      The LCP metric reports the render time of the largest image or text block visible within the viewport relative to when the page first starts loading.
      To provide a good user experience, websites should aim for an LCP of 2.5 seconds or less.
      Examples of LCP elements:
      
      
      Given that a webpage often loads in stages and the largest element can change, how is the LCP calculated?
      The browser limits LCP elements to specific types (like those mentioned above) to simplify the process—calculating every element's size would be too complex and unnecessary.
      After drawing the first frame, the browser immediately dispatches a largest-contentful-paint type PerformanceEntry to identify the largest content element. As subsequent frames are rendered, the API dispatches another PerformanceEntry whenever the largest content element changes. In simple terms, the browser marks the largest content element on each frame.
      When the user interacts with the page (by clicking, scrolling, or pressing keys), the browser stops reporting new entries, as user interactions typically change the content displayed (e.g., through scrolling). Generally, the startTime value of the last dispatched entry is the LCP value.