بهبود LCP: پیدا کردن عنصر مقصر و رفع کندی بارگذاری

چرا LCP سایت شما هنوز قرمز است

PageSpeed Insights را باز کرده‌اید، نمره سبز گرفته‌اید اما LCP همچنان بالای ۴ ثانیه است. یا بدتر: در گوشی همراه، LCP از ۲.۵ ثانیه عبور کرده و گوگل به شما هشدار داده که رتبه‌تان در معرض خطر است. شما نمی‌دانید کدام عنصر صفحه مقصر است، کدام درخواست شبکه آن را عقب انداخته، و از کجا باید شروع کنید.

این مقاله دقیقاً برای همین لحظه نوشته شده. نه برای تعریف LCP، نه برای تاریخچه Core Web Vitals. برای اینکه در ده دقیقه آینده، عنصر مقصر را پیدا کنید و ترتیب درست رفع آن را بدانید.

پیدا کردن عنصر LCP در DevTools

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

1. صفحه را در حالت ناشناس (Incognito) باز کنید تا کش و افزونه‌ها نتیجه را خراب نکنند.
2. کلید F12 را بزنید و به تب Performance بروید. دکمه رکورد (آیکون دایره) را بزنید، صفحه را رفرش کنید و بعد از بارگذاری کامل، ضبط را متوقف کنید.

در خروجی، به بخش Timings نگاه کنید. رویداد Largest Contentful Paint را پیدا کنید. روی آن کلیک کنید تا در پایین، جزئیات عنصر نمایش داده شود. معمولاً یک تصویر، یک تگ <h1> یا یک ویدیو است. همان عنصر، مقصر اصلی است.

راه دوم، استفاده از افزونه Web Vitals گوگل است. این افزونه در نوار ابزار، اندازه LCP را به‌صورت زنده نشان می‌دهد و با کلیک روی آن، عنصر دقیق را هایلایت می‌کند. این روش برای بررسی سریع چند صفحه، کاربردی‌تر از DevTools است.

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

این‌جا اشتباه می‌کنند

بیشتر افراد، LCP را با بزرگ‌ترین تصویر صفحه اشتباه می‌گیرند. این درست نیست. LCP به بزرگ‌ترین عنصر مرئی در viewport گفته می‌شود، نه بزرگ‌ترین عنصر صفحه. اگر یک تصویر ۲۰۰۰ پیکسلی پایین صفحه باشد و یک تیتر متنی کوچک بالای صفحه، عنصر LCP همان تیتر است. نتیجه این اشتباه؟ بهینه‌سازی تصویری که هیچ تأثیری روی نمره ندارد و سردرگمی در گزارش‌ها.

چهار علت رایج کندی LCP

بعد از شناسایی عنصر، نوبت به ریشه‌یابی می‌رسد. چهار دلیل اصلی وجود دارد که LCP را از حد مجاز ۲.۵ ثانیه عبور می‌دهد. ترتیب بررسی این چهار مورد، به همان اندازه خود موارد مهم است.

۱. تأخیر در پاسخ سرور (TTFB بالا)

اگر Time to First Byte بالای ۶۰۰ میلی‌ثانیه باشد، کل فرآیند بارگذاری از همان ابتدا عقب می‌افتد. این عدد را در تب Network دوبار بررسی کنید: مقدار TTFB در ستون Time، همان عدد اولیه است. اگر بالا بود، مشکل از سرور است، نه از تصویر یا فونت.

راه‌حل‌ها به ترتیب اولویت: فعال‌سازی کش سمت سرور (مثل Redis یا Varnish)، استفاده از CDN برای سرو کردن محتوای استاتیک، و بررسی کوئری‌های سنگین دیتابیس. اگر سایت روی هاست اشتراکی است و TTFB شما بالای ۱ ثانیه است، احتمالاً زمان مهاجرت به یک سرویس میزبانی با منابع اختصاصی فرا رسیده است.

۲. تصویر LCP با فرمت و ابعاد اشتباه

تصویری که عنصر LCP است، نباید با فرمت PNG یا BMP سرو شود. فرمت WebP با فشرده‌سازی مناسب، معمولاً ۳۰ تا ۴۰ درصد حجم کمتری دارد. برای تبدیل، از ابزارهایی مثل cwebp استفاده کنید:

cwebp -q 80 input.png -o output.webp

علاوه بر فرمت، ابعاد را هم بررسی کنید. اگر تصویر ۴۰۰۰ پیکسلی دارید که در صفحه با عرض ۸۰۰ پیکسل نمایش داده می‌شود، ۸۰ درصد حجم آن هدر می‌رود. تصویر را دقیقاً با همان ابعاد نمایش، ذخیره کنید. برای تصاویر واکنش‌گرا، از srcset استفاده کنید تا مرورگر فقط نسخه متناسب با صفحه‌نمایش را دانلود کند.

۳. جاوااسکریپت مسدودکننده رندر

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

برای اسکریپت‌های غیرضروری، از defer یا async استفاده کنید. اسکریپت‌هایی که برای رندر اولیه لازم نیستند، با defer بارگذاری شوند تا اجرای آن‌ها بعد از پارس HTML انجام شود. اگر اسکریپت شخص ثالثی (مثل چت آنلاین یا ابزار تحلیل) دارید که حیاتی نیست، آن را با تأخیر ۳ تا ۵ ثانیه‌ای بارگذاری کنید.

۴. فونت‌های وب با نمایش مخفی

فونت‌های سفارشی که با display: swap بارگذاری نمی‌شوند، متن را تا زمان دانلود فونت مخفی نگه می‌دارند. این یعنی LCP شما به زمان دانلود فونت گره می‌خورد. در CSS خود، قانون font-display: swap را اضافه کنید تا مرورگر ابتدا با فونت پیش‌فرض متن را نشان دهد و بعد فونت سفارشی جایگزین شود.

همچنین از preload برای فونت اصلی استفاده کنید:

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

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

ترتیب درست رفع مشکلات LCP

ترتیب رفع، به همان اندازه خود رفع مهم است. اشتباه رایج این است که افراد اول سراغ فشرده‌سازی تصویر می‌روند، در حالی که TTFB آن‌ها ۲ ثانیه است. نتیجه؟ صرف ساعت‌ها وقت برای بهینه‌سازی چیزی که ۲۰ درصد مشکل را حل می‌کند.

ترتیب پیشنهادی من:

1. TTFB را زیر ۶۰۰ میلی‌ثانیه بیاورید. اگر این عدد بالاست، بقیه کارها بی‌اثر است. کش سمت سرور، CDN، و بررسی منابع سرور را انجام دهید.
2. عنصر LCP را به‌صورت استاتیک در HTML قرار دهید. اگر با جاوااسکریپت رندر می‌شود، آن را به HTML اولیه منتقل کنید.
3. تصویر LCP را بهینه کنید. فرمت WebP، ابعاد دقیق، و fetchpriority="high" را اضافه کنید.
4. فونت‌ها را با swap و preload تنظیم کنید.

بعد از هر مرحله، با PageSpeed Insights یا ابزارهای سئو و وب‌مستر اندازه‌گیری کنید. اگر بعد از مرحله اول، LCP به زیر ۲.۵ ثانیه رسید، بقیه مراحل را با اولویت کمتر انجام دهید.

اندازه‌گیری درست، نیمی از درمان

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

برای اندازه‌گیری دقیق‌تر، از Chrome DevTools با شبیه‌سازی شبکه Slow 4G و کاهش ۴ برابری CPU استفاده کنید. این تنظیمات را در تب Performance و بخش Network conditions اعمال کنید. اگر در این شرایط سخت‌گیرانه، LCP زیر ۲.۵ ثانیه بود، کاربران واقعی شما تقریباً مطمئناً تجربه خوبی خواهند داشت.

همچنین گزارش‌های بررسی فنی دامنه و DNS را چک کنید. گاهی مشکل از DNS یا زیرساخت شبکه است، نه کدهای سایت. یک DNS با پاسخ کند، TTFB را به‌طور مستقیم افزایش می‌دهد.

پرسش‌های پرتکرار

چگونه بفهمم کدام عنصر LCP سایت من است؟

در Chrome DevTools به تب Performance بروید، رکورد را شروع کنید و صفحه را رفرش کنید. بعد از توقف ضبط، رویداد Largest Contentful Paint را در بخش Timings پیدا کنید. روی آن کلیک کنید تا عنصر دقیق در پایین نمایش داده شود. همچنین می‌توانید از افزونه Web Vitals گوگل استفاده کنید که عنصر LCP را به‌صورت زنده هایلایت می‌کند.

آیا LCP باید زیر ۲.۵ ثانیه باشد؟

بله، برای دریافت نمره سبز در Core Web Vitals، LCP باید در ۷۵ درصد از بازدیدهای واقعی کاربران، زیر ۲.۵ ثانیه باشد. مقادیر بین ۲.۵ تا ۴ ثانیه زرد (نیازمند بهبود) و بالای ۴ ثانیه قرمز (ضعیف) محسوب می‌شوند. گوگل از داده‌های میدانی کاربران واقعی برای این ارزیابی استفاده می‌کند، نه فقط داده‌های آزمایشگاهی.

تفاوت LCP با FCP چیست؟

FCP (First Contentful Paint) زمان اولین نمایش هر محتوایی در صفحه است، حتی یک متن کوچک یا یک پس‌زمینه. اما LCP زمان نمایش بزرگ‌ترین عنصر مرئی را اندازه می‌گیرد. FCP معمولاً زودتر از LCP رخ می‌دهد و بهبود LCP لزوماً به بهبود FCP منجر نمی‌شود. هر دو معیار مهم هستند اما LCP تأثیر بیشتری روی تجربه کاربری دارد.

آیا حذف تصویر LCP راه‌حل خوبی است؟

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