LCP به معنای Largest Contentful Paint است و یکی از معیارهای اصلی Core Web Vitals برای اندازه گیری سرعت بارگیری صفحات وب است. LCP زمان لازم برای بارگیری بزرگترین عنصر محتوایی (مانند تصویر، ویدئو یا متن) را در صفحه نشان می دهد. هدف LCP این است که به کاربران نشان دهد که آیا صفحات وب به سرعت لود شده اند یا خیر. به طور کلی، LCP زمان لود صفحات وب را بهبود می بخشد و تجربه کاربر را بهبود می دهد.
عدد خوب برای LCP چند است؟
عدد خوب برای LCP به وابستگی به مسئله و داده های ورودی آن است. در بسیاری از مسائل، LCP باید به عنوان یک عامل محدود کننده در زمان اجرا در نظر گرفته شود، بنابراین تلاش برای کاهش LCP به حداقل ممکن مورد توجه قرار می گیرد. با این حال، در بعضی از مسائل، LCP نقش اصلی را بازی می کند و به دلایل خاص، عدد خوب برای آن ممکن است حداکثر 2.5 ثانیه باشد.
علت مهم بودن LCP در سئو چیست؟
LCP یا Largest Contentful Paint به معنای بزرگترین قسمت محتوایی است که در زمان بارگیری صفحه وب نمایش داده می شود. این معیار، زمان لازم برای بارگیری این قسمت را اندازه گیری می کند.
LCP در سئو بسیار مهم است زیرا سرعت بارگیری صفحات وب، یک عامل کلیدی در رتبه بندی سایت ها در موتورهای جستجو مانند گوگل است. همچنین، کاربران اغلب ترجیح می دهند با سایت های با سرعت بالا کار کنند و به دلایل امنیت و تجربه کاربری بهتر، گوگل نیز به شدت به بهبود LCP توصیه می کند.
بنابراین، بهینه سازی LCP باعث افزایش سرعت بارگیری صفحات وب و در نتیجه رشد ترافیک و البته رضایت کاربران خواهد شد.
عناصر تاثیر گذار در محاسبه نمره LCP کدامند؟
در محاسبه نمره LCP، عناصری که در نظر گرفته می‌شوند شامل بزرگترین عنصر قابل مشاهده در بالای صفحه که معمولاً یک تصویر، ویدئو، یا متن است می‌شوند که در زمان بارگیری صفحه به صورت قابل مشاهده بوده و باعث ایجاد تجربه کاربری مناسب شده است. این عنصر باید دارای ابعاد و محتوای مناسب باشد و به طور کامل بارگیری شده باشد.
چطور یک المان به عنوان LCP تشخیص داده می‌شود؟
برای تشخیص یک المان به عنوان LCP، از معیارهای زیر استفاده می‌شود:
۱. اندازه المان: المان باید بزرگ و قابل مشاهده باشد.
۲. زمان لود المان: المان باید در زمان کافی بارگذاری شود تا کاربر بتواند آن را مشاهده کند.
۳. محتوای المان: المان باید حاوی محتوای اصلی صفحه باشد، به عنوان مثال یک تصویر، ویدئو یا متن.
بعضی از ابزارهای تجزیه و تحلیل وب، مثل Google Lighthouse و یا GTMetrix، این قابلیت را دارند که largest contentful paint را برای صفحات وب شما تشخیص داده و نمرات آن‌را نمایش دهند.
مثال‌هایی برای درک بهتر مفهوم LCP
در هر دو جدول زمانی زیر، بزرگترین عنصر با بارگیری محتوا تغییر می‌کند. در مثال اول، محتوای جدیدی به DOM اضافه می‌شود و عنصری که بزرگترین است را تغییر می‌دهد. در مثال دوم، طرح‌بندی تغییر می‌کند و محتوایی که قبلاً بزرگترین بود از viewport حذف می‌شود. در حالی که غالباً محتوایی که دیر بارگذاری می‌شود بزرگتر از محتوای موجود در صفحه است، لزوماً اینطور نیست. 
دو مثال بعدی نشان می‌دهد که بزرگترین رنگ محتوایی، قبل از بارگیری کامل صفحه رخ می‌دهد.
آموزش کامل بهینه سازی فاکتور LCP سایت
بهینه سازی LCP (Largest Contentful Paint) یکی از مهمترین عوامل بهینه سازی سایت است که می تواند بهبود قابل توجهی در سرعت بارگیری صفحات وب شما داشته باشد. در ادامه به برخی از روش های بهینه سازی LCP می پردازیم:
1. کاهش حجم تصاویر
یکی از عوامل مهم در طولانی شدن زمان لود صفحات وب، حجم بالای فایل های تصویری است. بنابراین، کاهش حجم فایل های تصویری با استفاده از فشرده سازی و بهینه سازی آن ها، می تواند بهبود قابل توجهی در LCP داشته باشد.
2. استفاده از CDN
CDN یا Content Delivery Network گروهی از سرور های قرار داده شده در نقاط مختلف جغرافیای جهان است که محتوای وبسایت را به صورت خودکار و بهینه شده بارگیری می کنند. با استفاده از CDN، محتوای سایت شما به سرعت بارگیری می شود و این می تواند بهبود قابل توجهی در LCP داشته باشد.
3. بهینه سازی CSS و JavaScript
استفاده از فایل های CSS و JavaScript بزرگ می تواند زمان لود صفحات را طولانی کند. بنابراین، بهینه سازی این فایل ها با حذف کدهای غیرضروری، فشرده سازی آن ها و استفاده از روش های بهینه تر بارگیری، می تواند بهبود قابل توجه در LCP داشته باشد.
برای این کار پیشنهاد ما به شما استفاده از یکی از 2 افزونه راکت یا لایت اسپید کش است که میتوانید از بخش بهینه سازی برگه تنها با چند کلیک این بهینه سازی را بر روی سایت خود اعمال کنید.
4. استفاده از فونت های بهینه
استفاده از فونت های بسیار بزرگ یا پرکاربرد ممکن است زمان لود صفحات را طولانی کند. بنابراین، استفاده از فونت های بهینه شده با حجم کمتر و قابل فشرده سازی، می تواند بهبود قابل توجه در LCP داشته باشد. همچنین اگر سایت شما در ایران فعالیت میکنید حتما به یاد داشته باشید که گوگل فونت را غیرفعال کنید و از آن استفاده نکنید، زیرا به علت تحریم و فیلترینگ شدید در ایران امکان لود این نوع فونت ها با اکثر ISP ها (سرویس دهندگان اینترنت) وجود ندارد و باعث افزایش سرعت لود سایت شما خواهد شد.
5. به تعویق انداختن فایل‌های جاوا اسکریپت
اجرای فایل‌های جاوا اسکریپت یکی از دلایل اصلی اُفت lcp است. به تعویق انداختن بارگذاری فایل‌های جاوا اسکریپت، راه حل این مشکل است. اگر به یاد داشته باشید در بخش معرفی عواملی که باعث افت lcp می‌شوند، گفتیم که مرورگر فایل‌های JS را تنها پس از تجزیه و تحلیل فایل‌های HTML و ساخت درخت DOM پردازش و بارگذاری می‌کند
به تعویق انداختن بارگذاری فایل‌های جاوا اسکریپت باعث رندر بسیار سریعتری خواهد شد، چون دیگر چیزی برای مسدود کردن فرآیند وجود ندارد.
6. به تعویق انداختن CSS غیرضروری و حذف CSS استفاده نشده
CSSهای غیر ضروری باید بعد از بارگیری مرتبط‌ترین محتوا، بارگیری شوند. به همین دلیل باید CSS حیاتی (یا CSS مسیر بحرانی) را شناسایی کرده و در ساختار HTML قرار دهیم، بارگذاری فایل‌های CSS غیر ضروری را به تعویق بیاندازیم و CSSهایی که استفاده نمی‌شوند را حذف کنیم. از قرار دادن کد CSS بزرگ و غیر ضروری در <head> کد خودداری کنید. در این مورد نیز افزونه دبلیو پی راکت برای سایت‌های وردپرسی کمک کننده است.
جمع بندی
در این مطلب به سوال LCP چیست پاسخ دادیم و روش‌های بهینه‌سازی largest content painfull را با تمرکز بر روی بهبود پرفورمنس سایت توضیح دادیم. و همچنین دو افزونه WP Rocket و LSCache را به شما پیشنهاد دادیم که تنها با چند کلیک بهینه سازی های فوق را بر روی سایت خود اعمال کنید. از حالا به‌بعد لازم است نتیجهٔ اقدامات خود را بررسی کنید و این فاکتور حیاتی‌وب را زیرنظر بگیرید. برای مانیتورینگ LCP میتوانید از ابزارهای گوگل مثل Lighthouse ،PageSpeed Insights ،Chrome DevTools و حتی سرچ کنسول به‌صورت رایگان استفاده کنید. در صورتی که بخواهید به داده‌هایی جز داده‌های گوگل استناد کنید، ابزار WebPageTest نیز گزینهٔ مناسبی است. در صورتی که تمام سوالات شما دربارهٔ LCP در این مطلب پاسخ داده نشده است یا سوالاتی تازه‌ای در ذهن‌تان ایجاد شده، از بخش نظرات زیر همین پست با ما درمیان بگذارید و پاسخ بگیرید.