اولین رنگ محتوایی

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

Lighthouse FCP را در چند ثانیه نمایش می دهد:

تصویری از اولین ممیزی رنگ محتوای فانوس دریایی

آنچه FCP اندازه گیری می کند

FCP اندازه‌گیری می‌کند که مرورگر چه مدت طول می‌کشد تا اولین قطعه از محتوای DOM را پس از حرکت کاربر به صفحه شما ارائه کند. تصاویر، عناصر غیرسفید <canvas> و SVG در صفحه شما محتوای DOM محسوب می شوند. هر چیزی داخل iframe گنجانده نشده است .

چگونه Lighthouse امتیاز FCP شما را تعیین می کند

امتیاز FCP شما مقایسه زمان FCP صفحه شما و زمان FCP برای وب سایت های واقعی، بر اساس داده های بایگانی HTTP است. به عنوان مثال، سایت هایی که در صدک نود و نهم کار می کنند FCP را در حدود 1.2 ثانیه نمایش می دهند. اگر FCP وب سایت شما 1.2 ثانیه است، امتیاز FCP شما 99 است. ببینید چگونه امتیازات متریک تعیین می شود تا بدانید آستانه امتیاز Lighthouse چگونه تعیین می شود.

این جدول نحوه تفسیر امتیاز FCP خود را نشان می دهد:

زمان FCP
(در چند ثانیه)
کدگذاری رنگ
0-1.8 سبز (سریع)
1.8-3 نارنجی (متوسط)
بیش از 3 قرمز (آهسته)

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

یکی از مسائلی که به ویژه برای FCP مهم است زمان بارگذاری فونت است. برای یافتن راه‌هایی برای افزایش سرعت بارگذاری فونت‌ها، مطمئن شوید متن در طول پست بارگذاری فونت قابل مشاهده است .

ردیابی FCP در دستگاه های کاربران واقعی

برای یادگیری نحوه اندازه‌گیری زمانی که FCP واقعاً در دستگاه‌های کاربران شما رخ می‌دهد، به صفحه معیارهای عملکرد کاربر محور Google مراجعه کنید. بخش Tracking FP/FCP نحوه دسترسی برنامه‌ریزی شده به داده‌های FCP و ارسال آن به Google Analytics را شرح می‌دهد.

برای اطلاعات بیشتر در مورد جمع‌آوری معیارهای کاربر واقعی ، به ارزیابی عملکرد بارگیری Google در زندگی واقعی با پیمایش و زمان‌بندی منابع مراجعه کنید.

چگونه نمره عملکرد کلی خود را بهبود بخشید

مگر اینکه دلیل خاصی برای تمرکز روی یک معیار خاص داشته باشید، معمولاً بهتر است روی بهبود نمره عملکرد کلی خود تمرکز کنید.

از بخش Diagnostics در گزارش Lighthouse خود استفاده کنید تا تعیین کنید کدام بهبودها بیشترین ارزش را برای صفحه شما دارند. هرچه این فرصت مهم تر باشد، تأثیر بیشتری بر امتیاز عملکرد شما خواهد داشت. برای مثال، اسکرین شات Lighthouse زیر نشان می‌دهد که حذف منابع مسدودکننده رندر بیشترین پیشرفت را به همراه خواهد داشت:

فانوس دریایی: بخش تشخیصی که تعدادی از ممیزی ها و تأثیر آنها را نشان می دهد
فانوس دریایی: بخش تشخیص

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

منابع