WDD 430 | Learning Activity

Optimizing Fonts and Images

Overview

Adding custom fonts and optimizing images can significantly improve the performance and visual appeal of your Next.js application. They contribute to a better user experience and can help your application load faster.

Prepare

Optimizing Fonts

Custom fonts can enhance the visual appeal of your application, but they must be optimized to ensure fast loading times. Next.js provides built-in support for optimizing font loading and preventing layout shifts.

The Cumulative Layout Shift (CLS) is a metric that measures the visual stability of a web page. It quantifies how much the content shifts during the loading phase. Fonts cause layout shift when the browser initially renders text in a fallback font before the custom font is loaded and swaps out the default causing the text size, spacing, or layout to change mid use.

To optimize font loading and reduce CLS, Next.js automatically optimizes fonts in the application through the next/font package. The font files are downloaded at build time and host them with your other static assets. This ensures no additional network requests are needed to load the fonts, and they are available immediately when the page loads.

To use the optimized font loading, you can import the desired fonts from the next/font package and use them in your components. For example:

import { Geist, Geist_Mono } from 'next/font/google'; 

const geistSans = Geist({ 
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
  variable: '--font-geist-sans',
});

const geistMono = Geist_Mono({
  subsets: ['latin'],
  variable: '--font-geist-mono',
});

export default function RootLayout({ 
  children,
}: Readonly<{ children: React.ReactNode }>
) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
         {children}
      </body>
    </html>
  );
}

Optimizing Images

Images are a crucial part of any web application, but they can significantly impact performance if not optimized properly. Next.js provides built-in support for serving optimized image loading through the next/image component.

With HTML images are added with the img tag, however, this means that the developer must ensure the image is responsive on different devices, specify different image sizes for each device, prevent layout shift as the images load, and lazy load images outside of the user's viewport.

Next.js's next/image component automatically optimizes images by generating multiple sizes of the image and serving the appropriate size based on the user's device and screen resolution. It also includes features like lazy loading, which defers the loading of images until they are about to enter the viewport.

To use the optimized image loading, you can import the Image component from the next/image package and use it in your components. For example:

import Image from 'next/image';
...

<Image
  src="/path/to/image.png"
  alt="Description of the image"
  width={500}
  height={300}
  className="hidden md:inline-block"
/>

Setting the width and height properties ensures the image is properly sized and prevents layout shifts. In addition, the aspect ratio used must be identical to the original image to avoid distortion. These values are not the size the image is rendered, but instead the size of the actual image file use to understand the image's dimensions (aspect ratio).

The hidden class hides the image on mobile device screens and md:inline-block shows it on medium and larger screens.

Activity Instructions

This activity uses the same practice application from the previous learning activity.

Add a custom font to your application using the next/font package. Choose a font from Google Fonts and import it into your application. Use the imported font in your components to enhance the visual appeal of your application.
Optimize the images in your application using the next/image component. Replace any existing img tags with the <Image> component and ensure that you specify the appropriate width and height for each image.