The utimate Core Web Vitals checklist

Core Web Vitals checklist

In this article, we'll provide you with a comprehensive Core Web Vitals checklist to help you identify areas for improvement and ensure your website offers a smooth and fast experience for your visitors!

Optimize Images

Large images in the visibile viewport wil, most of the times, become the Largest Contentful Paint element. Use these core web vitals checklist items to improve image speed.

• Resize images to match the largest on-screen dimensions: This ensures that bytes are never wasted on downloading images larger then their maximum on-screen size. Combine this practice with responsive images for smaller screen sizes.
  
• Use lazy loading for below-the-fold images: Lazy loading delays the loading of images outside the viewport until they are scrolled into view, improving First Contentful Paint (FCP) and overall page load speed.
• Preload visually important images like the LCP element: Preloading instructs the browser to fetch critical images before the rest of the content, prioritizing LCP.
• Set width and height: Defining image dimensions upfront prevents layout shifts caused by the browser waiting for images to load. This improves CLS.
• Use modern image formats like WebP or Avif: These formats offer smaller file sizes compared to JPEG or PNG while maintaining similar quality, leading to faster loading times.
  
• Use native lazy loading and disable javascript based lazy loading: Lazy loading delays the loading of images outside the viewport until they are scrolled into view. Native lazy loading offered by browsers is generally more efficient than relying on JavaScript for this task.
  
• Use responsive images with srcset: This attribute specifies different image versions for various screen sizes, ensuring the browser delivers the optimal image for the user's device, reducing unnecessary large downloads.
• Add decoding = 'async'. Decoding = async prevents the browser from blocking other content while decoding an image
• Strip image metadata: Metadata like EXIF data embedded in images can add unnecessary bytes. Stripping this information can reduce file size without affecting image quality.
  
• Avoid background images.

Optimize Web Fonts

Web Fonts can delay the First Contentful Paint, cause layout shifts and compete for early bandwidth resources. Use this checklist to ensure a smooth web font experience.

• Use font-display: swap for faster first paint. Set the font-display property to swap in your @font-face declarations. This ensures that the browser displays a fallback font immediately while loading the web font in the background. Once the font is ready, it swaps it out seamlessly.
• Use font-display optional + preloading to eliminate layout shift caused by fonts. Combining font-display: optional with preloading offers a balance between speed and potential layout shifts.font-display: optional hides text briefly (around 100ms) before using a fallback font. Preloading instructs the browser to fetch the web font early, minimizing the time spent on fallback fonts and reducing layout shifts.
• Use font-face descriptors to make the fallback font match the web-fonts dimensions. This tip ensures minimal layout shift when the web font swaps in. By specifying similar font-size, line-height, and other characteristics for both the fallback and web fonts, you can prevent content from jumping around as the font loads.
• Subset fonts to include only necessary characters. Reduce font file size by subsetting fonts to include only the characters needed for your content. Tools like Font Squirrel can help generate subsets.
  
• Limit the number of font weights and styles. Avoid loading excessive font variations. Stick to a maximum of 2 critical fonts (usually preloaded) and 2 late-loading fonts (loaded after initial rendering).

Optimize scripts

Scripts can cause Interaction to Next Paint issues and cause Cumulative Layout Shifts or delay the LArgest Contenful Paint. Even optimized and relatively harmless early scripts can compete for resources and delay paint metrics (Largest Contentful Paint &  First Contentful Paint).

• Remove Unnecessary JavaScript: Identify and eliminate unused JavaScript code to minimize the amount of code that needs to be downloaded and executed.
• Prioritize scripts based on their function and importance.
  - Scripts that make large changes to the visible viewport should be render blocking
  - Important scripts should be deferred or asynced
  - Nice-to-have scripts should load at browser idle
• Code Splitting and Lazy Loading: Break down large JavaScript bundles into smaller chunks and load them only when needed. This reduces initial load time.
• Minify and recompile JS Files: Always minify and recompile your JavaScript files with a minification tool like SWC
  
• Limit Third-Party Scripts: Third-party scripts can introduce performance overhead. Evaluate their necessity and explore alternatives if possible.
• Load third-party scripts asynchronously: Because of the unpredictable nature of third party scripts never allow rendering to be blocked by a third party.
• Monitor third-party script performance

Optimize Styles

Styles are render blocking by default. Optimizing styles will result in optimized paint metrocs. Follow the checklist to improve style performance of your webpage.

• Minify CSS files: Remove unnecessary characters like whitespace, comments, and formatting from CSS files. Minified files are smaller in size, leading to faster loading times.
• Remove unused CSS: Identify and eliminate CSS code that isn't used on your web pages. This reduces the amount of data the browser needs to download and parse, improving performance.
  
• Inline critical CSS: Serve styles essential for rendering the initial page content directly in the HTML can to improve the paint metrics. Consider serving Critical CSS only to new visitors
• Equally distribute CSS file sizes: While it might seem efficient to combine all CSS into one file, excessively large files can slow down download times. Consider splitting CSS into smaller files with a more even size distribution (10/15kB) to optimize loading.
• Async load offscreen styles: For styles that apply to elements outside the initial viewport, consider using async loading. This allows the browser to fetch these styles in parallel with other resources without blocking the initial rendering of the page.

Optimize resource hints

Resource hints help prioritize downloads for critical resources. For example: preloaded resources are usually enqueued for download (and available to the browser) much earlier then they would have been without preloading.

• Remove non-critical resource hints: Removing preload hints for resources that aren't essential for the initial page load. This prevents unnecessary downloads or network connections that compete for those early resources.
  
• Preconnect to critical domains: Establish connections with important domains (like content delivery networks) early on . This speeds up the download of critical resources from those domains.
  
• Consider DNS prefetch as a preconnect alternative:  Similar to preconnect, prefetch hints the browser about potential connections. However, preconnect prioritizes establishing the connection, while prefetch just tells the browser to resolve the domain name (DNS lookup) in advance, which can be a faster option for some situations.
  
• Preload the LCP element:  LCP (Largest Contentful Paint) is a core web vital that measures how long it takes for the main content to load. Preloading the LCP element instructs the browser to prioritize downloading this critical element, speeding up the time it takes for users to see the main content.
  
• Preload critical fonts: Preloading critical fonts ensures the browser fetches them early, preventing delays in displaying text and improving cumulative layout shifts caused by fonts.
  

• Avoid inline SVG icons: Onlining large SVG icons can increase the size of your HTML code and slow down page load. Consider alternative methods like serving them as separate files or using icon fonts (with caution) to minimize the HML and allow browser caching of the icons
  
• Avoid large icon fonts: NEver use large icons sets like font awesome. Use subsetting to create optimized icon fonts or SVGs to reduce the overall size of the web page and improve loading speed.
• Reserve width and height: Similar to images, specifying width and height for icons helps the browser reserve space and prevents layout shifts as they load.
• De-prioritize icon sets: If icons are not critical for the initial rendering of your page, consider loading them with lower priority. This ensures essential content loads first and minimizes the impact on Core Web Vitals metrics. Techniques like lazy loading can be helpful here.

Optimize Server Response Times

Server response times or the Time To First Byte has a direct relation with all the paint metrics. 

• Use a fast and reliable hosting provider: A fast hosting provider with strong infrastructure can significantly improve server response times and overall website performance.
• Optimize server-side code and database queries: Frequently log code execution and database query time to find bottleneck and improve overall speed
• Implement caching strategies: Utilize browser caching and server-side caching to store frequently accessed data, reducing the need for repeated data retrieval and improving load times.
• Client side of edge rendering: Consider Client side of edge rendering of small personalisations like Cart Count, Login Status or small menu changes to keep full cache functionality
• Optimize server configurations
• Use a Content Delivery Network (CDN): A CDN distributes your website's static content across multiple edge nodes (servers). This reduces the physical distance users need to access your content, leading to faster loading times for global audiences. Moreover, CDN's are usually better configured then you own server.
  
• Reduce server-side processing
• Use http/3: HTTP/3 is the latest version of the Hypertext Transfer Protocol, the foundation of communication between web servers and browsers. http/3 is faster and more efficient than http/2 and much faster then http:/1.1. Upgrading to http/3 can improve overall page load times and potentially all three Core Web Vitals metrics (LCP, INP, CLS).
• Set up server timing headers: These headers provide detailed information about how long different parts of your page take to load on the server. With this data, you can pinpoint bottlenecks and areas for improvement, specifically focusing on improving Largest Contentful Paint (LCP).
• Log slow database queries and optimize them regularly
• Use GZIP or Brotli compression: GZIP, or the Newer Brotli, offers on the fly compression of text-based resources (HTML, CSS, JavaScript) before transmission with results in about 70% smaller filesize. Smaller file sizes translate to faster loading times

Optimize interactivity

• Implement an idle-until-urgent pattern for expensive scripts: This approach involves prioritizing critical tasks and deferring non-essential JavaScript execution until the main browser thread is idle. This ensures critical tasks like rendering and user interactions are not blocked by long-running scripts.
• Break up long tasks by yielding to the main thread: Complex JavaScript tasks can block the main thread, delaying responsiveness. Splitting these tasks into smaller chunks and yielding control back to the main thread between chunks allows the browser to handle user interactions and maintain a smooth user experience. This technique is often referred to as "chunking" or "yielding."
• Provide immediate feedback after input: Users expect immediate responsiveness after interacting with your website. Provide visual cues or acknowledge user input promptly, even while long-running tasks are processing in the background. This helps maintain a sense of interactivity and prevents users from feeling like the website is frozen.

Core Web Vitals monitoring

• Check Lighthouse regularly: Lighthouse is a free, open-source auditing tool from Google that helps you identify performance issues on your web pages. While LightHouse does not measure the Core Web Vitals it is a great tool for periodically testing and comparing your website over regulated and standardized conditions.
• Check the CrUX historical data regularly:  CrUX (Chrome User Experience Report) is a public dataset from Google that provides real-world performance. CrUX is the datasource used by Google to determine whether or not you pass the Core Web Vitals. Use the historical data to quickly spot regression!
• Set up RUM tracking: RUM (Real User Monitoring) involves tracking real user experiences on your website. RUM tools collect data on how long it actually takes for pages to load for your visitors in different locations and on various devices. This provides valuable insights into real-world performance, complementing the simulated data from Lighthouse and CrUX. We advise CoreDash as your RUM tracking tool.
• Set performance budgets:  Performance budgets set specific performance targets (e.g., LCP under 2.5 seconds) for different metrics. These act as benchmarks to guide your optimization efforts.  Regularly checking your performance against these budgets helps you identify areas that need immediate attention and prioritize optimizations.
• Use segmentation: Use segmentation to track you most valuable visitor type and different page types. Larger amounts of traffic might otherwise  performance issues specifically impacting these vital groups.

Optimize resource hints

• Use <link rel="preload"> for critical resources
• Preload fonts before CSS files
• Preconnect to critical domains
• Use DNS prefetch if preconnecting gives too much overhead
• Prefer 103 resource hints, if that is not technically possible use <link> headers, if that is not available add the resource hints to the <head> of the page

Optimize Critical Rendering Path

• Minimize the number of critical resources
• Optimize the order of resource loading
• Reduce the depth of the DOM tree
• Favor classes and IDs over element tags and attributes: Instead of p.important, use .important. This reduces the browser's need to search through all <p> elements for styles.
• Avoid nesting selectors deeply: The deeper you nest, the more calculations the browser needs. Try restructuring your HTML to reduce nesting or use more specific classes closer to the element.
• Minimize descendant selectors: Selectors like .container > .content force the browser to check every element within the container. If possible, use a more direct class on the content element.
• Consolidate selectors with the same styles: If multiple elements share the same styles, group them into a single class or use a BEM (Block Element Modifier) naming convention for better maintainability.

Optimize cookie consent

• For dynamically server side rendered pages consider implementing a server side solution. It is probably faster!
• For cached pages async load your cookie consent script and consider adding fetchpriority="high" to the script
• Long cookie notice texts can take over the LCP element. Consider writing shorter texts or breaking up texts into multiple paragraphs.
• Cache and self-host cookie notifications whenever possible

Optimize Single Page Applications

• Always use a prerender!
• Static prerenders are much faster then dynamically generated prerenderst
• Consider loading third party scripts after hydration.

Avoid Excessive DOM Size

• Reduce unnecessary DOM elements
• Use efficient JavaScript and CSS selectors

Optimize API Requests

• Minimize the number of API requests: Each API request adds to the overall page load time. Evaluate your website's functionality and identify opportunities to reduce the number of API requests needed to render the initial content. Techniques like data batching (combining multiple requests into one) can be helpful here.
• Use efficient and optimized APIs: The design and implementation of the APIs themselves can impact performance. Ensure you're using well-designed APIs that are optimized for speed and efficiency. Caching mechanisms on the API side can also play a role in reducing request times.
• Preload critical API requests: Similar to preloading critical resources like images, preloading essential API requests can significantly improve perceived performance. This instructs the browser to fetch these critical APIs early, minimizing delays when they are needed for rendering the initial content.

Optimize chat widgets

Chat widgets are a common cause for layout shifts and might even cause issue swith the LCP if they are loaded early on. 

• Load chat widgets after the main content has loaded. No-one in the history of the internet has ever needed to chat before the main content of the page has loaded.
• If chat widgets cause a layout shift it's usually a good idea to hide them with opacity:0 until they have fully rendered on the page!
• Shop around. Some chat widgets are much more lighth-weight and cause less core web vitals problems then others!

• Cache critical assets
• Optimize service worker code

Optimize Video Content

• Compress and optimize videos
• Use lazy loading for videos
• Host videos on a fast CDN