FCP چیست؟
First Contentful Paint نشانگر زمان لود اولین المان گرافیکی قابل رندر صفحه است، که بهتر است زیر 900 میلی ثانیه باشد.
جهت بررسی دقیق این فاکتور در ابزار GTmetrix در بخش Video، سایت را باز کنید. بر این اساس میتوانید اِلمان FCP را بیابید. این المان در اغلب موارد یک تصویر است که برای نمایش احتیاج به فراخوانی یک منبع دارد. اما از آنجاییکه در سایتهای فارسی اغلب برای نمایش بهتر و زیباتر متنها از فونتهای Embed شده استفاده میکنیم، آنها هم نیازمند فراخوانی و اجرای منبع هستند، بنابراین لوگوی متنی، متنها و منوها هم میتوانند FCP باشند.
نکته: رندر یا Paint با لود متفاوت است. ممکن است المانی از سمت سرور لود شده باشد اما هنوز در صفحه دیده نشود. یعنی هنوز Paint نشده است.
بهطور کلی تمامی درخواستهایی که به وبسرور میرود، اگر در همان لحظه به دلیل مشغول بودن سرور، پاسخ داده نشود، بلاک میشوند و این دلیل Blocking Timeهایی است که در Waterfall میبینید. مهم است که اولویت تسکهایی که به سمت وبسرور میرود درست تعریف شود تا تسکهای مهم بدون Waiting Time انجام شوند.
روی مرورگر دکمه F12 را بزنید، به تب Network بروید تا کلیه Resourceها را ببینید. اینجا میتوانید اولویت فراخوانی منابع را مشاهده کنید. بر اساس گزارشی که از ابزار PageSpeed میگیرید، این اولویتها را تنظیم کنید و در صورت لزوم تسکها را به چندین زیر تسک تقسیم کنید.
در نظر داشته باشید که سبک بودن وب سایت الزاماً به معنای Core Web Vitals خوب نیست. این مورد دقیقا مرتبط با رندر یا paint مناسب است، خصوصا در نسخه موبایل.
برای بهبود FCP چه کارهایی انجام دهیم؟
یک ترفندی وجود دارد، یک تصویر سفید با سایز یک در یک پیکسل در ابتدای Source Code قرار دهید این کار باعث کاهش قابل توجه FCP میشود. اما این موضوع میتواند TTI و TBT را به شدت افزایش داده و به تبع آن پرفورمنس سایت کاهش زیادی پیدا کند.
باید توجه داشته باشید که تمام این فاکتورها در محاسبه پرفورمنس ضریب مشخصی دارند که با سرچ Core Web Vitals Metrics Calculator میتوانید ببینید. بنابراین مهم است که به کدام فاکتور بهای بیشتری دهید.
• روش درست این است که FCP را روی المانی بگذارید که سریعتر لود شود.
• گاهی اوقات هم مشکل اصلاً لود تصویر یا سایر اِلمانها نیست و به خاطر Render Blocking Resources عدد FCP کاهش یافته است و باید این مشکل را حل کنید.
• اولویت فراخوانی منابع را تنظیم کنید.