معرفی FCP و چگونگی بهینه سازی آن

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

FCP یک معیار اساسی سئو و یکی از مهم ترین ارکان اصول سئو سایت به حساب می آید.

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

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

یکی از مهمترین جنبه های پاسخ به سوال FCP چیست بررسی نحوه اندازه گیری آن است. شما می توانید با دو روش میدانی و آزمایشگاهی FCP را محاسبه کنید.

ابزار میدانی

بررسی سرعت صفحات

گزارش تجربه کاربران کروم

استفاده از اطلاعات Search Console

بررسی web-vitals JavaScript library

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

بررسی Lighthouse

Chrome DevTools

بررسی PageSpeed Insights

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

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

در مثال بالا اولین ورودی FCP ثبت شده به شما می گوید که اولین عنصر محتوای FCP شده است. با این حال در بعضی موارد این ورودی برای اندازه گیری FCP معتبر نیست. در ادامه ما به بررسی تفاوت بین گزارش های API و نحوه محاسبه و معیارهای بررسی FCP می پردازیم.

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

برای اینکه پاسخ دقیقی به FCP چیست بدهیم لازم است در مورد تفاوت بین متریک و API نیز صحبت کنیم:

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

هنگامی که صفحه از حافظه نهان بک اند و فرانت اند بازیابی می شود API ورودی های FCP را گزارش نمی کند اما FCP باید در این موارد اندازه گیری شود زیرا کاربران آنها را به عنوان بازدیدهای صفحات مجزا تجربه می کنند.

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

البته به جای اینکه همه این تفاوت های ظریف را بخاطر بسپارید توسعه دهندگان می توانند برای اندازه گیری FCP از web-vitals JavaScript library استفاده کنند که این اختلافات را برای شما کنترل می کند. در صورت امکان می توانید برای مثال کامل نحوه اندازه گیری FCP در JavaScript به کد منبع () getFCP مراجعه کنید:

البته در بعضی موارد (مانند iframes متقابل) اندازه گیری FCP در JavaScript امکان پذیر نیست.

راه بهبود FCP چیست

در ادامه ی پاسخ به سوال FCP چیست بد نیست بدانیم چطور می شود آن را بهبود بخشید. برای یادگیری نحوه بهبود FCP برای یک سایت خاص می توانید ممیزی عملکرد Lighthouse را انجام دهید و به هر موقعیت خاص یا تشخیصی که ممیزی پیشنهاد می دهد توجه کنید. برای یادگیری نحوه بهبود FCP به طور کلی و برای هر سایتی به نکات زیر دقت کنید:

منابع مسدود کننده رندر را حذف کنید

CSS را کم کنید

CSS استفاده نشده را حذف کنید

از قبل به مبدا مورد نیاز وصل شوید

زمان پاسخ سرور (TTFB) را کاهش دهید

از تغییر مسیرهای متعدد صفحه خودداری کنید

درخواست های کلیدی را از قبل بارگیری کنید

از حجم محتوای عظیم شبکه کم کنید

محتوای ثابت را با خط مشی کارآمد ارائه دهید

از استفاده بیش ازاندازه DOM خودداری کنید

ابعاد درخواست های مهم را به حداقل برسانید

اطمینان حاصل کنید که متن در هنگام بارگیری وب فونت قابل مشاهده دارد

تعداد درخواست ها را کم و اندازه ها را کوچک کنید

تغییرات یا CHANGELOG FCP چیست

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