آشنایی با معیار Largest Contentful Paint (LCP)
در دنیای وب، سرعت بارگذاری صفحات وب‌سایت نقش حیاتی در تجربه کاربری دارد. گوگل برای سنجش این تجربه کاربری، مجموعه‌ای از شاخص‌ها به نام Core Web Vitals (هسته حیاتی وب) تعریف کرده است. یکی از مهم‌ترین این شاخص‌ها Largest Contentful Paint (به اختصار LCP) است.
اگر تا به حال با اصطلاح LCP برخورد نکرده‌اید یا می‌خواهید بدانید دقیقا چیست و چرا اهمیت دارد، با ما در این مقاله همراه باشید. در این مطلب به زبان ساده و به‌صورت محاوره‌ای توضیح می‌دهیم که LCP چیست، چگونه اندازه‌گیری می‌شود، معیارهای امتیازدهی آن برای موبایل و دسکتاپ چیست، چطور می‌توان آن را بهبود داد، و در نهایت نکاتی کاربردی برای بهینه‌سازی LCP در سایت‌های وردپرسی ارائه می‌کنیم. بعد از مطالعه این مطلب، دید واضحی نسبت به LCP و تأثیر آن بر سرعت و SEO وب‌سایتتان خواهید داشت.
LCP دقیقاً چیست و چرا مهم است؟
Largest Contentful Paint (بزرگ‌ترین محتوای قابل نمایش) یک معیار عملکردی (Performance Metric) است که مدت‌زمان لازم برای نمایش بزرگ‌ترین عنصر محتوایی در ناحیه دید کاربر (viewport) را اندازه‌گیری میکند. به بیان ساده، از لحظه‌ای که کاربر درخواست بارگذاری صفحه را می‌دهد تا زمانی که بزرگ‌ترین تصویر، ویدیو یا بلوک متنی صفحه به‌طور کامل روی صفحه نمایش داده شود، زمان LCP محاسبه می‌شود. این لحظه معمولاً زمانی است که اصلی‌ترین محتوای صفحه در برابر چشمان کاربر ظاهر شده و وی احساس میکند صفحه بارگذاری شده و قابل استفاده است
LCP یکی از سه شاخص اصلی Core Web Vitals گوگل است (دو شاخص دیگر FID برای تعامل اولیه و CLS برای پایداری چیدمان هستند) و از دید گوگل یک معیار کاربر-محور مهم برای سنجش سرعت ادراک‌شده بارگذاری است . اهمیت LCP از آن جهت است که نشان می‌دهد محتوای اصلی صفحه چه‌قدر سریع به کاربر نمایش داده می‌شود؛ هرچه این زمان کمتر باشد، کاربر زودتر به محتوا دسترسی پیدا میکند و احساس بهتری نسبت به سرعت سایت خواهد داشت. برعکس، اگر LCP یک صفحه وب زیاد باشد (مثلاً چند ثانیه طول بکشد تا عنصر اصلی ظاهر شود)، احتمال دارد کاربر حس کند سایت کند است یا حتی قبل از نمایش محتوا، صفحه را ترک کند.
گوگل به‌طور مشخص توصیه کرده است که برای ارائه تجربه کاربری خوب، زمان LCP صفحه شما در 75٪ بازدیدها 2.5 ثانیه یا کمتر باشد. به بیان دیگر، یک LCP زیر 2.5s عالی (سبز) در نظر گرفته می‌شود، بین 2.5s تا 4s نیازمند بهبود (زرد) و بیشتر از 4s ضعیف (قرمز) محسوب می‌شود. این اعداد همان آستانه‌هایی هستند که در گزارش‌های گوگل (مانند PageSpeed Insights و سرچ کنسول) برای خوب یا بد بودن LCP استفاده می‌شوند. LCP آن‌قدر مهم است که در امتیازدهی ابزار Lighthouse نیز وزن قابل توجهی دارد (حدود 25٪ امتیاز عملکرد)؛ بنابراین بهبود آن می‌تواند تاثیر چشمگیری هم بر امتیاز Performance سایت شما در ابزارها و هم بر درک سرعت توسط کاربران داشته باشد.
LCP چگونه اندازه‌گیری می‌شود؟
مرورگر برای محاسبه LCP باید تشخیص دهد بزرگ‌ترین عنصر محتوایی صفحه کدام است و چه زمانی به‌نمایش درمی‌آید. انواع عناصری که می‌توانند کاندید LCP باشند عبارت‌اند از:
- تصاویر (
<img>) - ویدیوهای جاسازی‌شده (
<video>) - تصاویر پس‌زمینه که از طریق CSS بارگذاری می‌شوند (مثلاً با
url()در CSS) - هر عنصر بلوکی متنی (مثل تگ‌های
<div>،<p>،<h1>و … که متن یا محتوای قابل نمایش دارند
کوچک‌ترین اجزای صفحه (مانند آیکون‌های کوچک یا متن‌های کوتاه) عموماً به عنوان LCP انتخاب نمی‌شوند؛ مرورگر بزرگ‌ترین عنصر داخل محدوده دید کاربر را (از نظر ابعاد پیکسلی) پیدا میکند و زمان رندر شدن آن را گزارش میکند.
نکته مهم این است که LCP یک لحظه در خط زمانی بارگذاری صفحه است، نه میانگین یا مجموع. ممکن است در طول بارگذاری، چند عنصر مختلف در ابتدا به عنوان بزرگ‌ترین عنصر محسوب شوند تا نهایتاً عنصر نهایی که بزرگ‌ترین است به‌طور کامل ظاهر گردد. همان عنصری که در لحظه خاصی بیشترین مساحت را در صفحه اشغال کرده و رندر شده، زمانش به عنوان LCP ثبت می‌شود.
برای مثال، در ابتدای بارگذاری ممکن است یک بلوک متنی بزرگ‌ترین عنصر باشد، اما با وارد شدن یک تصویر بزرگ‌تر در ادامه، نقش LCP به آن تصویر منتقل شود. حتی تغییرات چیدمان هم می‌تواند تاثیرگذار باشد؛ مثلاً در مثالی از TechCrunch، در ابتدا یک بخش صفحه بزرگ‌ترین بود اما با تغییر چیدمان و اسکرول محتوا، آن بخش از دید خارج شد و عنصر دیگری LCP شد. بنابراین LCP همواره آخرین و بزرگ‌ترین عنصری است که پیش از کامل شدن بارگذاری، در صفحه رویت می‌شود.
امتیازدهی LCP در موبایل و دسکتاپ
معیارهای «خوب» یا «بد» بودن LCP یکسان هستند، اما ابزار Lighthouse برای شبیه‌سازی شرایط موبایل، آستانه‌های 2.5s/4s را به عنوان مبنای امتیازدهی لحاظ میکند. در حالت دسکتاپ چون سخت‌افزار قوی‌تر و شبکه سریع‌تر فرض می‌شود، Lighthouse سخت‌گیرانه‌تر است و آستانه‌های پایین‌تری دارد. جدول زیر محدوده‌های زمانی رایج برای امتیاز LCP را در حالت موبایل و دسکتاپ نشان می‌دهد:
| پلتفرم | سبز (سریع) | نارنجی (قابل‌قبول) | قرمز (کند) |
|---|---|---|---|
| موبایل | 0 تا 2.5 ثانیه | 2.5 تا 4 ثانیه | بیشتر از 4 ثانیه |
| دسکتاپ | 0 تا 1.2 ثانیه | 1.2 تا 2.4 ثانیه | بیشتر از 2.4 ثانیه |
(توجه: این محدوده‌ها برای امتیازدهی در ابزارها هستند. در داده‌های میدانی گوگل، همان 2.5 ثانیه برای همه دستگاه‌ها به عنوان آستانه «خوب» در نظر گرفته می‌شود.)
اجزای زمانی تشکیل‌دهنده LCP
اگر LCP یک صفحه یک عنصر تصویری (یا ویدیو) باشد، مدت زمان رسیدن به آن را می‌توان به چند بخش تقسیم کرد. در واقع چهار مرحله یا زیرمجموعه زمانی LCP وجود دارد که جمع آنها زمان کل LCP را تشکیل می‌دهد. آشنایی با این بخش‌ها به ما کمک میکند گلوگاه‌های کندی را شناسایی کرده و به‌طور هدفمند LCP را بهبود دهیم. این چهار زیرمجموعه عبارت‌اند از:
| بخش | توضیح |
|---|---|
| زمان اولین بایت (TTFB) | مدت‌زمانی که از شروع درخواست صفحه توسط کاربر تا دریافت اولین بایت از پاسخ سرور طی می‌شود. این عملاً زمان واکنش اولیه سرور را نشان می‌دهد. هرچه TTFB کمتر باشد، شروع بارگیری صفحه سریع‌تر خواهد بود. |
| تاخیر بارگذاری منبع | فاصله زمانی بین لحظه دریافت اولین بایت (TTFB) تا زمانی که مرورگر آغاز به بارگذاری منبع مربوط به عنصر LCP کند. برای مثال اگر LCP یک تصویر است، این تاخیر نشان می‌دهد چه مدت طول کشیده تا مرورگر بعد از دریافت HTML، سراغ بارگذاری تصویر LCP برود. اگر LCP یک عنصر متنی باشد که به منبع خارجی نیاز ندارد، این مقدار می‌تواند نزدیک صفر باشد. |
| مدت‌زمان بارگذاری منبع | مدت زمانی که صرف دانلود شدن منبع LCP می‌شود. مثلاً اگر تصویر LCP حجیم باشد، این مدت طولانی خواهد شد. در مواردی که عنصر LCP منبع خارجی نداشته باشد (مثلاً متن ساده)، این مدت‌زمان صفر است. |
| تاخیر در رندر | فاصله زمانی بین اتمام بارگذاری منبع LCP تا لحظه‌ای که عنصر LCP به طور کامل روی صفحه رندر و نمایش داده می‌شود. این بخش معمولاً نشان‌دهنده زمانی است که ممکن است صرف پردازش‌های JavaScript یا عملیات رندرینگ CSS قبل از نمایش نهایی محتوا شود. |
همان‌طور که گفته شد، مجموع چهار بخش بالا زمان کل LCP را تشکیل می‌دهد و هیچ فاصله یا هم‌پوشانی میان آنها نیست. در واقع برای هر صفحه می‌توان LCP را به این اجزا شکست و مشخص کرد کدام قسمت سهم بیشتری در کندی دارد. برای مثال اگر بخش “مدت‌زمان بارگذاری منبع” خیلی طولانی باشد، احتمالاً مشکل از حجم بالای تصویر یا ویدیو است. یا اگر “تاخیر در رندر” زیاد باشد، شاید اسکریپت‌های مسدودکننده یا CSSهای پیچیده باعث تأخیر در نمایش شده‌اند.
نمودار زمانی فرضی از LCP و اجزای تشکیل‌دهنده آن. در این نمودار نمونه، مشاهده می‌کنید که کل زمان LCP به چهار بخش TTFB (آبی)، تاخیر در بارگذاری منبع (سبز)، مدت‌زمان بارگذاری منبع (قرمز) و تاخیر رندر (بنفش) تقسیم شده است. هدف ما در بهینه‌سازی LCP این است که تا حد امکان سهم بخش‌های سبز و بنفش (انواع Delay یا تاخیر) را به صفر نزدیک کنیم و بخش‌های آبی و قرمز (زمان شبکه برای HTML و منبع) را نیز با بهینه‌سازی‌هایی مثل ارتقای سرور و فشرده‌سازی کاهش دهیم.
چگونه LCP را بهبود دهیم؟
حال که فهمیدیم LCP چیست و چه عواملی بر آن تاثیر دارند، سوال مهم این است: چگونه می‌توانیم LCP را بهبود دهیم؟ بهبود LCP به معنای سریع‌تر کردن نمایش محتوای اصلی صفحه است. برای این کار باید زنجیره‌ی کامل بارگذاری صفحه را بهینه کنیم. گاهی یک تغییر کوچک (مثلاً کوچک کردن حجم یک تصویر) به تنهایی مشکل را حل نمی‌کند، چون شاید زمان صرفه‌جویی‌شده فقط از یک بخش به بخش دیگر منتقل شود. بنابراین بهتر است به صورت همه‌جانبه بهبودهایی را اعمال کنیم. در ادامه، مهم‌ترین راهکارهای بهبود LCP را مرور می‌کنیم:
- کاهش زمان پاسخ سرور (TTFB): چون اولین بخش LCP از سرور شروع می‌شود، بهینه‌سازی سرور و بک‌اند تاثیر مستقیمی بر LCP دارد. استفاده از سرورهای سریع‌تر یا هاستینگ بهتر، فعال‌سازی کش صفحه (Page Caching) برای صفحات پویا، کوئری‌های بهینه در پایگاه‌داده، و استفاده از CDN برای نزدیک‌تر کردن محتوا به کاربر می‌تواند TTFB را کاهش دهد. هرچه اولین بایت زودتر برسد، قدم‌های بعدی زودتر آغاز می‌شوند.
- حذف یا کاهش منابع مسدودکننده‌رندر: منابعی مثل فایل‌های بزرگ CSS و JavaScript که در ابتدای بارگذاری، جلوی نمایش محتوا را می‌گیرند، دشمن LCP هستند. باید سعی کنید Render-blocking resources را به حداقل برسانید. چند راهکار مفید عبارت‌اند از:
- بارگذاری CSSهای غیرضروری را به تعویق بیاندازید یا به از قابلیت Async/Lazy Load استفاده کنید ،
- از تکنیک “CSS حیاتی” (Critical CSS) برای سبک‌های ضروری استفاده کنید،
- اسکریپت‌های غیرضروری را به تاخیر بیاندازید یا به انتهای صفحه منتقل کنید. به زبان ساده، کاری کنید که تا محتوای اصلی صفحه نمایش داده نشده، مرورگر درگیر دانلود و اجرای فایل‌هایی که برای نمایش اولیه لازم نیستند، نشود.
- بهینه‌سازی و فشرده‌سازی تصاویر (و ویدیوها): در بسیاری از صفحات، عنصر LCP یک تصویر بزرگ (مثلاً تصویر هدر یا بنر) است. حتماً این تصاویر را بهینه کنید: اندازه (ابعاد) مناسب برای نمایش انتخاب کنید، فرمت‌های جدید و کم‌حجم مثل WebP یا AVIF را به‌کار بگیرید، و تصاویر را قبل از آپلود به خوبی فشرده‌سازی کنید. تصاویر حجیم زمان بارگذاری منبع (بخش قرمز در نمودار) را زیاد می‌کنند. همچنین اگر ویدیویی در پس‌زمینه دارید، مطمئن شوید که پوستر (Thumbnail) سبکی دارد یا ویدیو خودکار بارگذاری نشود مگر نیاز باشد.
- استفاده هوشمندانه از Lazy Loading: بارگذاری تنبل یا Lazy Load تکنیکی است که باعث می‌شود تصاویر/ویدیوهای غیرقابل مشاهده در ابتدای صفحه، تا زمان اسکرول نشدن به آنها، لود نشوند. این کار برای کاهش حجم بار اولیه صفحه عالی است و LCP سایر صفحات را بهبود می‌دهد. اما توجه داشته باشید : تصویر یا محتوایی که خود LCP است نباید تنبل بارگذاری شود، وگرنه نمایش آن به تعویق می‌افتد و LCP را بدتر میکند. به عنوان مثال، اگر بزرگ‌ترین تصویر صفحه در بالای صفحه است (تصویر قهرمان یا Hero Image)، آن را به صورت عادی (بدون
loading="lazy") لود کنید و باقی تصاویر پایین صفحه را lazy load نمایید. اینگونه، عنصر LCP سریعا لود می‌شود و بقیه تصاویر که اهمیت کمتری در ابتدا دارند، بعداً لود می‌شوند. - پیش‌بارگذاری منابع مهم: یکی دیگر از ترفندهای مفید، Preload کردن منابع حیاتی است. شما می‌توانید با استفاده از تگ
<link rel="preload">منابعی مثل تصویر اصلی LCP، فونت‌های اصلی وب‌سایت یا فایل‌های CSS ضروری را جلوتر از بقیه منابع بارگذاری کنید. این کار باعث می‌شود مرورگر آنها را زودتر دانلود کرده و آماده نمایش کند. به خصوص برای تصویر LCP، پیش‌بارگذاری آن می‌تواند تاثیر زیادی در کاهش زمان نمایش آن داشته باشد. همین‌طور پیش‌بارگذاری فونت‌های وب (Web Font Preloading) می‌تواند جلوی تاخیر در رندر متن‌های بزرگ (در صورت LCP بودن متن) را بگیرد. - فشرده‌سازی (Gzip/Brotli) را حتماً روی سرور فعال کنید تا حجم HTML/CSS/JS ارسالی کمتر شود.
- تعداد درخواست‌های HTTP را با ترکیب فایل‌ها یا حذف اسکریپت‌ها و استایل‌های اضافی کاهش دهید.
- از کش مرورگر برای فایل‌های استاتیک استفاده کنید تا در بازدیدهای بعدی کاربر، همه چیز سریع‌تر لود شود. هر تغییر کوچکی که بار صفحه را سبک‌تر یا مسیر دریافت محتوا را کوتاه‌تر کند، در نهایت به بهبود LCP کمک خواهد کرد.
بهبود LCP در وردپرس
بخش زیادی از وب‌سایت‌ها با WordPress ساخته شده‌اند. خوشبختانه، بهبود LCP در وردپرس با وجود انواع افزونه‌های بهینه‌سازی، نسبتاً آسان‌تر است. یکی از بهترین ابزارها برای این کار افزونه قدرتمند WP Rocket است. این افزونه (پرمیوم) با یکپارچه‌سازی مجموعه‌ای از بهینه‌سازی‌ها، می‌تواند بدون نیاز به دانش فنی بالا، اکثر مواردی که بالاتر گفتیم را برایتان انجام دهد.
طبق مستندات، WP Rocket با نصب و تنظیمات پیش‌فرض، تا 80٪ از بهترین praktik های («praktik» یا به‌صورت دقیق‌تر best practices، همان روش‌ها یا تکنیک‌های اثبات‌شده و استاندارد برای بهینه‌سازی عملکرد وب است. به بیان ساده: Best practices (بهترین پراکتیس‌ها) یعنی روش‌هایی که تجربه و بررسی‌های زیاد در دنیای وب نشان داده‌اند که در بیشتر مواقع بهترین نتیجه را برای بهبود عملکرد، سئو، امنیت یا تجربه کاربر دارند.) عملکرد وب را خودکار اعمال میکند برخی از قابلیت‌های کلیدی WP Rocket که مستقیماً روی بهبود LCP اثر می‌گذارند عبارت‌اند از:
- کش صفحه و بهینه‌سازی سرور: WP Rocket به‌صورت خودکار کش صفحات را فعال میکند تا TTFB کاهش یابد. همچنین فشرده‌سازی Gzip، و بهینه‌سازی پایگاه‌داده را انجام می‌دهد که همگی به سریع‌تر شدن پاسخ سرور کمک می‌کنند.
- کاهش حجم و تعداد فایل‌های CSS/JS: این افزونه فایل‌های CSS و JavaScript را Minify (کاهش حجم) و حتی Combine (ترکیب) میکند تا تعداد و حجم درخواست‌ها کاهش یابد. علاوه بر این، قابلیت بارگذاری تنبل جاوااسکریپت و CSSهای غیر ضروری را دارد که جلوی مسدود شدن رندر را می‌گیرد. با یک کلیک می‌توانید گزینه «Delay JavaScript Execution» را فعال کنید تا اسکریپت‌های غیر حیاتی بعد از نمایش محتوا اجرا شوند. همچنین WP Rocket می‌تواند CSS حیاتی را خودکار تولید کرده و باقی CSSها را غیرهمزمان (async) لود کند که تاثیر زیادی در بهبود LCP دارد.
- بهینه‌سازی تصاویر و Lazy Load هوشمند: WP Rocket تمام تصاویر را به‌صورت پیش‌فرض Lazy Load میکند به جز تصویر LCP صفحه! این نکته بسیار مهم است؛ این افزونه به طور خودکار تشخیص می‌دهد کدام تصویر در موبایل و دسکتاپ LCP است و آن را پیش‌بارگذاری کرده و از لیست تنبل‌گذاری مستثنی میکند. نتیجه این می‌شود که مثلاً تصویر هدر سایت شما سریع‌تر از همیشه لود می‌شود و بلافاصله به کاربر نمایش داده می‌شود. سایر تصاویر (که LCP نیستند) تنبل لود می‌شوند تا خللی در سرعت اولیه ایجاد نکنند. علاوه بر این، WP Rocket قابلیت تصاویر دارای اندازه مناسب (Responsive Images) و بهینه‌سازی دیرهنگام تصاویر را نیز دارد که کمک میکند LCP بهبود یابد.
- فونت‌های وب و سایر تنظیمات: در WP Rocket می‌توانید فونت‌های وب‌سایتتان را preload کنید تا متن‌ها بدون تأخیر نمایش داده شوند. همین‌طور این افزونه تنظیماتی برای بهینه‌سازی استفاده از CDN، تعیین طول عمر کش مرورگر، و بسیاری موارد دیگر دارد که مجموع همه آنها موجب بهبود LCP و سایر معیارهای وب ویتال می‌شود.
به طور خلاصه، اگر از وردپرس استفاده می‌کنید و بودجه تهیه WP Rocket را دارید، این افزونه می‌تواند بسیاری از کارهای سنگین بهینه‌سازی را با چند کلیک برایتان انجام دهد و LCP سایتتان را به شکل محسوسی کاهش دهد. البته اگر نمی‌خواهید از WP Rocket استفاده کنید، ترکیب چند افزونه رایگان نیز می‌تواند تا حدی نتایج مشابهی داشته باشد: مثلا افزونه‌هایی مثل Autoptimize (برای بهینه‌سازی CSS/JS)، WP Super Cache یا W3 Total Cache (برای کش کردن صفحات) و Smush/Image Optimization (برای فشرده‌سازی تصاویر) را به‌کار بگیرید. گرچه راه‌اندازی و تنظیم صحیح چند افزونه مختلف نیاز به دقت دارد و ممکن است به اندازه راه‌حل یکپارچه WP Rocket موثر نباشد، اما همچنان به بهبود LCP کمک خواهد کرد.
کد نمونه جاوااسکریپت برای اندازه‌گیری LCP
گاهی نیاز دارید خودتان مستقیماً LCP را در وب‌سایت اندازه‌گیری یا لاگ کنید (مثلاً برای Real User Monitoring یا بررسی‌های سفارشی). خوشبختانه مرورگرها از API مربوط به Largest Contentful Paint پشتیبانی می‌کنند و می‌توانید با استفاده از PerformanceObserver در جاوااسکریپت، زمان LCP را بدست آورید. در زیر یک کد نمونه آورده شده است که یک PerformanceObserver ایجاد میکند و ورودی‌های مربوط به largest-contentful-paint را مشاهده (observe) میکند. هر بار یک کاندید LCP شناسایی شود، آن را در کنسول لاگ می‌گیرد:
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('LCP candidate:', entry.startTime, entry);
}
}).observe({ type: 'largest-contentful-paint', buffered: true });
در کد بالا، برای هر entry (ورودی) جدید از نوع largest-contentful-paint، زمان شروع آن (entry.startTime) و خود شیء ورودی لاگ می‌شود. معمولاً آخرین ورودی که گزارش می‌شود مقدار نهایی LCP است (زیرا همان‌طور که گفتیم ممکن است چند کاندید وجود داشته باشد و آخرینشان بزرگ‌ترین و نهایی است). توجه کنید که اندازه‌گیری دقیق LCP در جاوااسکریپت جزئیات بیشتری دارد (مثلاً نادیده گرفتن LCP در تب‌های پس‌زمینه، یا هنگام استفاده از back/forward cache و … که در این مثال ساده لحاظ نشده‌اند). برای ساده‌سازی، می‌توانید از کتابخانه آماده مانند web-vitals گوگل نیز استفاده کنید که این پیچیدگی‌ها را پوشش می‌دهد.
جمع‌بندی
Largest Contentful Paint (LCP) یکی از مهم‌ترین معیارهای سرعت احساس‌شده سایت توسط کاربر است. LCP نشان می‌دهد محتوای اصلی صفحه شما چقدر سریع به کاربر نمایش داده می‌شود. در این مقاله دیدیم که برای داشتن LCP خوب (زیر 2.5 ثانیه)، باید همه عوامل از سرور گرفته تا تصاویر و CSS/JS را بهینه کنیم. ابتدا فهمیدیم LCP چیست و چگونه مرورگر آن را تشخیص می‌دهد. سپس معیارهای امتیازدهی آن برای موبایل و دسکتاپ را بررسی کردیم و بخش‌های تشکیل‌دهنده زمان LCP (TTFB، تاخیرها و مدت بارگذاری) را شناختیم.
آنگاه روش‌های عملی برای بهبود LCP را مرور کردیم؛ از بهبود سرور و حذف موانع رندر گرفته تا فشرده‌سازی تصاویر و استفاده از بارگذاری تنبل. همچنین یاد گرفتیم که در وردپرس با کمک افزونه‌هایی مثل WP Rocket می‌توان بسیاری از این بهینه‌سازی‌ها را به سادگی پیاده‌سازی کرد و LCP را به میزان قابل توجهی کاهش داد. در نهایت، یک نمونه کد جاوااسکریپت برای اندازه‌گیری LCP ارائه کردیم تا در صورت نیاز بتوانید مستقیماً در وب‌سایت خودتان این مقدار را رصد کنید.
با رعایت نکات گفته شده، شما می‌توانید Largest Contentful Paint سایت خود را بهبود دهید و در نتیجه تجربه بهتری برای کاربران فراهم کنید. این کار نه تنها رضایت بازدیدکنندگان را بیشتر میکند، بلکه از نظر SEO نیز حائز اهمیت است؛ چون گوگل سرعت و تجربه کاربری خوب را در رتبه‌بندی نتایج جستجو مدنظر قرار می‌دهد. پس همین امروز دست به کار شوید و گلوگاه‌های مربوط به LCP را در وب‌سایتتان شناسایی و برطرف کنید تا صفحات وب‌سایتتان سریع‌تر از همیشه در برابر چشمان کاربران ظاهر شوند!