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

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

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

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

در مورد آن فکر کنید: اگر بزرگترین عنصر صفحه سریع بارگیری نشود، تجربه کاربری شما خوب نخواهد بود. شما به یک صفحه تقریباً خالی نگاه می کنید و منتظر می مانید تا صفحه بارگذاری شود… حتی می توانید سایت را ترک کنید! هنگام مرور، چند ثانیه می تواند تفاوت زیادی ایجاد کند.

به همین دلیل است که Google LCP را به عنوان یکی از معیارهای Core Web Vitals گنجانده است – معیارهایی که میزان تجربه کاربری شما را می سنجد.

در ماه ژوئن، LCP به عنوان بخشی از فاکتور رتبه‌بندی جدید، سیگنال تجربه صفحه ، عرضه می‌شود . به همین دلیل، Largest Contentful Paint نه تنها برای ارائه یک تجربه کاربری عالی بلکه برای بهبود عملکرد سئو شما نیز اهمیت دارد.

علاوه بر این، LCP ۲۵٪ از امتیاز کلی PageSpeed ​​Insights را به خود اختصاص می دهد. با بهبود عملکرد آن، احتمالاً درجه سرعت صفحه خود را بهبود خواهید داد.

به طور خلاصه، LCP یکی از مهمترین معیارهای عملکرد در حال حاضر است.

امتیاز LCP خوب چیست؟

نمره خوب به این معنی است که LCP باید کمتر یا مساوی ۲.۵ ثانیه باشد. در این صورت، صفحه نمره سبز را می گیرد و ارزیابی را پاس می کند.

اگر LCP بین ۲.۵ و ۴.۰ ثانیه باشد، نمره ” نیاز به بهبود دارد ” – نمره نارنجی دریافت خواهید کرد.

فرض کنید LCP بیش از ۴ ثانیه است. سپس نمره ” ضعیف ” است و باید در اسرع وقت آن را برطرف کنید.

حال بیایید ببینیم چگونه می توانیم عنصر LCP را پیدا کنیم.

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

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

ابزارهای داده آزمایشگاهی :

• فانوس دریایی
• PageSpeed ​​Insights
• Chrome DevTools
• WebPageTest
• GTmetrix

ابزارهای داده های میدانی :

• PageSpeed ​​Insights (در صورت وجود)
• گزارش تجربه کاربر Chrome (داده‌های فیلد)
• کنسول جستجو – گزارش Core Web Vitals (داده های میدانی).

در پست ما در PageSpeed ​​Insights می‌توانید درباره تفاوت بین داده‌های آزمایشگاهی و میدانی اطلاعات بیشتری کسب کنید.

بیایید به برخی از ساده‌ترین و مؤثرترین ابزارها بپردازیم: PageSpeed ​​Insights و Search Console.

اندازه گیری و یافتن LCP با PageSpeed ​​Insights

PageSpeed ​​Insights ساده ترین راه برای اندازه گیری و یافتن عنصر LCP است.

پس از آزمایش صفحه URL خود، نمره LCP را در داده های آزمایشگاهی و داده های میدانی (در صورت وجود) دریافت خواهید کرد. همچنین توصیه های PageSpeed ​​را برای بهبود عملکرد خود دریافت خواهید کرد.

به قسمت Diagnostics بروید و به دنبال بخش “بزرگترین عنصر رنگ محتوایی” بگردید. شما متوجه خواهید شد که عنصر LCP برای صفحه ای که در حال تجزیه و تحلیل هستید چیست.

بیایید چند مثال را مرور کنیم و درک مطلب را آسان‌تر کنیم.

مثال LCP از موبایل

بیایید یک صفحه وبلاگ WP Rocket را از طریق تلفن همراه تجزیه و تحلیل کنیم.

عملکرد صفحه را در ابزار تست می کنیم و به قسمت Diagnostics می رویم. عنصر LCP H1 است که عنوان پست وبلاگ است:

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

بیایید اکنون نگاهی به همان URL از دسکتاپ بیندازیم.

دوباره به قسمت Diagnostics می رویم و به دنبال عنصر LCP می گردیم. جای تعجب نیست که LCP مانند موبایل نیست. برای دسکتاپ، LCP یک تصویر است:

به طور دقیق تر، این تصویر پست است.از آنجایی که PageSpeed ​​Insights یک ابزار مبتنی بر صفحه است، توصیه می کنیم چندین آزمایش را برای صفحات مختلف اجرا کنید.

برای تجزیه و تحلیل کلی، باید از Console جستجو نیز استفاده کنید.

اندازه گیری و یافتن LCP در کنسول جستجو

با گزارش Core Web Vitals در Search Console می‌توانید عملکرد سایت خود را ارزیابی کنید و هر مشکلی را شناسایی کنید.

شما می توانید به هر دو عملکرد از تلفن همراه و دسکتاپ دسترسی داشته باشید:

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

گزارش کنسول جستجو عملکرد هر Core Web Vital را بر اساس وضعیت، نوع مشکل و آدرس‌های اینترنتی گروه‌بندی می‌کند.

برای مثال، ممکن است برخی از URLها برای LCP عملکرد خوبی نداشته باشند. اگر چنین است، در گزارش، ممکن است « مسئله LCP: بیش از ۲.۵ ثانیه (موبایل) » را بخوانید . ”

با کلیک بر روی ردیف مربوط به آن مشکل خاص، به صفحه‌ای وارد می‌شوید که فهرست URL‌هایی را که باید اصلاح شوند ارائه می‌کند. در حالی که این URL ها یک نمونه هستند، اما می توانند ایده بسیار دقیقی از آنچه در حال وقوع است به شما ارائه دهند.

پیدا کردن الگوی URL و حرکت به جلو با اصلاح و اعتبار سنجی بسیار آسان خواهد بود.

چه عواملی بر LCP تأثیر می گذارد و باعث کاهش امتیاز می شود

برای سایت‌های وردپرسی، سه عامل بر LCP تأثیر می‌گذارد: زمان پاسخ‌دهی سرور آهسته، جاوا اسکریپت و CSS مسدودکننده رندر، و زمان بارگذاری منابع کم.

زمان پاسخ آهسته سرور

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

مشکل را با بهبود Time to First Byte، استفاده از CDN، و ایجاد اتصالات شخص ثالث زودتر برطرف خواهید کرد.

رندر مسدود کردن جاوا اسکریپت و CSS

مرورگر درخواستی می دهد و محتوا را از سرور دریافت می کند. در این مرحله، مرورگر محتوا را رندر می کند و آن را نشان می دهد، درست است؟ نه خیلی سریع.

برای ارائه هر محتوا، مرورگر باید HTML صفحه را تجزیه و تحلیل (یا تجزیه ) کند و آن را در ساختار HTML صفحه «قابل خواندن» کند – این درخت DOM است. پس از آن، محتوا رندر شده و به طور کامل نمایش داده می شود – مگر اینکه برخی از اسکریپت ها و شیوه نامه ها تجزیه HTML را مسدود کنند. این اسکریپت ها و شیوه نامه ها منابع مسدودکننده رندر هستند.

در نتیجه این بلوک، تجزیه به تاخیر می افتد. بار دیگر، محتوای درخواستی شما قبل از بارگذاری کمی طول می کشد. عملکرد LCP دوباره تحت تأثیر قرار می گیرد.

با به تعویق انداختن و حذف فایل‌های JS استفاده نشده ، این مشکلات را برطرف خواهید کرد . نگران نباش! تمام اطلاعات مورد نیاز خود را در بخش بعدی خواهید یافت.

زمان بارگیری منابع آهسته

فایل‌های دیگر نیز می‌توانند باعث عملکرد ضعیف و تجربه کاربری بد شوند: تصاویر، ویدیوها و عناصر سطح بلوک مانند فایل‌های HTML و CSS .

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

شما زمان بارگذاری منابع را با بهینه‌سازی تصاویر، کوچک‌سازی و فشرده‌سازی فایل‌های CSS، JS، HTML و پیش‌بارگذاری دارایی‌های حیاتی مدیریت خواهید کرد.

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

بیایید درک کنیم که چگونه همه این مشکلات را با جزئیات برطرف کنیم.

چگونه می توان بزرگترین رنگ محتوا را طولانی تر از ۲.۵ یا ۴ ثانیه در موبایل و دسکتاپ کاهش داد

در اینجا ده راه برای بهبود عملکرد Largest Contentful Paint و رفع وضعیت کنسول جستجو « مشکل LCP: طولانی‌تر از ۲.۵ ثانیه یا مشکل LCP: طولانی‌تر از ۴s »، هم از طریق تلفن همراه و/یا از دسک‌تاپ ارائه شده است.

1. بهبود زمان برای اولین بایت و کاهش زمان پاسخ سرور
2. از CDN استفاده کنید
3. جاوا اسکریپت را به تعویق بیندازید
4. جاوا اسکریپت استفاده نشده را حذف کنید
5. CSS غیر بحرانی، CSS بحرانی درون خطی را به تعویق بیندازید و CSS استفاده نشده را حذف کنید
6. فایل های CSS و JS را کوچک کنید
7. تصاویر خود را بهینه کنید
8. فشرده سازی فایل های متنی
9. از Preload برای دارایی های حیاتی استفاده کنید
10. اتصالات شخص ثالث را زودتر برقرار کنید.

بیایید آنها را با جزئیات ببینیم.

???? برای هر پیشنهاد، اطلاعاتی درباره تاثیر عملکرد آن پیدا خواهید کرد – از کم به بالا. هرچه بیشترین تأثیر باشد، بیشترین شانس بهبود امتیاز Largest Contentful Paint پس از پیروی از آن توصیه خاص است.

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

تاثیر عملکرد: بالا ????????????

یکی از دلایل اصلی LCP بد، کندی زمان پاسخگویی سرور است.

می توانید زمان پاسخگویی سرور خود را با نگاه کردن به زمان تا اولین بایت (TTFB) اندازه گیری کنید .

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

با بهبود TTFB خود، زمان پاسخگویی سرور و امتیاز LCP را بهبود می‌بخشید.

لطفاً توجه داشته باشید که یک TTFB خوب باید کمتر از ۲۰۰ میلی‌ثانیه باشد – می‌توانید با آزمایش سایت URL خود در WebPageTest ، به سرعت این معیار را بررسی کنید .

دو راه برای رفع خرابی زمان سرور وجود دارد:

۱. Caching صفحه را فعال کنید

با فعال کردن کش صفحه، صفحات سایت شما پس از بارگیری صفحه برای اولین بار به عنوان فایل HTML در سرور ذخیره می شود. در نتیجه محتوا سریعتر نمایش داده می شود. این یک راه آسان و موثر برای بهبود TTFB است.

همچنین می توانید یکی از بهترین ارائه دهندگان هاست وردپرس را انتخاب کنید که شامل گزینه کش در سطح سرور است.

WP Rocket می تواند به راحتی از کش کردن صفحات بدون هیچ تلاشی مراقبت کند.

یک برگه اختصاصی به شما این امکان را می دهد که حافظه پنهان موبایل را فعال کرده و گزینه های دلخواه خود را تنظیم کنید. WP Rocket 80% از بهترین عملکردهای وب را به صورت خودکار فعال می کند. بنابراین، اگر شک دارید، به هر حال تحت پوشش قرار خواهید گرفت!

۲. یک سرویس میزبانی سرور سریع را انتخاب کنید

یک میزبانی سریع می تواند تفاوت زیادی در عملکرد ایجاد کند. و شاید زمان آن رسیده است که پلن هاست خود را ارتقا دهید!

به عنوان اولین چیز، ارائه دهنده هاست شما باید سرورهایی نزدیک به اکثر کاربران شما داشته باشد. هرچه کاربران شما به سرور نزدیک‌تر باشند، داده‌ها سریع‌تر ارسال می‌شوند.

همچنین باید نوع میزبان سرور مناسب را انتخاب کنید. یک سرور میزبان اختصاصی سریعترین عملکرد را تضمین می کند. میزان ترافیک سایت شما را در نظر بگیرید و تصمیم خود را بگیرید.

با فعال کردن حافظه پنهان و انتخاب میزبانی سریع، از توصیه‌های PageSpeed ​​Insights زیر مراقبت خواهید کرد:

• کاهش زمان پاسخ سرور (TTFB)
• دارایی های ثابت را با یک خط مشی کش کارآمد ارائه دهید.

۲. از CDN استفاده کنید

تاثیر عملکرد: متوسط ​​????????

CDN به شما کمک می کند تا فاصله زمانی بین درخواست کاربر و پاسخ سرور را کاهش دهید. این مقدار زمان تاخیر است. فاصله بین درخواست مرورگر و پاسخ سرور، زمان رفت و برگشت (RTT) است.

اگر کاربران شما دور از مکان سرور قرار دارند، ممکن است مدتی طول بکشد تا همه دارایی ها (به عنوان مثال، تصاویر، فایل های JS و CSS، ویدئوها) ارسال شوند. تأخیر و RTT بالا خواهد بود و بر زمان بارگذاری و امتیاز LCP تأثیر می گذارد.

قبلاً دیدید که مکان سرور شما چگونه می تواند بر عملکرد سایت شما تأثیر بگذارد.

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

RocketCDN بهترین راه برای دسترسی سریع و آسان کاربران به سایت شما است.

اگر می خواهید در مورد مزایای CDN و انواع مختلف آن بیشتر بدانید، می توانید مقاله ما را بخوانید .

انتخاب CDN به شما کمک می کند تا به توصیه های PageSpeed ​​زیر توجه کنید:

• دارایی های ثابت را با یک خط مشی کش کارآمد ارائه دهید
• فشرده سازی متن را فعال کنید

لطفاً توجه داشته باشید که یک CDN تنها در صورت پیکربندی صحیح به چنین توصیه‌هایی پاسخ می‌دهد. گزینه های پیش فرض ممکن است برای بهبود عملکرد همانطور که انتظار می رود کافی نباشد.

۳. جاوا اسکریپت را به تعویق بیندازید

تاثیر عملکرد: بالا ????????????

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

به تعویق انداختن فایل های جاوا اسکریپت به شما در حل این مشکل کمک می کند. به عبارت دیگر، اولویت فایل های JS در حال بارگذاری را تغییر خواهید داد.

یاد آوردن؟ مرورگر HTML را تجزیه می‌کند، درخت DOM را می‌سازد و سپس صفحه را رندر می‌کند – مگر اینکه هیچ منبع مسدودکننده‌ای برای کند کردن روند وجود داشته باشد.

با به تعویق انداختن جاوا اسکریپت، مرورگر فایل های JS را فقط پس از تجزیه سند HTML و ساخت درخت DOM پردازش و بارگذاری می کند. از آنجایی که چیزی برای مسدود کردن فرآیند وجود نخواهد داشت، رندر بسیار سریع‌تر خواهد بود – و متریک LCP بهبود می‌یابد.

می‌توانید ویژگی defer را به فایل‌های جاوا اسکریپت اضافه کنید تا مرورگر بتواند منابعی را که باید به تعویق بیفتد شناسایی کند. مرورگر HTML را تجزیه و تحلیل می کند و درخت DOM را بدون وقفه می سازد.

در اینجا نمونه ای از ویژگی defer آورده شده است:

<script defer src=”/example-js-script“></script>

ساده ترین راه برای مدیریت منابع جاوا اسکریپت استفاده از WP Rocket و ویژگی Load Javascript Deferred آن است .

می توانید این گزینه را در تب File Optimization انتخاب کنید. علاوه بر این، می‌توانید به راحتی فایل‌های JS خاص را از به تعویق انداختن حذف کنید – در صورتی که ویژگی defer با هر فایلی تضاد داشته باشد.

توصیه PSI « حذف منابع مسدودکننده رندر » را با چند کلیک انجام خواهید داد — حتی اگر مشکلات منابع مسدودکننده رندر در اینجا متوقف نشود.

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

۴. جاوا اسکریپت استفاده نشده را حذف کنید

تاثیر عملکرد: متوسط ​​????????

راه دیگر برای حذف منابع مسدودکننده رندر، حذف منابع جاوا اسکریپتی است که استفاده نمی شوند. آنها ممکن است به دو دلیل استفاده نشوند:

• آنها دیگر در سایت شما استفاده نمی شوند. آنها هنوز در کد هستند اما کاملاً بی فایده هستند.
• آنها در محتوای بالا گنجانده نشده اند. بنابراین، آنها برای ساختن درخت DOM غیر حیاتی هستند. با این حال، این فایل‌ها دلیلی برای وجود دارند (مثلاً کد رهگیری Google Analytics).

می توانید لیست فایل های JS استفاده نشده را در گزارش PageSpeed ​​در بخش “حذف جاوا اسکریپت استفاده نشده” بیابید:

دو راه برای حل این مشکل در وردپرس وجود دارد:

1. فایل های جاوا اسکریپت را فقط در صورت نیاز بارگیری کنید.

به عنوان مثال، فایل ها باید فقط در صفحاتی بارگذاری شوند که به آن فایل خاص نیاز دارند – در هر صورت، اجرای JS باید غیرفعال شود. می توانید با افزونه هایی مانند Perfmatters و Assets Cleanup از این جنبه مراقبت کنید.

2. فایل های جاوا اسکریپت را به تاخیر بیندازید.

فایل های جاوا اسکریپت تا اولین تعامل کاربر بارگیری نمی شوند (به عنوان مثال، پیمایش، کلیک کردن روی یک دکمه). اگر هیچ تعاملی با کاربر وجود نداشته باشد، فایل‌های JS اصلا بارگذاری نمی‌شوند. با به تأخیر انداختن جاوا اسکریپت، فایل‌های JS توسط Lighthouse شناسایی نمی‌شوند و در توصیه «حذف فایل‌های جاوا اسکریپت استفاده نشده» فهرست نمی‌شوند – حتی اگر نمی‌توان همه اسکریپت‌های فهرست توصیه‌های PageSpeed ​​را با خیال راحت به تأخیر انداخت. به عنوان مثال، کد رهگیری Google Analytics معمولاً در این توصیه PageSpeed ​​Insights گنجانده شده است. اگر فایل‌های JS را به تأخیر بیندازید، فایل Google Analytics JS دیگر گزارش نمی‌شود. توجه داشته باشید:

به تعویق انداختن فایل‌های JS به خودی خود هدفی برای حل این توصیه PSI ندارد. با این حال، در رسیدگی به این ممیزی PageSpeed ​​و بهبود امتیاز LCP شما به خوبی کار می کند. بنابراین، خوب است که بدانید.

بنابراین، چگونه می توانید منابع JS را به تاخیر بیندازید؟ شما گزینه های مختلفی دارید.

اگر به دنبال یک افزونه رایگان برای به تاخیر انداختن فایل‌های جاوا اسکریپت هستید، می‌توانید از Flying Scripts استفاده کنید .

یک راه دیگر برای مقابله ایمن با هر جاوا اسکریپت استفاده نشده استفاده از WP Rocket است! این افزونه به شما اجازه می دهد تا اجرای جاوا اسکریپت را با چند کلیک از برگه بهینه سازی فایل به تاخیر بیاندازید. شما به راحتی می توانید URL هایی را که می خواهید از تأخیر در اجرا حذف کنید اضافه کنید:

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

نمره LCP شما افزایش دیگری خواهد داشت.

۵. CSS غیر بحرانی، CSS بحرانی درون خطی را به تعویق بیندازید و CSS استفاده نشده را حذف کنید

تاثیر عملکرد: متوسط ​​????????

در مورد فایل‌های JS، باید CSS غیر بحرانی را نیز به تعویق بیندازید – همه فایل‌هایی که برای رندر کردن صفحه مرتبط نیستند. به عبارت دیگر، شما باید اولویت این فایل ها را نیز تغییر دهید.

آنها پس از اینکه مرورگر مرتبط ترین محتوا را در صفحه ارائه کرد بارگیری می شوند.

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

اگر می‌خواهید هر دو اکشن را در وردپرس پیاده‌سازی کنید، فرآیند به این صورت است:

1. ابتدا باید CSS Critical Path (CPCSS) را با استفاده از یک ابزار مولد موجود استخراج و درون خط کنید. می توانید یکی را در اینجا پیدا کنید.
2. سپس با اعمال الگوی زیر باید بقیه کلاس ها را به صورت ناهمزمان بارگذاری کنید .

می توانید اطلاعات بیشتری در مورد این فرآیند در منبع اختصاصی Google بخوانید .

نکته دیگر این است که از قرار دادن کد CSS بزرگ غیر بحرانی در <head> کد خودداری کنید.

اگر می خواهید به سرعت از CSS بحرانی و غیر بحرانی مراقبت کنید، می توانید از ویژگی های WP Rocket استفاده کنید!

یک راه موثر برای مقابله با CSS حذف CSS استفاده نشده است. WP Rocket همچنین به لطف ویژگی اختصاصی خود می تواند به شما کمک کند تا این کار را به راحتی انجام دهید. فقط باید گزینه Remove unused CSS را فعال کنید و افزونه CSS استفاده نشده را از HTML هر صفحه حذف می کند.

با اجرای این اقدامات، به توصیه‌های PageSpeed ​​Insights «حذف منابع مسدودکننده رندر» ، «کاهش CSS استفاده‌نشده» و «اجتناب از زنجیره درخواست‌های حیاتی» رسیدگی می‌کنید.

۶. فایل های CSS و JS را کوچک کنید

تاثیر عملکرد: کم ????

یکی دیگر از راه‌های موثر برای بهینه‌سازی Largest Contentful Paint، کوچک کردن فایل‌های CSS و JS است.

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

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

ساده ترین و موثرترین راه برای مراقبت از کوچک سازی استفاده از افزونه ای مانند WP Rocket است.

در تب بهینه سازی فایل، شما این فرصت را خواهید داشت که فایل های CSS و JavaScript را کوچک کنید.

شما به توصیه های PageSpeed ​​Insights زیر توجه خواهید کرد:

• CSS را کوچک کنید
• Minify JS
• از بارهای سنگین شبکه خودداری کنید.

۷. تصاویر خود را بهینه کنید

تاثیر عملکرد: بالا ????????????

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

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

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

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

واضح است: اگر از ابزاری برای بهینه سازی تصاویر خود در دسکتاپ استفاده می کنید، فقط اندازه اصلی را بهینه می کنید. اندازه تصاویری که در وردپرس آپلود می کنید تغییر نمی کند. همانطور که می دانید در وردپرس اندازه های مختلف عکس وجود دارد. تا زمانی که از یک افزونه بهینه سازی تصویر مناسب استفاده نکنید، هیچ چیزی را برای عملکرد بهینه نخواهید کرد.

برای بهینه سازی چند تصویر، می توانید از ابزاری مانند ImageOptim استفاده کنید. از سوی دیگر، اگر می‌خواهید تصاویر بیشتر و ریز عکس‌های آنها را به صورت انبوه بهینه کنید، Imagify راه‌حل عالی است. وزن تصاویر خود را بدون کاهش کیفیت آنها کاهش خواهید داد. در زمان زیادی صرفه جویی خواهید کرد!

تصاویر خود را به فرمت های جدید تبدیل کنید. به طور کلی، گوگل فرمت WebP را توصیه می کند. و به همین دلیل است که همه افزونه های بهینه ساز تصویر وردپرس اکنون دارای گزینه ای برای تبدیل تصاویر به WebP هستند. فرمت های دیگری که ممکن است در نظر بگیرید JPEG 2000 و JPEG XR هستند. این فرمت ها کوچکتر از JPEG، PNG و GIF هستند و به بهبود عملکرد کمک می کنند.

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

صفحه سازهایی مانند Elementor به کاربران اجازه می دهند تا اندازه های مختلف تصویر را با توجه به دستگاه آپلود کنند. بهینه سازی تصویر موبایل بسیار ضروری است و امتیاز موبایل بیشترین اهمیت را دارد. تأثیر آن بر نمره LCP خود را دست کم نگیرید!

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

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

با بهینه سازی تصاویر خود، به ممیزی های PageSpeed ​​Insights زیر رسیدگی می کنید:

• تصاویر را در قالب های نسل بعدی ارائه دهید
• اندازه مناسب تصاویر
• کدگذاری کارآمد تصاویر
• از بارهای سنگین شبکه خودداری کنید.

۸. فشرده سازی فایل های متنی

تاثیر عملکرد: بالا ????????????

همچنین باید فایل های متنی مانند منابع HTML، CSS یا جاوا اسکریپت را فشرده کنید.

فشرده سازی به این معنی است که فایل های خود را در قالبی کوچکتر و سبک تر “زیپ” کنید تا سریعتر بارگذاری شوند. هنگامی که اندازه آنها را کاهش دهید، انتقال بین مرورگر و سرور سریعتر خواهد بود. مرورگر قادر خواهد بود این منابع را سریعتر بارگیری کند. زمان بارگذاری و LCP بهبود خواهد یافت.

می توانید از فرمت های فشرده سازی مانند GZIP و Brotli استفاده کنید. از یک طرف، GZIP توسط اکثر هاست ها پشتیبانی می شود. از طرف دیگر، Brotli عملکرد بیشتری دارد و در حال حاضر بیشتر توصیه می شود. در پست وبلاگ ما درباره GZIP در مقابل Brotli بیشتر بیاموزید .

با استفاده از یک افزونه به راحتی می توانید فشرده سازی GZIP را در وردپرس فعال کنید. می‌توانید بین گزینه‌های مختلف، از افزونه ساده Enable Gzip Compression گرفته تا WP Rocket، که به طور خودکار فشرده‌سازی GZIP را در بر می‌گیرد، یکی را انتخاب کنید. همچنین برخی از هاست ها فشرده سازی GZIP را به صورت پیش فرض فعال می کنند.

در هر صورت، به توصیه PageSpeed ​​«فعال کردن فشرده‌سازی متن» می‌پردازید.

۹. از پیش بارگذاری برای دارایی های حیاتی (به عنوان بزرگترین تصویر رنگ محتوایی) استفاده کنید

تاثیر عملکرد: کم ????

در این مرحله، می‌دانید که دارایی‌های بالای صفحه چقدر برای یک نمره عملکرد خوب حیاتی هستند. این منابع حیاتی می توانند فونت ها، تصاویر، فیلم ها، CSS یا فایل های جاوا اسکریپت باشند.

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

بنابراین، ممکن است تعجب کنید که چگونه بزرگترین تصویر رنگ محتوای محتوا را از قبل بارگذاری کنید.

گزینه Preload مفید است. به مرورگر می گوید که بار این منابع را اولویت بندی کند. به عبارت دیگر، Preload از کشف و بارگذاری این فایل های حیاتی (از جمله تصویر LCP) تا مدت ها بعد از مرورگر جلوگیری می کند.

می توانید rel=”preload” را در کد قرار دهید:

<link rel=”preload“ as=”script“ href=”script.js“>

<link rel=”preload“ as=”style“ href=”style.css“>

<link rel=”preload“ as=”image“ href=”img.png“>

<link rel=”preload“ as=”video“ href=”vid.webm“ type=”video/webm“>

<link rel=”preload“ href=”font.woff2“ as=”font“ type=”font/woff2“ crossorigin>

منبع: گوگل

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

اگر نیاز به بارگیری فونت‌ها دارید، می‌توانید از ویژگی WP Rocket استفاده کنید (فقط در صورتی که ویژگی حذف استفاده نشده CSS را فعال نکرده باشید):

می‌توانید در مقاله اختصاصی ما درباره بهترین روش‌ها برای بارگذاری پیش‌بارگذاری فونت وب بیشتر بخوانید .

با استفاده از پیش بارگذاری برای دارایی های حیاتی، به توصیه PageSpeed ​​« درخواست های کلید پیش بارگیری » رسیدگی می کنید.

۱۰. اتصالات شخص ثالث را زودتر برقرار کنید

تاثیر عملکرد: کم ????

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

باید از گزینه Preconnect استفاده کنید.

فرض کنید یک فایل CSS یا JS از یک شخص ثالث مانند فیس بوک یا گوگل آنالیتیکس درخواست شده است. مرورگر منبع خارجی را درخواست می کند.

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

می توانید rel=”preconnect” را در کد خود قرار دهید:

<link rel=”preconnect“ href=”https://example.com“>.

به عنوان یک جایگزین، می توانید از یک افزونه به عنوان Perfmatters استفاده کنید.

از آنجایی که مرورگر شما ممکن است از گزینه preconnect پشتیبانی نکند، همیشه بهتر است dns-prefetch را به عنوان یک تکنیک بازگشتی پیاده سازی کنید. سپس جستجوهای DNS را سریعتر حل خواهید کرد. به عبارت دیگر، فایل های خارجی به خصوص در شبکه های تلفن همراه سریعتر بارگذاری می شوند.

می‌توانید rel=”dns-prefetch” را به کد خود اضافه کنید – به عنوان یک برچسب جداگانه از ویژگی preconnect:

<head>

<link rel=”preconnect“ href=”https://example.com“>

<link rel=”dns-prefetch“ href=”https://example.com“>

</head>

تب Preload WP Rocket به شما امکان می دهد درخواست های DNS را از قبل واکشی کنید. شما فقط باید میزبان های خارجی را برای واکشی از قبل مشخص کنید:

با ایجاد اتصالات شخص ثالث زودتر، زمان تا اولین بایت و زمان پاسخگویی سرور را بهبود می‌بخشید.همچنین به توصیه PageSpeed ​​”پیش اتصال به مبداهای ضروری” توجه خواهید کرد