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

فیلیپ والتون

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

  • 60
  • 79
  • 84
  • 14.1

منبع

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

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

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

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

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

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

مقادیر خوب FCP 1.8 ثانیه یا کمتر هستند، مقادیر ضعیف بیشتر از 3.0 ثانیه هستند و هر چیزی در این بین نیاز به بهبود دارد.
مقادیر خوب FCP 1.8 ثانیه یا کمتر است. مقادیر ضعیف بیشتر از 3.0 ثانیه هستند.

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

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

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

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

اندازه گیری 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 استفاده کنند، که در صورت امکان، این تفاوت ها را برای شما مدیریت می کند (به جز در iframes):

import {onFCP} from 'web-vitals';

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

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

نحوه بهبود FCP

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

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

تغییرات

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

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

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