First Contentful Paint (FCP) یک معیار مهم و کاربر محور برای اندازه گیری سرعت بار درک شده است. این اولین نقطه در جدول زمانی بارگذاری صفحه را نشان می دهد که در آن کاربر می تواند هر چیزی را روی صفحه ببیند. یک FCP سریع به کاربر اطمینان می دهد که چیزی در حال رخ دادن است.
FCP زمان را از زمانی که کاربر برای اولین بار به صفحه پیمایش می کند تا زمانی که هر بخشی از محتوای صفحه روی صفحه نمایش داده می شود را اندازه گیری می کند. برای این معیار، «محتوا» به متن، تصاویر (از جمله تصاویر پسزمینه)، عناصر <svg>
یا عناصر <canvas>
غیرسفید اشاره دارد.
وقتی اولین عنصر محتوا رندر میشود، همه محتوا رندر نمیشوند. این تمایز مهمی است که باید بین FCP و Largest Contentful Paint (LCP) قائل شد، که زمانی را اندازه گیری می کند که محتوای اصلی صفحه بارگیری شده است.
نمره FCP خوب چیست؟
برای ارائه یک تجربه کاربری خوب، سایت ها باید FCP 1.8 ثانیه یا کمتر داشته باشند. برای اطمینان از اینکه در حال رسیدن به این هدف برای اکثر کاربران خود هستید، یک آستانه خوب برای اندازه گیری صدک 75 بارگذاری صفحه است که در دستگاه های تلفن همراه و دسکتاپ تقسیم بندی شده است.
نحوه اندازه گیری FCP
FCP را می توان در آزمایشگاه یا میدان اندازه گیری کرد و در ابزارهای زیر موجود است:
ابزارهای میدانی
- PageSpeed Insights
- گزارش تجربه کاربر Chrome
- کنسول جستجو (گزارش سرعت)
- کتابخانه جاوا اسکریپت
web-vitals
ابزار آزمایشگاهی
اندازه گیری 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 به طور کلی (برای هر سایت)، به راهنمای عملکرد زیر مراجعه کنید:
- منابع مسدودکننده رندر را حذف کنید
- CSS را کوچک کنید
- CSS استفاده نشده را حذف کنید
- جاوا اسکریپت استفاده نشده را حذف کنید
- از قبل به مبداهای مورد نیاز متصل شوید
- کاهش زمان پاسخ سرور (TTFB)
- از تغییر مسیرهای چند صفحه ای خودداری کنید
- درخواست های کلیدی را از قبل بارگیری کنید
- از بارهای سنگین شبکه خودداری کنید
- دارایی های ثابت را با یک خط مشی کش کارآمد ارائه دهید
- از اندازه DOM بیش از حد خودداری کنید
- عمق درخواست بحرانی را به حداقل برسانید
- اطمینان حاصل کنید که متن در طول بارگذاری وب فونت قابل مشاهده است
- تعداد درخواستها کم و اندازههای انتقال کوچک است
تغییرات
گاهی اوقات، اشکالاتی در APIهای مورد استفاده برای اندازه گیری معیارها و گاهی اوقات در تعاریف خود معیارها کشف می شود. در نتیجه، گاهی اوقات باید تغییراتی ایجاد شود، و این تغییرات میتواند به صورت بهبود یا پسرفت در گزارشهای داخلی و داشبورد شما نشان داده شود.
برای کمک به شما در مدیریت این موضوع، همه تغییرات در پیاده سازی یا تعریف این معیارها در این Changelog ظاهر می شود.
اگر بازخوردی برای این معیارها دارید، آن را در گروه web-vitals-feedback Google ارائه کنید.