What Are Core Web Vitals? A Technical Guide to LCP, INP, CLS, and SEO Core Web Vitals چیست؟ بررسی LCP، INP و CLS و تأثیر آنها بر سرعت و سئو سایت
<h2>What Are Core Web Vitals? A Technical Guide to LCP, INP, CLS, and SEO</h2> <p>Building a successful website is not only about creating an attractive design. Users expect pages to load quickly, interactions to respond without noticeable delays, and content to remain visually stable while the page is loading.</p> <p>This is where <strong>Core Web Vitals</strong> become important. Core Web Vitals are a set of important user experience metrics that focus on three major aspects of web performance: <strong>loading performance, responsiveness, and visual stability</strong>.</p> <p>In this article from <strong>Just Programmer</strong>, we will explore what Core Web Vitals are, how <strong>LCP, INP, and CLS</strong> work, what causes poor scores, and how developers can improve website performance.</p> <hr> <h2>What Are Core Web Vitals?</h2> <p><strong>Core Web Vitals</strong> are a set of standardized metrics used to measure important aspects of user experience on web pages.</p> <p>The three current Core Web Vitals are:</p> <ul> <li><strong>LCP — Largest Contentful Paint:</strong> Measures loading performance.</li> <li><strong>INP — Interaction to Next Paint:</strong> Measures responsiveness to user interactions.</li> <li><strong>CLS — Cumulative Layout Shift:</strong> Measures visual stability.</li> </ul> <p>These metrics focus on three important parts of the user experience:</p> <pre><code>Loading ↓ LCP Interaction ↓ INP Visual Stability ↓ CLS</code></pre> <p>The goal of Core Web Vitals is not simply to generate a score. Instead, these metrics help developers understand how users actually experience a web page.</p> <hr> <h2>How Are Core Web Vitals Related to SEO?</h2> <p>Core Web Vitals are connected to page experience and Google's ranking systems. Google states that Core Web Vitals are used by its ranking systems and recommends that website owners maintain good Core Web Vitals.</p> <p>However, an important misconception should be avoided: <strong>excellent Core Web Vitals do not automatically place a website in the first position of Google Search.</strong></p> <p>Search rankings depend on many different factors. Content relevance, content quality, site structure, helpfulness, and many other signals also matter.</p> <p>Therefore, Core Web Vitals should not be optimized only to achieve a high SEO score. The main goal should be to provide a fast, responsive, and stable experience for real users.</p> <hr> <h2>What Is LCP? Largest Contentful Paint</h2> <p><strong>LCP</strong> stands for <strong>Largest Contentful Paint</strong>. It measures how long it takes for the largest visible content element in the viewport to be rendered.</p> <p>This element may be a large image, a text block, or a video.</p> <p>In simple terms, LCP answers this question:</p> <p><strong>“How quickly does the main content of the page become visible to the user?”</strong></p> <p>For example, if a page has a large Hero image and that image is the largest visible element, its rendering can have a significant impact on LCP.</p> <h3>LCP Thresholds</h3> <div style="width: 100%; overflow-x: auto; margin: 20px 0;"> <table style="width: 100%; min-width: 600px; border-collapse: collapse; background: #10161F; color: #e7ecf2; border: 1px solid rgba(255,255,255,0.08);"> <thead> <tr> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: left;">LCP</th> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: left;">Status</th> </tr> </thead> <tbody> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">≤ 2.5 seconds</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">Good</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">2.5 – 4 seconds</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">Needs Improvement</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">> 4 seconds</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">Poor</td> </tr> </tbody> </table> </div> <p>For evaluating the experience of most users, the 75th percentile of page loads is commonly used, segmented by mobile and desktop devices. A good LCP target is 2.5 seconds or less. :contentReference[oaicite:13]{index=13}</p> <hr> <h2>What Causes a High LCP?</h2> <p>A poor LCP can have many different causes, and the problem is not always simply a large image.</p> <ul> <li>Slow server response</li> <li>High TTFB</li> <li>Large or unoptimized images</li> <li>Heavy CSS files</li> <li>Slow-loading web fonts</li> <li>Render-blocking resources</li> <li>Heavy JavaScript</li> <li>Unnecessary redirects</li> <li>Slow network conditions</li> <li>Poor resource loading strategies</li> </ul> <h3>How to Improve LCP</h3> <ul> <li>Compress large images and use WebP or AVIF when appropriate.</li> <li>Give important above-the-fold images appropriate loading priority.</li> <li>Reduce unnecessary CSS.</li> <li>Identify and optimize render-blocking resources.</li> <li>Improve server response time.</li> <li>Use caching and CDNs when appropriate.</li> <li>Optimize font loading.</li> <li>Move unnecessary JavaScript away from the critical loading path.</li> </ul> <hr> <h2>What Is INP? Interaction to Next Paint</h2> <p><strong>INP</strong> stands for <strong>Interaction to Next Paint</strong> and measures how responsive a page is to user interactions.</p> <p>An interaction may include clicking a button, tapping an element, selecting an option, or performing another action on a page.</p> <p>In simple terms, INP measures how quickly the browser can present a visual response after a user interaction.</p> <p>INP replaced <strong>FID</strong> as a Core Web Vital in 2024. :contentReference[oaicite:14]{index=14}</p> <h3>INP Thresholds</h3> <div style="width: 100%; overflow-x: auto; margin: 20px 0;"> <table style="width: 100%; min-width: 600px; border-collapse: collapse; background: #10161F; color: #e7ecf2; border: 1px solid rgba(255,255,255,0.08);"> <thead> <tr> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: left;">INP</th> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: left;">Status</th> </tr> </thead> <tbody> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">≤ 200 ms</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">Good</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">200 – 500 ms</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">Needs Improvement</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">> 500 ms</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">Poor</td> </tr> </tbody> </table> </div> <p>An INP of 200 milliseconds or less is considered good. The 75th percentile is commonly used for evaluating user experience across mobile and desktop devices. :contentReference[oaicite:15]{index=15}</p> <hr> <h2>Why Can INP Be Poor?</h2> <p>One of the most common causes of poor INP is long-running JavaScript work on the browser's <strong>Main Thread</strong>.</p> <p>Imagine that a user clicks a button while the browser is simultaneously executing a heavy JavaScript task. Until the browser can process the work, the visual response to the user's interaction may be delayed.</p> <pre><code>User Interaction ↓ JavaScript Event ↓ Long Task ↓ Main Thread Busy ↓ Delayed Visual Update ↓ Poor INP</code></pre> <h3>How to Improve INP</h3> <ul> <li>Reduce unnecessary JavaScript.</li> <li>Break long tasks into smaller tasks.</li> <li>Reduce expensive calculations inside event handlers.</li> <li>Optimize event listeners.</li> <li>Use Web Workers for suitable heavy processing.</li> <li>Reduce unnecessary JavaScript dependencies.</li> <li>Avoid expensive work immediately after user interactions.</li> </ul> <hr> <h2>What Is CLS? Cumulative Layout Shift</h2> <p><strong>CLS</strong> stands for <strong>Cumulative Layout Shift</strong> and measures the visual stability of a page.</p> <p>Have you ever tried to click a button, only for an image or advertisement to load and suddenly move the button somewhere else? This is an example of a poor experience caused by layout shifts.</p> <p>CLS measures the amount of unexpected visual movement that occurs during a page experience.</p> <h3>CLS Thresholds</h3> <div style="width: 100%; overflow-x: auto; margin: 20px 0;"> <table style="width: 100%; min-width: 600px; border-collapse: collapse; background: #10161F; color: #e7ecf2; border: 1px solid rgba(255,255,255,0.08);"> <thead> <tr> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: left;">CLS</th> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: left;">Status</th> </tr> </thead> <tbody> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">≤ 0.1</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">Good</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">0.1 – 0.25</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">Needs Improvement</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">> 0.25</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">Poor</td> </tr> </tbody> </table> </div> <p>A good CLS target is 0.1 or less, with the 75th percentile commonly used to evaluate the experience of most users. :contentReference[oaicite:16]{index=16}</p> <hr> <h2>What Causes Poor CLS?</h2> <p>One of the most common causes of CLS is failing to reserve space for elements before they load.</p> <p>For example:</p> <pre><code><img src="hero.webp" alt="Hero Image"></code></pre> <p>In this case, the browser may not know the exact space required by the image before it loads.</p> <p>A better approach is to define the image dimensions:</p> <pre><code><img src="hero.webp" width="1200" height="700" alt="Hero Image" ></code></pre> <p>Other common causes include:</p> <ul> <li>Images without defined dimensions</li> <li>Advertisements and iframes without reserved space</li> <li>Dynamically injected content</li> <li>Late-loading web fonts</li> <li>Elements changing size after rendering</li> <li>Unexpected banners or notifications</li> </ul> <p>Images without dimensions, advertisements, iframes, dynamically injected content, and web fonts are among the common causes of layout shifts. :contentReference[oaicite:17]{index=17}</p> <hr> <h2>LCP vs INP vs CLS</h2> <div style="width: 100%; overflow-x: auto; margin: 20px 0;"> <table style="width: 100%; min-width: 750px; border-collapse: collapse; background: #10161F; color: #e7ecf2; border: 1px solid rgba(255,255,255,0.08);"> <thead> <tr> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: left;">Metric</th> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: left;">What Does It Measure?</th> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: left;">Good Target</th> </tr> </thead> <tbody> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);"><strong>LCP</strong></td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">Main content loading performance</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">≤ 2.5s</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);"><strong>INP</strong></td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">Responsiveness to interactions</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">≤ 200ms</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);"><strong>CLS</strong></td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">Visual stability</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">≤ 0.1</td> </tr> </tbody> </table> </div> <hr> <h2>What Is the Difference Between Field Data and Lab Data?</h2> <p>When measuring website performance, you may encounter two major types of data: <strong>Field Data</strong> and <strong>Lab Data</strong>.</p> <h3>What Is Field Data?</h3> <p>Field Data is collected from real users under real-world conditions. Device capabilities, network conditions, browser behavior, and other environmental factors can affect the results.</p> <p>For this reason, Field Data provides a more realistic picture of how users experience a website.</p> <h3>What Is Lab Data?</h3> <p>Lab Data is generated in a controlled testing environment with predefined conditions. It is very useful for identifying technical problems and testing performance improvements.</p> <p>As a result, a page can perform well in a laboratory test while real users experience different results on different devices and networks.</p> <hr> <h2>What Is PageSpeed Insights?</h2> <p><strong>PageSpeed Insights</strong> is a popular tool for analyzing web page performance. It can provide information about page performance and user-experience-related metrics.</p> <p>For developers, PageSpeed Insights can be a useful starting point for identifying performance problems, but it should not be the only source of performance analysis.</p> <p>Real-user data should also be considered when evaluating website performance.</p> <hr> <h2>Core Web Vitals in Google Search Console</h2> <p><strong>Google Search Console</strong> also provides a Core Web Vitals report that helps website owners understand the performance of their pages.</p> <p>The report can be especially useful for identifying groups of pages that share performance problems.</p> <p>Instead of focusing only on one URL or one number, developers should look for recurring patterns across their pages.</p> <hr> <h2>A Real-World Performance Analysis Example</h2> <p>Imagine that a page produces the following results:</p> <pre><code>LCP = 4.8s INP = 280ms CLS = 0.32</code></pre> <p>All three metrics need improvement.</p> <p>We can investigate the problems step by step.</p> <h3>Step 1 — LCP</h3> <p>Suppose the Hero image is extremely large. We can optimize it:</p> <pre><code>Large Image ↓ Compression ↓ WebP / AVIF ↓ Better Loading Priority ↓ Lower LCP</code></pre> <h3>Step 2 — INP</h3> <p>If heavy JavaScript is blocking the Main Thread, we can identify Long Tasks and reduce unnecessary work.</p> <pre><code>Heavy JavaScript ↓ Long Tasks ↓ Main Thread Blocked ↓ Interaction Delay ↓ Optimize JavaScript ↓ Better INP</code></pre> <h3>Step 3 — CLS</h3> <p>If images, advertisements, or dynamic elements appear without reserved space, we should reserve the required space before those elements load.</p> <pre><code>Undefined Element Size ↓ Layout Shift ↓ Higher CLS Defined Space ↓ Stable Layout ↓ Lower CLS</code></pre> <p>Therefore, performance optimization is usually not a single-step task. It is a combination of many technical improvements.</p> <hr> <h2>How Can You Improve Core Web Vitals?</h2> <ul> <li>Compress images and use appropriate formats.</li> <li>Define image dimensions.</li> <li>Reduce unnecessary CSS and JavaScript.</li> <li>Identify and optimize Long Tasks.</li> <li>Improve server response time.</li> <li>Use caching where appropriate.</li> <li>Use a CDN when it makes sense for the project.</li> <li>Optimize font loading.</li> <li>Reserve space for dynamic content.</li> <li>Monitor real-user performance data.</li> <li>Test pages on both mobile and desktop devices.</li> </ul> <hr> <h2>Common Core Web Vitals Optimization Mistakes</h2> <h3>Focusing Only on Lighthouse Scores</h3> <p>A good laboratory score does not mean that every real user will experience the page in exactly the same way. Real-world conditions vary significantly.</p> <h3>Thinking Core Web Vitals Is the Only SEO Factor</h3> <p>Core Web Vitals are important, but Google Search rankings are not determined by a single metric.</p> <h3>Optimizing Only for Desktop</h3> <p>Many users browse the web on mobile devices, and page performance can vary significantly across devices and networks.</p> <h3>Focusing Too Much on One Number</h3> <p>The final goal should be a fast and usable website, not simply achieving a specific score.</p> <hr> <h2>Core Web Vitals Quick Checklist</h2> <ul> <li>☐ LCP is within the recommended range.</li> <li>☐ INP is within the recommended range.</li> <li>☐ CLS is low.</li> <li>☐ Images have defined dimensions.</li> <li>☐ Large images are optimized.</li> <li>☐ Unnecessary JavaScript has been reduced.</li> <li>☐ Long Tasks have been investigated.</li> <li>☐ Server response time has been optimized.</li> <li>☐ Mobile performance has been tested.</li> <li>☐ Real-user data has been considered.</li> </ul> <hr> <h2>Frequently Asked Questions About Core Web Vitals</h2> <h3>What metrics are included in Core Web Vitals?</h3> <p>The current Core Web Vitals are LCP for loading performance, INP for responsiveness, and CLS for visual stability. :contentReference[oaicite:18]{index=18}</p> <h3>Do Core Web Vitals automatically make a page rank first on Google?</h3> <p>No. Core Web Vitals are used by Google's ranking systems, but good Core Web Vitals alone do not guarantee top rankings. :contentReference[oaicite:19]{index=19}</p> <h3>What is a good LCP?</h3> <p>An LCP of 2.5 seconds or less is considered good. Values above 4 seconds are considered poor. :contentReference[oaicite:20]{index=20}</p> <h3>What is a good INP?</h3> <p>An INP of 200 milliseconds or less is considered good. Values above 500 milliseconds are considered poor. :contentReference[oaicite:21]{index=21}</p> <h3>What is a good CLS?</h3> <p>A CLS of 0.1 or less is considered good, while values above 0.25 are considered poor. :contentReference[oaicite:22]{index=22}</p> <h3>Is FID still a Core Web Vital?</h3> <p>No. INP replaced FID as the Core Web Vital used to measure responsiveness. :contentReference[oaicite:23]{index=23}</p> <hr> <h2>Conclusion</h2> <p><strong>Core Web Vitals</strong> are important metrics for understanding how real users experience a web page. They focus on three major areas: loading performance through <strong>LCP</strong>, responsiveness through <strong>INP</strong>, and visual stability through <strong>CLS</strong>.</p> <p>Improving these metrics is not only about search engines. It also helps developers build websites that feel faster, smoother, and easier to use.</p> <p>However, Core Web Vitals should not be treated as a shortcut to the top of Google Search. The strongest approach combines performance with helpful content, good website structure, security, accessibility, and an overall high-quality user experience.</p> <p><strong>A fast website is not built only for Google; it is built for the people who use it every day.</strong></p> <hr> <p><strong>© Just Programmer | Learn • Build • Grow</strong></p> <h2>Core Web Vitals چیست؟ راهنمای فنی LCP، INP و CLS برای بهبود سرعت و سئو سایت</h2> <p>امروزه فقط زیبا بودن یک وب‌سایت برای موفقیت آن کافی نیست. کاربران انتظار دارند صفحات سریع بارگذاری شوند، دکمه‌ها و عناصر صفحه بدون تأخیر به تعاملات آن‌ها پاسخ دهند و هنگام بارگذاری محتوا، صفحه ناگهان جابه‌جا نشود.</p> <p>اینجاست که مفهوم <strong>Core Web Vitals</strong> اهمیت پیدا می‌کند. Core Web Vitals مجموعه‌ای از معیارهای مهم برای اندازه‌گیری تجربه واقعی کاربران از یک صفحه وب است که سه جنبه مهم را بررسی می‌کند: <strong>سرعت بارگذاری، پاسخ‌گویی و پایداری بصری</strong>.</p> <p>در این مقاله از <strong>Just Programmer</strong>، به‌صورت فنی بررسی می‌کنیم که Core Web Vitals چیست، معیارهای <strong>LCP، INP و CLS</strong> چه چیزی را اندازه‌گیری می‌کنند، چه عواملی باعث ضعیف شدن آن‌ها می‌شوند و چگونه می‌توان عملکرد یک وب‌سایت را بهبود داد.</p> <hr> <h2>Core Web Vitals چیست؟</h2> <p><strong>Core Web Vitals</strong> مجموعه‌ای از معیارهای استاندارد است که برای اندازه‌گیری بخش‌های مهم تجربه کاربر در صفحات وب استفاده می‌شود.</p> <p>سه معیار اصلی Core Web Vitals عبارت‌اند از:</p> <ul> <li><strong>LCP — Largest Contentful Paint:</strong> اندازه‌گیری سرعت نمایش محتوای اصلی صفحه</li> <li><strong>INP — Interaction to Next Paint:</strong> اندازه‌گیری میزان پاسخ‌گویی صفحه به تعاملات کاربر</li> <li><strong>CLS — Cumulative Layout Shift:</strong> اندازه‌گیری پایداری بصری صفحه</li> </ul> <p>این سه معیار به ترتیب سه بخش مهم از تجربه کاربر را بررسی می‌کنند:</p> <pre><code>Loading ↓ LCP Interaction ↓ INP Visual Stability ↓ CLS</code></pre> <p>هدف Core Web Vitals این نیست که صرفاً یک عدد برای سایت تولید کند؛ بلکه این معیارها کمک می‌کنند بفهمیم کاربران هنگام استفاده واقعی از یک صفحه چه تجربه‌ای دارند.</p> <hr> <h2>Core Web Vitals چه ارتباطی با SEO دارد؟</h2> <p>Core Web Vitals با تجربه کاربر و سیستم‌های رتبه‌بندی Google ارتباط دارد. Google اعلام کرده است که Core Web Vitals در سیستم‌های رتبه‌بندی استفاده می‌شوند و توصیه می‌کند صاحبان سایت‌ها وضعیت این معیارها را بهبود دهند.</p> <p>با این حال، یک تصور اشتباه وجود دارد: <strong>داشتن Core Web Vitals عالی به معنی قرار گرفتن خودکار در رتبه اول Google نیست.</strong></p> <p>رتبه‌بندی Google به مجموعه‌ای از عوامل مختلف وابسته است و Core Web Vitals تنها یکی از بخش‌های تجربه صفحه است. محتوای مفید، ارتباط محتوا با جست‌وجوی کاربر، کیفیت سایت، ساختار صفحات و عوامل مختلف دیگر نیز اهمیت دارند.</p> <p>بنابراین بهتر است Core Web Vitals را فقط برای گرفتن یک امتیاز بالا در ابزارهای SEO بهینه نکنیم؛ هدف اصلی باید ساخت یک تجربه سریع، روان و قابل استفاده برای کاربران باشد.</p> <hr> <h2>LCP چیست؟ Largest Contentful Paint</h2> <p><strong>LCP</strong> مخفف <strong>Largest Contentful Paint</strong> است و نشان می‌دهد بزرگ‌ترین عنصر محتوایی قابل مشاهده در بخش ابتدایی صفحه چه زمانی برای کاربر نمایش داده می‌شود.</p> <p>این عنصر می‌تواند یک تصویر بزرگ، یک بلوک متنی یا یک ویدئو باشد.</p> <p>به زبان ساده، LCP به این سؤال پاسخ می‌دهد:</p> <p><strong>«محتوای اصلی صفحه با چه سرعتی برای کاربر قابل مشاهده می‌شود؟»</strong></p> <p>برای مثال، اگر یک صفحه دارای یک تصویر بزرگ Hero باشد و آن تصویر بزرگ‌ترین عنصر قابل مشاهده باشد، زمان نمایش آن می‌تواند نقش مهمی در LCP داشته باشد.</p> <h3>محدوده‌های LCP</h3> <div style="width: 100%; overflow-x: auto; margin: 20px 0;"> <table style="width: 100%; min-width: 600px; border-collapse: collapse; background: #10161F; color: #e7ecf2; border: 1px solid rgba(255,255,255,0.08);"> <thead> <tr> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: right;">LCP</th> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: right;">وضعیت</th> </tr> </thead> <tbody> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">تا ۲.۵ ثانیه</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">خوب</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">بیشتر از ۲.۵ تا ۴ ثانیه</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">نیازمند بهبود</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">بیشتر از ۴ ثانیه</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">ضعیف</td> </tr> </tbody> </table> </div> <p>برای ارزیابی تجربه بیشتر کاربران، این معیار معمولاً در <strong>صدک ۷۵</strong> و به تفکیک موبایل و دسکتاپ بررسی می‌شود. مقدار خوب LCP برابر با ۲.۵ ثانیه یا کمتر است. :contentReference[oaicite:2]{index=2}</p> <hr> <h2>چه عواملی باعث افزایش LCP می‌شوند؟</h2> <p>بالا بودن LCP می‌تواند دلایل مختلفی داشته باشد و همیشه مشکل فقط حجم تصویر نیست.</p> <ul> <li>سرعت پایین پاسخ‌گویی سرور</li> <li>TTFB بالا</li> <li>تصاویر بزرگ و بهینه‌نشده</li> <li>فایل‌های CSS سنگین</li> <li>فونت‌های وب که دیر بارگذاری می‌شوند</li> <li>منابع Render-Blocking</li> <li>JavaScript سنگین</li> <li>Redirectهای غیرضروری</li> <li>شبکه یا اتصال کند کاربر</li> <li>ساختار نامناسب بارگذاری منابع</li> </ul> <h3>چگونه LCP را بهبود دهیم؟</h3> <ul> <li>تصاویر بزرگ را فشرده و در صورت مناسب بودن به WebP یا AVIF تبدیل کنید.</li> <li>تصویر اصلی صفحه را با اولویت مناسب بارگذاری کنید.</li> <li>CSSهای غیرضروری را کاهش دهید.</li> <li>منابع Render-Blocking را شناسایی و تا حد امکان بهینه کنید.</li> <li>زمان پاسخ‌گویی سرور را کاهش دهید.</li> <li>از Cache و CDN در سناریوهای مناسب استفاده کنید.</li> <li>فونت‌ها را به شکل صحیح بارگذاری کنید.</li> <li>JavaScript غیرضروری را از مسیر بحرانی بارگذاری صفحه خارج کنید.</li> </ul> <hr> <h2>INP چیست؟ Interaction to Next Paint</h2> <p><strong>INP</strong> مخفف <strong>Interaction to Next Paint</strong> است و میزان پاسخ‌گویی صفحه به تعاملات کاربر را اندازه‌گیری می‌کند.</p> <p>تعامل می‌تواند شامل کلیک روی یک دکمه، لمس صفحه، انتخاب یک گزینه یا انجام یک عملیات دیگر باشد.</p> <p>به زبان ساده، INP بررسی می‌کند که بعد از تعامل کاربر، مرورگر با چه سرعتی بتواند نتیجه قابل مشاهده آن تعامل را نمایش دهد.</p> <p>INP از سال ۲۰۲۴ جایگزین <strong>FID</strong> به‌عنوان یکی از Core Web Vitals شده است. :contentReference[oaicite:3]{index=3}</p> <h3>محدوده‌های INP</h3> <div style="width: 100%; overflow-x: auto; margin: 20px 0;"> <table style="width: 100%; min-width: 600px; border-collapse: collapse; background: #10161F; color: #e7ecf2; border: 1px solid rgba(255,255,255,0.08);"> <thead> <tr> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: right;">INP</th> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: right;">وضعیت</th> </tr> </thead> <tbody> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">تا ۲۰۰ میلی‌ثانیه</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">خوب</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">بیشتر از ۲۰۰ تا ۵۰۰ میلی‌ثانیه</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">نیازمند بهبود</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">بیشتر از ۵۰۰ میلی‌ثانیه</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">ضعیف</td> </tr> </tbody> </table> </div> <p>مقدار خوب INP برابر با ۲۰۰ میلی‌ثانیه یا کمتر است و برای ارزیابی کاربران معمولاً صدک ۷۵ بارگذاری‌ها به تفکیک موبایل و دسکتاپ بررسی می‌شود. :contentReference[oaicite:4]{index=4}</p> <hr> <h2>چرا INP در یک سایت ضعیف می‌شود؟</h2> <p>یکی از مهم‌ترین دلایل INP ضعیف، اجرای طولانی JavaScript روی <strong>Main Thread</strong> مرورگر است.</p> <p>فرض کنید کاربر روی یک دکمه کلیک می‌کند، اما هم‌زمان مرورگر در حال اجرای یک عملیات سنگین JavaScript است. تا زمانی که مرورگر بتواند این کار را مدیریت کند، پاسخ به تعامل کاربر ممکن است به تأخیر بیفتد.</p> <pre><code>User Interaction ↓ JavaScript Event ↓ Long Task ↓ Main Thread Busy ↓ Delayed Visual Update ↓ Poor INP</code></pre> <h3>راه‌های بهبود INP</h3> <ul> <li>کاهش JavaScript غیرضروری</li> <li>تقسیم Long Taskها به وظایف کوچک‌تر</li> <li>کاهش محاسبات سنگین در Event Handlerها</li> <li>بهینه‌سازی Event Listenerها</li> <li>استفاده مناسب از Web Worker برای برخی پردازش‌های سنگین</li> <li>کاهش وابستگی‌های JavaScript غیرضروری</li> <li>جلوگیری از اجرای عملیات سنگین بلافاصله پس از تعامل کاربر</li> </ul> <hr> <h2>CLS چیست؟ Cumulative Layout Shift</h2> <p><strong>CLS</strong> مخفف <strong>Cumulative Layout Shift</strong> است و پایداری بصری صفحه را اندازه‌گیری می‌کند.</p> <p>تا به حال شده هنگام باز کردن یک صفحه روی یک دکمه کلیک کنید، اما ناگهان یک تصویر یا تبلیغ بارگذاری شود و دکمه به سمت دیگری حرکت کند؟ این دقیقاً نمونه‌ای از یک تجربه بد ناشی از Layout Shift است.</p> <p>CLS تلاش می‌کند میزان این جابه‌جایی‌های ناخواسته را اندازه‌گیری کند.</p> <h3>محدوده‌های CLS</h3> <div style="width: 100%; overflow-x: auto; margin: 20px 0;"> <table style="width: 100%; min-width: 600px; border-collapse: collapse; background: #10161F; color: #e7ecf2; border: 1px solid rgba(255,255,255,0.08);"> <thead> <tr> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: right;">CLS</th> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: right;">وضعیت</th> </tr> </thead> <tbody> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">۰.۱ یا کمتر</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">خوب</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">بیشتر از ۰.۱ تا ۰.۲۵</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">نیازمند بهبود</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">بیشتر از ۰.۲۵</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">ضعیف</td> </tr> </tbody> </table> </div> <p>برای تجربه خوب، مقدار CLS باید ۰.۱ یا کمتر باشد و ارزیابی معمولاً در صدک ۷۵ بارگذاری‌ها انجام می‌شود. :contentReference[oaicite:5]{index=5}</p> <hr> <h2>چه چیزهایی باعث CLS ضعیف می‌شوند؟</h2> <p>یکی از رایج‌ترین دلایل CLS، مشخص نکردن ابعاد عناصر قبل از بارگذاری آن‌ها است.</p> <p>برای مثال:</p> <pre><code><img src="hero.webp" alt="Hero Image"></code></pre> <p>در این حالت مرورگر ممکن است قبل از دریافت تصویر، فضای دقیق مورد نیاز آن را نداند.</p> <p>بهتر است ابعاد تصویر مشخص باشد:</p> <pre><code><img src="hero.webp" width="1200" height="700" alt="Hero Image" ></code></pre> <p>دلایل رایج دیگر عبارت‌اند از:</p> <ul> <li>تصاویر بدون ابعاد مشخص</li> <li>تبلیغات و iframeهای بدون فضای رزروشده</li> <li>اضافه شدن محتوای Dynamic به صفحه</li> <li>بارگذاری دیرهنگام فونت‌ها</li> <li>تغییر اندازه عناصر پس از Render</li> <li>درج ناگهانی Banner یا Notification</li> </ul> <p>تصاویر بدون ابعاد، تبلیغات و iframeهای بدون اندازه، محتوای Dynamic و Web Fontها از عوامل رایج Layout Shift هستند. :contentReference[oaicite:6]{index=6}</p> <hr> <h2>مقایسه LCP، INP و CLS</h2> <div style="width: 100%; overflow-x: auto; margin: 20px 0;"> <table style="width: 100%; min-width: 750px; border-collapse: collapse; background: #10161F; color: #e7ecf2; border: 1px solid rgba(255,255,255,0.08);"> <thead> <tr> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: right;">معیار</th> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: right;">چه چیزی را اندازه می‌گیرد؟</th> <th style="padding: 14px; border: 1px solid rgba(255,255,255,0.08); text-align: right;">هدف خوب</th> </tr> </thead> <tbody> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);"><strong>LCP</strong></td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">سرعت نمایش محتوای اصلی</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">≤ 2.5s</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);"><strong>INP</strong></td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">پاسخ‌گویی به تعاملات کاربر</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">≤ 200ms</td> </tr> <tr> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);"><strong>CLS</strong></td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">پایداری بصری صفحه</td> <td style="padding: 14px; border: 1px solid rgba(255,255,255,0.08);">≤ 0.1</td> </tr> </tbody> </table> </div> <hr> <h2>Field Data و Lab Data چه تفاوتی دارند؟</h2> <p>هنگام بررسی عملکرد سایت ممکن است با دو نوع داده مواجه شوید: <strong>Field Data</strong> و <strong>Lab Data</strong>.</p> <h3>Field Data چیست؟</h3> <p>Field Data یا داده‌های میدانی از تجربه واقعی کاربران در شرایط واقعی جمع‌آوری می‌شود. دستگاه، شبکه، موقعیت جغرافیایی، مرورگر و شرایط واقعی کاربر می‌توانند روی نتایج تأثیر بگذارند.</p> <p>به همین دلیل Field Data تصویر واقعی‌تری از تجربه کاربران ارائه می‌دهد.</p> <h3>Lab Data چیست؟</h3> <p>Lab Data در یک محیط کنترل‌شده و با شرایط مشخص تولید می‌شود. این نوع داده برای پیدا کردن مشکلات فنی و آزمایش تغییرات بسیار مفید است.</p> <p>بنابراین ممکن است یک صفحه در تست آزمایشگاهی عملکرد خوبی داشته باشد، اما کاربران واقعی در دستگاه‌ها و شبکه‌های مختلف تجربه متفاوتی داشته باشند.</p> <hr> <h2>PageSpeed Insights چیست؟</h2> <p><strong>PageSpeed Insights</strong> یکی از ابزارهای شناخته‌شده برای بررسی عملکرد صفحات وب است. این ابزار می‌تواند اطلاعاتی درباره عملکرد صفحه و معیارهای مرتبط با تجربه کاربر ارائه کند.</p> <p>برای توسعه‌دهندگان، PageSpeed Insights می‌تواند نقطه شروع خوبی برای پیدا کردن مشکلات Performance باشد؛ اما نباید تنها ابزار مورد استفاده باشد.</p> <p>در کنار تست‌های آزمایشگاهی، بررسی داده‌های واقعی کاربران نیز اهمیت زیادی دارد.</p> <hr> <h2>Core Web Vitals در Google Search Console</h2> <p><strong>Google Search Console</strong> نیز گزارشی برای Core Web Vitals ارائه می‌کند که به صاحبان سایت کمک می‌کند وضعیت صفحات خود را بررسی کنند.</p> <p>این گزارش برای پیدا کردن گروه‌هایی از صفحات که در تجربه کاربران مشکل دارند بسیار مفید است.</p> <p>نکته مهم این است که به جای تمرکز روی یک صفحه یا یک عدد خاص، باید الگوهای تکرارشونده در صفحات سایت را پیدا کرد.</p> <hr> <h2>یک مثال واقعی از تحلیل Performance</h2> <p>فرض کنید نتیجه بررسی یک صفحه به شکل زیر باشد:</p> <pre><code>LCP = 4.8s INP = 280ms CLS = 0.32</code></pre> <p>هر سه معیار در وضعیت مناسبی نیستند.</p> <p>حالا مشکل را مرحله‌به‌مرحله بررسی می‌کنیم:</p> <h3>مرحله اول — LCP</h3> <p>اگر تصویر Hero بسیار بزرگ باشد، آن را بهینه می‌کنیم:</p> <pre><code>Large Image ↓ Compression ↓ WebP / AVIF ↓ Better Loading Priority ↓ Lower LCP</code></pre> <h3>مرحله دوم — INP</h3> <p>اگر JavaScript سنگینی روی Main Thread اجرا شود، Long Taskها را بررسی کرده و عملیات غیرضروری را کاهش می‌دهیم.</p> <pre><code>Heavy JavaScript ↓ Long Tasks ↓ Main Thread Blocked ↓ Interaction Delay ↓ Optimize JavaScript ↓ Better INP</code></pre> <h3>مرحله سوم — CLS</h3> <p>اگر تصاویر، تبلیغات یا عناصر Dynamic بدون فضای مشخص وارد صفحه شوند، باید فضای مورد نیاز آن‌ها از ابتدا مشخص شود.</p> <pre><code>Undefined Element Size ↓ Layout Shift ↓ Higher CLS Defined Space ↓ Stable Layout ↓ Lower CLS</code></pre> <p>در نتیجه، بهینه‌سازی Performance معمولاً یک کار تک‌مرحله‌ای نیست؛ بلکه مجموعه‌ای از اصلاحات کوچک و فنی است.</p> <hr> <h2>چطور Core Web Vitals یک سایت را بهبود دهیم؟</h2> <ul> <li>تصاویر را فشرده و با فرمت مناسب ارائه کنید.</li> <li>ابعاد تصاویر را مشخص کنید.</li> <li>CSS و JavaScript غیرضروری را کاهش دهید.</li> <li>Long Taskهای JavaScript را بررسی کنید.</li> <li>سرعت پاسخ‌گویی Server را بهبود دهید.</li> <li>از Cache در بخش‌های مناسب استفاده کنید.</li> <li>در صورت نیاز از CDN استفاده کنید.</li> <li>فونت‌ها را بهینه بارگذاری کنید.</li> <li>برای عناصر Dynamic فضای مناسب در نظر بگیرید.</li> <li>تجربه واقعی کاربران را با داده‌های میدانی بررسی کنید.</li> <li>صفحات را روی موبایل و دسکتاپ جداگانه بررسی کنید.</li> </ul> <hr> <h2>اشتباهات رایج در بهینه‌سازی Core Web Vitals</h2> <h3>فقط به امتیاز Lighthouse توجه کردن</h3> <p>یک امتیاز خوب در یک تست آزمایشگاهی به معنی تجربه یکسان برای تمام کاربران نیست. شرایط کاربران واقعی متفاوت است.</p> <h3>فکر کردن Core Web Vitals تنها عامل SEO است</h3> <p>Core Web Vitals مهم است، اما رتبه‌بندی Google به یک معیار محدود نمی‌شود.</p> <h3>بهینه‌سازی فقط برای دسکتاپ</h3> <p>بسیاری از کاربران از موبایل استفاده می‌کنند و عملکرد صفحه روی دستگاه‌ها و شبکه‌های مختلف می‌تواند متفاوت باشد.</p> <h3>تمرکز بیش از حد روی یک عدد</h3> <p>هدف نهایی ساخت یک تجربه سریع و قابل استفاده است، نه صرفاً رسیدن به یک امتیاز خاص.</p> <hr> <h2>چک‌لیست سریع Core Web Vitals</h2> <ul> <li>☐ LCP در محدوده مناسب قرار دارد.</li> <li>☐ INP در محدوده مناسب قرار دارد.</li> <li>☐ CLS پایین است.</li> <li>☐ تصاویر دارای ابعاد مشخص هستند.</li> <li>☐ تصاویر بزرگ بهینه شده‌اند.</li> <li>☐ JavaScript غیرضروری کاهش یافته است.</li> <li>☐ Long Taskها بررسی شده‌اند.</li> <li>☐ Server Response بهینه است.</li> <li>☐ صفحات موبایل بررسی شده‌اند.</li> <li>☐ داده‌های واقعی کاربران بررسی شده‌اند.</li> </ul> <hr> <h2>سؤالات متداول درباره Core Web Vitals</h2> <h3>Core Web Vitals شامل چه معیارهایی است؟</h3> <p>در حال حاضر سه معیار اصلی Core Web Vitals عبارت‌اند از LCP برای Loading، INP برای Responsiveness و CLS برای Visual Stability. :contentReference[oaicite:7]{index=7}</p> <h3>آیا Core Web Vitals مستقیماً باعث رتبه اول Google می‌شود؟</h3> <p>خیر. Core Web Vitals یکی از سیگنال‌های مورد استفاده در سیستم‌های رتبه‌بندی است و داشتن وضعیت خوب در آن به‌تنهایی تضمین‌کننده رتبه بالا نیست. :contentReference[oaicite:8]{index=8}</p> <h3>LCP خوب چقدر است؟</h3> <p>LCP برابر با ۲.۵ ثانیه یا کمتر در محدوده خوب قرار می‌گیرد. مقادیر بیشتر از ۴ ثانیه ضعیف محسوب می‌شوند. :contentReference[oaicite:9]{index=9}</p> <h3>INP خوب چقدر است؟</h3> <p>INP برابر با ۲۰۰ میلی‌ثانیه یا کمتر وضعیت خوبی دارد. مقادیر بیشتر از ۵۰۰ میلی‌ثانیه ضعیف محسوب می‌شوند. :contentReference[oaicite:10]{index=10}</p> <h3>CLS خوب چقدر است؟</h3> <p>CLS برابر با ۰.۱ یا کمتر وضعیت خوبی دارد و مقادیر بالاتر از ۰.۲۵ ضعیف محسوب می‌شوند. :contentReference[oaicite:11]{index=11}</p> <h3>آیا FID هنوز یکی از Core Web Vitals است؟</h3> <p>خیر. INP جایگزین FID شده و معیار اصلی برای سنجش Responsiveness در Core Web Vitals است. :contentReference[oaicite:12]{index=12}</p> <hr> <h2>جمع‌بندی</h2> <p><strong>Core Web Vitals</strong> مجموعه‌ای از معیارهای مهم برای درک تجربه واقعی کاربران از یک صفحه وب است. این معیارها سه بخش اصلی را بررسی می‌کنند: سرعت نمایش محتوای اصلی با <strong>LCP</strong>، پاسخ‌گویی به تعاملات با <strong>INP</strong> و پایداری بصری با <strong>CLS</strong>.</p> <p>بهینه‌سازی این معیارها فقط برای موتورهای جستجو نیست؛ بلکه مستقیماً به ساخت یک وب‌سایت سریع‌تر، روان‌تر و قابل استفاده‌تر کمک می‌کند.</p> <p>با این حال، Core Web Vitals نباید به‌عنوان یک میانبر برای رسیدن به رتبه اول Google دیده شود. بهترین نتیجه زمانی به دست می‌آید که Performance در کنار محتوای مفید، ساختار مناسب، امنیت، دسترسی‌پذیری و تجربه کلی کاربر بهینه شود.</p> <p><strong>یک وب‌سایت سریع فقط برای Google ساخته نمی‌شود؛ برای انسان‌هایی ساخته می‌شود که هر روز از آن استفاده می‌کنند.</strong></p> <hr> <p><strong>© Just Programmer | Learn • Build • Grow</strong></p>
Read More
