[{"data":1,"prerenderedAt":437},["ShallowReactive",2],{"article-en-web-performance-metrics-understanding-measuring-and-optimizing":3},{"id":4,"title":5,"body":6,"date":423,"description":424,"extension":425,"meta":426,"navigation":431,"path":432,"published":431,"seo":433,"stem":434,"translationSlug":435,"__hash__":436},"articles_en/en/articles/web-performance-metrics-understanding-measuring-and-optimizing.md","Web Performance Metrics: Understanding, Measuring, and Optimizing",{"type":7,"value":8,"toc":407},"minimark",[9,13,16,21,44,48,53,62,67,75,80,91,95,102,106,114,118,134,138,145,149,157,161,179,183,190,194,202,206,223,227,234,238,246,250,266,270,277,281,289,293,304,308,376,380,399,404],[10,11,12],"p",{},"When discussing web performance, it is essential to rely on precise metrics to analyze a website’s behavior. Google, through its Core Web Vitals initiative, highlights key indicators that assess user experience in terms of display speed, interactivity, and visual stability.",[10,14,15],{},"In this article, we will explain what these metrics are, how to measure them, and the strategies you can apply to optimize them.",[17,18,20],"h2",{"id":19},"why-are-performance-metrics-important","Why Are Performance Metrics Important?",[22,23,24,32,38],"ul",{},[25,26,27,31],"li",{},[28,29,30],"strong",{},"Improved User Experience:"," A fast site reduces frustration and increases engagement.",[25,33,34,37],{},[28,35,36],{},"SEO and Ranking:"," Google favors fast sites in its rankings.",[25,39,40,43],{},[28,41,42],{},"Conversions and Bounce Rate:"," Slow pages can drive visitors away.",[17,45,47],{"id":46},"main-web-performance-metrics","Main Web Performance Metrics",[49,50,52],"h3",{"id":51},"_1-ttfb-time-to-first-byte-time-before-the-first-server-response","1. TTFB (Time To First Byte) – Time Before the First Server Response",[10,54,55,58,61],{},[28,56,57],{},"Definition",[59,60],"br",{},"\nTTFB measures the time elapsed between sending the request and receiving the first byte of response from the server.",[10,63,64],{},[28,65,66],{},"Why is it important?",[22,68,69,72],{},[25,70,71],{},"A high TTFB indicates that the server takes too long to respond, which delays the entire loading process.",[25,73,74],{},"This can be due to a slow server, an overloaded database, or insufficient caching.",[10,76,77],{},[28,78,79],{},"How to Optimize:",[22,81,82,85,88],{},[25,83,84],{},"Use a CDN to bring data closer to users.",[25,86,87],{},"Enable server-side caching and optimize the database.",[25,89,90],{},"Reduce backend processing time by optimizing queries.",[49,92,94],{"id":93},"_2-fcp-first-contentful-paint-first-display-of-visible-content","2. FCP (First Contentful Paint) – First Display of Visible Content",[10,96,97,99,101],{},[28,98,57],{},[59,100],{},"\nFCP measures the moment when the first visual element (text, image, background, etc.) appears on the screen.",[10,103,104],{},[28,105,66],{},[22,107,108,111],{},[25,109,110],{},"A fast FCP ensures that users see content quickly, avoiding the impression of a blank page.",[25,112,113],{},"Delays in loading CSS or fonts can postpone FCP.",[10,115,116],{},[28,117,79],{},[22,119,120,123,131],{},[25,121,122],{},"Minify and compress CSS files.",[25,124,125,126,130],{},"Load fonts asynchronously (e.g., using ",[127,128,129],"code",{},"font-display: swap",").",[25,132,133],{},"Prioritize critical resources (e.g., preload important CSS).",[49,135,137],{"id":136},"_3-lcp-largest-contentful-paint-time-to-display-the-main-element","3. LCP (Largest Contentful Paint) – Time to Display the Main Element",[10,139,140,142,144],{},[28,141,57],{},[59,143],{},"\nLCP measures the time required to display the largest visible element within the viewport (e.g., an image or the main title).",[10,146,147],{},[28,148,66],{},[22,150,151,154],{},[25,152,153],{},"If the main content takes too long to appear, users perceive the site as slow.",[25,155,156],{},"A high LCP can be caused by heavy images, blocked HTML rendering, or lengthy queries.",[10,158,159],{},[28,160,79],{},[22,162,163,169,172],{},[25,164,165,166,130],{},"Prioritize loading of main images (e.g., using ",[127,167,168],{},"fetchpriority=\"high\"",[25,170,171],{},"Use modern image formats such as WebP or AVIF.",[25,173,174,175,178],{},"Limit JavaScript that blocks rendering (use ",[127,176,177],{},"defer"," on non-critical scripts).",[49,180,182],{"id":181},"_4-tti-time-to-interactive-time-until-the-page-is-usable","4. TTI (Time To Interactive) – Time Until the Page is Usable",[10,184,185,187,189],{},[28,186,57],{},[59,188],{},"\nTTI measures the moment when the page becomes fully interactive—when JavaScript is executed and user interactions respond without delay.",[10,191,192],{},[28,193,66],{},[22,195,196,199],{},[25,197,198],{},"A site might be visible yet unusable if JavaScript takes too long to load.",[25,200,201],{},"Overly large or unoptimized JavaScript can delay interactivity.",[10,203,204],{},[28,205,79],{},[22,207,208,211,214],{},[25,209,210],{},"Lazy load non-essential scripts.",[25,212,213],{},"Use code-splitting to load only what is necessary.",[25,215,216,217,220,221,130],{},"Minimize blocking JavaScript (e.g., use ",[127,218,219],{},"async"," or ",[127,222,177],{},[49,224,226],{"id":225},"_5-cls-cumulative-layout-shift-visual-stability-of-the-page","5. CLS (Cumulative Layout Shift) – Visual Stability of the Page",[10,228,229,231,233],{},[28,230,57],{},[59,232],{},"\nCLS measures sudden layout shifts that can disrupt the user experience (e.g., text moving after an ad loads).",[10,235,236],{},[28,237,66],{},[22,239,240,243],{},[25,241,242],{},"A high CLS creates a frustrating experience where users might click on a button that suddenly shifts position.",[25,244,245],{},"Google penalizes sites with unpredictable layout shifts.",[10,247,248],{},[28,249,79],{},[22,251,252,258,263],{},[25,253,254,255,130],{},"Reserve fixed space for images and ads (using ",[127,256,257],{},"min-height",[25,259,260,261,130],{},"Load fonts in a way that prevents reflow (e.g., ",[127,262,129],{},[25,264,265],{},"Avoid dynamically loading elements without a defined height.",[49,267,269],{"id":268},"_6-inp-interaction-to-next-paint-response-time-to-interactions","6. INP (Interaction to Next Paint) – Response Time to Interactions",[10,271,272,274,276],{},[28,273,57],{},[59,275],{},"\nINP measures the time between a user interaction (click, keystroke) and when the screen reflects that interaction.",[10,278,279],{},[28,280,66],{},[22,282,283,286],{},[25,284,285],{},"A poor INP means that when a user clicks a button, there is a delay before any visual feedback is provided.",[25,287,288],{},"This lag negatively affects the overall user experience.",[10,290,291],{},[28,292,79],{},[22,294,295,298,301],{},[25,296,297],{},"Avoid long JavaScript tasks by optimizing calculations and queries.",[25,299,300],{},"Reduce CPU and GPU load to ensure smooth interactions.",[25,302,303],{},"Favor lightweight and optimized animations.",[17,305,307],{"id":306},"where-and-how-to-measure-these-metrics","Where and How to Measure These Metrics?",[309,310,311,324,345,363],"ol",{},[25,312,313,316],{},[28,314,315],{},"Google Lighthouse (in Chrome DevTools)",[22,317,318,321],{},[25,319,320],{},"Open Chrome > Inspect > Lighthouse > Generate a report.",[25,322,323],{},"Displays Core Web Vitals and provides actionable recommendations.",[25,325,326,337],{},[28,327,328,329,336],{},"PageSpeed Insights (",[330,331,335],"a",{"href":332,"rel":333},"https://pagespeed.web.dev",[334],"nofollow","pagespeed.web.dev",")",[22,338,339,342],{},[25,340,341],{},"Analyzes real performance on both mobile and desktop.",[25,343,344],{},"Provides field data from actual users.",[25,346,347,355],{},[28,348,349,350,336],{},"WebPageTest (",[330,351,354],{"href":352,"rel":353},"https://www.webpagetest.org",[334],"webpagetest.org",[22,356,357,360],{},[25,358,359],{},"An advanced tool to examine each step of the page loading process.",[25,361,362],{},"Allows testing on various connection types and in different regions.",[25,364,365,368],{},[28,366,367],{},"Google Search Console (Core Web Vitals)",[22,369,370,373],{},[25,371,372],{},"Offers insights into long-term, real-world performance.",[25,374,375],{},"Identifies pages with issues related to LCP, CLS, or INP.",[17,377,379],{"id":378},"conclusion-why-track-and-optimize-these-metrics","Conclusion: Why Track and Optimize These Metrics?",[22,381,382,387,393],{},[25,383,384,386],{},[28,385,30],{}," A fast site enhances satisfaction and reduces bounce rates.",[25,388,389,392],{},[28,390,391],{},"Better SEO and Google Rankings:"," Performance is a direct factor in how Google ranks sites.",[25,394,395,398],{},[28,396,397],{},"Boost in Conversions and Retention:"," Optimized metrics can drive higher conversions and greater user loyalty.",[10,400,401],{},[28,402,403],{},"Core Web Vitals are not just numbers; they are a true indicator of a website's perceived quality.",[10,405,406],{},"In an upcoming article, we will explore concrete strategies to improve each metric based on the technical context.",{"title":408,"searchDepth":409,"depth":409,"links":410},"",2,[411,412,421,422],{"id":19,"depth":409,"text":20},{"id":46,"depth":409,"text":47,"children":413},[414,416,417,418,419,420],{"id":51,"depth":415,"text":52},3,{"id":93,"depth":415,"text":94},{"id":136,"depth":415,"text":137},{"id":181,"depth":415,"text":182},{"id":225,"depth":415,"text":226},{"id":268,"depth":415,"text":269},{"id":306,"depth":409,"text":307},{"id":378,"depth":409,"text":379},"2025-02-12","TTFB, FCP, LCP, CLS, INP... Master Core Web Vitals to improve user experience and your website's search rankings.","md",{"excerpt":427},{"type":7,"value":428},[429],[10,430,12],{},true,"/en/articles/web-performance-metrics-understanding-measuring-and-optimizing",{"title":5,"description":424},"en/articles/web-performance-metrics-understanding-measuring-and-optimizing","metriques-de-performance-web-comprendre-mesurer-et-optimiser","KC2LerPfhtcYrfSRIZXmwPFtsLbNXE8Y-eu0CYIRsw0",1765834534790]