اولین رنگ محتوایی (FCP)

Philip Walton

FCP چیست؟

First Contentful Paint (FCP) زمان را از زمانی که کاربر برای اولین بار به صفحه پیمایش کرد تا زمانی که هر بخشی از محتوای صفحه روی صفحه نمایش داده می شود را اندازه گیری می کند. برای این معیار، «محتوا» به متن، تصاویر (از جمله تصاویر پس‌زمینه)، عناصر <svg> یا عناصر <canvas> غیرسفید اشاره دارد.

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

متوجه خواهید شد که اگرچه برخی از محتوا رندر شده است، اما همه آنها رندر نشده اند. این تمایز مهمی است که باید بین First Contentful Paint و Largest Contentful Paint (LCP) قائل شد - که هدف آن اندازه‌گیری زمانی است که محتوای اصلی صفحه بارگیری شده است.

نمره FCP خوب چیست؟

برای ارائه یک تجربه کاربری خوب، سایت ها باید تلاش کنند تا اولین رنگ محتوایی 1.8 ثانیه یا کمتر داشته باشند. برای اطمینان از رسیدن به این هدف برای اکثر کاربران خود، یک آستانه خوب برای اندازه گیری صدک 75 بارگذاری صفحه است که در دستگاه های تلفن همراه و دسکتاپ تقسیم بندی شده است.

نحوه اندازه گیری FCP

FCP را می توان در آزمایشگاه یا میدان اندازه گیری کرد و در ابزارهای زیر موجود است:

ابزارهای میدانی

• PageSpeed ​​Insights
• گزارش تجربه کاربر Chrome
• کنسول جستجو (گزارش سرعت)
• کتابخانه جاوا اسکریپت web-vitals

ابزار آزمایشگاهی

• فانوس دریایی
• Chrome DevTools
• PageSpeed ​​Insights

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

برای اندازه‌گیری FCP در جاوا اسکریپت، می‌توانید از Paint Timing API استفاده کنید. مثال زیر نحوه ایجاد یک PerformanceObserver را نشان می دهد که به ورودی paint با نام first-contentful-paint گوش می دهد و آن را در کنسول ثبت می کند.

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

در قطعه کد قبلی، ورودی ثبت شده first-contentful-paint به شما می گوید که اولین عنصر محتوایی چه زمانی رنگ شده است. با این حال، در برخی موارد این ورودی برای اندازه گیری FCP معتبر نیست.

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

تفاوت بین متریک و API

• API برای صفحاتی که در یک برگه پس‌زمینه بارگذاری شده‌اند first-contentful-paint ارسال می‌کند، اما این صفحات باید هنگام محاسبه FCP نادیده گرفته شوند (زمان‌بندی اولین نقاشی فقط در صورتی باید در نظر گرفته شود که صفحه تمام مدت در پیش‌زمینه باشد).
• هنگامی که صفحه از حافظه پنهان عقب/ جلو بازیابی می‌شود، API first-contentful-paint را گزارش نمی‌کند، اما FCP باید در این موارد اندازه‌گیری شود، زیرا کاربران آن‌ها را به‌عنوان بازدید از صفحه مجزا تجربه می‌کنند.
• ممکن است API زمان‌بندی رنگ را از iframe‌های متقاطع گزارش نکند ، اما برای اندازه‌گیری صحیح FCP باید همه فریم‌ها را در نظر بگیرید. فریم‌های فرعی می‌توانند از API برای گزارش زمان‌بندی رنگ خود به قاب اصلی برای تجمیع استفاده کنند.
• API FCP را از شروع ناوبری اندازه گیری می کند، اما برای صفحات از قبل اجرا شده FCP باید از activationStart اندازه گیری شود زیرا با زمان FCP مطابق با تجربه کاربر مطابقت دارد.

توسعه‌دهندگان می‌توانند به‌جای حفظ کردن همه این تفاوت‌های ظریف، از کتابخانه جاوا اسکریپت web-vitals برای اندازه‌گیری FCP استفاده کنند، که این تفاوت‌ها را برای شما مدیریت می‌کند (در صورت امکان، توجه داشته باشید که مشکل iframe پوشش داده نمی‌شود):

import {onFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
onFCP(console.log);

برای مثال کاملی از نحوه اندازه گیری FCP در جاوا اسکریپت می توانید به کد منبع onFCP() مراجعه کنید.

نحوه بهبود FCP

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

برای یادگیری نحوه بهبود FCP به طور کلی (برای هر سایت)، به راهنمای عملکرد زیر مراجعه کنید:

• منابع مسدودکننده رندر را حذف کنید
• CSS را کوچک کنید
• CSS استفاده نشده را حذف کنید
• جاوا اسکریپت استفاده نشده را حذف کنید
• از قبل به مبداهای مورد نیاز متصل شوید
• کاهش زمان پاسخ سرور (TTFB)
• از تغییر مسیرهای چند صفحه ای خودداری کنید
• درخواست های کلیدی را از قبل بارگیری کنید
• از بارهای سنگین شبکه خودداری کنید
• دارایی های ثابت را با یک خط مشی کش کارآمد ارائه دهید
• از اندازه DOM بیش از حد خودداری کنید
• عمق درخواست بحرانی را به حداقل برسانید
• اطمینان حاصل کنید که متن در طول بارگذاری وب فونت قابل مشاهده است
• تعداد درخواست‌ها کم و اندازه‌های انتقال کوچک است

تغییرات

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

برای کمک به شما در مدیریت این موضوع، همه تغییرات در اجرا یا تعریف این معیارها در این Changelog ظاهر می‌شود.

اگر بازخوردی برای این معیارها دارید، می‌توانید آن را در گروه web-vitals-feedback Google ارائه کنید.