First Contentful Paint /Fcp چیست؟

• 1400/11/07
• طراحی سایت اصفهان وب-شرکت طراحی سایت در اصفهان
• 0 نظر

First Contentful Paint /Fcp چیست؟

زمانی را نشان می دهد که متن یا تصویر اول قابل مشاهده شود. پس از کلیک یا هر اقدام دیگری توسط کاربر فقط در صورتی می توان گفت که سایت شما fcp  یا همان اولین رنگ محتوایی مناسبی دارد که محتوا یا عکس قابل درکی توسط کاربر مشاهد شود. در واقع fcp یکی از معیار های اصلی Lighthouse محسوب می شود که در این مقاله می پردازیم به این معیار و محدودیت ها و عواملی که باعث افزایش سرعت در fcp می شود.

First Contentful Paint /Fcp چیست؟

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

fcpچگونه اندازه گیری می شود؟

امتیاز FCP شما درLighthouse با مقایسه زمان واقعی FCP و FCP صفحه شما برای داده های وب سایت واقعی ذخیره شده توسط بایگانی HTTP اندازه گیری می شود. FCP شما اگر سریعتر از سایر صفحات بایگانی HTTP باشد ، افزایش می یابد.

چه عناصری می توانند بخشی از FCP باشند؟

زمانی که برای ارائه اولین عنصر قابل مشاهده به DOM لازم است FCP میباشد. هر اتفاقی که قبل از اینکه یک عنصر محتوای غیر سفید به صفحه ارائه دهد به استثنای iframes اتفاق می افتد ، در FCP محاسبه می شود.از آنجا که iframes بخشی از FCP محسوب نمی شود ،

اگر اولین محتوایی باشد که ارائه می شود ، FCP تا زمان بارگیری محتوای اول غیر iframe به شمارش خود ادامه می دهد ، اما زمان بارگذاری iframe در FCP محاسبه نمی شود.همچنین دراصول اساسی مربوط به fcp  باید به زمان بارگزاری فونت ها و متن ها  توجه نمود و نکاتی درمورد بهبود بارگیری متن ها ارائه نمود.

چگونه می توانیم از لحظه شروع fcp مطلع شویم؟

یکی از ساده ترین راه ها برای یافتن زمانی که مرورگر برای اولین بار چیزی را ارائه می دهد پس از پیمایش ، درخواست خود مرورگر است. این “اولین رنگ” و یکی از اولین معیارهای عملکرد وب نامیده می شود.با این وجود First Paint می تواند گمراه کننده باشد: “paint” از دید مرورگر است و نه کاربر. و یک مرورگر می تواند رنگی را اجرا کند که برای کاربر قابل مشاهده نباشد.

به عنوان مثال ، اگر عنصری با پس زمینه پیش زمینه پیش فرض ارائه شود، First Paint به همان صورت آغاز می شود.استفاده از First Paint برای پیگیری عملکرد صفحه شما تضمین نمی کند که وقتی چیزی برای بازدیدکنندگان شما نمایش داده می شود، برای  آن ها قابل استفاده است یا خیر

چگونه می توانیم بر آنچه برای بازدید کننده منطقی است متمرکز شویم؟

این سوالی است که اولین رنگین محتوا سعی دارد به آن پاسخ دهد. با توجه به مشخصات Paint Timing:

FCP زمانی است که مرورگر اولین بیت محتوا را از Document Object Model (DOM) ارائه می دهد ، که ممکن است متن ، تصویر ، SVG یا حتی یک عنصر بوم باشد.در مورد First Paint ، هنگام مرور رندر عناصر وب ، مرورگر اطلاعات را برمی گرداند ، اما علاوه بر این نوع عنصر (متن ، تصویر ، SVG یا بوم) را نیز بررسی می کند.

اولین رنگ محتوای را می توان در Dareboost ، WebPageTest یا در سرویس های Google مانند Lighthouse یا Chrome UX Report یافت که داده هایی در PageSpeed Insights استفاده می شود. در حال حاضر ، FCP فقط در Chrome و Opera در دسترس است. Firefox نیز در نظر دارد از آن پشتیبانی کند.

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

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

به روزرسانی های Lighthouse: Web Core Vital

در 5 مه سال 2020 ، پروژه Chromium مجموعه ای از سه معیار را اعلام کرد که مرورگر منبع باز با پشتیبانی Google از طریق آنها عملکرد را اندازه گیری می کند.معیارهای اندازه گیری ، معروف به Web Vital ، بخشی از ابتکار عمل Google است که برای ارائه راهنمایی واحد برای سیگنال های کیفیت طراحی شده است.

در ژوئیه سال 2020 ، با انتشار Chrome 84 ، معیارهای واحد Lighthouse v6 در سراسر محصولات Google پذیرفته شد.پنل حسابرسی Chrome DevTools به Lighthouse تغییر نام یافت. بینش Pagespeed و Google Search Console نیز به این معیارهای واحد اشاره می کنند. Web Core Vital 55٪ نمره عملکرد وزنی Lighthouse را تشکیل می دهد.

• نحوه تعریف FCP با استفاده از Chrome Devtools
• صفحه را در Chrome باز کنید.
• به پنل عملکرد Dev Tools فرمان + گزینه + I در Mac یا Control + Shift + I در ویندوز و لینوکس بروید.
• بر روی نشانگر FCP در بخش Timings کلیک کنید.
• برگه خلاصه دارای یک مهر زمان با FCP بر حسب میلی ثانیه است.
• چگونه FCP را بهبود بخشیم

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

سایت خود را به طور پایدار مقیاس پذیر نگه دارید ، از ابزاری خودکار مانند پنت هاوس و Apache’s mod_pagespeed استفاده کنید. این راه حل ها با برخی محدودیت ها در عملکرد ، نیاز به آزمایش دارند و ممکن است برای همه مناسب نباشد.به صورت جهانی ، همه ما می توانیم با کاهش دامنه و پیچیدگی محاسبات سبک ، زمان سایت خود را برای First Contentful Paint بهبود بخشیم.اگر از سبکی استفاده نمی شود،

آن را حذف کنید. می توانید CSS بلااستفاده را با قابلیت داخلی Code Coverage Chrome Dev Tool شناسایی کنید.برای تصمیم گیری بهتر از داده های بهتر استفاده کنید.مشابه TTI ، می توانید معیارهای واقعی کاربر را برای FCP با استفاده از Google Analytics برای همبستگی پیشرفت ها با KPI ثبت کنید.

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

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

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

• محدودیت های FCP

اولاً ، ifram را در نظر نمی گیرد ، اگر محتوای اصلی شما به iframe بارگذاری شده متکی باشد ، این مسئله می تواند مشکل ساز شود (اما این قطعاً مورد لبه ای است که باید از آن اجتناب شود). در مرحله دوم ، FCP می تواند توسط گره متنی که منتظر ارائه فونت وب در انتظار است ، تعصب داشته باشد.برای مثال ما تصور می کنیم FCP در حدود 900 میلی ثانیه اخراج می شود ، زیرا قبل از آن هیچ محتوایی نمی بینیم:

مقدار واقعی FCP حدود 600 میلی ثانیه است زیرا در این زمان گره متنی برای اولین بار توسط مرورگر ارائه می شود حتی اگر قلم هنوز بارگیری نشده باشد ، بنابراین متن برای مدتی “خالی” (نامرئی) می ماند. این پدیده Flash Of Invisible Text (FOIT) نامیده می شود.

برای جلوگیری از این رفتار در وب سایت های خود ، اطمینان حاصل کنید که از دستورالعمل CSS @ font-face با مقدار غیر پیش فرض برای توصیفگر نمایش فونت استفاده می کنید. اگر از Google Fonts استفاده می کنید ، لطفا توجه داشته باشید که این سرویس اکنون کاربران خود را به استفاده از font-display: swap value ترغیب می کند.

اطمینان حاصل کنید که اعلامیه واردات Google Fonts شما مقداری را برای پارامتر “نمایش” در درخواست URL تعیین کرده است.یکی از محدودیت های اصلی که ممکن است با First Contentful Paint با آن روبرو شوید این است که معیار اندازه گیری به درگاه نمایش محدود نیست. هر قسمت از محتوا نمایش داده شود ، FCP را تحریک می کند ،

حتی اگر محتوا بیش از حد مجاز نباشد و بنابراین برای بازدید کننده قابل مشاهده نیست.برای پیگیری واقعی زمانی که مطمئن هستیم چیزی برای کاربر نمایش داده شده و قابل مشاهده است ، باید از معیار دیگری استفاده کنیم: شروع رندر. الگوریتم Start Render مبتنی بر تجزیه و تحلیل فیلم بارگیری صفحه است و به دنبال اولین پیکسل تغییر یافته در Viewport است.

حتی اگر Start Render بدون توجه به نوع محتوا شروع به کار کند (به عنوان اولین رنگ) ، این یک روش عالی برای ردیابی زمانی است که کاربر می تواند بارگیری صفحه را درک کند ، در حالی که از پیگیری رنگ های “فنی” مربوط به مرورگر جلوگیری می کند.

Start Render فقط از طریق ابزارهای نظارت مصنوعی در دسترس است زیرا تجزیه و تحلیل ویدئو مورد نیاز است ، در حالی که FCP و First Paint می توانند مستقیماً از مرورگر درخواست شوند ، همچنین آنها را در نظارت کاربر واقعی (RUM) نیز قابل استفاده می کند.

و در آخر...

 به معرفی و بررسی FCP پرداختیم. در واقع نکته ی قابل اهمیت در این مورد این است که باید محتوایی که به عنوان اولین محتوا به کاربران نمایش داده می شود دارای معنا وکاربرد برای کاربران باشد و FCP در واقع سرعن سایت شما را  در این محتوا و با این کیفیت اندازه گیری می کند که برای افزایش سرعت و بهبود FCP در این مقاله پرداختیم. امیداوریم که این مقاله پاسخ های مناسبی به شما در مورد  FCP  داده باشد.

First Contentful Paint /Fcp

First Contentful Paint /Fcp