تعریف LCP و چگونگی بهبود آن

معرفی معیارهای مهم در Core Web Vitals

وقتی سایت را در ابزاری مثل GTmetrix اسکن می‌کنید، تعدادی گزارش‌ بر اساس یک سری معیارها تولید می‌شود. در بخش GTmetrix Grade این دو این معیار دیده می‌شوند:

• Performance امتیاز عملکرد ابزار Lighthouse را روی سایت نشان می‌دهد.

• Structure معیاری اختصاصی جهت اندازه‌گیری عملکرد کلی یک صفحه از سایت است.

در بخش Web Vitals این سه معیار دیده می‌شوند:

• Longest Contentful Paint: یکی از مهم‌ترین معیارها در Core Web Vitals که برای گوگل هم با اهمیت است، LCP است. به طور خلاصه، بزرگترین اِلمان تصویری است که در صفحه دارید.

• Total Blocking Time یا TBT معیاری است برای میزان پاسخگو بودن لود صفحه به ورودی کاربر

• Cumulative Layout Shift یا CLS لایه‌های سایت که دارای شیفت افقی یا عمودی هستند.

توجه داشته باشید که گزارش تولید شده توسط GTmetrix فقط از نسخه دسکتاپ رایگان است و برای نسخه موبایل باید اشتراک خریداری کنید. اما در PageSpeed گزارش هر دو نسخه به صورت رایگان قابل دریافت است. در این ابزار نتایج در دو بخش تقسیم‌بندی شده است:

• Discover what your real users are experiencing

این بخش شامل فاکتورهای دربرگیرنده تجربه واقعی کاربران سایت شما، در طول 28 روز گذشته، روی مرورگر کروم است. این بخش را در زمان کار با Search Console استفاده می‌کنیم. ملاک بررسی گوگل از سایت شما هم، فاکتورهای همین بخش است.

• Diagnose performance issues

نتایج یک سری تست که هم اکنون روی سایت اجرا شده است، را نمایش می‌دهد. از این قسمت برای تست بهبود عملکرد سایت استفاده می‌کنیم. امتیازی که در این قسمت می‌گیرید، می‌تواند به عنوان راهنمایی جهت رسیدن به بهترین نتیجه، در بخش تجربه واقعی کاربران به کار رود.

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

اگر در بالای صفحه عبارت Core web vitals assessment failed را مشاهده می‌کنید به این علت است که سایت شما امتیاز LCP پایینی دارد.

LCP چیست؟

بزرگترین اِلمان تصویری سایت LCP نام دارد. تصویری که در این قسمت استفاده می‌کنید باید از Next Generation Formats بهره ببرد. مثل فرمت‌های jpg2000 ،webp و jpjxr که webp از بقیه مرسوم‌تر است. این فرمت‌ها حجم بسیار پایین‌تری دارند. اگر نیاز هست سایز و کیفیت تصویر را کم کنید. هدف این است که لود و رندر این اِلمان به سرعت انجام شود تا امتیاز LCP بهبود یابد و در نتیجه تجربه کاربری بهتری داشته باشید.

عوامل موثر بر LCP

در ابزار PageSpeed بخش Diagnostic اگر LCP را انتخاب کنید، دلایلی که باعث کاهش امتیاز LCP شده را می‌بینید و می‌توانید طبق این لیست، تغییرات لازم جهت بهبود امتیاز را انجام دهید.

گاهی اوقات پایین بودن امتیاز LCP به خاطر المان تصویری نیست و در این قسمت عبارت Eliminate render-blocking resources مشاهده می‌شود و می‌تواند به خاطر لود فایل‌های جاوا اسکریپت، HTML و CSS روی سایت باشد. جهت مشاهده دقیق محلی که مشکل لود رخ می‌دهد، به بخش Waterfall در ابزار GTmetrix مراجعه کنید. قسمت‌های کرم رنگ نشانگر Blocking Time هستند.

نکته: اگر اِلمانی در صفحه دارید که برای ظاهر شدن یا رندر نیاز به یک کلاس CSS دارد، معمولا یک فایل CSS برای این کار فراخوانی می‌شود. اگر حجم این فایل زیاد باشد، نمایش این المان، مستلزم دانلود خوانده شدن و Parse این فایل است که می‌تواند زمانبر باشد. تا زمانی که این کار کامل شود، نمایش آن المان انجام نمی‌شود و اصطلاحاً Render Block شده و یک تجربه کاربری بد را برای بازدیدکننده می‌سازد. پس بسیار مهم است که توجه ویژه‌ای به Blocking Timeها داشته باشید.

سایر عوامل موثر بر LCP

• Render blocking resources CSS

• Unused CSS

• Unused JavaScript

تصحیح این عوامل باعث بهبود امتیاز LCP می‌شود.

پرسش و پاسخ شرکت‌کنندگان دوره