LCP یا Largest Contentful Paint چیست؟ چگونه بر سئو سایت تاثیر می گذارد؟

Largest Contentful Paint معیار جدیدی برای تجربه کاربری گوگل است و به زودی یک عامل رتبه بندی خواهد بود. در این مقاله می آموزید که این معیار چیست و چگونه وب سایت خود را برای آن بهینه سازی کنید؟

Largest Contentful Paint چیست؟

LCP اندازه گیری مدت زمانی است که طول می کشد تا محتوای اصلی یک صفحه بارگیری شود و آماده برقراری تعامل باشد. درواقع بزرگ ترین تصویر یا بلوک متن در نمای کاربر اندازه گیری می شود. هر چیزی که خارج از صفحه باشد، حساب نمی شود.

عناصر معمولی مانند تصاویر، تصاویر اعلان ویدئو، تصاویر پس زمینه و عناصر متنی در سطح بلوک مانند برچسب های پاراگراف اندازه گیری می شوند.

چرا LCP اندازه گیری می شود؟

LCP به عنوان معیار اصلی برای نمره Core Web Vitals انتخاب شده است، زیرا دقیقاً سرعت استفاده از یک صفحه وب را اندازه گیری می کند. همچنین اندازه گیری و بهینه سازی آن آسان است. عناصر سطح بلوک قبلا امتیاز LCP را محاسبه می کردند.

عناصر سطح بلوک که برای محاسبه نمره Largest Contentful Paint استفاده می شود می توانند عناصر <main> و <section> و همچنین عناصر عنوان، div و عناصر فرم باشند. اساساً هر عنصر HTML در سطح بلوک که شامل عناصر متنی است، به شرطی که بزرگ ترین عنصر باشد، قابل استفاده است.

لازم به ذکر است که همه عناصر استفاده نمی شوند. به عنوان مثال عناصر SVG و VIDEO در حال حاضر برای محاسبه Largest Contentful Paint استفاده نمی شوند. درک معیار LCP آسان است، زیرا تمام کاری که شما باید انجام دهید این است که به صفحه وب خود نگاهی بیندازید و تعیین کنید بزرگ ترین بلوک متن یا تصویر وب سایت شما کدام است و سپس با کوچک تر کردن یا حذف هر چیزی که مانع از بارگیری سریع آن شود، آن را بهینه کنید.

از آنجا که گوگل اکثر سایت ها را در فهرست اول تلفن همراه قرار می دهد، بهتر است ابتدا نمای موبایل و سپس دسکتاپ را بهینه سازی کنید.

تأخیر عناصر بزرگ صفحه

گاهی اوقات یک صفحه وب به صورت بخش های مختلف ارائه می شود. بارگیری یک تصویر بزرگ ممکن است طولانی تر از بزرگ ترین عنصر سطح بلوک متن باشد.

اتفاقی که در این حالت می افتد این است که یک PerformanceEntry برای بزرگ ترین عنصر سطح بلوک متن وارد سیستم می شود. اما هنگامی که یک تصویر در بالای صفحه بارگیری می شود، اگر آن تصویر بیشتر صفحه کاربران (قسمت نمای آن ها) را اشغال کند، یک شی PerformanceEntry دیگری برای آن تصویر گزارش می شود.

تصاویر می توانند برای امتیازات LCP مشکل ساز باشند

ناشران وب معمولاً تصاویر را در اندازه اصلی خود بارگذاری می کنند. سپس از HTML یا CSS برای تغییر اندازه تصویر برای نمایش در اندازه کوچک تر استفاده می کنند. اندازه اصلی همان چیزی است که گوگل از آن به عنوان اندازه حقیقی تصویر یاد می کند.

اگر ناشری تصویری را با عرض 2048 پیکسل و 1152 پیکسل ارتفاع بارگذاری کند، اندازه های ارتفاع و عرض 2048×1152 به عنوان اندازه “حقیقی” در نظر گرفته می شود.

حال اگر ناشر اندازه تصویر 2048×1152 پیکسل را به 640×360 پیکسل تغییر دهد، اندازه های 640 × 360 در واقع اندازه قابل مشاهده هستند. برای محاسبه اندازه تصویر، گوگل بین اندازه های حقیقی و قابل مشاهده تصاویر از هر کدام از اندازه ها که کوچک تر باشد، استفاده می کند.

نکته ای درباره اندازه تصویر

دستیابی به امتیاز بالایی از معیار Largest Contentful Paint با یک تصویر بزرگ در اندازه حقیقی که با HTML یا CSS تغییر اندازه داده می شود تا کوچک تر باشد، تحقق پذیر است. اما بهترین کار این است که اندازه حقیقی تصویر با اندازه قابل مشاهده مطابقت داشته باشد. در این صورت تصویر سریع تر دانلود می شود و امتیاز Largest Contentful Paint شما افزایش می یابد.

LCP چگونه تصاویر ارائه شده از یک دامنه دیگر را کنترل می کند؟

تصاویر ارائه شده از یک دامنه دیگر، مانند CDN، به طور کلی در بزرگ ترین محاسبه Largest Contentful Paint حساب نمی شوند. ناشرانی که می خواهند این منابع را داشته باشند تا محاسبه این معیار محسوب شود باید هدر Timing-Allow-Origin را تنظیم کنند.

افزودن این هدر به سایت شما ممکن است مشکل باشد زیرا اگر از پیکربندی wildcard استفاده کنید، این امر می تواند سایت شما را برای رویداد های هک، آسیب پذیر کند.

برای اینکه این کار را به درستی انجام دهید باید دامنه ای را که مخصوص crawler گوگل است اضافه کنید تا در لیست سفید قرار گیرد و بتواند اطلاعات زمانبندی را از CDN شما ببیند. بنابراین در این نکته متوجه شدیم که، منابعی (مانند تصاویر) که از دامنه دیگری بارگیری می شوند (مانند CDN) به عنوان بخشی از محاسبه LCP محاسبه نمی شوند.

آگاهی از محاسبه عناصر صفحه

تمام عناصری که در صفحه کاربران هستند (viewport) برای محاسبه LCP استفاده می شود. این بدان معناست که تصاویری که خارج از صفحه نمایش ارائه می شوند و سپس برای ارائه به صفحه منتقل می شوند، ممکن است به عنوان بخشی از امتیاز Largest Contentful Paint به حساب نیایند.

از طرف دیگر، عناصری که از قسمت مشاهده کاربر شروع می شوند و سپس از صفحه خارج می شوند، ممکن است به عنوان بخشی از LCP حساب شوند.

چگونه نمره LCP را به دست آوریم؟

دو نوع ابزار امتیاز دهی وجود دارد. اولی Field Tools و دومی Lab Tools نام دارد. Field Tools ابزار های اندازه گیری واقعی یک سایت هستند. Lab Tools با استفاده از الگوریتم های تقریبی شرایط اینترنت که ممکن است یک کاربر معمولی در تلفن همراه با آن روبرو شود، براساس crawl شبیه سازی شده، نمره مجازی می دهد.

چگونه برای Largest Contentful Paint بهینه سازی کنیم؟

سه قسمت اصلی برای بهینه سازی وجود دارد (به علاوه یک مورد دیگر برای چارچوب های JavaScript):

سرور های کند
مسدود شدن جاوا اسکریپت و CSS
زمان آهسته بارگیری منابع

یک سرور کند می تواند با پتانسیل ترافیک و هک DDOS در یک میزبانی مشترک یا VPS مشکل ساز شود. با نصب یک افزونه وردپرس مانند WordFence می توانید با خیال راحت بفهمید آیا یک حمله گسترده را تجربه می کنید یا نه و سپس آن را مسدود کنید.

سایر مشکلات می توانند پیکربندی نادرست یک سرور اختصاصی یا VPS باشند. یک مسئله معمول می تواند مقدار حافظه اختصاص یافته به PHP باشد. همچنین نرم افزارهای قدیمی مانند نسخه قدیمی PHP یا نرم افزار CMS منسوخ شده باشند و مشکلات ایجاد کنند.

بد ترین حالت، یک سرور اشتراکی با چندین کاربر است که سرعت شما را کم می کنند. در این صورت تغییر دادن سرویس میزبانی بهتر جواب می دهد. به طور معمول استفاده از اصلاحاتی مانند افزودن حافظه پنهان، بهینه سازی تصاویر، رفع مسدود شدن CSS و JavaScript و بارگیری مجدد دارایی های خاص می تواند به شما کمک کند.

گوگل نکته خوبی در زمینه برخورد با CSS دارد که برای ارائه آنچه کاربر می بیند ضروری نیست:

هر CSS استفاده نشده ای را به طور کامل حذف کنید یا در صفحه جداگانه سایت خود استفاده کنید و آن را به یک صفحه سبک دیگر منتقل کنید. برای هر CSS که برای ارائه اولیه نیازی به آن نیست، از loadCSS برای بارگیری همزمان پرونده ها استفاده کنید که از rel = ”preload” و onload بهره می برد.
<link rel=”preload” href=”stylesheet.css” as=”style” onload=”this.rel=’stylesheet’”>”