خطای First contentful paint
تاریخ انتشار : آموزش افزایش سرعت سایت

خطای FCP یا First Contentful Paint چیست و چطور رفع کنیم

 افزایش سرعت سایت با رفع خطای First Contentful Paint

در اوایل سال 2019 میلادی کمپانی گوگل اعلام کرد که برای تعیین سرعت سایت‌ها و رتبه‌بندی‌ اون‌ها دو معیار First contentful paint یا FCP و First Input Delay یا FID رو مورد بررسی قرار می‌ده. مدتی بعد معیارهای دیگری هم مثل ارور CLS و LCP به این معیارها اضافه شدن. با این حال معیار FCP همچنان یکی از مهم‌ترین معیارهای گوگل برای رتبه‌بندی سایت‌ها از نظر سرعته و 10 درصد از کل نمره رو به خودش اختصاص داده. اما این معیار چه چیزی رو اندازه‌گیری می‌کنه؟ خطای First contentful paint چیه؟ از همه‌ مهم‌تر چطور این خطا رو رفع کنیم؟ برای دریافت پاسخ این سوال‌ها با ما در این مطلب همراه باشید.

خطای First contentful paint

معیار First contentful paint چیست؟

پارامتر زمانی First contentful paint یا FCP یک معیار کاربرمحور برای اندازه‌گیری سرعت بارگذاری صفحات سایته. FCP به جای این‌که بر داده‌های ابزارهای تست سرعت تکیه کنه، نحوه درک کاربران از عملکرد وب‌سایت رو اندازه‌گیری می‌کنه. در واقع معیار FCP نشون‌دهنده زمانیه که می‌گذره تا اولین عناصر بر روی صفحه بعد از کلیک کردن روی لینک پدیدار بشن. این معیار سرعت و شیوه بارگیری عناصری مثل تصاویر، آیکون‌ها و هر نوع فایل دیگه رو که به تدریج، سفیدی صفحه رو پر می‌کنن، اندازه‌گیری می‌کنه. (سایر معیارهای اندازه گیری سرعت سایت رو میتونید در دسته آموزش افزایش سرعت سایت مطالعه کنید.)

شیوه و ابزارهای اندازه‌گیری و تشخیص خطای First contentful paint

نمایش خطای FCP به کمک ابزار واکاوی صفحه میزفا تولز
عکس بالا پنل کاربری میزفا تولز هست و گزارش سرعت سایت رو نمایش میده

معیار First contentful paint رو می‌شه از طریق ابزارهای گوناگون تست سرعت و بررسی پارامترهای سایت و هم با استفاده از تجربیات واقعی افراد و داده‌های بررسی میدانی اندازه‌گیری کرد. برخی از ابزارهای اندازه‌گیری این معیار تشخیص خطای First contentful paint رو با هم مرور می‌کنیم: 

ابزارهای برتر در این زمینه:

نام ابزارسایتزبانمکان سرور برای بررسیرایگان یا پولی
واکاوی صفحهمیزفا تولزفارسیایران و امریکارایگان
PageSpeed insightsگوگلانگلیسیامریکارایگان
gtmetrixجی تی متریکسانگلیسیکانادا و امریکارایگان

سایز ابزارهای سرعت سایت:

ابزار Lighthouse
ابزار WebPageTest 
ابزار Chrome DevTools 
ابزار Chrome User Experience Report 
ابزار Firebase Performance Monitoring نسخه بتا

 

خطای First contentful paint

چه رقمی نشان‌دهنده خطای First contentful paint است

بر اساس نظر کمپانی گوگل، معیار FCP باید کمتر از 1.8 ثانیه باشه. با این حال برخی کارشناسان سئو، ترجیح می‌دن این نمره رو تا 1.3 پایین بیارن و این نمره رو حدی برای خوب بودن FCP بدونن. این یعنی در صورتی که نمره FCP شما بالاتر از این حد باشه با خطای First contentful paint مواجه هستیم یا به بیان دیگه باید FCP رو بهینه‌سازی کنیم. همچنین در صورتی‌که زمانی لود شدن عناصر بصری سایت به بیش از 3 ثانیه برسه، پارامتر زمانی FCP سایت شما بسیار ضعیفه.

راهکارهای رفع خطای First contentful paint

با توجه به تمرکز FCP بر لود شدن عناصر بصری در سایت می‌تونیم انتظار داشته باشیم کاهش حجم و یا تعداد این عناصر می‌تونه باعث بهینه‌سازی این معیار و رفع خطای اون بشه. از طرف دیگه نوع سیستم مدیریت محتوا و سرور هم نقش پررنگی در تعیین نمره این معیار دارن. در ادامه با برخی از راهکارهای رفع خطای First contentful paint آشنا می‌شیم.

First contentful paint3.jpg

کاهش زمان پاسخگویی سرور

زمان پاسخ سرور یا TTFB زمانیه که مرورگر برای دریافت اولین بایت محتوای صفحه وب صرف می‌کنه. اگرچه FCP به موارد متنوع دیگری هم بستگی داره اما کاهش TTFB اولین قدم برای بهینه‌سازی اونه. روش‌های گوناگونی برای کاهش زمان پاسخگویی سرور وجود دارن که برخی از اون‌ها عبارتند از: 
• انتخاب یک میزبان وب با سرعت بالا 
• استفاده از یک CDN با کیفیت (شبکه توزیع محتوا با امکان توزیع محتوا در چند سرور ابری)

حذف منابعی که عاملی برای مسدود شدن رندر هستند

یک صفحه وب بعد از کنار هم قرار دادن بسیاری از عناصر مثل HTML، شیوه‌نامه‌های CSS، اسکریپت‌های جاوا و ... توسط مرورگر قابل ارائه به مخاطب می‌شه. یک سند HTML خودش شامل تگ‌های مختلفه، اما همه اون‌ها به سرعت توسط اکثر مرورگرها آنالیز می‌شن. اما در مورد CSS و JS اینطور نیست. چون حجم این این فایل‌ها معمولا از اسناد HTML بیشتره. 
بنابراین، وقتی کاربر برای یک صفحه وب درخواست می‌کنه، مرورگر، محتوای HTML رو قبلا دریافت کرده، اما همچنان منتظر بارگذاری سایر منابع قبل از رندر کردن صفحه‌اس. به‌همین دلیل، این منابع، مسدودکننده رندر نامیده می‌شن. بنابراین برای بهبود تجربه کاربری و رفع خطای First contentful paint تلاش کنید تا بعضی از این منابع رو که غیر ضروری هستن، حذف کنید.

ایجاد CSS Critical Path

اگه CSS رو برای بارگیری ناهمزمان تنظیم کرده باشین، مرورگر، محتوای بدون استایل رو قبل از بارگیری استایل‌های مورد نیاز به کاربران نشون می‌ده. این رفتار به‌عنوان خطای Flash of Unstyled Content یا FOUC شناخته می‌شه و تجربه ناخوشایندی رو برای کاربران ایجاد می‌کنه. برای جلوگیری از خطای FOUC، باید CSS Critical Path را ایجاد کنید و اون را مستقیما در فایل HTML خودتون قرار بدید. 
اما Critical Path CSS دقیقا چیه؟ CSS Critical Path حداقل CSS لازم برای نمایش اولین قسمت از یک صفحه وب به کاربره. تولید CSS Critical Path یک فرآیند تخصصی با توضیحات طولانیه با این حال افراد متخصص این کار رو برای شما انجام می‌دن. البته ابزارهای رایگانی هم برای انجام این کار بدون دانش تخصصی وجود دارن که از جمله اون‌ها می‌شه به Pegasaas اشاره کرد.

از قرار دادن عناصر مبتنی‌بر اسکریپت در بالای صفحه بپرهیزید

مهم نیست که چقدر خوب جاوا اسکریپت رو بهینه‌سازی کنید، باز هم در مقایسه با پردازش HTML کند عمل می‌کنه. در واقع هر چیزی که به JS نیاز داشته باشه می‌تونه تاثیر منفی بر FCP داشته باشه و وقتی صحبت از بهبود FCP می‌شه، هر میلی‌ثانیه اهمیت داره. برای مثال توجه داشته باشید که بسیاری از تم‌ها شامل عناصر فانتزی در بالای صفحه هستن که از اسکریپت‌های زیادی استفاده می‌کنن و می‌تونن باعث بروز خطای FCP بشن. همچنین از قرار دادن عناصری مثل انیمیشن‌های سنگین و پلاگین‌های اسلایدر در بالای صفحه خودداری کنید.

First contentful paint15.jpg

بهبود تجربه کاربری با رفع خطای First Contentful Paint

رفع خطای First Contentful Paint و کاهش زمان این معیار، دیگه یک انتخاب نیست بلکه یک ضرورته. این اقدام در کنار بهینه‌سازی معیارهای دیگر گوگل برای رتبه‌بندی صفحات، در کمترین حالت، باعث بهبود تجربه کاربری می‌شه. راستی! توجه داشته باشید که گوگل در حال تدوین معیارهای دیگری در این زمینه‌اس که از جمله اون‌ها می‌تونیم به First Meaningful Paint یا FMP اشاره کنیم. 
برخلاف FCP که زمان رندر برای هر محتوا رو اندازه‌گیری می‌کنه، FMP فقط بعد از بارگیری محتوای مورد نظر کاربر (مثل سرفصل‌ها، تصاویر و متن اصلی) فعال می‌شه. بنابراین سعی کنید با بهینه‌سازی معیارهای فعلی و رفع خطای اون‌ها از قافله عقب نمونید و آماده باشید تا معیارهای جدید از راه برسن. شما همچنین می‌تونید برای دریافت خدمات حرفه‌ای در زمینه آنالیز سایت و بهبود سئو از ابزار سئو فارسی میزفا تولز با امکانات فراوان استفاده کنید. 
 

مشارکت کنندگان در این مقاله

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

... نمایش بیشتر
پوریا آریافر
متخصص سئو

متخصص تولید محتوا در سایت میزفا تولز

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