اگر بخواهیم یک پاسخ ساده به سوال FCP چیست باید گفت FCP مخفف عبارت First Contentful Paint است که زمان شروع بارگیری یک صفحه تا زمان ارائه هر قسمت از محتوای آن را بر روی مانیتور شما اندازه گیری می کند. در واقع FCP معیار مهم و کاربر محور برای اندازه گیری سرعت بارگزاری سایت است، زیرا اولین نقطه از جدول زمانی بارگذاری صفحه را نشان می دهد که در آن کاربر می تواند هر چیزی را روی صفحه ببیند. یک FCP سریع به کاربر اطمینان می دهد که سایت شما صلاحیت های لازم را دارد و قابل اطمینان است.
FCP یک معیار اساسی سئو و یکی از مهم ترین ارکان اصول سئو سایت به حساب می آید.
در جدول زمانی بارگذاری بالا FCP در فریم دوم اتفاق می افتد، همانطور که اولین متن و عناصر تصویر به صفحه نمایش داده می شوند. خواهید دید که اگرچه برخی از مطالب ارائه شده اند اما همه آنها ارائه نشده اند. این تمایز مهمی است که می توان بین First Contentful Paint (FCP) و Largest Contentful Paint (LCP) ایجاد کرد. هدف LCP اندازه گیری زمانی است که نمایش محتوای اصلی صفحه به پایان رسید.
FCP چیست
نحوه اندازه گیری 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 شده است. با این حال در بعضی موارد این ورودی برای اندازه گیری 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 مراجعه کنید:
FCP چیست
البته در بعضی موارد (مانند iframes متقابل) اندازه گیری FCP در JavaScript امکان پذیر نیست.
راه بهبود FCP چیست
در ادامه ی پاسخ به سوال FCP چیست بد نیست بدانیم چطور می شود آن را بهبود بخشید. برای یادگیری نحوه بهبود FCP برای یک سایت خاص می توانید ممیزی عملکرد Lighthouse را انجام دهید و به هر موقعیت خاص یا تشخیصی که ممیزی پیشنهاد می دهد توجه کنید. برای یادگیری نحوه بهبود FCP به طور کلی و برای هر سایتی به نکات زیر دقت کنید:
منابع مسدود کننده رندر را حذف کنید
CSS را کم کنید
CSS استفاده نشده را حذف کنید
از قبل به مبدا مورد نیاز وصل شوید
زمان پاسخ سرور (TTFB) را کاهش دهید
از تغییر مسیرهای متعدد صفحه خودداری کنید
درخواست های کلیدی را از قبل بارگیری کنید
از حجم محتوای عظیم شبکه کم کنید
محتوای ثابت را با خط مشی کارآمد ارائه دهید
از استفاده بیش ازاندازه DOM خودداری کنید
ابعاد درخواست های مهم را به حداقل برسانید
اطمینان حاصل کنید که متن در هنگام بارگیری وب فونت قابل مشاهده دارد
تعداد درخواست ها را کم و اندازه ها را کوچک کنید
تغییرات یا CHANGELOG FCP چیست
گاهی اوقات اشکال در API های مورد استفاده برای اندازه گیری FCP معیارها را تغییر داده و اشکالات جدیدی ایجاد می کند. در نتیجه گاهی باید تغییراتی ایجاد شود و این تغییرات می تواند به عنوان بهبود یا عقبگرد در گزارشات داخلی و داشبورد شما نشان داده شود.
