در این آموزش قصد داریم به زبان ساده بگیم First Contentful Paint یا FCP داخل ابزار Gtmetrix چیست و با این خطا چه کنیم؟ چطور بهبود بدیم؟ آیا این خطا هست؟
نویسنده این مقاله من پوریا آریافر از میزفا هستم، این یک مقاله ترجمه از سایر سایتها نیست، سعی کردیم از دانش و تجربه ی که خودمون داشتیم به همراه یک سری سایتهای معتبر یک مقاله خوب رو برای شما جمع آوری کنیم. خوشحال میشیم همراهمون باشید.
در مقاله قبلی درباره نحوه Cumulative Layout Shift چیست و چطور بهینه کنیم صحبت کردیم، و اما فاکتور FCP، فاکتور First Contentful Paint در ابتدا توسط گوگل داخل Lighthouse Google بود و بعد از مدتی ابزار Gtmetrix هم این مورد رو جزء فاکتورهاش در نظر گرفت. کلا گوگل هر کاری کنه بقیه چه بخوان چه نخوان تابع اون رفتار میکنن.
نکته قابل توجه این هست که دیگه مثل گذشته فاکتورهای سرعت ساده نیست و برای حل کردن خیلی از این فاکتورهای سئو نیاز به تخصص بالا (در زمینه برنامه نویسی و سئو و گاهی UX) هست و صرفا با خوندن چند مقاله فارسی و خارجی کار خاصی نمیشه کرد. اینو ابتدا گفتم تا یک وقت انتظار زیادی از خودمون یا مقاله نداشته باشیم 😉
سرفصلهای پست
First Contentful Paint چیست؟
اگر به اولین پارامتر گزارش Performance در gtmetrix نگاه کنید، معیار First Contentful Paint هست. برای اینکه مفهوم First Contentful Paint یا FCP رو بهتر درک کنید، باید اول تعریفی از First Paint بهتون بگم.
معیار First Paint که از سالها پیش در GTmetrix و بعضی دیگه از ابزارهای تست سرعت سایت موجود بوده، بیان کننده زمان اولین رندر (Render) در صفحه توسط مرورگره. بهعبارت سادهتر، First Paint زمانی هست که اولین تغییر در صفحه ایجاد میشه و ممکنه کاربر بتونه اون رو ببینه. بله، ممکنه. چرا که شاید First Paint یه صفحه فقط شامل ایجاد رنگ پسزمینه اون صفحه باشه و این رنگ برای کاربر قابل تشخیص نباشه. پس توسعه دهندگان وب به این نتیجه رسیدن که First Paint معیار خیلی خوبی برای بررسی سرعت و البته میزان رضایت کاربران نیست و معیار جدیدی به نام First Contentful Paint رو در نظر گرفتن.

تفاوت First Paint و First Contentful Paint (همونطور که از اسمشون هم پیداست) تو نمایش محتوا (Content) هست. در واقع FCP (مخفف First Contentful Paint) زمانیه که اولین محتوا در صفحه نمایش داده میشه. محتوا میتونه از جنس متن، عکس، ویدئو، یا المانهای <svg>
یا <canvas>
باشه و… باشه. پس در این لحظه، کاربر حتما محتوایی رو در صفحه میبینه و خیالش راحت میشه که صفحه در حال لود شدنه. پس معیار FCP تمرکز بیشتری بر UX یا تجربه کاربری داره. البته این معیار هم از سال ۲۰۱۷ در ابزار GTmetrix وجود داشته و جدید نیست.
سایت GTmetrix تو این عکس تفاوت First Paint و FCP رو به خوبی نشون داده.

بهتره یک مثال واقعی و خوب بزنیم.
در گوگل و صفحه اصلی آن سرچ کنیم Larry Page و در فریم دوم باکس سرچ گوگل نمایش داده بشه یعنی FCP رخ داده. در فریم دوم هست که یک Content ایجاد شده، درواقع همان باکس سرچ هست.

در فریم دوم همه محتواهای سایت پردازش و نمایش داده نشده و وقتی زمان نمایش اولین محتوا تا همه محتواها را محاسبه کنیم انگار وسط دو معیار FCP و LCP رو در نظر گرفتیم.
به جز GTMetrix کجا FCP هست؟
FCP تقریبا همه جا هست، در آموزش سرچ کنسول هم اشاره شده، شما میتونید این معیار رو در PageSpeed Insights گوگل، Lighthouse گوگل و همینطور گزارش Core Web Vitals سرچ کنسول مشاهده کنی.
سهم First Contentful Paint در گزارش Performance
یادمون نره هدف ابزارهای بررسی سرعت سایت مثل GTmetrix اینه که به ما کمک کنن تا تجربه کاربری بهتری رو ایجاد کنیم. بنابراین معیار FCP مستقیما روی نمره Performance در GTmetrix جدید تاثیر داره و ۱۵٪ از امتیاز Performance مربوط به FCP هست.
مقدار FCP چقدر باشه خوبه؟
درباره اینکه مقدار مناسب FCP باید چقدر باشه، سایت GTmetrix تقسیم بندی زیر رو ارائه کرده:
- کمتر از ۰.۹ ثانیه : خوب
- بین ۰.۹ تا ۱.۲ ثانیه: قابل قبول، اما نیازمند بهینه سازی
- بین ۱.۳ تا ۱.۶ ثانیه: کمی طولانیتر از حد استاندارد
- بیشتر از ۱.۶ ثانیه: خیلی طولانیتر از حد استاندارد
چطوری FCP یا First Contentful Paint رو بهینه کنیم؟
کاش میتونستیم یک کد جادویی توی این مقاله میزفا به شما بدیم و اون رو در هاست قرار میدادید و سرعت سایتتون زیر ۰.۹ ثانیه میشد ولی خب به راحتی نمیشه و این جور کدها مثل قدیم دیگه نداریم. FCP یا همون First Contentful Paint یک خطا نیست، اگر زمان سایت شما در این معیار بالا باشه نشان دهنده مجموعهای از مشکلات سرعت سایت هست که در این حالت باید تک تک موارد و فاکتورهای زیر بررسی کنید و بعد به رفع اونا اقدام کنید.
- کاهش زمان پاسخ اولیه سرور – Reduce server response times (TTFB)
- استفاده از CDN با تنظیمات صحیح – Using a Content Delivery Network (CDN)
- استفاده صحیح از کش – Serve static assets with an efficient cache policy
- جلوگیری از ریدایرکت های پیاپی – Avoid multiple page redirects
- استفاده از preconnect و dns-prefetch در سرویسهای شخص ثالث – Preconnect to required origins
- فشرده کردن فایل های سی اس اس – Minify CSS
- پاک کردن سی اس اس غیرقابل استفاده – Remove unused CSS
- استفاده از
rel="preload"
در منابع مثل جی اس، سی اس اس یا فونت ها – Preload key requests - پرهیز از صفحات طولانی با دادههای سنگین (خود این مورد یک مقاله طولانی میشه) – Avoid enormous network payloads
- تعداد CSS و JS های پشت سر هم کم کنید – Minimize critical request depth
- استفاده از font-display در فونت ها – Ensure text remains visible during webfont load
- حذف منابعی که از باعث ایجاد وقفه یا توقف در Render میشن – Eliminate render-blocking resources
- هر چی DOM صفحه سنگین تر باشه صفحه کند تره، مباحث JS هست – Avoid an excessive DOM size
- حجم و تعداد فایل ها رو کم نگه دارید مثل خطای optimize images (خود این مورد یک مقاله طولانی میشه) – Keep request counts low and transfer sizes small
- زمان FCP تا حد زیادی به کیفیت فنی سرور شما و کدنویسیهای انجام شده در سایتتون بستگی داره. بهترین هاست رو تهیه کنید و بدونید که که آیا هاست ایران خوبه براتون یا هاست خارج.
جمع بندی First Contentful Paint
First Contentful Paint چیست؟ معیار First Contentful Paint که به صورت مخفف گفته میشه FCP ، زمانی رو مشخص میکنه که اولین محتوای صفحه به کاربر نمایش داده میشه. این معیار ۱۵٪ از امتیاز Performance رو تشکیل میده.
برای بهبود FCP باید یک سری مجموعه فاکتورهای مهم رو بررسی کنید که این فاکتورها کم کم ۱۰ مورد هست و در بالا اشاره کردیم، به عبارت دیگر بهبود و بهینه سازی فاکتور FCP با دادن یک کد حل نمیشه و ساده نیست.
در اخر پیشنهاد میشه برای بهتر نتیجه گرفتن از یک مـتخصص سئو یا هر کسی که بهش اعتماد دارید و دانش داره کمک بگیرید. همینطور میتونید در نظرات سایت میزفا سوالی داشتید بپرسید.
حتما آموزش های مربوط به رفع خطاهای gtmetrix میزفا دنبال کنید. و یا اگر به سئو فنی علاقه دارید مباحث سئو فنی و تکنیکال رو دنبال کنید.
نویسنده مقاله: پوریا آریافر / متخصص و مشاوره سئو
6 پاسخ
سلام. ممنون بابت توضیحات خوبتون . با اینکه خیلی از این موارد رو میدونستم با این حال نکات ریز جالبی هم در این مقاله و هم در مقالات دیگه شما وجود داشت .
یکی از موارد مهمی که برای fcp تعیین کردین. زمان پاسخ سرور هست. شما برای هاست لینوکسی چه شرکتی رو پیشنهاد میدین که سرور مناسبی داشته باشه ؟
درود بر شما
هاست دی ال.
سلاموقتتون بخیر
ببخشید خوشحال میشم برای بهتر بهینه کردن عکس زیر راهنمای کنین
سلام
وقت به خیر
هرچند تحلیل این نمودار برای نظر دادن کافی نیست و باید اطلاعات بیشتری داشته باشیم؛ اما طبق این اطلاعاتی که ما داریم میبینیم، صفحه شما داره به خوبی لود میشه. معیارهای TTFB و TTI و TBT که عالی هستند، LCP هم وضعیت خوبی داره. پیشنهاد میکنم روی بهینه سازی FCP تمرکز کنید که دقیقا توی همین مقاله راه حلهای ممکن براش ارائه شده.
موفق باشید
با سلام. آیا باید زمان بین FCP و LCP را کاهش دهیم؟ و علت آن چیست؟
باتشکر
سلام محمد. بله طبیعتا باید کاهش بدی و برای کاهش باید هم این مقاله رو بخونی تا بتونی FCP کاهش بدی و هم باید مقاله LCP بخونی و کاهش بدی.