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

چگونه می توان بزرگترین رنگ محتوای وب سایت خود را اندازه گیری کرد

تست سرعت وب سایت رایگان را برای پیدا کردن آن اجرا کنید. سرعت LCP شما بلافاصله نمایش داده می شود.

نتایج تست سرعت به شما می گوید که:

• آستانه LCP برآورده شده است.
• شما باید هر Core Web Vital دیگری را بهینه کنید.

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

گوگل به صدک 75 تجربیات نگاه می کند – این بدان معناست که 25٪ از بازدیدکنندگان واقعی وب سایت زمان بارگذاری LCP 3.09 ثانیه یا بالاتر را تجربه می کنند، در حالی که برای 75٪ از کاربران LCP کمتر از 3.09 ثانیه است.

در این مثال، LCP کاربر واقعی به صورت 3.09 ثانیه نشان داده شده است.

نتایج آزمایش آزمایشگاهی در داده‌های اصلی وب حیاتی من چیست؟

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

1. به محض اینکه وب سایت خود را بهبود بخشید، معیارها به روز می شوند، در حالی که به روز رسانی کامل داده های Google در زمان واقعی 28 روز طول می کشد.
2. علاوه بر معیارها، گزارش های دقیقی دریافت می کنید که می تواند به شما در بهینه سازی وب سایت شما کمک کند.

علاوه بر این، PageSpeed ​​Insights داده‌های آزمایشگاهی را نیز ارائه می‌کند، اما به خاطر داشته باشید که داده‌هایی که گزارش می‌کند گاهی اوقات می‌تواند به دلیل انقباض شبیه‌سازی شده‌ای که برای شبیه‌سازی اتصال شبکه کندتر استفاده می‌کند، گمراه‌کننده باشد.

چگونه بزرگترین عنصر رنگی محتوایی خود را پیدا می کنید؟

هنگامی که تست سرعت صفحه را با DebugBear اجرا می کنید، عنصر LCP در نتیجه آزمایش برجسته می شود.

گاهی اوقات، عنصر LCP ممکن است یک تصویر بزرگ باشد، و گاهی اوقات، ممکن است بخش بزرگی از متن باشد.

صرف نظر از اینکه عنصر LCP شما یک تصویر است یا یک قطعه متن، محتوای LCP تا زمانی که صفحه شما شروع به رندر کند ظاهر نمی شود.

به عنوان مثال، در صفحه زیر، یک تصویر پس زمینه بزرگترین رنگ را بر عهده دارد.

در مقابل، LCP این صفحه یک پاراگراف از متن است.

برای بهبود بزرگترین رنگ محتوایی (LCP) وب سایت خود، باید اطمینان حاصل کنید که عنصر HTML مسئول LCP به سرعت ظاهر می شود.

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

برای بهبود LCP باید:

1. دریابید که چه منابعی برای ظاهر شدن عنصر LCP لازم است.
2. ببینید چگونه می توانید آن منابع را سریعتر بارگذاری کنید (یا اصلاً).

به عنوان مثال، اگر عنصر LCP یک عکس است، می توانید اندازه فایل تصویر را کاهش دهید.

پس از اجرای تست سرعت DebugBear، می‌توانید روی هر معیار عملکرد کلیک کنید تا اطلاعات بیشتری درباره نحوه بهینه‌سازی آن مشاهده کنید.

منابع رایجی که بر LCP تأثیر می گذارند عبارتند از:

• منابع مسدودکننده رندر
• تصاویری که بهینه نشده اند.
• فرمت های تصویر قدیمی
• فونت هایی که بهینه نشده اند.

چگونه منابع مسدود کننده رندر را کاهش دهیم

منابع مسدودکننده رندر فایل هایی هستند که قبل از اینکه مرورگر بتواند محتوای صفحه را روی صفحه بکشد باید دانلود شوند. شیوه نامه های CSS معمولاً مانند بسیاری از تگ های اسکریپت رندر-مسدود کننده هستند.

برای کاهش تأثیر عملکرد منابع مسدودکننده رندر می‌توانید:

1. شناسایی منابعی که رندر مسدود می شوند.
2. اگر منبع لازم است بررسی کنید.
3. بررسی کنید که آیا منبع باید رندر را مسدود کند.
4. ببینید آیا می توان منبع را سریعتر بارگذاری کرد، مثلاً با استفاده از فشرده سازی.

راه آسان: در آبشار درخواست DebugBear، درخواست‌ها برای منابع مسدودکننده رندر با تگ Blocking مشخص می‌شوند.

نحوه اولویت بندی و سرعت بخشیدن به درخواست های تصویر LCP

برای این بخش، ما قصد داریم از ویژگی جدید “fetchpriority” روی تصاویر استفاده کنیم تا به مرورگرهای بازدیدکننده شما کمک کنیم تا به سرعت تشخیص دهند چه تصویری باید ابتدا بارگیری شود.

از این ویژگی در عنصر LCP خود استفاده کنید.

چرا؟

وقتی فقط به HTML نگاه می کنیم، مرورگرها اغلب نمی توانند بلافاصله تشخیص دهند که چه تصاویری مهم هستند. یک تصویر ممکن است یک تصویر پس زمینه بزرگ باشد، در حالی که یکی دیگر ممکن است بخش کوچکی از پاورقی وب سایت باشد.

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

با این حال، این می تواند به این معنی باشد که مرورگر فقط نسبتا دیر شروع به دانلود تصویر LCP می کند.

استاندارد وب جدید Priority Hints به صاحبان وب سایت اجازه می دهد تا اطلاعات بیشتری را برای کمک به مرورگرها در اولویت بندی تصاویر و سایر منابع ارائه دهند.

در مثال زیر، می بینیم که مرورگر زمان زیادی را در انتظار صرف می کند، همانطور که با نوار خاکستری نشان داده شده است.

ما این تصویر LCP را انتخاب می کنیم تا ویژگی “fetchpriority” را به آن اضافه کنیم.

نحوه افزودن ویژگی FetchPriority به تصاویر

به سادگی با افزودن ویژگی fetchpriority=”high” به یک تگ img HTML، مرورگر دانلود آن تصویر را در سریع ترین زمان ممکن در اولویت قرار می دهد.

<img src="https://www.searchenginejournal.com/optimize-largest-contentful-paint-debugbear-spcs/471883/photo.jpg" fetchpriority="high" />

نحوه استفاده مناسب از فرمت ها و اندازه تصاویر مدرن

تصاویر با وضوح بالا اغلب می توانند حجم فایل بزرگی داشته باشند، به این معنی که دانلود آنها زمان زیادی می برد.

در نتیجه تست سرعت زیر می توانید با نگاه کردن به نواحی سایه دار آبی تیره متوجه شوید. هر خط نشان دهنده قسمتی از تصویر است که به مرورگر می رسد.

دو روش برای کاهش اندازه تصویر وجود دارد:

1. اطمینان حاصل کنید که وضوح تصویر تا حد امکان پایین است. بسته به اندازه دستگاه کاربر، تصاویر را با رزولوشن های مختلف ارائه دهید.
2. از یک فرمت تصویر مدرن مانند WebP استفاده کنید که می تواند تصاویر با همان کیفیت را در اندازه فایل کمتر ذخیره کند.

نحوه بهینه سازی زمان بارگذاری فونت

اگر عنصر LCP یک عنوان یا پاراگراف HTML است، بارگذاری سریع فونت برای این تکه متن بسیار مهم است.

یکی از راه‌های رسیدن به این هدف، استفاده از تگ‌های پیش بارگذاری است که می‌تواند به مرورگر بگوید فونت‌ها را زود بارگذاری کند.

font-display: swap قاعده CSS همچنین می‌تواند رندر سریع را تضمین کند، زیرا مرورگر بلافاصله قبل از تغییر به فونت وب، متن را با یک فونت پیش‌فرض ارائه می‌کند.

وب سایت خود را برای سریع نگه داشتن LCP نظارت کنید

نظارت مستمر وب‌سایت خود نه تنها به شما امکان می‌دهد تأیید کنید که بهینه‌سازی LCP شما کار می‌کند، بلکه مطمئن می‌شود که در صورت بدتر شدن LCP، هشدار دریافت می‌کنید.

DebugBear می تواند Core Web Vitals و سایر معیارهای سرعت سایت را در طول زمان نظارت کند. این محصول علاوه بر اجرای آزمایش‌های عمیق مبتنی بر آزمایشگاه، معیارهای کاربر واقعی Google را نیز پیگیری می‌کند.

DebugBear را با یک دوره آزمایشی رایگان 14 روزه امتحان کنید.