بنر وب سایت مجموعه ایوسی
بنر وب سایت مجموعه ایوسی
جستجو
این کادر جستجو را ببندید.

هدایای ویژه طراحی سایت

LCP: بهینه سازی بزرگترین رنگ محتوایی

اگر این مقاله را دوست دارید، لطفا آن را با دوستان خود به اشتراک بگذارید.

فهرست مطالب

بررسی اجمالی LCP
LCP چه چیزی را اندازه می‌گیرد؟
بزرگترین تأثیر رنگ محتوایی بر امتیاز عملکرد شما
آستانه برای بزرگترین رنگ محتوایی
چگونه می‌توان بزرگترین رنگ محتوایی را بهبود بخشید؟

.


بررسی اجمالی LCP

LCP که مخفف کلمات Largest Contentful Paint است یک معیار عملکردی می‌باشد که در سال ۲۰۲۰ توسط Lighthouse برای اندازه‌گیری بهتر تجربه‌ی بارگیری درک‌شده‌ی برای کاربران معرفی شد.

به زبان ساده، LCP اندازه‌گیری می‌کند که چقدر طول می‌کشد تا بزرگترین «عنصر محتوا» (به عنوان مثال، تصویر قهرمان، متن عنوان، و …) در صفحه‌ی وب‌سایت شما در نمای بازدیدکننده قابل مشاهده باشد.

LCP یکی از معیارهایی است که بخش حیاتی وب گوگل (Web Vitals) را تشکیل می‌دهد. (اطلاعات کامل تر در این مطلب)

گوگل تجربه صفحه را برای کاربر با استفاده از Core Web Vitals اندازه‌گیری و ارزیابی می‌کند. برای قبولی در این ارزیابی، باید برای هر سه این پارامتر امتیاز “خوب” کسب کنید. بزرگترین رنگ محتوایی (LCP) – تاخیر ورودی اول (FID) – تغییر چیدمان تجمعی (CLS)

.


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

به گفته‌ی گوگل،

“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 به شرح زیر است:

  1. عالی، نیاز به انجام هیچ کاری در اینجا نیست = LCP با ۱۲۰۰ میلی ثانیه یا کمتر از آن.
  2. خوب، اما بهتر است اقدامی را برای بهبود در نظر بگیرید = LCP بین ۱۲۰۰ تا ۱۶۶۶ میلی ثانیه.
  3. بیشتر از حد توصیه شده = LCP بین ۱۶۶۶ تا ۲۴۰۰ میلی ثانیه.
  4. بسیار طولانی‌تر از حد توصیه شده = LCP بالاتر از ۲۴۰۰ میلی ثانیه.
لطفاً برای تکمیل این فرم، جاوا اسکریپت را در مرورگر خود فعال کنید.

طراحی وب سایت: راهی برای جذب مشتریان و افزایش فروش آنلاین شما

آیا میخواهید کسب و کار آنلاین خود را به سطح جدیدی برسانید؟

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

با ما تماس بگیرید (یا اطلاعات تماس‌تان را برای ما ارسال کنید) و ما به شما کمک خواهیم کرد تا یک وب سایت منحصر به فرد داشته باشید.

۰۹۱۳۳۹۵۷۹۲۰

نام
درخواست مدنظر شما


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

شما می‌توانید برای راحتی کار از GTmetrix بهره برده و آنچه را که جی‌تی متریکس به عنوان بزرگترین عنصر محتوای صفحه شما در برگه ساختار گزارش شناسایی کرده است، ببینید؛ که تحت ممیزی با عنوان “Largest Contentful Paint Element” یا همان “بزرگترین عنصر رنگ محتوایی” فهرست شده است.

البته توجه داشته باشید که این ممیزی صرفاً اطلاعاتی است و به عملکرد یا امتیاز ساختار شما کمک نمی‌کند.

.


چگونه می‌توان بزرگترین رنگ محتوایی را بهبود بخشید؟

توجه داشته باشید که ممیزی‌های خاصی که در ادامه به آنها اشاره خواهد شد، احتمالاً بیشترین کمک را به LCP شما می‌کنند. با این حال، زمان‌بندی LCP صفحه‌ی شما ممکن است تحت تأثیر بهینه سازی‌های دیگری قرار گیرد که در اینجا درخصوص آنها چیزی ذکر نشده است.

به هر حال، شما می‌توانید زمان‌بندی LCP خود را با ترکیب شیوه‌های توسعه وب خوب، همچون موارد زیر بهبود ببخشید:

۱) کاهش زمان پاسخگویی سرور

کاهش زمان پاسخگویی سرور به بارگیری سریع‌تر منابع و ارائه زمان LCP سریع در صفحه‌ی شما کمک می‌کند. و برخی از کارهایی که می‌توانید در این خصوص انجام دهید عبارتند از:

  1. کاهش زمان پاسخ اولیه سرور
  2. استفاده از شبکه تحویل محتوا (CDN)
  3. خدمات‌دهی به دارایی‌های ثابت با سیاست کش کارآمد
  4. ایجاد ارتباطات اولیه با منابع مهم شخص ثالث

۲) حذف رفتار مسدودکننده رندر

حذف رفتار مسدود کردن رندر در صفحه‌ی شما باعث می‌شود منابع در سریع‌ترین زمان ممکن بارگذاری شوند.

۳) بهینه‌سازی تصاویر و فیلم‌ها

تحویل تصویر و ویدیو را در صفحه خود بهینه کنید تا زمان بارگذاری تصاویر و ویدیوها را کاهش دهید. برخی از کارهایی که می‌توانید انجام دهید عبارتند از:

  1. اندازه مناسب تصاویر
  2. رمزگذاری کارآمد تصاویر
  3. ترکیب تصاویر با استفاده از sprites CSS
  4. ارائه تصاویر در قالب‌های نسل بعدی
  5. استفاده از فرمت‌های ویدئویی برای محتوای متحرک

بازگشت به بالا
منبع: gtmetrix – با اندکی تکمیل

اگر این مقاله را دوست دارید، لطفا آن را با دوستان خود به اشتراک بگذارید.

آخرین کتاب‌های ایوسی

2 پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *