FCP مخفف First Contentful Paint یا «اولین نمایش محتوای قابل مشاهده» است و یکی از معیارهای مهم سنجش سرعت بارگذاری صفحات وب محسوب می‌شود. این معیار مشخص می‌کند از زمانی که کاربر وارد یک صفحه می‌شود تا زمانی که اولین بخش واقعی محتوا روی صفحه نمایش داده شود، چه مقدار زمان گذشته است.
منظور از محتوا می‌تواند متن، تصویر، SVG یا برخی عناصر قابل نمایش دیگر باشد. بنابراین FCP الزاماً به معنای بارگذاری کامل صفحه نیست؛ بلکه فقط نشان می‌دهد کاربر چه زمانی برای نخستین بار چیزی از محتوای صفحه را می‌بیند.
برای مثال، فرض کنید کاربری وارد صفحه یک فروشگاه اینترنتی می‌شود. اگر صفحه برای چند ثانیه کاملاً سفید بماند و بعد عنوان محصول یا تصویر آن نمایش داده شود، فاصله زمانی تا نمایش همان اولین محتوای قابل مشاهده، در FCP نقش دارد.
به زبان ساده:
FCP پاسخ این سؤال است: کاربر بعد از ورود به صفحه، چه زمانی برای اولین بار چیزی می‌بیند؟
FCP چگونه محاسبه می‌شود؟
FCP از شروع فرآیند بارگذاری صفحه تا زمانی که نخستین محتوای قابل مشاهده روی صفحه رندر شود اندازه‌گیری می‌شود.
این نکته مهم است که FCP فقط به سرعت فایل HTML یا تصاویر مربوط نیست. زمان برقراری ارتباط با سرور، ریدایرکت‌ها، زمان پاسخ سرور یا TTFB و منابعی که جلوی رندر شدن صفحه را می‌گیرند نیز می‌توانند روی FCP تأثیر بگذارند.
فرآیند را می‌توان به شکل ساده این‌گونه تصور کرد:
ورود کاربر → اتصال به سرور → دریافت HTML → پردازش CSS و منابع → رندر اولین محتوای قابل مشاهده → FCP
هرچه این مسیر سریع‌تر طی شود، FCP نیز کاهش پیدا می‌کند.
FCP خوب چند ثانیه است؟
بر اساس راهنمای Web.dev، مقدار ۱.۸ ثانیه یا کمتر برای FCP وضعیت خوبی محسوب می‌شود. مقادیر بین ۱.۸ تا ۳ ثانیه نیاز به بهبود دارند و FCP بالاتر از ۳ ثانیه ضعیف در نظر گرفته می‌شود. برای ارزیابی عملکرد واقعی کاربران نیز بهتر است داده‌ها در صدک ۷۵ و به تفکیک موبایل و دسکتاپ بررسی شوند.
| زمان FCP | وضعیت |
|---|---|
| تا ۱.۸ ثانیه | خوب |
| ۱.۸ تا ۳ ثانیه | نیازمند بهبود |
| بیشتر از ۳ ثانیه | ضعیف |
البته نباید تصور کرد که رسیدن به عدد ۱.۸ ثانیه به‌تنهایی به معنای سریع بودن کامل یک سایت است. FCP فقط یکی از معیارهای عملکرد صفحه است و معیارهایی مانند LCP، INP و CLS نیز باید در کنار آن بررسی شوند.
تفاوت FCP و LCP چیست؟
یکی از اشتباهات رایج در بررسی سرعت سایت، یکسان دانستن FCP و LCP است.
FCP زمانی را اندازه‌گیری می‌کند که اولین محتوای قابل مشاهده روی صفحه ظاهر می‌شود، اما LCP زمانی را بررسی می‌کند که بزرگ‌ترین عنصر محتوایی قابل مشاهده در محدوده صفحه نمایش داده شده است.
برای مثال، فرض کنید در صفحه یک مقاله ابتدا عنوان آن نمایش داده می‌شود و چند لحظه بعد تصویر اصلی و بخش اصلی متن ظاهر می‌شود.
در این حالت:
- نمایش عنوان می‌تواند در FCP مؤثر باشد.
- نمایش بزرگ‌ترین عنصر محتوایی صفحه می‌تواند در LCP نقش داشته باشد.
بنابراین ممکن است یک سایت FCP خوبی داشته باشد اما LCP ضعیفی داشته باشد. در چنین شرایطی کاربر خیلی زود متوجه می‌شود که صفحه در حال بارگذاری است، اما محتوای اصلی همچنان دیر نمایش داده می‌شود.
چرا FCP برای تجربه کاربر مهم است؟
تصور کنید وارد یک فروشگاه شوید و بعد از ورود، چند ثانیه هیچ اتفاقی دیده نشود. حتی اگر فروشگاه در نهایت خدمات خوبی ارائه کند، همین تأخیر اولیه می‌تواند باعث ایجاد حس کند بودن سیستم شود.
در سایت نیز شرایط مشابهی وجود دارد.
FCP سریع باعث می‌شود کاربر زودتر با صفحه ارتباط برقرار کند و متوجه شود که درخواست او در حال پردازش است. در مقابل، FCP بالا می‌تواند باعث شود کاربر تصور کند سایت با مشکل مواجه شده یا اتصال او به سایت قطع است.
به همین دلیل FCP یکی از معیارهای مهم برای بررسی سرعت ادراک‌شده صفحه محسوب می‌شود.
چه عواملی باعث افزایش زمان FCP می‌شوند؟
برای کاهش FCP ابتدا باید بدانیم چه چیزهایی باعث تأخیر در نمایش اولین محتوا می‌شوند. مهم‌ترین عوامل عبارت‌اند از:
۱. پاسخ‌دهی کند سرور
اگر سرور زمان زیادی برای پاسخ دادن به درخواست اولیه صرف کند، مرورگر نمی‌تواند فرآیند نمایش صفحه را به‌سرعت آغاز کند.
در این شرایط حتی اگر فایل‌های CSS و JavaScript سایت بهینه باشند، باز هم FCP ممکن است بالا باشد.
مواردی مانند هاست ضعیف، مصرف بالای منابع، پیکربندی نامناسب سرور، کوئری‌های سنگین و نبود کش مناسب می‌توانند در این بخش مؤثر باشند.
۲. منابع Render-Blocking
برخی فایل‌های CSS و JavaScript قبل از نمایش بخش‌هایی از صفحه باید توسط مرورگر دریافت و پردازش شوند. اگر تعداد یا حجم این منابع زیاد باشد، نمایش اولیه صفحه به تأخیر می‌افتد.
به همین دلیل یکی از توصیه‌های مهم برای بهبود FCP، کاهش یا حذف منابعی است که مانع رندر اولیه صفحه می‌شوند.
۳. CSS حجیم یا غیرضروری
اگر مرورگر مجبور باشد مقدار زیادی CSS را قبل از نمایش صفحه پردازش کند، زمان رسیدن به FCP افزایش پیدا می‌کند.
استفاده از CSS اضافی، کتابخانه‌های غیرضروری و استایل‌هایی که در صفحه موردنظر استفاده نمی‌شوند، می‌تواند این مشکل را تشدید کند.
۴. JavaScript زیاد
JavaScript سنگین می‌تواند منابع سیستم را درگیر کند و باعث شود مرورگر زمان بیشتری برای پردازش صفحه صرف کند.
حتی اگر کاربر اولین بخش صفحه را ببیند، اجرای طولانی JavaScript می‌تواند روی عملکرد کلی صفحه اثر منفی بگذارد. مرورگر برای رندر و اجرای اسکریپت‌ها از منابع اصلی پردازشی استفاده می‌کند و این موضوع در دستگاه‌های ضعیف‌تر اهمیت بیشتری دارد.
۵. فونت‌های وب
فونت‌های سفارشی نیز می‌توانند روی نمایش اولیه متن اثر بگذارند. اگر مرورگر برای نمایش متن منتظر دریافت فونت بماند، ممکن است نمایش محتوای متنی به تأخیر بیفتد.
بهینه‌سازی نحوه بارگذاری فونت‌ها، کاهش تعداد وزن‌های مورد استفاده و استفاده صحیح از font-display می‌تواند به بهبود وضعیت کمک کند.
۶. ریدایرکت‌های غیرضروری
هر ریدایرکت اضافه می‌تواند بخشی از مسیر رسیدن کاربر به محتوای اصلی را طولانی‌تر کند. از آنجا که FCP زمان‌های مربوط به اتصال و ریدایرکت را نیز در بر می‌گیرد، زنجیره‌های ریدایرکت می‌توانند به افزایش این معیار منجر شوند.
چگونه FCP سایت را کاهش دهیم؟
برای کاهش FCP نباید صرفاً به دنبال نصب یک افزونه یا فعال کردن یک گزینه خاص باشید. ابتدا باید مشخص شود تأخیر اصلی از سرور، CSS، JavaScript، فونت‌ها یا منابع دیگر ایجاد شده است.
۱. زمان پاسخ سرور را کاهش دهید
یکی از اولین اقدام‌ها بررسی TTFB است. اگر سرور قبل از ارسال محتوای HTML زمان زیادی صرف می‌کند، بهتر است مشکل در سطح سرور و زیرساخت بررسی شود.
در وردپرس می‌توان مواردی مانند کش صفحات، کش آبجکت، بهینه‌سازی دیتابیس، نسخه PHP، منابع هاست و تنظیمات وب‌سرور را بررسی کرد.
اگر مشکل از محدودیت منابع سرور باشد، صرفاً فشرده‌سازی CSS نمی‌تواند مشکل اصلی FCP را حل کند.
۲. CSSهای غیرضروری را حذف کنید
بررسی کنید آیا صفحه واقعاً به تمام فایل‌های CSS بارگذاری‌شده نیاز دارد یا خیر.
در سایت‌های وردپرسی، قالب و افزونه‌های متعدد ممکن است فایل‌های استایل زیادی را در صفحات مختلف بارگذاری کنند؛ در حالی که بخشی از آن‌ها در صفحه موردنظر کاربردی ندارند.
کاهش CSS اضافی و بهینه‌سازی Critical CSS می‌تواند به مرورگر کمک کند بخش قابل مشاهده صفحه را سریع‌تر نمایش دهد.
۳. JavaScriptهای غیرضروری را کاهش دهید
همه اسکریپت‌ها نباید در ابتدای بارگذاری صفحه اجرا شوند.
اسکریپت‌هایی که برای نمایش اولیه صفحه ضروری نیستند را می‌توان تا حد امکان به تعویق انداخت یا فقط در صفحاتی که واقعاً به آن‌ها نیاز دارند بارگذاری کرد.
برای مثال، اگر یک فرم خاص فقط در صفحه تماس وجود دارد، منطقی نیست فایل‌های سنگین مربوط به آن در تمام صفحات سایت بارگذاری شوند.
۴. فونت‌ها را بهینه کنید
اگر سایت از چندین فونت و وزن مختلف استفاده می‌کند، تعداد آن‌ها را کاهش دهید.
برای مثال اگر یک سایت فقط به وزن معمولی و بولد نیاز دارد، بارگذاری پنج یا شش وزن مختلف فونت ضرورتی ندارد.
همچنین باید نحوه نمایش متن هنگام بارگذاری فونت تنظیم شود تا کاربر در انتظار دریافت فونت، با صفحه‌ای خالی مواجه نشود.
۵. درخواست‌های شبکه را کاهش دهید
هر فایل CSS، JavaScript، فونت، تصویر یا منبع خارجی می‌تواند یک درخواست شبکه ایجاد کند. افزایش تعداد درخواست‌ها، به‌خصوص در شرایط شبکه ضعیف، می‌تواند مسیر رسیدن به اولین محتوای قابل مشاهده را طولانی کند.
به همین دلیل کاهش تعداد منابع غیرضروری و کوچک نگه داشتن حجم فایل‌های حیاتی یکی از اصول مهم بهینه‌سازی FCP است.
۶. ریدایرکت‌های اضافه را حذف کنید
اگر آدرس یک صفحه چند بار پشت سر هم ریدایرکت شود، مرورگر قبل از رسیدن به صفحه نهایی باید چند مرحله اضافی را طی کند.
بهتر است تا حد امکان ریدایرکت‌ها مستقیماً به مقصد نهایی انجام شوند.
۷. منابع مهم را درست اولویت‌بندی کنید
همه منابع صفحه اهمیت یکسانی ندارند.
محتوایی که کاربر در ابتدای صفحه می‌بیند باید اولویت بیشتری نسبت به منابعی داشته باشد که چند اسکرول پایین‌تر قرار گرفته‌اند.
استفاده صحیح از تکنیک‌هایی مانند Preload و Preconnect می‌تواند برای منابع واقعاً مهم مفید باشد، اما استفاده بیش از حد از آن‌ها نیز می‌تواند نتیجه معکوس داشته باشد. Web.dev نیز این موارد را در میان روش‌های عمومی بهبود FCP قرار می‌دهد.
آیا بهینه‌سازی تصاویر FCP را بهتر می‌کند؟
بله، اما یک نکته مهم وجود دارد.
FCP قرار نیست زمان بارگذاری تمام تصاویر صفحه را اندازه‌گیری کند. با این حال، اگر یکی از عناصر تصویری که در ابتدای صفحه قرار دارد بخشی از اولین محتوای قابل مشاهده باشد، نحوه بارگذاری آن می‌تواند روی FCP اثر بگذارد.
بنابراین برای تصاویر بالای صفحه بهتر است:
- حجم تصویر کاهش پیدا کند.
- فرمت مناسب مانند WebP یا AVIF در صورت سازگاری استفاده شود.
- ابعاد تصویر متناسب با اندازه واقعی نمایش باشد.
- تصاویر پایین صفحه با Lazy Load بارگذاری شوند.
- تصویر حیاتی بالای صفحه بدون تأخیر غیرضروری بارگذاری شود.
در اینجا هدف این نیست که تمام تصاویر سایت را همزمان بارگذاری کنیم؛ هدف، اولویت دادن به منابعی است که برای نمایش اولیه صفحه اهمیت دارند.
FCP در وردپرس چگونه بهبود پیدا می‌کند؟
اگر سایت با وردپرس ساخته شده باشد، معمولاً بهینه‌سازی FCP ترکیبی از تنظیمات وردپرس، قالب، افزونه‌ها، سرور و منابع صفحه است.
یک مسیر منطقی برای بررسی می‌تواند این باشد:
بررسی سرعت سرور → بررسی TTFB → شناسایی CSS و JS مسدودکننده → بهینه‌سازی فونت → بهینه‌سازی منابع مهم → بررسی تصاویر → تست مجدد
نکته مهم این است که چند افزونه کش و بهینه‌سازی را بدون بررسی تنظیمات روی یکدیگر فعال نکنید. گاهی فعال کردن همزمان چند قابلیت مشابه باعث ایجاد تداخل، افزایش درخواست‌ها یا حتی خراب شدن ظاهر و عملکرد صفحه می‌شود.
در وردپرس، بهتر است ابتدا علت اصلی کندی مشخص شود و سپس بر اساس همان علت، تنظیمات بهینه‌سازی انجام گیرد.
چگونه FCP سایت را اندازه‌گیری کنیم؟
برای بررسی FCP می‌توان از ابزارهای مختلفی استفاده کرد که PageSpeed Insights و Lighthouse از مهم‌ترین گزینه‌ها هستند.
در گزارش عملکرد، مقدار FCP به صورت زمان نمایش داده می‌شود و می‌توان وضعیت آن را بررسی کرد. Lighthouse نیز FCP را به عنوان یکی از معیارهای بخش Performance گزارش می‌کند.
اما هنگام تحلیل نتیجه، فقط به عدد نهایی نگاه نکنید.
مثلاً اگر FCP یک صفحه ۲.۵ ثانیه باشد، سؤال اصلی این است:
چرا ۲.۵ ثانیه شده است؟
اگر گزارش نشان دهد TTFB بالاست، باید سرور را بررسی کرد. اگر منابع Render-Blocking عامل اصلی باشند، باید CSS و JavaScript را بررسی کرد. اگر فونت‌ها باعث تأخیر شوند، باید روش بارگذاری فونت اصلاح شود.
بنابراین ابزارهای تست سرعت باید برای پیدا کردن علت مشکل استفاده شوند، نه اینکه صرفاً به دنبال گرفتن یک امتیاز بالاتر باشید.
آیا FCP یک فاکتور سئو است؟
FCP به‌تنهایی یک «امتیاز مستقیم رتبه‌بندی» نیست که بتوان گفت هر سایتی FCP پایین‌تری داشته باشد حتماً رتبه بالاتری می‌گیرد. با این حال، سرعت و تجربه کاربری برای کیفیت کلی سایت اهمیت دارند و FCP یکی از معیارهایی است که برای درک عملکرد بارگذاری صفحه استفاده می‌شود.
به همین دلیل بهتر است FCP را بخشی از فرآیند بهینه‌سازی تجربه کاربر و عملکرد سایت بدانیم، نه یک ترفند مستقل برای افزایش رتبه.
همچنین نباید بهینه‌سازی FCP باعث شود سایر بخش‌های مهم عملکرد سایت نادیده گرفته شوند. ممکن است با یک تغییر، FCP بهتر شود اما LCP، INP یا حتی تجربه واقعی کاربر بدتر شود.
FCP خوب اما سایت همچنان کند است؛ چرا؟
این اتفاق کاملاً ممکن است.
فرض کنید یک صفحه در ۱.۲ ثانیه عنوان خود را نمایش می‌دهد و بنابراین FCP خوبی دارد، اما تصویر اصلی صفحه تا ۵ ثانیه بعد بارگذاری می‌شود.
در چنین شرایطی کاربر چیزی روی صفحه می‌بیند، اما محتوای اصلی هنوز آماده نیست.
اینجاست که باید LCP و سایر معیارهای عملکرد را نیز بررسی کرد.
بنابراین هدف نهایی این نیست که فقط FCP را کاهش دهیم؛ هدف، ساخت صفحه‌ای است که سریع شروع به نمایش محتوا کند، محتوای اصلی را سریع نشان دهد و در هنگام تعامل نیز روان و پاسخ‌گو باشد.
یک مثال ساده برای درک اهمیت FCP
فرض کنید برای خرید بلیت قطار وارد یک سامانه آنلاین می‌شوید. در حالت اول، بعد از کلیک روی لینک، صفحه تقریباً بلافاصله عنوان «جستجوی بلیت» را نشان می‌دهد و کاربر می‌فهمد صفحه در حال بارگذاری است.
در حالت دوم، صفحه برای چند ثانیه کاملاً سفید باقی می‌ماند و بعد ناگهان تمام محتوا نمایش داده می‌شود.
حتی اگر زمان نهایی بارگذاری هر دو صفحه تقریباً یکسان باشد، تجربه کاربر در حالت اول بهتر است؛ زیرا سایت خیلی زود بازخورد بصری ارائه کرده است.
FCP دقیقاً بخشی از همین تجربه اولیه را اندازه‌گیری می‌کند.
برای کاهش FCP از کجا شروع کنیم؟
اگر FCP سایت شما بالاست، پیشنهاد می‌شود به جای تغییرات تصادفی، این ترتیب را دنبال کنید:
۱. مقدار FCP را در PageSpeed Insights یا Lighthouse بررسی کنید.
۲. مشخص کنید مشکل در موبایل است یا دسکتاپ یا هر دو.
۳. TTFB و زمان پاسخ سرور را بررسی کنید.
۴. منابع Render-Blocking را شناسایی کنید.
۵. CSS و JavaScript غیرضروری را کاهش دهید.
۶. فونت‌ها و نحوه بارگذاری آن‌ها را بررسی کنید.
۷. منابع مهم ابتدای صفحه را اولویت‌بندی کنید.
۸. تصاویر و سایر فایل‌های حجیم را بهینه کنید.
۹. پس از هر تغییر دوباره تست بگیرید.
۱۰. در نهایت FCP را در کنار LCP، INP و CLS بررسی کنید.
این روش بسیار بهتر از آن است که فقط یک افزونه افزایش سرعت نصب کنید و انتظار داشته باشید تمام مشکلات عملکرد سایت به‌صورت خودکار برطرف شود.
جمع‌بندی؛ FCP چیست و چگونه آن را کاهش دهیم؟
FCP یا First Contentful Paint معیاری برای اندازه‌گیری زمان نمایش اولین محتوای قابل مشاهده صفحه است. هرچه این محتوا سریع‌تر نمایش داده شود، کاربر زودتر متوجه می‌شود که صفحه در حال بارگذاری است و تجربه اولیه بهتری خواهد داشت.
مقدار ۱.۸ ثانیه یا کمتر به عنوان وضعیت خوب FCP در نظر گرفته می‌شود و مقادیر بالاتر از ۳ ثانیه نیازمند توجه جدی هستند.
برای کاهش FCP باید عواملی مانند سرعت سرور، TTFB، منابع Render-Blocking، CSS و JavaScript اضافی، فونت‌ها، ریدایرکت‌ها و نحوه بارگذاری منابع مهم را بررسی کرد.
در عین حال، FCP نباید به‌تنهایی هدف بهینه‌سازی سایت باشد. یک سایت سریع باید در کنار FCP، وضعیت LCP، INP و CLS مناسبی نیز داشته باشد.
در نتیجه اگر هدف شما ساخت سایتی سریع‌تر از رقباست، به جای تمرکز صرف بر یک عدد در PageSpeed Insights، باید مسیر کامل تجربه کاربر از لحظه ورود تا نمایش و تعامل با محتوای اصلی را بهینه کنید.
برای بهبود fcp سایت خود می توانید با کارشناسان پرشیا وب در بخش سئو سایت در تماس باشید.
