بهینه‌سازی Largest Contentful Paint (LCP): راهنمای ساده برای بهبود سرعت وب‌سایت

آیا تا به حال با وب‌سایتی مواجه شده‌اید که بارگذاری آن خیلی طول بکشد؟ این تجربه می‌تواند برای کاربران آزاردهنده باشد. یکی از معیارهای کلیدی برای سنجش سرعت بارگذاری وب‌سایت، Largest Contentful Paint (LCP) یا «بزرگ‌ترین رندر محتوا» است. LCP نشان می‌دهد که چقدر طول می‌کشد تا بخش اصلی یک صفحه وب (مثل یک تصویر بزرگ یا متن اصلی) برای کاربر نمایش داده شود. در این مقاله، به زبان ساده توضیح می‌دهیم که LCP چیست، چرا مهم است و چگونه می‌توانید آن را بهبود دهید تا وب‌سایتتان سریع‌تر و کاربرپسندتر شود.

LCP چیست و چرا باید به آن اهمیت بدهیم؟

LCP یکی از سه معیار اصلی Core Web Vitals است که گوگل برای ارزیابی تجربه کاربری وب‌سایت‌ها استفاده می‌کند. این معیار، مدت زمانی را اندازه‌گیری می‌کند که از لحظه شروع بارگذاری صفحه تا نمایش بزرگ‌ترین بخش محتوا (مثل یک تصویر یا متن) در محدوده دید کاربر طول می‌کشد.

برای ارائه تجربه کاربری خوب، LCP باید ۲.۵ ثانیه یا کمتر باشد برای حداقل ۷۵٪ از بازدیدهای صفحه. اگر LCP بیشتر از ۴ ثانیه باشد، تجربه کاربری ضعیف تلقی می‌شود و نیاز به بهبود دارد.

توضیح تصویر: نموداری که نشان می‌دهد مقادیر خوب LCP ۲.۵ ثانیه یا کمتر، مقادیر ضعیف بیش از ۴ ثانیه و مقادیر بین این دو نیاز به بهبود دارند.

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

چگونه بفهمیم LCP سایتمان خوب است یا نه؟

قبل از هر کاری، باید بدانید که LCP سایت شما در چه وضعیتی است. ابزارهای مختلفی برای اندازه‌گیری LCP وجود دارند، اما بهترین روش، بررسی داده‌های واقعی کاربران (Real User Data) است، نه فقط تست‌های آزمایشگاهی. در ادامه چند ابزار مهم را معرفی می‌کنیم:

۱. استفاده از Chrome DevTools برای داده‌های CrUX

ابزار Performance در Chrome DevTools می‌تواند LCP صفحه شما را در کنار داده‌های واقعی کاربران (از گزارش تجربه کاربری کروم یا CrUX) نشان دهد. این ابزار همچنین جزئیات زمانی بخش‌های مختلف LCP را نمایش می‌دهد.

توضیح تصویر: نمایش LCP محلی و واقعی در پنل Performance و Insights مرورگر کروم.

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

۲. استفاده از PageSpeed Insights برای داده‌های CrUX

ابزار PageSpeed Insights داده‌های واقعی کاربران را در بخش «Discover what your real users are experiencing» نشان می‌دهد. اگر داده‌ای برای URL خاص شما در دسترس نباشد، داده‌های کلی دامنه (Origin) نمایش داده می‌شود.

توضیح تصویر: نمایش داده‌های CrUX در PageSpeed Insights برای تجربه واقعی کاربران.

نکته: اگر سایت شما ترافیک کافی ندارد، می‌توانید از داده‌های Real User Monitoring (RUM) با استفاده از APIهای جاوااسکریپت استفاده کنید. این روش داده‌های بیشتری نسبت به CrUX ارائه می‌دهد.

PageSpeed Insights داده‌های LCP را برای دستگاه‌های موبایل و دسکتاپ، چه برای یک URL خاص و چه برای کل دامنه، نشان می‌دهد. این داده‌ها به شما کمک می‌کنند تا بفهمید مشکل LCP مربوط به یک صفحه خاص است یا کل سایت.

PageSpeed ​​Insights حداکثر چهار داده مختلف CrUX را نشان می دهد:

• داده های Mobile برای این URL
• داده های Desktop برای این URL
• داده های Mobile برای کل Origin
• داده های Desktop برای کل Origin

توضیح تصویر: زمانی که داده‌های سطح URL در دسترس نیست، PageSpeed Insights داده‌های سطح دامنه را نمایش می‌دهد.

۳. استفاده از معیارهای تکمیلی در PageSpeed Insights

برای تحلیل بهتر LCP، باید به دو معیار دیگر هم توجه کنید:
- Time to First Byte (TTFB): زمان لازم برای دریافت اولین بایت از سند HTML. اگر TTFB بالا باشد، رسیدن به LCP ۲.۵ ثانیه‌ای سخت می‌شود.
- First Contentful Paint (FCP): زمانی که اولین محتوای صفحه (مثل رنگ پس‌زمینه یا هدر سایت) نمایش داده می‌شود.

اگر فاصله بین TTFB و FCP زیاد باشد، ممکن است مرورگر در حال دانلود منابع مسدودکننده رندر (مثل CSS یا جاوااسکریپت) باشد. همچنین، فاصله زیاد بین FCP و LCP نشان می‌دهد که منبع LCP (مثل تصویر یا متن) به‌سرعت در دسترس نیست یا مرورگر مشغول کارهای دیگر است.

۴. استفاده از داده‌های Lighthouse در PageSpeed Insights

بخش Lighthouse در PageSpeed Insights پیشنهادهایی برای بهبود LCP ارائه می‌دهد. ابتدا مطمئن شوید که داده‌های Lighthouse با داده‌های واقعی CrUX همخوانی دارند. اگر LCP نیاز به بهبود دارد، می‌توانید از فیلتر LCP در Lighthouse استفاده کنید تا فقط پیشنهادهای مرتبط را ببینید.

توضیح تصویر: پیشنهادها و تحلیل‌های Lighthouse برای بهبود LCP.

Lighthouse همچنین جزئیات بخش‌های مختلف LCP را نشان می‌دهد که به تحلیل بهتر کمک می‌کند.

توضیح تصویر: نمایش جزئیات بخش‌های مختلف LCP در Lighthouse.

تجزیه LCP به بخش‌های کوچک‌تر

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

1. Time to First Byte (TTFB): زمان از شروع بارگذاری تا دریافت اولین بایت HTML.
2. Resource Load Delay: فاصله بین TTFB و شروع بارگذاری منبع LCP (مثل تصویر یا فونت). اگر LCP نیازی به منبع خارجی نداشته باشد (مثل متن با فونت سیستمی)، این زمان صفر است.
3. Resource Load Duration: مدت زمان بارگذاری منبع LCP.
4. Element Render Delay: زمان بین اتمام بارگذاری منبع LCP و نمایش کامل آن.

توضیح تصویر: نمودار آبشاری که چهار بخش LCP را روی خط زمانی نشان می‌دهد.

این چهار بخش کل زمان LCP را تشکیل می‌دهند و برای بهبود LCP، باید هر کدام را بهینه کنید. گاهی اوقات بهبود یک بخش (مثل کاهش زمان بارگذاری منبع) ممکن است زمان را به بخش دیگری (مثل تأخیر رندر) منتقل کند، بدون اینکه LCP کلی بهبود یابد.

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

زمان‌های بهینه برای بخش‌های LCP

برای یک صفحه بهینه، زمان‌بندی بخش‌های LCP باید به این صورت باشد:
- TTFB: حدود ۴۰٪ از کل زمان LCP
- Resource Load Delay: کمتر از ۱۰٪
- Resource Load Duration: حدود ۴۰٪
- Element Render Delay: کمتر از ۱۰٪

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

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

چگونه هر بخش را بهینه کنیم؟

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

۱. حذف تأخیر بارگذاری منبع (Resource Load Delay)

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

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

الف. بهینه‌سازی زمان کشف منبع

برای اینکه منبع LCP سریع‌تر کشف شود، باید در سند HTML اولیه قابل شناسایی باشد. برای مثال:
- اگر LCP یک تصویر است، ویژگی src یا srcset باید در HTML اولیه باشد.
- اگر LCP به تصویر پس‌زمینه CSS یا فونت وب نیاز دارد، از <link rel="preload"> برای بارگذاری زودهنگام استفاده کنید.

مواردی که باعث تأخیر می‌شوند:
- تصاویر اضافه‌شده توسط جاوااسکریپت.
- تصاویر با بارگذاری تنبل (Lazy Loading) که src آن‌ها مخفی است.
- تصاویر پس‌زمینه CSS که در HTML اولیه مشخص نشده‌اند.

مثال کد برای پیش‌بارگذاری تصویر:

<!-- بارگذاری استایل‌شیت که به تصویر LCP اشاره می‌کند -->
<link rel="stylesheet" href="/path/to/styles.css">
<!-- پیش‌بارگذاری تصویر LCP با اولویت بالا -->
<link rel="preload" fetchpriority="high" as="image" href="/path/to/hero-image.webp" type="image/webp">

هشدار: اطمینان حاصل کنید که منبع LCP نزدیک به TTFB بارگذاری می‌شود، حتی اگر با اولین منبع همزمان نباشد.

ب. بهینه‌سازی اولویت منبع

حتی اگر منبع LCP در HTML قابل کشف باشد، ممکن است به دلیل اولویت پایین‌تر، دیرتر بارگذاری شود. برای مثال، استفاده از loading="lazy" برای تصویر LCP باعث تأخیر می‌شود.

هشدار: هرگز برای تصویر LCP از بارگذاری تنبل استفاده نکنید.

برای افزایش اولویت، از ویژگی fetchpriority استفاده کنید:

<img fetchpriority="high" src="/path/to/hero-image.webp">

برای منابع غیرضروری (مثل تصاویر اسلایدر که در ابتدا دیده نمی‌شوند)، اولویت را کاهش دهید:

<img fetchpriority="low" src="/path/to/carousel-slide-3.webp">

توضیح تصویر: نمودار آبشاری که نشان می‌دهد منبع LCP همزمان با استایل‌شیت بارگذاری می‌شود.

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

۲. حذف تأخیر رندر عنصر (Element Render Delay)

هدف این مرحله این است که عنصر LCP بلافاصله پس از بارگذاری منبعش نمایش داده شود. تأخیر رندر معمولاً به دلایل زیر رخ می‌دهد:
- استایل‌شیت‌ها یا اسکریپت‌های سینکرون که رندر را مسدود می‌کنند.
- عنصر LCP که هنوز به DOM اضافه نشده (منتظر جاوااسکریپت است).
- کدهایی مثل ابزارهای A/B Testing که عنصر را مخفی می‌کنند.
- وظایف سنگین (Long Tasks) که نخ اصلی مرورگر را مسدود می‌کنند.

الف. کاهش یا درون‌خط کردن استایل‌شیت‌های مسدودکننده رندر

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

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

راه‌حل‌ها:
- درون‌خط کردن (Inlining): استایل‌شیت را در HTML قرار دهید، اما فقط اگر کوچک باشد.
- کاهش اندازه استایل‌شیت:
- CSS استفاده‌نشده را حذف کنید.
- CSS غیرضروری را به تأخیر بیندازید.
- CSS را فشرده‌سازی و مینیفای کنید.

ب. به تأخیر انداختن یا درون‌خط کردن جاوااسکریپت مسدودکننده

اسکریپت‌های سینکرون در <head> تقریباً همیشه عملکرد را کاهش می‌دهند. به جای آن:
- اسکریپت‌ها را با async یا defer بارگذاری کنید.
- اگر اسکریپت کوچک است، آن را درون‌خط کنید.

مثال بد:

<head>
  <script src="/path/to/main.js"></script>
</head>

مثال خوب:

<head>
  <script>
    // کدهای کوچک را مستقیماً در HTML قرار دهید
  </script>
</head>

ج. استفاده از رندر سمت سرور (Server-Side Rendering)

رندر سمت سرور (SSR) یا تولید سایت استاتیک (SSG) باعث می‌شود محتوای صفحه در HTML اولیه موجود باشد، که:
- منابع تصویر را قابل کشف می‌کند.
- نیاز به جاوااسکریپت اضافی برای رندر را حذف می‌کند.

نکته: SSR ممکن است TTFB را کمی افزایش دهد، اما معمولاً ارزشش را دارد.

د. تقسیم وظایف سنگین

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

۳. کاهش مدت زمان بارگذاری منبع (Resource Load Duration)

هدف این مرحله کاهش زمان انتقال منبع LCP به دستگاه کاربر است. روش‌ها:
- کاهش اندازه منبع: از فرمت‌های مدرن تصویر (مثل WebP یا AVIF) و فشرده‌سازی استفاده کنید. برای فونت‌های وب، اندازه را کاهش دهید.
- کاهش فاصله انتقال: از شبکه تحویل محتوا (CDN) استفاده کنید تا سرور به کاربران نزدیک‌تر باشد.
- کاهش رقابت برای پهنای باند: اولویت منبع LCP را بالا ببرید و تعداد منابع همزمان را کم کنید.
- حذف زمان شبکه: از کش کردن منابع یا استفاده از Data URL (برای منابع کوچک) استفاده کنید.

هشدار: تحقیقات نشان می‌دهد که این بخش معمولاً تأثیر کمی روی LCP دارد. ابتدا داده‌های واقعی کاربران را بررسی کنید.

نکته کلیدی: اگر از CDN استفاده می‌کنید، بهتر است تصاویر را از همان دامنه HTML ارائه دهید تا هزینه اتصال اضافی حذف شود.

۴. کاهش زمان دریافت اولین بایت (TTFB)

TTFB زمانی است که طول می‌کشد تا اولین بایت HTML به مرورگر برسد. این بخش مهم است چون روی تمام مراحل بعدی تأثیر می‌گذارد. دلایل کندی TTFB:
- ریدایرکت‌های متعدد (مثل لینک‌های کوتاه‌شده).
- پارامترهای URL که مانع استفاده از کش می‌شوند.
- فاصله زیاد بین کاربر و سرور.

برای بهبود TTFB، ریدایرکت‌ها را به حداقل برسانید و از CDN استفاده کنید.

نظارت بر LCP با جاوااسکریپت

برای جمع‌آوری داده‌های LCP در سایت خودتان، می‌توانید از APIهای زیر استفاده کنید:
- Largest Contentful Paint API
- Navigation Timing API
- Resource Timing API

کتابخانه web-vitals این داده‌ها را به‌راحتی جمع‌آوری می‌کند. همچنین، Chrome DevTools و Lighthouse این اطلاعات را بدون نیاز به کدنویسی نمایش می‌دهند.

نتیجه‌گیری

بهینه‌سازی LCP ممکن است پیچیده به نظر برسد، اما با تمرکز روی چهار مرحله زیر می‌توانید سرعت بارگذاری سایتتان را بهبود دهید:
1. اطمینان حاصل کنید که منبع LCP هرچه زودتر بارگذاری می‌شود.
2. کاری کنید که عنصر LCP بلافاصله پس از بارگذاری منبعش نمایش داده شود.
3. زمان بارگذاری منبع LCP را بدون افت کیفیت کاهش دهید.
4. سند HTML اولیه را هرچه سریع‌تر تحویل دهید.

با استفاده از ابزارهایی مثل Chrome DevTools، PageSpeed Insights و Lighthouse، می‌توانید مشکلات LCP را شناسایی و برطرف کنید. نتیجه این تلاش‌ها، وب‌سایتی سریع‌تر و تجربه کاربری بهتر برای بازدیدکنندگان خواهد بود.