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

در این مقاله به سوالات زیر پاسخ داده خواهد شد.

• بزرگترین عنصر محتوا چیست؟
• با چه معیاری اندازه گیری می شود؟
• چگونه برای بهبود امتیاز Core Web Vitals می توان LCP را بهینه کرد؟

Core Web Vitals چیست؟

Core web vitals ابتکار جدیدی از Google است که برای بهبود تجربه کاربر در وب طراحی شده است. Core Web Vitals به جای تمرکز بر معیارهای عمومی مانند مدت زمان بارگیری کل وب سایت شما، بیشتر روی چگونگی عملکرد سایت و تجربه کاربر متمرکز است اما (Largest Contentful Paint (LCP یک از معیارهای تجربه کاربری گوگل (Google User Experience) است که در سال 2021 به یکی از فاکتورهای رتبه بندی تبدیل شد.

بزرگترین عنصر محتوا چیست؟

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

تصویر(1)

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

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

عناصر Block-level که برای محاسبه امتیاز بزرگترین عنصر محتوا یا LCP استفاده می شوند

عناصر Block-level که برای محاسبه امتیاز LCP مورد استفاده قرار می گیرند، می توانند شامل تگ های <main> و <section> و همچنین تگ های عنوان، div و form باشند.

هر عنصر HTML در Block-level که حاوی محتوای متنی است به شرطی که محتوای غالب صفحه باشد، می تواند مورد استفاده قرار گیرد. همچنین در نظر داشته باشید که از همه عناصر استفاده نمی شود، برای مثال، عناصر SVG و VIDEO در حال حاضر برای محاسبه Largest Contentful Paint (بزرگترین عنصر محتوا یا LCP) استفاده نمی شوند.

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

به تعویق انداختن عناصر بزرگ Largest Contentful Paint ممکن است کمکی به بهبود سایت نکند

گاهی اوقات یک صفحه وب به صورت قطعه-قطعه بارگذاری می شود و دانلود یک تصویر بزرگ، ممکن است بیشتر از بزرگترین بلوک متنی زمان ببرد. در واقع یک PerformanceEntry برای بزرگترین عنصر در سطح بلوک متن ثبت می‌شود اما هنگامی که تصویری خاص در ابتدای صفحه بارگذاری می شود، اگر سایز آن بیشتر از اندازه صفحه نمایشگر کاربر باشد، آنگاه یک شی PerformanceEntry دیگر برای آن تصویر گزارش خواهد شد.

PerformanceEntry چیست؟

شی PerformanceEntry یک معیار واحد بوده که در واقع بخشی از جدول زمانی عملکرد است. یک PerformanceEntry را می توان مستقیماً با ایجاد یک نشانه یا اندازه گیری (مثلاً با فراخوانی تابع mark()) در یک نقطه مشخص در برنامه ایجاد کرد. PerformanceEntry به روش های غیر مستقیم مانند بارگذاری یک فایل (مانند یک تصویر) نیز ایجاد می شوند.

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

وبمستر ها معمولاً تصاویر را در اندازه اصلی خود آپلود نموده و سپس از HTML یا CSS برای تغییر سایز آنها به اندازه های کوچکتر استفاده می کنند. اندازه اصلی همان چیزی است که گوگل از آن به عنوان اندازه intrinsic (با این تکنیک اگر از طریق CSS تنظیماتی برای تغییر سایز تصویر اعمال نشده باشد، جهت بهینه سازی تصویر، تنظیمات موردنیاز اعمال می شود) تصویر یاد می کند. اگر وبمستر تصویری با عرض ۲۰۴۸ پیکسل و ارتفاع ۱۱۵۲ پیکسل آپلود نماید، آن ارتفاع و عرض ۲۰۴۸ در ۱۱۵۲ به عنوان اندازه intrinsic در نظر گرفته می‌شود. حال، اگر ناشر تصویر 2048 در 1152 پیکسل را به 640 در 360 پیکسل تغییر دهد، اندازه تصویر 640×360 سایز قابل مشاهده (visible size) خواهد بود.

برای پردازش اندازه تصویر، گوگل در بین تصاویر با سایز اصلی (intrinsic) و قابل مشاهده (visible size)، هر کدام که کوچکتر باشد را استفاده می کند.

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

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

بزرگترین عنصر محتوا چگونه تصاویر میزبانی شده توسط دامنه دیگری را مدیریت می کند؟

تصاویر ارائه شده از دامنه دیگر، مانند یک CDN، معمولاً در LCP محاسبه نمی شوند. کسانی که می‌خواهند منابع موردنظر را در محاسبات خود داشته باشند، باید هدر Time-Allow-Origin را تنظیم کنند. افزودن این هدر به سایت شما، می تواند مشکل ساز باشد زیرا اگر از علامت وایلد کارت (*) در پیکربندی استفاده کنید، می تواند سایت شما را در معرض هک شدن قرار دهد.

برای اینکه این کار را به درستی انجام دهید، باید دامنه ای را در هدر تنظیم کنید که مربوط به خزنده Google باشد تا بتواند اطلاعات زمان بندی (Content Delivery Network (CDN شما را مشاهده کند. بنابراین در این مرحله، فایل هایی (مانند تصاویر) که از دامنه ای دیگر بارگذاری می شوند به عنوان بخشی از (Largest Contentful Paint (LCP محاسبه نمی شوند.

مراقب امتیازات Gotchas باشید

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

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

نحوه اندازه گیری امتیاز LCP 

دو نوع ابزار امتیاز دهی وجود دارد:

1.Field Tools : معیارهای اندازه گیری واقعی یک سایت هستند.

2.Lab Tools : با استفاده از الگوریتم ها، شرایطی آزمایشی را برای کاربرانی که با تلفن همراه سایت را چک می کنند شبیه سازی می کند و در طی این شبیه سازی به صورت تقریبی برای LCP امتیاز دهی می کند. 

نحوه بهینه سازی سایت برای کم نمودن بزرگترین عنصر محتوا یا LCP 

سه حوزه اصلی برای بهینه سازی وجود دارد:

• سرورهای کند
• مسدود کردن رندر، توسط جاوا اسکریپت و CSS
• زمان بارگذاری فایل های کند

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

از دیگر دلایل کندی سرور، کانفیگ نادرست سرور اختصاصی یا مجازی (VPS) است. از مشکلات رایج دیگر نیز می تواند میزان حافظه اختصاص داده شده به PHP و استفاده از نسخه قدیمی PHP یا CMS باشد.

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

Google یک راهکار مشخص برای CSS هایی که توسط کاربر قابل مشاهده نیستند و استفاده از آنها ضروری نمی باشد ارائه می کند:

• فایل های CSS بدون استفاده را به طور کامل حذف کرده یا اگر در سایت دیگری قرار دارند، آنها را به فایل های  CSS دیگری در سایت خود منتقل کنید.
• برای هر فایل CSS که در رندر اولیه مورد نیاز نیست، از تابع loadCSS برای بارگذاری به صورت ناهمزمان استفاده کنید. بدین منظور از "rel="preload و "onload" کمک بگیرید.

همانند خط دستوری زیر که می توانید آن را در هدر سایت خود قرار دهید:

<link rel=”preload” href=”stylesheet.css” as=”style” onload=”this.rel=’stylesheet'”>

Field Tools (ابزار های اصلی) برای سنجش امتیاز بزرگترین عنصر محتوا یا LCP 

گوگل سه ابزار را برای این منظور ارائه می کند:

• PageSpeed Insights
• کنسول سرچ کنسول (گزارش Core Web Vitals)
• گزارش تجربه کاربری مرورگر کروم (Chrome User Experience Report)

گزینه آخر، به یک حساب Google و یک پروژه Google Cloud نیاز دارد. اما دو گزینه اول ساده تر و راحت تر می باشند.

Lab Tools (ابزار های تستی) برای سنجش امتیاز بزرگترین عنصر محتوا یا LCP 

اندازه گیری های انجام شده توسط ابزارهای تستی (Lab Tools)، امتیازاتی شبیه سازی شده هستند.

گوگل ابزارهای زیر را توصیه می کند:

• Chrome DevTools
• Lighthouse
• WebPageTest.org

دو ابزار اول توسط گوگل اما ابزار سوم توسط شرکت دیگری ارائه شده است.