بهینه‌سازی First Contentful Paint (FCP): راهنمای ساده برای بهبود سرعت بارگذاری وب‌سایت

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

FCP چیست؟

FCP مدت زمانی است که از لحظه شروع ناوبری کاربر به یک صفحه تا نمایش اولین بخش از محتوای صفحه (مانند متن، تصاویر، عناصر <svg> یا عناصر <canvas> غیرسفید) طول می‌کشد. این معیار به کاربران اطمینان می‌دهد که صفحه در حال بارگذاری است.

اجزای FCP

FCP شامل مراحل زیر است:

  • زمان تخلیه صفحه قبلی: مدت زمانی که برای بستن صفحه قبلی صرف می‌شود.
  • زمان راه‌اندازی اتصال: شامل جستجوی DNS، اتصال TCP و مذاکره TLS (برای سایت‌های HTTPS).
  • زمان ریدایرکت: مانند تغییر مسیر از HTTP به HTTPS.
  • زمان دریافت اولین بایت (TTFB): مدت زمانی که سرور برای پردازش درخواست و ارسال اولین بایت پاسخ نیاز دارد.

نمودار خط زمانی بارگذاری صفحه توضیح تصویر: نموداری که نشان می‌دهد FCP در فریم دوم رخ می‌دهد، زمانی که اولین متن یا تصویر روی صفحه نمایش داده می‌شود.

تفاوت با LCP: تمرکز FCP روی اولین محتوای نمایش‌داده‌شده دارد، در حالی که Largest Contentful Paint (LCP) زمان بارگذاری محتوای اصلی صفحه را اندازه‌گیری می‌کند.

FCP خوب چیست؟

برای ارائه تجربه کاربری خوب:

  • FCP باید ۱.۸ ثانیه یا کمتر باشد (در صدک ۷۵ بارگذاری‌های صفحه، برای دستگاه‌های موبایل و دسکتاپ).
  • FCP ضعیف: بیشتر از ۳.۰ ثانیه.
  • نیاز به بهبود: بین ۱.۸ تا ۳.۰ ثانیه.

نمودار مقادیر FCP توضیح تصویر: نموداری که مقادیر خوب (≤۱.۸ ثانیه)، نیاز به بهبود (۱.۸–۳.۰ ثانیه) و ضعیف (>۳.۰ ثانیه) را نشان می‌دهد.

چگونه FCP را اندازه‌گیری کنیم؟

FCP را می‌توان در جهان واقعی (Field) یا آزمایشگاه (Lab) اندازه‌گیری کرد. ابزارهای زیر برای این کار مناسب هستند:

ابزارهای واقعی (Field Tools)

ابزارهای آزمایشگاهی (Lab Tools)

  • ابزار Lighthouse: پارامتر FCP را در محیط کنترل‌شده تحلیل می‌کند.
  • ابزار Chrome DevTools: پارامتر FCP را در پنل Network یا Performance نمایش می‌دهد.
  • ابزار PageSpeed Insights: برای تست‌های آزمایشگاهی نیز قابل استفاده است.

اندازه‌گیری FCP با جاوااسکریپت

برای اندازه‌گیری FCP، می‌توانید از Paint Timing API استفاده کنید. مثال زیر نحوه ثبت FCP با استفاده از PerformanceObserver را نشان می‌دهد:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({ type: 'paint', buffered: true });

هشدار: این کد خام محدودیت‌هایی دارد:

  • FCP صفحات بازشده در پس‌زمینه را گزارش می‌دهد (که باید نادیده گرفته شوند).
  • برای صفحات بازیابی‌شده از کش عقب/جلو گزارش نمی‌دهد.
  • ممکن است زمان‌بندی رنگ‌آمیزی iframeهای Cross-Origin را گزارش نکند (مگر اینکه هدر Timing-Allow-Origin تنظیم شده باشد).
  • برای صفحات پیش‌رندرشده، FCP باید از activationStart محاسبه شود.

برای ساده‌سازی، از کتابخانه web-vitals استفاده کنید که این موارد را مدیریت می‌کند:

import { onFCP } from 'web-vitals';
onFCP(console.log);

محدودیت: در iframeهای Cross-Origin بدون هدر مناسب، اندازه‌گیری FCP ممکن نیست.

چگونه FCP را بهبود دهیم؟

برای بهینه‌سازی FCP، می‌توانید از Lighthouse برای شناسایی مشکلات خاص استفاده کنید. راهکارهای کلی شامل موارد زیر است:

  • حذف منابع مسدودکننده رندر: CSS و JS را به‌صورت غیرهمزمان (async/defer) بارگذاری کنید.
  • فشرده‌سازی CSS: حجم فایل‌های CSS را کاهش دهید.
  • حذف CSS/JS استفاده‌نشده: کدهای غیرضروری را حذف کنید.
  • پیش‌اتصال به منابع ضروری: زمان جستجوی DNS را کاهش دهید.
  • کاهش TTFB: زمان پاسخگویی سرور را بهینه کنید (به راهنمای TTFB مراجعه کنید).
  • کاهش ریدایرکت‌ها: زنجیره‌های تغییر مسیر را حذف کنید.
  • پیش‌بارگذاری درخواست‌های کلیدی: منابع حیاتی را اولویت‌بندی کنید.
  • کاهش حجم شبکه: اندازه فایل‌ها را بهینه کنید.
  • استفاده از سیاست کش کارآمد: دارایی‌های ثابت را کش کنید.
  • کاهش اندازه DOM: ساختار DOM را ساده کنید.
  • کاهش عمق درخواست‌های حیاتی: وابستگی‌های زنجیره‌ای را کم کنید.
  • نمایش متن در زمان بارگذاری فونت: از font-display: swap استفاده کنید.
  • کاهش تعداد درخواست‌ها: تعداد درخواست‌های HTTP را به حداقل برسانید.

تغییرات اخیر (Changelog)

تغییرات در تعریف یا APIهای FCP در Changelog Chromium ثبت می‌شوند. برای ارائه بازخورد، به گروه web-vitals-feedback مراجعه کنید.

پشتیبانی مرورگرها

اندازه‌گیری FCP از طریق Paint Timing API در مرورگرهای زیر پشتیبانی می‌شود:

  • کروم ۶۰+
  • اج ۷۹+
  • فایرفاکس ۸۴+
  • سافاری ۱۴.۱+

منبع: MDN Web Docs

نتیجه‌گیری

FCP یکی از معیارهای Core Web Vitals است که تأثیر زیادی بر تجربه کاربری دارد. با استفاده از ابزارهایی مثل Lighthouse، Chrome DevTools و کتابخانه web-vitals، می‌توانید FCP سایت خود را اندازه‌گیری کنید. برای بهبود FCP، روی کاهش TTFB، حذف ریدایرکت‌ها و بهینه‌سازی منابع تمرکز کنید. نتیجه این تلاش‌ها، وب‌سایتی سریع‌تر و رضایت بیشتر کاربران خواهد بود.