بیاموزید که Largest Contentful Paint چیست، چگونه اندازهگیری میشود و چگونه میتوانید آن را بهینهسازی کنید تا امتیاز Core Web Vitals خود را بهبود ببخشید.
Largest Contentful Paint (LCP) یک شاخص تجربه کاربری گوگل است که در سال 2021 به سیستمهای رتبهبندی ادغام شده است.
LCP یکی از سه شاخص Core Web Vitals (CWV) است که عملکرد فنی وبسایتها را که بر تجربه کاربری تاثیر میگذارد، دنبال میکند.
Core Web Vitals بهطور متناقضی وجود دارند، زیرا گوگل راهنماییهایی ارائه میدهد که بر اهمیت آنها تاکید دارد اما تاثیر آنها بر رتبهبندی را کماهمیت جلوه میدهد.
LCP، مانند سایر سیگنالهای CWV، برای تشخیص مشکلات فنی و اطمینان از اینکه وبسایت شما حداقل سطح عملکرد مورد نیاز کاربران را برآورده میکند، مفید است.
Largest Contentful Paint چیست؟
LCP یک اندازهگیری از مدت زمانی است که طول میکشد تا محتوای اصلی یک صفحه دانلود شود و آماده تعامل شود.
بهطور خاص، این زمان از شروع بارگذاری صفحه تا رندر شدن بزرگترین تصویر یا بلوک متن در دید کاربر را اندازهگیری میکند. هر چیزی که پایین صفحه باشد محاسبه نمیشود.
عناصر معمولی که اندازهگیری میشوند شامل تصاویر، تصاویر پوستر ویدیو، تصاویر پسزمینه و عناصر متنی بلوکی مانند تگهای پاراگراف هستند.
LCP شامل زیرشاخصهای زیر است:
- زمان تا اولین بایت (Time to First Byte – TTFB)
- تأخیر بارگذاری منابع
- مدت زمان بارگذاری منابع
- تأخیر در رندر عنصر
بهینهسازی LCP به معنای بهینهسازی هر یک از این شاخصها است بهگونهای که زمان بارگذاری و نمایش منابع LCP کمتر از 2.5 ثانیه باشد.
در اینجا یک مقیاس آستانه برای مرجع شما آمده است:
بیایید نگاهی دقیقتر به این زیرشاخصها بیندازیم و ببینیم چگونه میتوانید آنها را بهبود بخشید.
زمان تا اولین بایت (TTFB)
TTFB زمان پاسخدهی سرور است و مدت زمانی را که مرورگر کاربر نیاز دارد تا اولین بایت داده را از سرور شما دریافت کند، اندازهگیری میکند. این شامل زمان جستجوی DNS، زمانی که سرور برای پردازش درخواستها صرف میکند و ریدایرکتها میشود.
بهینهسازی TTFB میتواند به طور قابل توجهی زمان بارگذاری کلی را کاهش داده و LCP را بهبود بخشد.
زمان پاسخدهی سرور تا حد زیادی به موارد زیر بستگی دارد:
- کوئریهای پایگاه داده
- خطاهای کش CDN
- رندرینگ ناکارآمد سمت سرور
- هاستینگ
بیایید هر کدام را بررسی کنیم:
1_ کوئریهای پایگاه داده
اگر زمان پاسخدهی شما بالا است، سعی کنید منبع آن را شناسایی کنید.
برای مثال، ممکن است به دلیل کوئریهای بهینهنشده یا حجم بالای کوئریها باشد که زمان پاسخدهی سرور را کند میکند. اگر یک پایگاه داده MySQL دارید، میتوانید کوئریهای کند را لاگ کنید تا ببینید کدام کوئریها کند هستند.
اگر یک وبسایت وردپرسی دارید، میتوانید از افزونه Query Monitor استفاده کنید تا ببینید کوئریهای SQL چقدر زمان میبرند.
ابزارهای دیگر عالی Blackfire یا Newrelic هستند که به CMS یا استک شما بستگی ندارند، اما نیاز به نصب روی هاست/سرور شما دارند.
2_ خطاهای کش CDN
خطای کش CDN زمانی رخ میدهد که یک منبع در کش CDN پیدا نمیشود و درخواست به سرور مبدا فرستاده میشود. این فرایند زمان بیشتری میبرد و منجر به افزایش تاخیر و زمان بارگذاری برای کاربر نهایی میشود.
معمولاً ارائهدهنده CDN شما گزارشی درباره تعداد خطاهای کش شما دارد.
اگر درصد بالایی (بیش از 10٪) از خطاهای کش مشاهده کردید، ممکن است نیاز به تماس با ارائهدهنده CDN یا پشتیبانی هاست داشته باشید در صورتی که هاست مدیریت شده با کش یکپارچه دارید تا مشکل را حل کنید.
یکی از دلایلی که ممکن است باعث خطاهای کش شود، حمله اسپم جستجو است.
برای مثال، دهها دامنه اسپم به صفحات جستجوی داخلی شما با کوئریهای اسپم مانند [/?q=甘肃代] لینک میدهند که به دلیل متفاوت بودن هر بار اصطلاح جستجو کش نمیشوند. مشکل این است که Googlebot آنها را به شدت خزنده میکند که ممکن است باعث زمان پاسخدهی بالا سرور و خطاهای کش شود.
در این صورت و به طور کلی، بهترین عمل این است که URLهای جستجو یا جنبهها را از طریق robots.txt مسدود کنید. اما زمانی که آنها را از طریق robots.txt مسدود میکنید، ممکن است این URLها به دلیل داشتن بکلینک از وبسایتهای کمکیفیت ایندکس شوند.
با این حال، نگران نباشید. جان مولر گفته است که این مسئله به مرور زمان حل خواهد شد.
اینجا یک مثال واقعی از کنسول جستجو درباره زمان پاسخدهی بالا سرور (TTFB) ناشی از خطاهای کش آمده است:
3_ رندرینگ ناکارآمد سمت سرور
ممکن است برخی از اجزای وبسایت شما به APIهای شخص ثالث وابسته باشند.
برای مثال، شما تعداد خوانشها و اشتراکگذاریها را در مقالات SEJ مشاهده کردهاید. ما این اعداد را از APIهای مختلف میگیریم، اما به جای اینکه آنها را وقتی درخواست به سرور میرسد بگیریم، آنها را پیشفچ میکنیم و در پایگاه داده خود ذخیره میکنیم تا سریعتر نمایش داده شوند.
تصور کنید که اگر ما به APIهای شمارش اشتراک و GA4 متصل شویم وقتی درخواست به سرور میرسد. هر درخواست حدود 300-500 میلیثانیه طول میکشد تا اجرا شود و ما حدود 1000 میلیثانیه تاخیر به دلیل رندرینگ ناکارآمد سمت سرور اضافه میکنیم. بنابراین مطمئن شوید که بکاند شما بهینه شده است.
4_ هاستینگ
به خاطر داشته باشید که هاستینگ برای TTFB پایین بسیار مهم است. با انتخاب هاستینگ مناسب میتوانید TTFB خود را دو تا سه برابر کاهش دهید.
هاستینگ را انتخاب کنید که CDN و کش در سیستم یکپارچه شده باشد. این به شما کمک میکند که نیازی به خرید جداگانه CDN نداشته باشید و زمان نگهداری آن را صرفهجویی کنید.
بنابراین، سرمایهگذاری در هاستینگ مناسب بازده خواهد داشت.
مطالعه راهنمای دقیقتر: راهنمای شما برای انواع هاستینگ برای وبسایت وردپرس شما
چگونه هاستینگ وب بر SEO تاثیر میگذارد و کدام یک بهترین است؟
اکنون بیایید نگاهی به دیگر شاخصهایی که در بالا ذکر شد و به LCP کمک میکنند بیندازیم.
تأخیر بارگذاری منابع
تأخیر بارگذاری منابع زمانی است که مرورگر نیاز دارد تا منابع LCP را پیدا کند و شروع به دانلود کند.
برای مثال، اگر یک تصویر پسزمینه در بخش هرو شما دارید که نیاز به فایلهای CSS برای بارگذاری دارد تا شناسایی شود، تأخیری برابر با زمانی که مرورگر نیاز دارد تا فایل CSS را دانلود کند تا شروع به دانلود تصویر LCP کند، وجود خواهد داشت.
در صورتی که عنصر LCP یک بلوک متن باشد، این زمان صفر است.
با بهینهسازی چگونگی شناسایی و بارگذاری سریع این منابع، میتوانید زمان نمایش محتوای حیاتی را بهبود بخشید. یکی از راهها برای این کار پیشبارگذاری هم فایلهای CSS و هم تصاویر LCP با تنظیم fetchpriority=”high” به تصویر است تا شروع به دانلود فایل CSS کند.
(عکس کد)
اما یک روش بهتر – اگر کنترل کافی روی وبسایت داشته باشید – این است که CSS بحرانی لازم برای بخش بالای صفحه را به صورت خطی قرار دهید تا مرورگر زمان صرف دانلود فایل CSS نکند. این کار پهنای باند را ذخیره میکند و فقط تصویر را پیشبارگذاری میکند.
البته بهتر است که وبپیجها را طوری طراحی کنید که از تصاویر هرو یا اسلایدرها جلوگیری کنید زیرا اینها معمولاً ارزش اضافه نمیکنند و کاربران تمایل به پیمایش از آنها دارند زیرا آنها حواسپرتکن هستند.
یک عامل مهم دیگر که به تأخیر بارگذاری کمک میکند، ریدایرکتها هستند.
اگر شما بکلینکهای خارجی با ریدایرکتها دارید، کار زیادی نمیتوانید انجام دهید. اما شما کنترل روی لینکهای داخلی خود دارید، بنابراین سعی کنید لینکهای داخلی با ریدایرکتها را پیدا کنید که معمولاً به دلیل نبود اسلش انتهایی، نسخههای غیر WWW یا تغییر URLها وجود دارند و آنها را با مقاصد واقعی جایگزین کنید.
تعداد زیادی ابزارهای فنی SEO وجود دارند که میتوانید از آنها برای کرال وبسایت خود و پیدا کردن ریدایرکتها برای جایگزینی استفاده کنید.
مدت زمان بارگذاری منابع
مدت زمان بارگذاری منابع به زمان واقعی صرف شده برای دانلود منابع LCP اشاره دارد.
حتی اگر مرورگر به سرعت منابع را پیدا کند و شروع به دانلود کند، سرعت دانلود کند همچنان میتواند به طور منفی بر LCP تاثیر بگذارد. این موضوع به اندازه منابع، سرعت اتصال شبکه سرور و شرایط شبکه کاربر بستگی دارد.
میتوانید مدت زمان بارگذاری منابع را با پیادهسازی موارد زیر کاهش دهید:
- فرمت WebP
- تصاویر با اندازه مناسب (اندازه ذاتی تصویر باید با اندازه قابل مشاهده مطابقت داشته باشد)
- اولویتبندی بارگذاری
- CDN
تأخیر در رندر عنصر
تأخیر در رندر عنصر زمانی است که مرورگر نیاز دارد تا عنصر LCP را پردازش و رندر کند.
این شاخص تحت تاثیر پیچیدگی HTML، CSS و JavaScript شما است.
کاهش منابع مسدودکننده رندر و بهینهسازی کد شما میتواند به کاهش این تأخیر کمک کند. با این حال، ممکن است که اسکریپتهای جاوااسکریپت سنگین اجرا شوند که نخ اصلی را مسدود کنند و رندر عنصر LCP تا زمانی که آن وظایف تکمیل شوند، به تاخیر بیفتد.
اینجاست که مقادیر پایین شاخص Total Blocking Time (TBT) مهم است زیرا مدت زمان کلی را که نخ اصلی توسط وظایف طولانی در بارگذاری صفحه مسدود شده است، اندازهگیری میکند و حضور اسکریپتهای سنگین که میتوانند رندر و پاسخگویی را به تاخیر بیندازند را نشان میدهد.
یکی از راههایی که میتوانید نه تنها مدت زمان بارگذاری و تاخیر بلکه کلیه شاخصهای CWV را وقتی کاربران در وبسایت شما ناوبری میکنند بهبود دهید، پیادهسازی Speculation Rules API برای ناوبریهای آینده است. با پیشفچ صفحات بهعنوان کاربرانی که روی لینکها یا صفحات حرکت میکنند که به احتمال زیاد به آنها ناوبری میکنند، میتوانید صفحات خود را بهطور لحظهای بارگذاری کنید.
مراقب “Gotchas”های امتیازدهی باشید
همه عناصر در صفحه کاربر (ویوپورت) برای محاسبه LCP استفاده میشوند. این به این معنی است که تصاویری که خارج از صفحه رندر میشوند و سپس به طرح منتقل میشوند، ممکن است به عنوان بخشی از امتیاز Largest Contentful Paint محسوب نشوند.
در مقابل، عناصری که در ویوپورت کاربر شروع میشوند و سپس از صفحه خارج میشوند، ممکن است به عنوان بخشی از محاسبه LCP محاسبه شوند.
چگونه امتیاز LCP را اندازهگیری کنیم
دو نوع ابزار امتیازدهی وجود دارد. اولی به نام Field Tools است و دومی به نام Lab Tools.
ابزارهای میدانی اندازهگیریهای واقعی یک سایت هستند.
ابزارهای آزمایشگاهی یک امتیاز مجازی بر اساس یک خزیدن شبیهسازی شده با استفاده از الگوریتمهایی که شرایط اینترنتی را که ممکن است یک کاربر معمولی تلفن همراه با آن مواجه شود، تخمین میزند.
در اینجا یک راه وجود دارد که میتوانید منابع LCP را پیدا کرده و زمان نمایش آنها را از طریق گزارش Performance در DevTools اندازهگیری کنید:
میتوانید راهنمای جامع ما را در مورد نحوه اندازهگیری شاخصهای CWV بخوانید که در آن میتوانید یاد بگیرید چگونه نه تنها LCP بلکه دیگر شاخصها را بهطور کامل رفع اشکال کنید.
بهینهسازی LCP موضوع بسیار عمیقتری است
بهبود LCP گامی مهم به سوی بهبود CWV است، اما میتواند چالشبرانگیزترین شاخص CWV برای بهینهسازی باشد.
LCP شامل چندین لایه از زیرشاخصها است که هر یک نیاز به درک دقیق برای بهینهسازی موثر دارند.
این راهنما ایده اولیهای از بهبود LCP به شما داده است و بینشهایی که تا کنون بهدست آوردهاید به شما کمک خواهد کرد که بهبودهای قابل توجهی ایجاد کنید.
اما هنوز چیزهای بیشتری برای یادگیری وجود دارد. بهینهسازی هر زیرشاخص یک علم دقیق است. با ما همراه باشید زیرا به زودی راهنماهای جامعتری منتشر خواهیم کرد که به بهینهسازی هر زیرشاخص اختصاص دارد.
منابع: https://www.searchenginejournal.com/core-web-vitals/largest-contentful-paint-2/
