خرید گوشی اورجینال تصویر بنر
سئو وردپرس

وردپرس تم | جلسه ۶ – First Contentful Paint چیست + بهبود آن

وردپرس تم | جلسه ۶ – First Contentful Paint چیست + بهبود آن

در این آموزش قصد داریم به زبان ساده بگیم First Contentful Paint یا FCP داخل ابزار Gtmetrix چیست و با این خطا چه کنیم؟ چطور بهبود بدیم؟ آیا این خطا هست؟

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

در مقاله قبلی درباره نحوه Cumulative Layout Shift چیست و چطور بهینه کنیم صحبت کردیم، و اما فاکتور FCP، فاکتور First Contentful Paint در ابتدا توسط گوگل داخل Lighthouse Google بود و بعد از مدتی ابزار Gtmetrix هم این مورد رو جزء فاکتورهاش در نظر گرفت. کلا گوگل هر کاری کنه بقیه چه بخوان چه نخوان تابع اون رفتار میکنن.

نکته قابل توجه این هست که دیگه مثل گذشته فاکتورهای سرعت ساده نیست و برای حل کردن خیلی از این فاکتورهای سئو نیاز به تخصص بالا (در زمینه برنامه نویسی و سئو و گاهی UX) هست و صرفا با خوندن چند مقاله فارسی و خارجی کار خاصی نمیشه کرد. اینو ابتدا گفتم تا یک وقت انتظار زیادی از خودمون یا مقاله نداشته باشیم 😉

سرفصل‌های پست

    • 0.1 First Contentful Paint چیست؟
      • 0.1.1 به جز GTMetrix کجا FCP هست؟
      • 0.1.2 سهم First Contentful Paint در گزارش Performance
      • 0.1.3 مقدار FCP چقدر باشه خوبه؟
    • 0.2 چطوری FCP یا First Contentful Paint رو بهینه کنیم؟
    • 0.3 جمع بندی First Contentful Paint
  • 1 لیست آموزش های جدید GTmetrix:

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 Contentful Paint چیست
First Contentful Paint در GTMetrix

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

FCP در GTmetrix
تفاوت First Paint و FCP از نگاه سایت GTmetrix (منبع عکس)

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

First Contentful Paint چیست
مثالی از First Contentful Paint در گوگل

در فریم دوم همه محتواهای سایت پردازش و نمایش داده نشده و وقتی زمان نمایش اولین محتوا تا همه محتواها را محاسبه کنیم انگار وسط دو معیار 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 میزفا دنبال کنید. و یا اگر به سئو فنی علاقه دارید مباحث سئو فنی و تکنیکال رو دنبال کنید.

نویسنده مقاله: پوریا آریافر / متخصص و مشاوره سئو

وردپرس تم | جلسه ۶ – First Contentful Paint چیست + بهبود آن

لینک منبع

هیچ کالایی را بدون تخفیف نخرید تصویر بنر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا