This article was originally published on Vercel.
At Tinloof, we're obsessed with delivering fast websites such as jewelry brand Jennifer Fisher, which went from a Shopify theme to a modern Next.js website that instantly loads with 80% less JavaScript.
When evaluating the speed of a website, they look at key metrics in a typical user journey:
This article covers tips to measure and make each part of the user journey as fast as it gets.
The key to making your site fast and keeping it fast—for any user on any device—is data. Speed is more than just a way to gauge user experience, it's crucial for getting the top spot on any search platform and winning organic page views.
To ensure they're measuring the right data correctly, tools like Google PageSpeed Insights and Vercel Speed Insights are able to provide objective metrics. These tools can be used to diagnose page performance issues, providing insights into aspects like loading times, interactivity, and visual stability.
It's also equally important to test the user journey under various network conditions.
Combining objective tools with a hands-on approach provides a comprehensive view of a website experience, ensuring it’s optimised for all users.
Once key performance metrics are evaluated, the team is able to pinpoint where and how to make improvements in things like server response.
Pre-rendering the page at build-time ensures it is served from a CDN instead of your origin server, resulting in the fastest server response possible. This is done automatically by Next.js if you don’t use the edge
runtime and the page doesn’t rely on cookies, headers, or search parameters.
"I have one server component that fetches a lot of data and makes the entire page slow to load in Next.js 13"
— Alex Sidorenko (@asidorenko_) August 29, 2023
Wrap it with Suspense pic.twitter.com/G8u66MSMNB
Loading shells are not an excuse for slow server responses. Most server responses can be cached instead of making the user wait for them on every page visit. Although this is the default behaviour of fetch
requests in Next.js, you can still control the freshness of this data:
//app/page.tsxexport default function Home() {// The CMS data is guaranteed to be fresh every 2 minutesconst cmsData = await fetch(`https://...`, { next: { revalidate: 120 } });return <h1>{cmsData.title}</h1>}
//app/page.tsxexport default function Home() {// The CMS data is cached until the tag is revalidatedconst cmsData = await fetch(`https://...`, { next: { tags: ['landing-page']);return <h1>{cmsData.title}</h1>}
//app/api/revalidate/route.tsimport { revalidateTag } from 'next/cache';import { NextRequest, NextResponse } from 'next/server';export async function POST(req: NextRequest): Promise<NextResponse> {const secret = req.nextUrl.searchParams.get('secret');const tag = req.nextUrl.searchParams.get('landing-page');if(!tag || !isValid(secret)) {return NextResponse.json({ status: 400});}return revalidate(tag);}
The Next.js guide on caching and revalidation and the App Router explainer video are perfect to help understand these concepts.
Short answer: Make the browser do the least amount of work to render the page.
Once the browser receives a response from the server, it still has to paint the entire page and make it ready for user interactions (e.g. button clicks).
While parsing the HTML and rendering, the browser is also downloading resources such as CSS, JavaScript, font, or image files.
The following tips help make page render fast by making the browser do as little work as possible.
The JavaScript shipped with React websites usually consists of React, Next.js, the application code including the JSX of every single React component, and third-party dependencies.
Once the page HTML is rendered and the JavaScript is downloaded, React goes through a process called “hydration” where it attaches event listeners and state to the components of the page.
Just by using React Server Components you already get a speed bump because:
We moved our Web Analytics dashboard pages to @nextjs App Router and shaved off 800ms of LCP.
— Guillermo Rauch (@rauchg) August 30, 2023
What a time to be alive. pic.twitter.com/YRD1S5SU74
When a component requires interactivity (e.g. state, event listeners), a use client
directive can be used to convert it to a client component which in addition of being rendered in the server, also has its JavaScript shipped to the browser and is hydrated by React.
URLs can be used to store a component state without having to make it a client component that relies on React’s state.
It requires less code to manage the state, turns state buttons to links that work even without JavaScript, and makes it possible to persist the state on page refresh or when sharing the URL.
From `useState` to URL state.
— Lee Robinson (@leeerob) August 7, 2023
Rather than using client-side React state, we can instead lift state up to the URL for color, size, and even the selected image.
With the added bonus you can now "deep link" to specific variations. Yay, using the web platform! pic.twitter.com/J9zCR5yFe8
To minimize the JavaScript footprint of imported child components, it’s a good practice to place client components the furthest possible at the bottom of the components tree.
Move client components to the leaves of the component tree where possible. pic.twitter.com/2QyK6BXbYu
— Alex Sidorenko (@asidorenko_) August 21, 2023
Any client component dependency is more JavaScript for the browser to download, parse, and execute.
Tools such as pkg-size can be used to determine the size impact of NPM packages based on what’s imported from them and help decide between alternatives.
Even when a client component is necessarily heavy, it’s still possible to only download its JavaScript once it’s rendered.
For example, the stockists page on Jennifer Fisher uses mapbox-gl
, an extremely heavy package, to display interactive maps.
Since mapbox-gl
is only used to display maps, its wrapper client component is lazy-loaded so the package bundle is only downloaded when the component is rendered.
You can lazy-load a client component either via next/dynamic
or a combination of React.lazy
and Suspense
, more details can be found on Next.js guide on the topic.
Some third-party dependencies like Google Tag Manager are injected via script tags instead of imports in client components.
@next/third-parties can be used to reduce their impact on page render speed and if dependency is not supported, next/script is also a great option.
Some web fonts are unnecessarily heavy because they include characters not even needed by the website.
In the case of Jennifer Fisher, Tinloof was able to trim out more than 50% of font files using tools such as transfonter.
next/font makes it possible to load local and Google Fonts while providing the following optimizations:
Short answer: use next/image when you can.
The next/image
component provides so many optimizations for local or remote images.
A detailed guide is available on Next.js docs so I’ll only highlight some of them:
lazy
boolean prop is available to do the opposite for critical images.preload
prop is available to make the browser load critical images ASAP.sizes
or loader
are available to customise the behaviour.blurDataURL
to achieve the same with remote images.The next/image
component is just a very handy utility and is not required to achieve the benefits above:
<link rel="preload" as="image" href="..." />
in the document’s head
or using ReactDOM.preload.
Solutions such as Mux, Cloudinary, or CDNs such as Fastly can be used to help optimise video delivery by serving videos as close as possible to users.
A poster image is a must-have for any video and you can either manually set it or easily extract the first frame of the video to be the poster image when using any video CDN.
The best part is that you can use the same image optimizations tips discussed earlier to render the poster image efficiently.
Here’s an example Mux video component that utilises these optimizations and it’s only rendered on the server:
import { preload } from "react-dom";import { unstable_getImgProps as getImgProps } from "next/image";type Props = {playbackId: string;loading: "lazy" | "eager";resolution: "SD" | "HD";};export default function MuxVideo({ playBackId, loading, loading }: Props) {const mp4Url = `https://stream.mux.com/${playbackId}/${resolution === "SD" ? "medium" : "high"}.mp4`;const webmUrl = `https://stream.mux.com/${playbackId}/${resolution === "SD" ? "medium" : "high"}.webm`;// Use `getImgProps` to convert the video poster image to WebPconst {props: { src: poster },} = getImgProps({src: `https://image.mux.com/${playbackId}/thumbnail.webp?fit_mode=smartcrop&time=0`,alt: "",fill: true,});// Preload the poster when applicableif (loading === "eager") {preload(poster, {as: "image",fetchPriority: "high",});}return (<videoautoPlayplaysInlineloopcontrols={false}mutedpreload="none"><source src={mp4Url} type="video/mp4" /><source src={webmUrl} type="video/webm" /></video>);}
For videos that are not required to load immediately, you lazy-load them without causing any layout shift:
'use client';import Image from 'next/image';import { useEffect, useState } from 'react';import useInView from '~/hooks/useInView';import Video, { VideoProps } from './Video';export default function LazyLoadedVideo(props: VideoProps) {const { ref, inView } = useInView({ triggerOnce: true });return (<>{!inView ? (<Imageref={ref as React.RefObject<HTMLImageElement>}alt={'Video poster'}src={props.poster ?? ''}className={props.className}style={props.style}loading={'lazy'}layout="fill"/>) : (<Video {...props} />)}</>);}
The HTML document is a critical resource the browser has to download and parse.
Components such as carousels/sliders, tables, and lists are also usual culprits.
You can use libraries such TanStack Virtual to only render items when they are visible in the viewport while avoiding any layout shifts.
Short answer: Provide feedback to the user as early as possible.
Some user interactions such as URL state navigations when filtering or adding an item to the cart rely on server responses, which are not always immediate, causing slow interactions or leaving the user puzzled on whether something went wrong.
Optimistic UI techniques can be used to make such interactions snappy and provide immediate feedback to users.
The idea is to use JavaScript to show the predicted result to the user without waiting the server to return a response.
It can be achieved either through normal React state management or using React’s useOptimistic hook.
Optimistic updates in Next.js 13 pic.twitter.com/qMTbpLp5dm
— Alex Sidorenko (@asidorenko_) September 23, 2023
Fast websites are more pleasant to use, more engaging to users, and it’s no surprise they directly impact success metrics such as conversion rate and search engine indexation.
Although the tips above are focused on Next.js, the concepts behind them can be used to make any website faster.