NextJS Performance Optimization Syllabus

Performance Optimization syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Performance Optimization in NextJS, not a summary of it.

1. 1

   Image Optimization

   3 topics

   • Next.js Image Component
   • Responsive Images
   • Image Formats and Optimization
2. 2

   Code Splitting

   3 topics

   • Automatic Code Splitting
   • Dynamic Imports
   • Lazy Loading Components
3. 3

   Caching and CDN

   3 topics

   • Static File Caching
   • Using a CDN with Next.js
   • Server-Side Caching

Performance Optimization flashcards for NextJS

23 of 51 cards from the Performance Optimization deck — real questions with worked answers.

1. What is the purpose of the Next.js Image Component (next/image)?

   It is a built-in component that automatically optimizes images by handling resizing, format conversion, lazy loading, and preventing layout shift, replacing the standard HTML <img> tag.

2. Which import statement is used to bring in the Next.js Image Component?

   import Image from 'next/image'

3. Name three optimizations the next/image component performs automatically.

   Automatic resizing/responsive sizing, serving modern formats (WebP/AVIF), and lazy loading images by default (loading only when they enter the viewport).

4. Which two props are required on a next/image component when NOT using the fill layout?

   width and height (in pixels), so Next.js can reserve space and prevent Cumulative Layout Shift (CLS).

5. How does the next/image component help reduce Cumulative Layout Shift (CLS)?

   By requiring explicit width and height (or fill), it reserves the correct space before the image loads, so surrounding content does not jump.

6. What does the fill prop do on a next/image component?

   It makes the image expand to fill its parent container (which must be positioned relative/absolute/fixed), removing the need for explicit width and height.

7. What is the purpose of the priority prop on next/image?

   It disables lazy loading and preloads the image with high fetch priority, used for above-the-fold images such as the LCP (Largest Contentful Paint) element.

8. Why should you set priority on the Largest Contentful Paint (LCP) image?

   Because LCP images should load as early as possible; priority preloads them, improving the LCP metric instead of deferring them via lazy loading.

9. What is the default value of the loading prop on next/image?

   'lazy' — images are lazy-loaded by default unless priority is set.

10. What must you configure to use next/image with images from an external domain?

    You must whitelist the domain in next.config.js under images.remotePatterns (or the older images.domains) so Next.js is allowed to optimize remote images.

11. In next.config.js, which images configuration key is the modern way to allow external image sources?

    images.remotePatterns (an array of pattern objects with protocol, hostname, port, and pathname).

12. What are responsive images and why do they matter for performance?

    Responsive images serve different image sizes based on the device's screen size and resolution, so small devices download smaller files, reducing bandwidth and load time.

13. Which HTML attributes underlie responsive image behavior that next/image generates automatically?

    The srcSet attribute (a list of image candidates at different widths) and the sizes attribute (which tells the browser the display size).

14. What does the sizes prop on next/image do?

    It tells the browser how large the image will be displayed at various breakpoints, so the browser can pick the optimal source from srcSet; important when using fill or responsive layouts.

15. What is the deviceSizes configuration used for in next/image?

    It defines the set of device width breakpoints Next.js uses to generate the srcSet for full-width responsive images.

16. What is the difference between deviceSizes and imageSizes in Next.js image config?

    deviceSizes are breakpoints for images that scale with the viewport (full-width), while imageSizes are smaller fixed widths used for images sized with the sizes prop (e.g., thumbnails).

17. Which two modern image formats does Next.js serve automatically when the browser supports them?

    WebP and AVIF (configured via images.formats), which are smaller than JPEG/PNG at comparable quality.

18. Order these formats by typical compression efficiency (smallest file first): JPEG, WebP, AVIF.

    AVIF < WebP < JPEG. AVIF typically produces the smallest files, WebP is smaller than JPEG, and JPEG is the largest of the three.

19. What does the quality prop control on next/image, and what is its default?

    It controls the compression quality of the optimized image on a scale of 1 to 100; the default is 75.

20. When should you prefer PNG over JPEG for an image?

    When the image requires transparency or has sharp edges/flat colors (logos, icons, screenshots); PNG is lossless, whereas JPEG is lossy and better for photographs.

21. What is the trade-off expressed by lossy versus lossless image compression?

    Lossy compression (JPEG/WebP/AVIF) discards some data for much smaller files, while lossless (PNG) preserves all data at the cost of larger file size.

22. How does the next/image placeholder='blur' feature improve perceived performance?

    It shows a small blurred version of the image while the full image loads, improving perceived loading and reducing visual pop-in.

23. What is automatic code splitting in Next.js?

    Next.js automatically splits your JavaScript into separate bundles per page/route so that a user only downloads the code needed for the page they visit, rather than the entire app.

See more Performance Optimization flashcards →

Planning Performance Optimization for NextJS

Performance Optimization (NextJS) FAQ