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

FCP چست و چطور امتیاز آن را بهبود بدیم؟

First Contentful Paint چیست

در این آموزش قصد داریم به زبان ساده بگیم 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 Contentful Paint چیست
First Contentful Paint در GTMetrix

تفاوت First Paint و First Contentful Paint (همونطور که از اسمشون هم پیداست) تو نمایش محتوا (Content) هست. در واقع FCP (مخفف First Contentful Paint) زمانیه که اولین محتوا در صفحه نمایش داده میشه. محتوا می‌تونه از جنس متن، عکس، ویدئو، یا المان‌های <svg> یا <canvas> باشه و… باشه. پس در این لحظه، کاربر حتما محتوایی رو در صفحه می‌بینه و خیالش راحت میشه که صفحه در حال لود شدنه. پس معیار 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 یک خطا نیست، اگر زمان سایت شما در این معیار بالا باشه نشان دهنده مجموعه‌ای از مشکلات سرعت سایت هست که در این حالت باید تک تک موارد و فاکتورهای زیر بررسی کنید و بعد به رفع اونا اقدام کنید.

جمع بندی First Contentful Paint

First Contentful Paint چیست؟ معیار First Contentful Paint که به صورت مخفف گفته میشه FCP ، زمانی رو مشخص می‌کنه که اولین محتوای صفحه به کاربر نمایش داده میشه. این معیار ۱۵٪ از امتیاز Performance رو تشکیل میده.

برای بهبود FCP باید یک سری مجموعه فاکتورهای مهم رو بررسی کنید که این فاکتورها کم کم ۱۰ مورد هست و در بالا اشاره کردیم، به عبارت دیگر بهبود و بهینه سازی فاکتور FCP با دادن یک کد حل نمیشه و ساده نیست.

در اخر پیشنهاد میشه برای بهتر نتیجه گرفتن از یک مـتخصص سئو یا هر کسی که بهش اعتماد دارید و دانش داره کمک بگیرید. همینطور می‌تونید در نظرات سایت میزفا سوالی داشتید بپرسید.

حتما آموزش های مربوط به رفع خطاهای gtmetrix میزفا دنبال کنید. و یا اگر به سئو فنی علاقه دارید مباحث سئو فنی و تکنیکال رو دنبال کنید.

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

فیلم آموزشی افزایش سرعت سایت با gtmetrix
فیلم آموزشی افزایش سرعت سایت با gtmetrix
پوریا آریافر
اولین کسب و کار آنلاین خودم رو در فیسبوک راه‌اندازی کردم، سال ۲۰۱۱ یکی از پرتعامل‌ترین صفحات فارسی با ۸۰ هزار فالور فعال رو داشتم. بعد اینکه فیسبوک خالی از کاربر ایرانی شد وارد دنیای شبکه شدم و در انتهای سال ۲۰۱۲ مدرک MCSE مایکروسافت رو دریافت کردم، در حالی که نمره بالا گرفتم ولی کسی به دلیل به خطر افتادن موقعیت شغلی خودش به عنوان کارآموز منو قبول نمی‌کرد، بعدش با شروع دوران خدمت سربازی، مسئول بهینه سازی یک سایت خبری معتبر شدم و سئو یاد گرفتم. در ابتدای سال ۲۰۱۴ تونستم از رتبه ۱۵۰۰۰ به ۴۰۰ الکسا نزدیک کنم، اون زمان الکسا خیلی مهم بود. وارد دانشگاه شدم، به دلیل عدم علاقه به دانشگاه سعی کردم زودتر تمومش کنم و سه ساله در مقطع کارشناسی IT فارغ التحصیل شدم، توی دانشگاه هر کسی منو میدید یاد سئو میوفتاد، در همون سال آخر دانشگاه بزرگ‌ترین کانال تلگرامی IT با ۴۰ هزار عضو رو داشتم، که به مجتمع فنی فروختم تا بتونم تمرکز رو فقط بر روی عشق خودم یعنی سئو بذارم، وقتی کانال تلگرام فروختم حس پرواز بهم دست داد، هرچند درآمد چندین میلیون ماهانه رو از دست دادم ولی دوباره باید مثل گذشته با پوستی نو یک فصلی نو رو میساختم. در این چندین سال فعالیت‌های سئو به شکل تخصصی بنده در قالب پروژه‌های مختلف و آموزش‌های حضوری و غیرحضوری در دفتر میزفا و دانشگاه علامه طباطبایی تهران صورت ‌گرفته، تجربه بهینه سازی موفقی در بهبود UX و CRO پروژه‌های سئو کسب کردم. در اکثر ابزارهای کاربردی گوگل تسلط کاملی دارم. عاشق کسب تجربه های جدید هستم. راز پیشرفت در هر کاری رو یادگیری و یاددادن می‌دونم و میزفا که در اواخر ۲۰۱۶ راه‌اندازی شد تونست چنین بستر مناسبی رو برام فراهم کنه. همینطور در حال حاضر مدیریت یک تیم ۱۰ نفری از جوانان فعال و پرانگیزه رو در میزفا به عهده دارم. نقد و بازخوردهای سازنده شما، جوهر تلاش‌های مستمر ماست تا یک قدم خودمون بهبود بدیم. منتظریم …
لیست آموزش GTmetrix نسخه جدید

6 نظر

6 پاسخ

  1. سلام. ممنون بابت توضیحات خوبتون . با اینکه خیلی از این موارد رو میدونستم با این حال نکات ریز جالبی هم در این مقاله و هم در مقالات دیگه شما وجود داشت .
    یکی از موارد مهمی که برای fcp تعیین کردین. زمان پاسخ سرور هست. شما برای هاست لینوکسی چه شرکتی رو پیشنهاد میدین که سرور مناسبی داشته باشه ؟

  2. سلاموقتتون بخیر
    ببخشید خوشحال میشم برای بهتر بهینه کردن عکس زیر راهنمای کنین

    1. سلام
      وقت به خیر
      هرچند تحلیل این نمودار برای نظر دادن کافی نیست و باید اطلاعات بیشتری داشته باشیم؛ اما طبق این اطلاعاتی که ما داریم می‌بینیم، صفحه شما داره به خوبی لود میشه. معیارهای TTFB و TTI و TBT که عالی هستند، LCP هم وضعیت خوبی داره. پیشنهاد می‌کنم روی بهینه سازی FCP تمرکز کنید که دقیقا توی همین مقاله راه حل‌های ممکن براش ارائه شده.
      موفق باشید

  3. با سلام. آیا باید زمان بین FCP و LCP را کاهش دهیم؟ و علت آن چیست؟
    باتشکر

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

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=