آموزش بهینه سازی فاکتور FCP (جهت بهبود سرعت سایت)

First Contentful Paint (FCP) در اصل یک معیار عملکرد وب به حساب می آید که مدت زمانی را که طول می کشد تا اولین المنت یا بخش از یک صفحه سایت در مرورگز کاربر نمایش داده شود و قابل مشاهده باشد را اندازه گیری می کند. هر چند فاکتور FCP یک معیار از Core Web Vitals به شمار نمی رود، اما اگر به تجربه کاربری وب سایت خود اهمیت می دهید، نباید آن را نادیده بگیرید. چرا؟ به این خاطر که فاکتور FCP اگر در سایت شما سریع باشد، به این معنی خواهد بود که محتوای وب سایت شما با سرعت بالایی برای کاربرها بارگذاری خواهد شد و این به رضایت آنها از سایت کمک زیادی خواهد کرد و این خود آنها را مشتاق خواهد کرد از بخش های بیشتری از سایتتان دیدن کنند.

در این مقاله قصد داریم به شما توضیح دهیم که فاکتور FCP چیست؟ و راه های بهینه سازی فاکتور FCP را به شما توضیح دهیم تا بتوانید سرعت وب سایتتان را بهبود بخشید.

First Contentful Paint یا FCP چیست؟

فاکتور FCP یک ابزار سنجش کاربر محور بوده که زمان لازم برای ارائه اولین بخش سایت در صفحه ای که برای کاربر در حال بارگذاری است را محاسبه می کند. به عبارتی دیگر فاکتور FCP زمان بین شروع بارگذاری صفحه تا نمایش اولین عنصر در ان صفحه به کاربر را ردیابی می کند.

اگر بخواهیم حتی دقیق تر این موضوع را بررسی کنیم، فاکتور FCP برای اندازه گیری این مورد کاربرد دارد که اولین سند یا داکیومنت داخل یک صفحه چقدر طول می کشد تا به کاربر نمایش داده شود. این بخش می تواند شامل موارد زیر باشد:

• متن
• تصویر (حتی تصاویر پس زمینه)
• فایل های svg
• فایل های canvas

فاکتور FCP یک معیار مهم در زمینه UX به شمار می رود. زیرا نحوه درک کاربران از بارگذاری صفحه سایت را اندازه گیری کرده و و در مورد اولین برداشت آنها از صفحه سایت شما تصمیم می گیرد. بطور مثال فرض کنید بارگذاری صفحه سایت شما خیلی طول بکشد و کاربران در اولین بخش فقط پس زمینه سایت شما را بتوانند در زمان بارگذاری ببینند.

در چنین شرایطی چقدر طول می کشد تا کاربرها از محتوای سایت شما ناامید شده و تصمیم به بستن آن صفحه کنند؟ اگر کاربرها هم متوجه تاخیر در بارگذاری صفحات سایت شما شوند، به این معنی است که صفحه شما برای بالا آمدن سرعت پایینی دارد.

اما فاکتور FCP سریع نشان دهنده این است که در پس زمینه سایت چیزی در حال انجام است و برای کاربر شما اولین چیزی که نمایش داده می شود نشان دهنده موارد زیر است:

• صفحه سایت شما به درستی کار می کند.
• محتوایی در صفحه سایت شما وجود دارد که کاربران ممکن است کامل آن را بررسی کنند و تعامل خوبی با سایت شما برقرار کنند.

با این توضیحات بهینه سازی فاکتور FCP را نباید نادیده بگیرید.

چگونگی اندازه گیری فاکتور FCP

فاکتور FCP را می توان بر اساس داده های وب سایت های ارائه دهنده و آزمایش در گوگل کروم تجزیه تحلیل کرد یا نتیجه هر دو را با هم ترکیب نمود تا نتیجه قابل اطمینانی را در این زمینه بدست آورید.

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

Chrome DevTools

برای اندازه گیری FCP در Chrome DevTools بر روی صفحه مورد نظر کلیک راست کرده و بر روی Inspect کلیک کرده و به بخش Performance در تنظیمات بروید و روی گزینه Reload کلیک کنید تا صفحه مورد نظر به طور کلی برای شما آنالیز شود. برای پیدا کردن دقیق فاکتور FCP به بخش Timings در آن صفحه بروید و گزینه FCP برای شما در آن بخش نمایش داده خواهد شد که مقدار آن هم با بردن موس بر روی آن مطابق تصویر به شما نمایش داده خواهد شد.

Lighthouse

دومین ابزار برای اندازه گیری فاکتور FCP بخش Lighthouse کروم می باشد. برای استفاده از این بخش مانند بخش بالا عمل کنید و در صفحه مورد نظر با کلیک راست بر روی گزینه Inspect کلیک کنید. سپس در انتهای موارد منو بار بر روی علامت <<  انتهایی کلیک کرده و سپس به بخش Lighthouse بروید. سپس گزینه Navigation را انتخاب کنید و بر روی گزینه Analyze page load کلیک کنید تا داده های مربوط به FCP را مطابق شکل مشاهده نمایید.

همچنین بخش Lighthouse گزینه هایی را هم برای بهبود FCP به شما ارائه می دهد که با برطرف کردن آن موارد بهینه سازی فاکتور FCP را هم انجام خواهید داد.

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

نکته مهم این است که ابزارهای کاربردی گوگل براساس تجربه کاربر در کروم جمع آوری شده است که برای رتبه دادن به سایت ها مورد استفاده قرار می گیرد. با آنالیز وب سایت خود بر اساس داده های این ابزارها میی توانید بررسی کنید که وب سایت شما در چه وضعیتی قرار دارد. در ادامه این موارد را به شما معرفی خواهیم کرد.

PageSpeed Insights

این بخش ابزارهای آزمایشی کروم و سایر موارد کاربردی را با هم ترکیب می کند و در اصل ترکیبی از بخش Lighthouse و تجربه کاربری کروم را به شما ارائه می دهد. برای استفاده از این ابزار تنها کافی است آدرس URL صفحه مورد نظر خود را در بخش جستجو بزنید تا برای شما داده های کلی وب سایتتان را آنالیز نماید.

همچنین شما در این ابزار مانند Lighthouse می توانید ببینید که برای کاربران موبایل و دسکتاپ چه داده هایی مورد انالیز قرار می گیرند.

همچنین مانند Lighthouse، بخش PageSpeed Insights توصیه های کاملی را برای بهینه سازی فاکتور FCP به شما ارائه می دهد تا با برطرف کردن موارد گفته شده فاکتور FCP را به بهترین شکل ممکن بهینه سازی کنید.

Chrome User Experience Report

این بخش که به اختصار به (CrUX) هم معروف است، به شما نشان می دهد که کاربران واقعی وب در کروم چه تجربه هایی دارند. چندین راه برای استفاده از این ابزار وجود دارد که آنها را معرفی خواهیم کرد.

استفاده از CrUX API: اگر از API تا به حال استفاده خاصی نکرده اید، می توانید از یک توسعه دهنده وب در این زمینه کمک بگیرید.

JavaScript API

راه دیگر برای بررسی و بهینه سازی فاکتور FCP این مورد می باشد. اگر تجربه استفاده از جاوا اسکریپت را دارید، این گزینه می تواند برای شما مناسب باشد. برای این کار می توانید از داده های Paint Timing API استفاده نمایید.

امتیاز ایده آل برای فاکتور FCP چیست؟

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

بنابراین طبق توصیه گوگل حالت ایده آل برای یک وب سایت این است که 75 درصد از صفحات آن دارای فاکتور FCP با عدد 1.8 ثانیه یا کمتر از آن باشند. این مورد هم برای موبایل و هم برای دسکتاپ صدق می کند.

آستانه مورد قبول برای اولین رنگ محتوایی در فاکتور FCP

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

• اگز زمان لود فاکتور FCP بین 0 تا 1.8 ثانیه باشد، این عدد با رنگ سبز نمایش داده شده و از نظر گوگل، خوب است.
• اگر زمان لود فاکتور FCP بین 1.8 تا 3 ثانیه باشد، این عدد با رنگ نارنجی نمایش داده شده و از نظر گوگل، نیاز به بهتر شدن دارد.
• اگر زمان لود فاکتور FCP بالای 3 ثانیه باشد، این عدد با رنگ قرمز نمایش داده شده و از نظر گوگل، بسیار ضعیف است و باید در اسرع وقت، بهینه سازی شود.

جالب است بدانید که برای تعیین امتیاز فاکتور FCP سایت شما، گوگل نتایج وب سایت شما را با داده های وب سایت های واقعی در HTTP Archive مقایسه می کند.

نحوه بهبود امتیاز فاکتور FCP

برای بهینه سازی فاکتور FCP می توانید ابتدا با داده های Lighthouse که شامل بخش های Opportunities و Diagnostics می شوند، شروع کنید. از سوی دیگر شاید دوست داشته باشید بدانید که برای بهینه سازی فاکتور FCP چه مواردی نیاز به بهینه سازی ندارند. شما می توانید این اطلاعات را در بخش Lighthouse و گزینه Passed audits پیدا کنید.

اما در حالت کلی طبق داده های رسمی گوگل چند راه برای بهبود فاکتور FCP وجود دارند که در ادامه به آنها اشاره خواهیم کرد:

اقدامات قابل انجام: منابعی را که می توانند اولین نمایش های وب سایت شما برای کاربر را مسدود کنند، را بهینه سازی کنید.

توصیه: با حذف منابع بدون استفاده و به تعویق انداختن منابع غیر ضروری

اقدامات قابل انجام: کدهای بدون استفاده CSS و جاوا اسکریپت را حذف کنید تا منابع استفاده شده توسط شبکه به حداقل برسند.

توصیه: حذف کدهای بدون استفاده CSS و جاوااسکریپت

اقدامات قابل انجام: با استفاده از CDN زمان پاسخگویی سرور را بهینه کنید.

توصیه: کاهش زمان پاسخگویی سرور TTFB

اقدامات قابل انجام: زنجیره های ریدایرکت را حذف کنید و زنجیره های ریدایرکت را کاهش دهید تا صفحه سریع تر لود شود.

توصیه: از ریدایرکت های چند صفحه ای استفاده نکنید

اقدامات قابل انجام: اولویت بندی کنید که چه منابعی در وهله دوم لود شوند. می توانید از کد <link rel =preload>استفاده کنید.

توصیه: درخواست های کلیدی را از قبل لود کنید

اقدامات قابل انجام: با افزودن نکات منبع preconnect یا dns-prefetch، اتصالات اولیه را با منابع مهم برقرار کنید.

توصیه: از قبل به مبداهای مورد نیاز متصل شوید

اقدامات قابل انجام: با به تعویق انداختن کارهای غیرضروری یا استفاده از تصاویر با فرمت WebP به جای JPEG و PNG این کار را انجام دهید.

توصیه: اندازه کلی صفحه لود را پایین نگهدارید

اقدامات قابل انجام: برای بالابردن سرعت بارگذاری دوباره صفحات بعد از مراجعه دوم و بعد از آن توسط کاربرها کاری کنید در کش مرورگر داده های سایت شما ذخیره شوند.

توصیه: از کش برای صفحات خود استفاده کنید.

اقدامات قابل انجام: نودهای غیرقابل استفاده DOM را حذف کنید و یا زمانی از آنها استفاده کنید که نیازمند آنها هستید.

توصیه: کاهش حجم DOM

اقدامات قابل انجام: تعداد سورس های مهم سایت را کاهش دهید، ترتیب بارگذاری آنها را بهینه کنید، از ویژگی های async یا defer استفاده کنید و تعداد بایت های مهم را برای کاهش زمان دانلود بهینه کنید.

توصیه: به حداقل رساندن درخواست های عمقی

اقدامات قابل انجام: اطمینان حاصل کنید که متن هنگام لودشدن فونت برای کاربران قابل مشاهده است. از فلاش متن نامرئی (FOIT) با اضافه کردن فونت-نمایشگر جلوگیری کنید.

توصیه: اطمینان حاصل کنید که متن در طول بارگذاری وب فونت قابل مشاهده است

اقدامات قابل انجام: تصاویر و فونت های خود را بهینه کنید، فایل های GIF را با ویدیوها جایگزین کنید و از منابع CSS و JS مسدودکننده رندر مراقبت کنید.

توصیه: تعداد درخواست ها و اندازه بار را به حداقل برسانید.

همانطور که می بینید راه های استاندارد زیادی توسط گوگل برای بهینه سازی فاکتور FCP وجود دارد. اما از آنجایی که هر وب سایت به طور خاصی بهینه سازی شده است، برای بهبود فاکتور FCP باید هر سایت را بطور تخصصی آنالیز و بررسی کرد و بعد موارد مورد نیاز آن سایت را بهینه کرد.

نتیجه گیری

First Contentful Paint یا FCP مدت زمانی را بررسی می کند که اولین بخش محتوایی یا ساختار سایت برای کاربر به نمایش در می آید. در این مقاله توضیح دادیم که فاکتور FCP چیست و چه اهمیتی در سئو سایت دارد. همچنین راه های کلی بهینه سازی فاکتور FCP را کامل توضیح دادیم. اگر فکر می کنید راه های دیگری برای بهبود فاکتور FCP وجود دارد، با ما در بخش نظرات در میان بگذارید تا خواننده های دیگر این مقاله از آن استفاده کنند.