(LCP) چیست؟ تحلیل فاکتور مهم سئو گوگل 2021
(LCP) مخفف عبارت (Largest Contentful Paint) است و یکی از معیارهای بررسی ux وبسایت به شمار می رود. (LCP) مدت زمانی است که محتوای اصلی یک صفحه طول می کشد تا بارگیری شود و آماده تعامل باشد. (LCP) ابتدا در ابزارهای page speed insight و light house به کار گرفته شد و بعد به پنل سرچ کنسول search console نیز وارد شد. اخیرا جی تی متریکس که یکی از ابزارهای پرطرفدار بررسی سرعت سایت به شمار می رود برای بررسی وبسایت ها از معیارهای light house گوگل استفاده می کند که (LCP) یکی از معیارهای اصلی آن به شمار می رود. بنابراین متوجه می شویم که به مرور زمان این مولفه در ابزارهای مختلفی به کار گرفته شده و باید سایت مان را مطابق با استانداردهای این معیار تطبیق دهیم.
(LCP) قرار است در سال 2021 بعنوان یکی از فاکتورهای اصلی رتبه بندی توسط گوگل مورد استفاده قرار گیرد.
فرض کنید وبسایتی دارید که در صفحه اصلی آن یک اسلایدر با حجم 500 کیلوبایت ، بلوک محصولات با حجم 100 کیلوبایت و بلوک مقالات با حجم 150 کیلوبایت قرار گرفته ، قطعا برای بهینه سازی سرعت سایت از سنگین ترین عنصر شروع می کنید یعنی اسلایدر و معیار (LCP) نیز دقیقا به همین مورد اشاره دارد و مدت زمان بارگزاری حجیم ترین بخش وبسایت را اندازه گیری می کند. از مواردی که در lcp مورد سنجش قرار می گیرند می توانیم به تصاویر ، تصویر شاخص ویدئو ، تصویر پس زمینه اشاره کنیم.
lcp بر اساس زمان لود بزرگ ترین عنصر صفحه اندازه گیری می شود
چرا LCP اندازه گیری می شود؟
این معیار دقیقا سرعت بارگزاری وبسایت را اندازه گیری می کند و از طرفی محاسبه و بهینه سازی آن کار آسانی است.
تگ های <main> و <section> و <div> و به طور کلی در html هر بخشی که حاوی متن و تصویر باشد مورد سنجش قرار می گیرد. بنابراین تمامی عناصر صفحه وب مانند فایل های SVG و VIDEO در lcp محاسبه نمی شوند.
بنابراین شما باید به صفحه وب خود نگاهی بیندازید و تعیین کنید بزرگترین بلوک متنی یا تصویر کدام است و سپس با بهینه سازی یا حذف آن کار بهینه سازی سرعت صفحه را انجام دهید.
از آنجا که گوگل اکثر سایت ها را به صورت mobile first index بررسی می کند ، بهتر است بهینه سازی ابتدا برای موبایل و سپس دسکتاپ انجام شود.
به تاخیر انداختن لود بزرگترین عنصر ، کمکی به بهینه سازی lcp نمی کند ، چون فرآیند سنجش تا پایان کامل لود صفحه ادامه دارد.
تصاویر می توانند منجر به کاهش امتیاز lcp شوند
مزح بخش اصلی حجم یک صفحه را تصاویر تشکیل می دهند بنابراین در بهینه سازی آن ها باید بسیار دقت کنید. واقعی نبودن اندازه تصاویر در صفحات که اصطلاحا به آن (scale image) می گویند باعث کاهش رتبه lcp می شود ، برای تشریح scale image این مثال را در نظر بگیرید : وارد یک صفحه وب می شویم که در آن تعدادی عکس وجود دارد ، این تصاویر در صفحه با سایز 640 × 360 قابل مشاهده هستند اما در اصل این سایز واقعی آن ها نیست! این عکس ها با کمک استفاده از کدهای css در صفحه تغییر سایز داده شده اند و سایز اصلی آن ها 1152 × 648 است. چرا این حالت مشکل ایجاد می کند؟ وقتی در صفحه نیاز به لود تصویری با سایز 640 × 360 داریم ، نباید تصویر با سایز بزرگ تری لود شود چرا که باعث کاهش سرعت بارگزاری خواهد شد. برای این که متوجه شوید عکس های وبسایت تان تغییر سایز دارند یا خیر کافیست روی تصویر کلیک راست کنید با انتخاب گزینه open image in new tab تصویر را در تب جدید باز کنید و سایز اصلی آن را ببینید. همچنین درمورد تصاویر thumbnail باید دقت کنید که تمامی عکس ها طبق سایزبندی های درست در سایت بهینه شده باشند (در مورد سایت های وردپرسی قالب شما باید تصاویر را بعد از آپلود برای تصاویر شاخص برش بزند ، اگر قالب شما چنین امکانی را ندارد می توانید از افزونه wp regenerate thumbnails استفاده کنید.)
آیا LCP تصاویر بارگیری شده از یک دامنه دیگر را در نظر می گیرد؟
تصاویری که از یک دامنه دیگر در سایت ما لود می شوند (مانند CDN) معمولاً در LCP محاسبه نمی شوند. اما اگر می خواهید تصاویر لود شونده از cdn را در محاسبه lcp شامل کنید باید از استاتوس کد Timing-Allow-Origin header استفاده کنید که بوسیله api امکان محاسبه lcp را امکان پذیر می کند. باید توجه داشته باشید که استفاده از Timing-Allow-Origin header سایت تان را در خطر هک قرار می دهد. بنابراین منابعی (مانند تصاویر) که از دامنه دیگری بارگیری می شوند (مانند CDN) در اندازه گیری معیار LCP نقشی ندارند.
عوامل تاثیرگذار در محاسبه LCP
بسیاری از عوامل هستند که به صورت مستقیم و غیر مستقیم باعث کاهش رتبه سایت در معیار LCP می شوند:
کندی سرور
Render-blocking JavaScript and CSS
پیکربندی نادرست یک سرور اختصاصی یا VPS
کم بودن میزان حافظه اختصاص یافته به PHP
استفاده از نسخه PHP قدیمی
استفاده از CMS منسوخ شده
استفاده از هاست و سرور اشتراکی (در صورت مصرف بیش از حد منایع توسط مشترکین)
گوگل پیشنهادهای زیر را در مورد بهینه سازی lcp ارائه می کند:
فایل های css بلااستفاده را حذف کنید
برای فایل های css که هنگام لود صفحه نیازی به آن نیست از کد زیر استفاده شود:
rel=”preload”and onload
[php]<link rel=”preload” href=”stylesheet.css” as=”style” onload=”this.rel=’stylesheet’”>”[/php]
این کد منجر به تاخیر در لود css می شود که می توان آن را برای کدهای js نیز استفاده کرد. البته در مورد سایت های وردپرسی برخی از افزونه ها مانند wp rocket هستند که تاخیر در بارگزاری css و js را انجام می دهند. اما اگر تمایل به استفاده از کد دارید پیشنهاد می شود در تگ <head> ، کد بالا را برای بارگزاری css انجام دهید.
خواندن این مقاله را به شما پیشنهاد می کنیم : بررسی مفصل Core Web Vitals در گوگل سرچ کنسول
