What are the best web performance patterns and how do you apply them?

1 Minimize HTTP requests

Having too many HTTP requests is a common cause of slow web performance, which can consume bandwidth, latency, and server resources. To reduce HTTP requests, you can combine and minify CSS and JavaScript files, use CSS sprites or SVG icons for images, implement lazy loading or progressive loading for images and videos, use web fonts sparingly and with font-display, and cache static assets with HTTP headers or service workers. These techniques can help minimize HTTP requests and improve web performance.

2 Optimize images and videos

Images and videos are often the largest and most impactful assets on a web page, however, they can also be the most inefficient if not optimized properly. To ensure optimal performance, you should choose the right format, quality, and compression level for each asset. Additionally, you should use responsive images with srcset and sizes attributes as well as apply image optimization tools or services, such as ImageOptim, TinyPNG, or Cloudinary. For video optimization, you should use tools or services such as HandBrake, FFMPEG, or Mux. Adaptive streaming or media fragments can also be used for video delivery. Optimizing images and videos is essential to ensure a successful web page.

3 Reduce JavaScript blocking

JavaScript is a powerful and versatile language for web development, however, it can block the rendering and interactivity of a web page if not handled carefully. To reduce this blocking, you can use techniques such as loading JavaScript asynchronously or deferentially with the async or defer attributes, splitting and bundling JavaScript code with tools like Webpack or Rollup, using code splitting and dynamic imports to load only the necessary code for each page or feature, and utilizing performance APIs such as requestAnimationFrame, requestIdleCallback, or IntersectionObserver to execute JavaScript code at optimal times.

4 Implement server-side rendering (SSR) or pre-rendering

Server-side rendering (SSR) or pre-rendering are techniques that generate HTML on the server or at build time, rather than on the client. This can bring several benefits, such as reducing the time to first byte (TTFB) and the time to first contentful paint (FCP), enhancing SEO and social media sharing, and improving user perception and engagement. However, SSR and pre-rendering also have drawbacks, like increasing the server load and complexity, reducing interactivity and functionality until JavaScript is loaded, and creating potential mismatches or flashes of unstyled content (FOUC). Therefore, you should consider the advantages and disadvantages of SSR and pre-rendering before deciding to use them with tools like Next.js, Nuxt.js, Gatsby, or React Snap.

5 Leverage browser features and APIs

Modern browsers offer a plethora of features and APIs to improve web performance, such as preloading resources with the <link rel="preload"> or <link rel="prefetch"> tags, establishing early connections to domains with the <link rel="dns-prefetch"> or <link rel="preconnect"> tags, preloading ES modules with the <link rel="modulepreload"> tag, providing multiple sources for images or videos with the <picture> or <source> tags, loading ES modules with the <script type="module"> tag, measuring and analyzing web performance with the Performance, Navigation Timing, Resource Timing, or User Timing APIs, and detecting and adapting to the user's network and device conditions with the Network Information, Device Memory, or Hardware Concurrency APIs.

6 Follow web performance best practices

Apart from the particular patterns discussed, there are also some general web performance best practices that should be implemented. These include setting a performance budget and tracking it with tools like Lighthouse, WebPageTest, or PageSpeed Insights; using HTTPS and HTTP/2 or HTTP/3 protocols for secure and fast communication; applying the critical rendering path and the RAIL model principles to optimize the rendering and interactivity of the web page; utilizing web performance monitoring and analytics tools, such as Google Analytics, New Relic, or SpeedCurve; and testing and optimizing web performance across different browsers, devices, and network conditions with tools like BrowserStack, LambdaTest, or Calibre. Web performance is an ongoing process that requires continuous attention and improvement. By adhering to the web performance patterns and best practices discussed in this article, you can make your web application faster, smoother, and more user-friendly.

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?