Frontend Performance Checklist

• Avoid @import in CSS

  Prevent nested dependency chains by allowing the browser to discover and download CSS files in parallel rather than waiting for parent stylesheets to parse.

  High impact Low effort LCP CSS

• Avoid unnecessary HTTP redirects

  Eliminate server-side redirects to prevent additional round-trip latency, ensuring the browser can discover and fetch the final document as quickly as possible.

  High impact Low effort LCP Network

• Compress image files

  Reduce raw file size through lossy or lossless optimization to decrease total transfer time and lower the impact on Largest Contentful Paint (LCP).

  High impact Low effort LCP Images

• Control text visibility with font-display

  Ensure text remains visible during font loading by using values like swap for speed or optional for stability, preventing "Flash of Invisible Text" (FOIT).

  High impact Low effort CLS LCP CSS Fonts

  (opens in new tab)

• Enable Brotli and Gzip compression

  Implement both algorithms to maximize compression ratios for modern browsers with Brotli while maintaining a stable Gzip fallback for universal compatibility.

  High impact Low effort LCP Network

• Lazy-load off-screen images

  Defer the loading of images outside the initial viewport using the loading="lazy" attribute to prioritize critical resources and reduce initial bandwidth usage.

  High impact Low effort LCP Images

  (opens in new tab)

• Limit font families and weights

  Reduce the number of separate assets requested, lowering total HTTP overhead and streamlining the critical rendering path.

  High impact Low effort LCP Fonts

• Load CSS before JS

  Unblock the render tree by loading stylesheets first, ensuring the CSSOM is ready before scripts execute to prevent layout shifts and a flash of unstyled content (FOUC).

  High impact Low effort CLS LCP HTML

• Minify CSS

  Strip whitespace and comments to reduce file size, speeding up network delivery and accelerating the construction of the CSSOM.

  High impact Low effort LCP CSS

• Minify JS

  Strip whitespace, comments, and simplify variable names to shrink payload size, reducing both download time and the effort required for the browser to parse the code.

  High impact Low effort LCP JS

• Optimize script execution with async and defer

  Prevent external scripts from blocking the HTML parser by downloading them in parallel in the background, speeding up DOM construction and initial page render times.

  High impact Low effort INP LCP HTML JS

  (opens in new tab)

• Preconnect to third-party font origins

  Use <link rel="preconnect"> to establish early connections to external hosts (like Google Fonts), eliminating DNS, TCP, and TLS latency before the font files are requested.

  High impact Low effort LCP Fonts

  (opens in new tab)

• Preload hero images

  Use <link rel="preload"> to discover above-the-fold images earlier in the network waterfall, ensuring the fetch starts before the browser parses the full CSS or DOM.

  High impact Low effort LCP Images

  (opens in new tab)

• Preload self-hosted fonts

  Use <link rel="preload"> to force the browser to download critical local font files immediately, preventing delays caused by waiting for CSS parsing and discovery.

  High impact Low effort LCP Fonts

  (opens in new tab)

• Prioritize fetching of hero images

  Apply fetchpriority="high" attribute to signal that the hero image is a top-priority resource, ensuring it is fetched ahead of non-critical assets to minimize Largest Contentful Paint (LCP).

  High impact Low effort LCP Images

  (opens in new tab)

• Serve static assets from a CDN

  Deploy images, scripts, and stylesheets to a Content Delivery Network to reduce the physical distance between the user and the server, lowering latency globally.

  High impact Low effort LCP Network

• Set Cache-Control headers

  Configure robust caching policies to store static resources on the user's device, eliminating network requests entirely for repeat visits and subsequent page views.

  High impact Low effort LCP Network

  (opens in new tab)

• Specify image dimensions

  Define width and height attributes to reserve space for images during layout, preventing Cumulative Layout Shift (CLS) when the assets finally load.

  High impact Low effort CLS Images

• Use passive event listeners

  Mark scroll and touch listeners as passive to prevent the handler from blocking the main thread, allowing the browser to perform scrolling immediately.

  High impact Low effort INP JS

  (opens in new tab)

• Use WOFF2 font format

  Leverage superior Brotli compression to provide the smallest possible file sizes, ensuring faster downloads and broad compatibility with all modern browsers.

  High impact Low effort LCP Fonts

• Animate transforms instead of layout-triggering properties

  Offload animations to the GPU using compositor-only properties like transform, avoiding expensive reflows and repaints triggered by properties like top, left, width, or height.

  High impact Medium effort CLS INP CSS Animation

• Batch DOM reads before writes

  Perform all DOM measurements first (e.g. offsetWidth), then perform all DOM mutations and style updates to prevent multiple forced synchronous reflows within a single frame ("layout thrashing").

  High impact Medium effort INP JS Animation

• Compress video files

  Reduce raw file size using lossy optimization to decrease transfer time and bandwidth consumption without significantly impacting visual quality.

  High impact Medium effort LCP Video

• Eliminate dead code with tree-shaking

  Configure build tools to identify and remove unused code from final production assets, shrinking bundle sizes and reducing the time the browser spends parsing and compiling.

  High impact Medium effort LCP JS

• Inline critical styles

  Extract initial viewport styles to a <style> tag in the <head> and defer all remaining CSS to eliminate render-blocking delays and accelerate Largest Contentful Paint (LCP).

  High impact Medium effort LCP HTML CSS

• Lazy-load non-critical modules with dynamic imports

  Use import() to fetch code only when needed, shrinking the initial bundle size and reducing the main-thread effort required for the first paint.

  High impact Medium effort INP LCP JS

• Purge unused CSS

  Eliminate dead code to shrink the critical path payload, ensuring the browser does not waste resources parsing styles that are not applied.

  High impact Medium effort LCP CSS

• Replace heavy JS libraries with native APIs

  Swap unnecessary dependencies (e.g. Lodash, Moment.js) for native browser features (e.g. modern array methods, Temporal API) to shrink bundle sizes and reduce script evaluation time.

  High impact Medium effort INP LCP JS

• Use srcset for responsive images

  Provide a list of image variants at different widths, allowing the browser to download the smallest version that matches the user's device resolution.

  High impact Medium effort LCP Images

  (opens in new tab)

• Use AV1 and VP9 video codecs

  Implement AV1 or VP9 in WebM containers to achieve superior compression over H.264, delivering high-quality video at significantly lower bitrates.

  High impact Medium effort LCP Video

  (opens in new tab)

• Use the Web Animations API for JS-driven animations

  Move animation logic to the browser's native animation engine to reduce CPU overhead and ensure smooth motion even during heavy background tasks.

  High impact Medium effort INP JS Animation

  (opens in new tab)

• Use WebP and AVIF image formats

  Leverage superior compression to provide significantly smaller files than JPEG or PNG, reducing total download time without sacrificing visual quality.

  High impact Medium effort LCP Images

• Utilize the stale-while-revalidate pattern for data fetching

  Serve cached data to repeat visitors immediately while silently fetching updates in the background, allowing the UI to render instantly and then refresh automatically once the latest data arrives.

  High impact Medium effort INP LCP JS

• Implement a service worker

  Deploy a programmable network proxy to intercept requests and manage a local cache of core assets such as HTML, CSS, JS bundles, and fonts, ensuring the application shell loads instantly regardless of network reliability.

  High impact High effort LCP JS

  (opens in new tab)

• Move server rendering to the edge

  Execute dynamic page generation on distributed edge servers to deliver HTML from the nearest geographic location to the user, drastically reducing Time to First Byte (TTFB).

  High impact High effort LCP Network

• Offload third-party scripts to web workers

  Move non-essential tracking, analytics, or ad scripts to a background thread to prevent them from blocking the main thread and interfering with user interactions.

  High impact High effort INP JS

  (opens in new tab)

• Pre-render pages where possible

  Generate static HTML at build time or on the server to deliver a fully formed document instantly, accelerating both Time to First Byte (TTFB) and initial content paints.

  High impact High effort LCP Network

• Stream HTML

  Deliver the document in chunks to allow the browser to begin parsing and downloading resources before the entire response is fully generated, significantly improving Time to First Byte.

  High impact High effort LCP HTML Network

• Use HLS or DASH for long videos

  Implement adaptive bitrate streaming protocols to deliver video in segments, allowing the browser to adjust quality dynamically based on the user's network speed.

  High impact High effort INP LCP Video

  (opens in new tab)

• Use route-based code splitting

  Deliver only the JavaScript required for the current route to minimize initial bundle size and accelerate both parsing and execution times.

  High impact High effort INP LCP JS

• Virtualise long lists and tables

  Render only the DOM nodes currently visible in the viewport to keep the main thread responsive and maintain smooth scroll performance even with thousands of data rows.

  High impact High effort INP LCP JS

• Lazy-load off-screen videos

  Apply loading="lazy" or use Intersection Observer to defer video fetching until they approach the viewport, prioritizing critical above-the-fold resources.

  Medium impact Low effort LCP Video

• Optimize video preload attributes

  Set preload="none" or preload="metadata" for non-critical videos to prevent automatic full-file downloads, saving significant bandwidth and reducing network contention.

  Medium impact Low effort LCP Video

  (opens in new tab)

• Run independent async operations concurrently

  Execute multiple independent asynchronous tasks using methods like Promise.all() or Promise.allSettled() to reduce the total duration of the execution path.

  Medium impact Low effort LCP JS

• Set font-size-adjust for font fallbacks

  Maintain consistent visual scale when switching to fallback fonts, minimizing layout shifts by aligning the x-height across typefaces.

  Medium impact Low effort CLS CSS Fonts

  (opens in new tab)

• Skip layout and paint for heavy off-screen sections

  Apply content-visibility: auto to heavy off-screen DOM subtrees (e.g. widgets, embeds, or long lists) to avoid unnecessary layout and paint cycles. Always pair with contain-intrinsic-size to provide a placeholder size and prevent layout shifts during scroll.

  Medium impact Low effort INP LCP CSS

  (opens in new tab)

• Specify speculation rules for future navigations

  Configure JSON rules within a <script type="speculationrules"> element to prefetch or prerender upcoming pages in the background, enabling near-instant transitions.

  Medium impact Low effort LCP JS

  (opens in new tab)

• Strip audio from silent videos

  Remove unnecessary audio tracks from background or decorative videos to shrink the network payload and prevent the browser from initializing audio decoders.

  Medium impact Low effort LCP Video

• Synchronize visual updates with requestAnimationFrame

  Replace standard JS loops (e.g., setInterval) for tasks where the Web Animations API is unavailable, such as <canvas> or WebGL, to align execution with the browser's native refresh rate.

  Medium impact Low effort INP JS Animation

  (opens in new tab)

• Use event delegation

  Attach a single listener to a parent element rather than many to individual children, reducing memory usage and the overhead of managing multiple DOM listeners.

  Medium impact Low effort INP JS

  (opens in new tab)

• Adapt experience to device capabilities

  Implement adaptive loading using signals like navigator.deviceMemory, navigator.hardwareConcurrency (CPU count) and Save-Data preferences to serve lightweight assets and defer heavy scripts on constrained devices or networks.

  Medium impact Medium effort INP LCP JS

• Adopt container queries over JS resize logic

  Use native @container rules to handle how components adapt to their container's size, eliminating expensive JS resize listeners and freeing up the main thread.

  Medium impact Medium effort CLS INP CSS

  (opens in new tab)

• Debounce high-frequency input events

  Postpone event handler execution for actions like resize or keyup until a specified period of inactivity, preventing redundant calculations and main-thread congestion.

  Medium impact Medium effort INP JS

• Isolate heavy or dynamic sections with CSS containment

  Apply the contain property to heavy or dynamic DOM subtrees (e.g. widgets, embeds, or long lists) to limit layout and paint recalculations to those specific components and prevent global reflows.

  Medium impact Medium effort INP CSS

  (opens in new tab)

• Optimize JS transpilation targets

  Target modern browser versions in your build configuration to reduce the need for bulky polyfills and legacy helper code, resulting in smaller, faster bundles.

  Medium impact Medium effort INP LCP JS

• Optimize SVG markup

  Strip metadata, hidden layers, and unnecessary precision from SVG files to reduce the total size of the DOM and network payload.

  Medium impact Medium effort LCP Images

  (opens in new tab)

• Schedule non-urgent tasks with requestIdleCallback

  Execute non-urgent background work during the browser's idle periods to prevent long tasks from blocking critical user input and maintaining a responsive main thread.

  Medium impact Medium effort INP JS

  (opens in new tab)

• Serve critical assets from the same origin

  Host CSS, fonts, and hero images on your primary domain to bypass the DNS, TCP, and TLS overhead required for external connections.

  Medium impact Medium effort LCP Network

• Serve files over HTTP/3

  Use the QUIC-based HTTP/3 protocol to eliminate head-of-line blocking and accelerate secure connection handshakes for faster delivery across all network types.

  Medium impact Medium effort LCP Network

  (opens in new tab)

• Subset font characters

  Remove unused glyphs and language sets from font files to drastically reduce individual file sizes and decrease total download time.

  Medium impact Medium effort LCP Fonts

• Throttle continuous function executions

  Limit the execution rate of rapidly repeating logic to maintain a consistent frame rate and prevent main-thread exhaustion during continuous actions such as scrolling.

  Medium impact Medium effort INP JS

• Use <picture> for responsive images

  Allow the browser to select the most appropriate image source based on viewport size or format support, ensuring users only download what is necessary.

  Medium impact Medium effort LCP HTML Images

  (opens in new tab)

• Use SVG sprites for repeated icons

  Group inline SVG symbols into a single definition to reduce redundant markup and DOM nodes while allowing efficient icon reuse across the page.

  Medium impact Medium effort LCP HTML Images

• Use variable fonts

  Replace multiple static files with a single file containing all weights and styles, reducing HTTP requests and total file size.

  Medium impact Medium effort LCP Fonts

  (opens in new tab)

• Offload heavy computations to web workers

  Use a background thread for CPU-intensive tasks like data processing or complex filtering to prevent UI freezes and maintain a responsive interface.

  Medium impact High effort INP JS

  (opens in new tab)

• Reduce DOM complexity and depth

  Lower memory overhead while accelerating style recalculations and layout reflows by minimizing the effort required by the browser to traverse and paint the node tree.

  Medium impact High effort CLS INP HTML

• Hint animation changes with will-change

  Inform the browser of upcoming heavy animations to pre-optimize rendering layers, preventing frame drops and visual jank during complex transitions.

  Low impact Low effort INP CSS Animation

  (opens in new tab)

• Minify HTML

  Remove whitespace, comments, and redundant attributes to shrink payload size and accelerate parsing for faster initial rendering.

  Low impact Low effort LCP HTML

• Offload decoding of non-critical images

  Apply decoding="async" to process large or complex image data on a background thread, preventing main-thread "jank" and keeping the UI responsive during rendering.

  Low impact Low effort INP Images

  (opens in new tab)

• Serve assets using consistent protocols

  Ensure all resources utilize HTTPS to prevent mixed-content warnings and allow the browser to reuse existing encrypted connections for faster parallel downloading.

  Low impact Low effort LCP Network

• Use pseudo-elements for decoration

  Replace redundant DOM nodes with ::before and ::after to reduce the total node count that the browser must manage and paint.

  Low impact Low effort INP CSS

  (opens in new tab)

• Simplify CSS selectors

  Reduce style-matching complexity by avoiding deep nesting, allowing the browser to calculate styles and reflow the layout faster.

  Low impact Medium effort INP CSS

No items match your filters Clear