فهرست مطالب
بررسی اجمالی LCP
LCP چه چیزی را اندازه میگیرد؟
بزرگترین تأثیر رنگ محتوایی بر امتیاز عملکرد شما
آستانه برای بزرگترین رنگ محتوایی
چگونه میتوان بزرگترین رنگ محتوایی را بهبود بخشید؟
.
بررسی اجمالی LCP
LCP که مخفف کلمات Largest Contentful Paint است یک معیار عملکردی میباشد که در سال ۲۰۲۰ توسط Lighthouse برای اندازهگیری بهتر تجربهی بارگیری درکشدهی برای کاربران معرفی شد.
به زبان ساده، LCP اندازهگیری میکند که چقدر طول میکشد تا بزرگترین «عنصر محتوا» (به عنوان مثال، تصویر قهرمان، متن عنوان، و …) در صفحهی وبسایت شما در نمای بازدیدکننده قابل مشاهده باشد.
LCP یکی از معیارهایی است که بخش حیاتی وب گوگل (Web Vitals) را تشکیل میدهد. (اطلاعات کامل تر در این مطلب)
.
LCP چه چیزی را اندازه میگیرد؟
به گفتهی گوگل،
“LCP یک معیار مهم کاربر محور برای اندازهگیری سرعت بارگذاریهای درک شده است، زیرا نقطهای را در جدول زمانی بارگذاری صفحه مشخص میکند که احتمالاً محتوای اصلی صفحه بارگیری شده است – یک LCP سریع به کاربر اطمینان میدهد و این را میرساند که صفحه مفید است.”
و اساسا، LCP اندازهگیری میکند که محتوای قابل توجه در صفحهی وب شما با چه سرعتی میتواند توسط بازدیدکنندگان بارگیری و مصرف میشود.
فرض بر این است که بارگیری بزرگترین عنصر محتوا در صفحه شما، مانند یک چرخ فلک یا تصویر قهرمان(در طراحی وب، یک تصویر قهرمان یک تصویر بنر وب بزرگ است که به طور برجسته در یک صفحهی وب، عموما در جلو و مرکز قرار میگیرد.)، یک شاخص اصلی برای بازدیدکنندگان شما از سرعت بارگیری صفحه شما خواهد بود.
و منظور از “عنصر محتوا” هر عنصر HTML است، مانند:
- یک عنصر تصویری
- یک عنصر ویدیویی
- یک عنصر با تصویرِ پسزمینه بارگیری شده از طریق تابع URL (به جای اعلام آن در CSS)
- عناصر سطح بلوک مانند <h1>، <h2>، <div>، <ul>، <table> و ….
و در این بین ابزاری همچون GTmetrix یا wakav اندازهگیری میکند که بزرگترین عنصر محتوای بالای صفحه چقدر سریع روی صفحهی شما نقش میبندد. پس استفاده از این ابزار برای تشخیص و اصلاح روند صفحهی وب شما میتواند بسیار مفید باشد.
که وبسایتهایی با ساختارهای مشابه ممکن است امتیازات بسیار متفاوتی در معیار LCP داشته باشند زیرا بزرگترین عنصر محتوا از صفحهای به صفحه دیگر متفاوت است.
LCP معیاری برای درک آسان است زیرا تنها کاری که باید انجام دهید این است که به صفحه وب خود نگاه کنید، بزرگترین بلوک متن یا تصویر را شناسایی کنید و سپس زمان بارگذاری آن را بهینه کنید.
.
بزرگترین تأثیر رنگ محتوایی بر امتیاز عملکرد شما
به عنوان یک معیار Web Vital، معیار LCP میزان ۲۵ درصد از امتیاز عملکرد را به خود اختصاص میدهد و آن را به یکی از مهمترین معیارها برای بهینهسازی تبدیل میکند.
در حالی که معیارهای دیگر مانند First Contentful Paint (FCP) یا Time-to-First-Byte (TTFB) همچنان در زمینهی سرعت صفحه مرتبط باقی میمانند؛ LCP بیشتر معرف انتظارات دنیای واقعی بازدیدکنندگان شما هنگام دسترسی به وبسایت شما است.
و این برای شما بدین معنی این است که با بهینهسازی LCP، شما اغلب میتوانید بزرگترین پیشرفت را در عملکرد وبسایتتان، هم از نظر امتیاز عملکرد و هم از نظر برداشت بازدیدکنندگان از عملکرد، ایجاد کنید.
.
آستانه برای بزرگترین رنگ محتوایی
آستانهی LCP با زمان رندر (بر حسب ثانیه) بزرگترین بلوک تصویر یا متن قابل مشاهده در نمای بازدیدکننده اندازهگیری میشود.
آستانه LCP به شرح زیر است:
- عالی، نیاز به انجام هیچ کاری در اینجا نیست = LCP با ۱۲۰۰ میلی ثانیه یا کمتر از آن.
- خوب، اما بهتر است اقدامی را برای بهبود در نظر بگیرید = LCP بین ۱۲۰۰ تا ۱۶۶۶ میلی ثانیه.
- بیشتر از حد توصیه شده = LCP بین ۱۶۶۶ تا ۲۴۰۰ میلی ثانیه.
- بسیار طولانیتر از حد توصیه شده = LCP بالاتر از ۲۴۰۰ میلی ثانیه.
بزرگترین عنصر رنگ محتوایی در برگه ساختار
شما میتوانید برای راحتی کار از GTmetrix بهره برده و آنچه را که جیتی متریکس به عنوان بزرگترین عنصر محتوای صفحه شما در برگه ساختار گزارش شناسایی کرده است، ببینید؛ که تحت ممیزی با عنوان “Largest Contentful Paint Element” یا همان “بزرگترین عنصر رنگ محتوایی” فهرست شده است.
البته توجه داشته باشید که این ممیزی صرفاً اطلاعاتی است و به عملکرد یا امتیاز ساختار شما کمک نمیکند.
.
چگونه میتوان بزرگترین رنگ محتوایی را بهبود بخشید؟
توجه داشته باشید که ممیزیهای خاصی که در ادامه به آنها اشاره خواهد شد، احتمالاً بیشترین کمک را به LCP شما میکنند. با این حال، زمانبندی LCP صفحهی شما ممکن است تحت تأثیر بهینه سازیهای دیگری قرار گیرد که در اینجا درخصوص آنها چیزی ذکر نشده است.
به هر حال، شما میتوانید زمانبندی LCP خود را با ترکیب شیوههای توسعه وب خوب، همچون موارد زیر بهبود ببخشید:
۱) کاهش زمان پاسخگویی سرور
کاهش زمان پاسخگویی سرور به بارگیری سریعتر منابع و ارائه زمان LCP سریع در صفحهی شما کمک میکند. و برخی از کارهایی که میتوانید در این خصوص انجام دهید عبارتند از:
- کاهش زمان پاسخ اولیه سرور
- استفاده از شبکه تحویل محتوا (CDN)
- خدماتدهی به داراییهای ثابت با سیاست کش کارآمد
- ایجاد ارتباطات اولیه با منابع مهم شخص ثالث
۲) حذف رفتار مسدودکننده رندر
حذف رفتار مسدود کردن رندر در صفحهی شما باعث میشود منابع در سریعترین زمان ممکن بارگذاری شوند.
۳) بهینهسازی تصاویر و فیلمها
تحویل تصویر و ویدیو را در صفحه خود بهینه کنید تا زمان بارگذاری تصاویر و ویدیوها را کاهش دهید. برخی از کارهایی که میتوانید انجام دهید عبارتند از:
- اندازه مناسب تصاویر
- رمزگذاری کارآمد تصاویر
- ترکیب تصاویر با استفاده از sprites CSS
- ارائه تصاویر در قالبهای نسل بعدی
- استفاده از فرمتهای ویدئویی برای محتوای متحرک
بازگشت به بالا
منبع: gtmetrix – با اندکی تکمیل
2 پاسخ
ممنون از مقاله خوبتون
از رضایت شما همراهان عزیز خوشحالیم
ممنون از همراه شما