فهرست موضوعات در این آموزش
FCP چیست؟
گوگل در سال ۲۰۱۹، دو فاکتور اصلی را جهت سنجیدن عملکرد و سرعت سایت‌ها بررسی می‌کند که این دو آیتم FCP و FID می‌باشند. علاوه بر ابزار GTmetrix جدید و گوگل PageSpeed Insights، در آپدیت جدید گوگل سرچ کنسول نیز بخش جدیدی تحت عنوان Speed تعریف شده که در آن به بررسی فاکتور FCP در سایت شما می‌پردازد. در میان ابزارهای تست سرعت سایت، گوگل سرچ کنسول آمار دقیق‌تری را برای FCP ارائه می‌دهد؛ چرا که سرعت سایت شما در این بخش را از طریق رفتار تمامی کاربران واقعی از سراسر دنیا جمع آوری می‌کند و عدد آن ممکن است با اعدادی که سایر ابزارهای تست سرعت نشان می‌دهند متفاوت باشد.
FCP یا First Contentful Paint یکی از معیارهای اندازه گیری سرعت سایت بر اساس تجربه کاربر می‌باشد که به معنی مدت زمانی است که طول می‌کشد تا اولین المنت محتوایی در صفحه سایت شما لود شود. Contentful Paint به عناصر محتوایی غیر سفید در صفحه سایت مانند متن، عکس، لوگو و… گفته می‌شود. FCP در سایت‌های رایج معمولا عنوان صفحه، تصویر پس زمینه یا یک عکس اصلی می‌باشد.
FCP چگونه کاهش پیدا می کند؟
اگر می‌خواهید سایت شما در صفحه اول گوگل قرار بگیرد، باید روی سرعت بارگذاری آن نیز کار بکنید. کمپانی گوگل اعلام کرده که در سال‌های اخیر، یکی از اصلی‌ترین فاکتورهای رتبه‌بندی سایت‌ها در این موتور جستجو، سرعت سایت می‌باشد. ما در سئو ایران سعی بر این داشته‌ایم تا کامل‌ترین مجموعه مقالات سرعت سایت مثل همین fcp یکی از اصطلاحات سئو را در اختیار شما قرار دهیم تا بتوانید اطلاعات جامع و به روزی را در این مورد به دست آورید.
اگر بارگذاری صفحات سایت شما کند باشد، بسیاری از بازدید کنندگان آن را از دست خواهید داد؛ چرا که نسل جدید کاربران گوگل با افزایش کیفیت سایت‌های جدید، به دنبال سریع‌ترین نتایج در پاسخ به نیاز خود می‌باشند. در صورتی که سایت شما نتواند پاسخی سریع به جستجو و نیاز کاربر بدهد، کاربر سایت شما را ترک کرده و سایت‌های رقیب شما در این مسیر پیروز میدان خواهند شد. در واقع در سئو سایت برگ برنده در دست سایت‌هایی می‌باشد که بهترین تجربه کاربری از لحاظ سرعت لود، ظاهر، سطح دسترسی، محتوا و عملکرد سایت را در اختیار بازدید کنندگان خود قرار دهند.
موارد زیادی در سرعت بارگذاری صفحات سایت تاثیر گذار هستند که به کمک ابزارهای تست سرعت سایت می‌توانید آن‌ها را بررسی کنید. در معروف‌ترین این ابزارها مانند GTmetrix، Google PageSpeed Insights، Google LightHouse و… فاکتورهای مختلفی جهت آنالیز سرعت سایت شما تعریف شده است که همه آن‌ها به نوعی در مجموع نمره‌ای که سایت شما در این خصوص می‌گیرد، تاثیر می‌گذارند. یکی از معروف‌ترین فاکتورهای سنجش سرعت سایت در این ابزارها، FCP می‌باشد. با توجه به این که در میان منابع داخلی هیچ مقاله شفاف و کاملی در خصوص این فاکتور پیدا نکردیم، تصمیم بر این داریم تا در این مقاله برای شما به معرفی کامل FCP پرداخته و راه‌های کاهش دادن آن را بررسی کنیم.
بهترین عدد FCP چند است؟
بهترین عدد FCP
برای این که سایت شما از نظر گوگل یک سایت پر سرعت شناخته شود، حداکثر ۱ ثانیه برای First Contentful Paint در صفحه سایت خود زمان دارید. اگر این زمان بین ۱ الی ۳ ثانیه باشد سایت شما نمره متوسط و اگر بیشتر از ۳ ثانیه طول بکشد، سایت شما به عنوان یک سایت کند توسط گوگل جریمه خواهد شد. بنابراین با توجه به توضیحاتی که داده شد، بهترین عدد FCP نهایتا ۱ ثانیه می‌باشد تا سایت شما یکی از مهم‌ترین معیارهای کیفیتی را برای سرعت سایت به دست بیاورد. البته در ادامه این مقاله راهکارهایی برای کاهش FCP را به شما آموزش خواهیم داد. برای اندازه گیری First Contentful Paint می‌توانید از ابزارهای زیر استفاده کنید:
- Gtmetrix
- Google PageSpeed Insights
- Google LightHouse
- افزونه DevTools در گوگل کروم
- Webpage Test
- افزونه User Experience Report در گوگل کروم
- نسخه بتا ابزار Firebase Performance Monitoring
روش های کاهش FCP
روش های کاهش FCP
کاهش دادن TTFB
TTFB یکی از اصطلاحات سئو و در اصل مخفف شده‌ی واژه‌ی Time to First Byte می‌باشد که به معنای مدت زمان پاسخگویی سرور در ازای دریافت اولین بایت از محتوای صفحه شما می‌باشد. TTFB یکی از مهم‌ترین عوامل تاثیرگذار در FCP سایت شما می‌باشد. بنابراین نباید به سادگی از آن عبور کنید. اصلی‌ترین دلیل بالا بودن مدت زمان پاسخگویی سرور به درخواست‌های موجود در صفحه، به روز نبودن قالب سایت و افزونه‌های آن می‌باشد. سایر روش‌هایی که می‌توانید برای بهبودTTFB استفاده کنید عبارتند از: استفاده از هاست پر سرعت، فعال کردن سیستم caching برای سایت، بکارگیری CDN (برای آشنایی با این مورد می‌توانید به مقاله CDN چیست مراجعه کنید)
از بین بردن عوامل اصلی Render Blocking در صفحه
یکی دیگر از راه های افزایش سرعت سایت در این بخش، شناسایی و حذف عوامل موثر در Render Blocking می‌باشد که اکثر کدهای CSS و جاوا اسکریپت می‌باشند. اگر سایت شما وردپرس باشد، افزونه WP Rocket تا حد زیادی به شما در ان بخش کمک خواهد کرد و بسیاری از عوامل Render Blocking را حذف کرده و کدهای مهم را inline می‌کند. از دیگر کارهایی که می‌توانید برای کاهش Render Blocking انجام دهید، اضافه کردن کد defer به ابتدای URL اسکریپت‌های غیر ضروری جهت به تعویق انداختن آن‌ها در رندر صفحه می‌باشد.
Inline کردن CSSهای مهم
از مهم‌ترین گام‌ها در کاهش FCP حذف خطوط و فضاهای خالی در کدهای CSS و تک خطی کردن آن‌ها می‌باشد که همان طور که گفته شد، افزونه WP Rocket این کار را در سایت‌های وردپرس انجام می‌دهد. ابزار Pegasaas نیز به طور رایگان به شما در این امر کمک خواهد کرد. پس از Inline کردن خطوط CSSهای مهم، آن را مستقیما داخل فایل HTML وارد کنید.
بهینه سازی کدهای جاوا اسکریپت
کدهای جاوا اسکریپت می‌توانند تا حد زیادی مدت زمان FCP را افزایش دهند؛ بنابراین باید استفاده از این کدها را به حداقل برسانید و جاوا اسکریپت‌های ضروری را نیز Inline کنید. از مهم‌ترین نمونه‌های جاوا اسکریپت که موجب افزایش FCP در سایت شما می‌شوند عبارتند از: انواع اسلایدر، انیمیشن، افزونه‌های اشتراک در شبکه‌های اجتماعی، مگا منو و…
عدم استفاده از Lazy Load
قابلیت Lazy Load یا بارگذاری تنبل تصاویر سایت در مجموع باعث افزایش سرعت لود سایت شما می‌شود اما اکثر افزونه‌هایی که Lazy Load را برای تصاویر سایت شما فعال می‌کنند، معمولا از اسکریپتی استفاده می‌کنند که می‌تواند FCP سایت شما را (اگر از نوع تصویر باشد) افزایش دهد. البته یکی دیگر از مزایای افزونه WP Rocket در وردپرس امکان فعال‌سازی یا غیر فعال کردن گزینه Lazy Load برای شما می‌باشد.
