درباره First Contentful Paint FCP و چگونه آن را بهبود دهیم؟

FCP یا First Contentful Paint چیست؟

همین که بارگیری صفحه سایت شروع شود و کاربر اولین تغییراتی را که در صفحه برای لود داده‌ها مشاهده کند به این پارامتر زمانی FCP گفته می‌شود. این حالت می‌تواند شامل تصویر، آیکون، لودینگ، فایل‌های SVG یا هر نوع داده‌ای باشد که سفیدی صفحه مرورگر دیگر از بین رفته و چیزهایی در صفحه شروع به باز شدن کنند.

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

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

چگونگی به دست آوردن First Contentful Paint (FCP)

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

برای به دست آوردن مقدار First Contentful Paint می‌توانید از ابزار زیر استفاده کنید:

ابزار PageSpeed Insights گوگل
استفاده از مرورگر کروم (Chrome User Experience Report)
استفاده از گزارشات سرچ کنسول گوگل (Google Search Console Speed Report)
استفاده از کتابخانه جاوا اسکریپت Web Vitals
جدایی از ابزار فوق ابزارهای آزمایشگاهی دیگری همچون Lighthose و Chrome DevTools وجود دارند که به شما امکان محاسبه زمان FCP را خواهند داد.

بهترین مقدار FCP چقدر است؟

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

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

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

بهترین مقداری که برای متریک FCP وجود دارد توصیه می‌شود که زیر ۱.۸ ثانیه باشد. در صورتی که بین ۱.۸ تا ۳ باشد مقدار متوسط است که باید برای بهبود آن تلاش کنید و مقدار بیش از ۳ فاجعه بار است و حتما اقدام به بهبود FCP کنید.

نحوه بهبود First Contentful Paint چگونه است؟

همانطور که تا اینجا متوجه شدید، کاهش حجم صفحات، کاهش المان‌های استفاده شده در صفحه و به صورت کلی به حداقل رساندن مقادیر داده‌ها می‌تواند در بهبود First Contentful Paint تاثیر مستقیم داشته باشد.
از آنجایی سیستم‌های مدیریت محتوای مختلف اختصاصی و عمومی رایگان برای ایجاد صفحات وجود دارند و مقادیر دیگری همچون سرور نیز نقش مستقیمی در بهبود این مقدار دارند، وابسته به شرایط مختلف خواهد بود تا آن را بهبود دهید.

اگر قرار باشد تا به یک چک لیست عمومی برای هر نوع کاربری برسیم، می‌توان استفاده از سرور و هاست مناسب را با سرعت اتصال بالا، نزدیکی به کاربران به کمک CDN گام صفر برای بهبود FCP در نظر گرفت که آن را با نام TTFB می‌شناسیم. اما برای موارد بعدی می‌توان با رعایت چک لیست زیر، این مقدار را بهبود داد:

حذف منابعی که باعث مسدود کردن رندر می‌شوند.
حذف داده‌هایی که از دیگر دامنه‌ها و سرورها لود می‌شوند. به عنوان نمونه فونت‌های گوگل برای زبان فارسی مناسب نیست و مورد استفاده قرار نمی‌گیرد که می‌توانید به صورت کلی آنها را حذف کنید.
کاهش استایل‌‌های CSS سایت و ترکیب کردن آنها در قالب یک فایل فشرده(minify CSS).
کاهش مقدار استفاده از JS و فشرده سازی و ترکیب آنها(minify JS).
عدم استفاده از ریدایرکت‌های متعدد در کل سایت.
لود داده‌های کلیدی و مهم سایت به صورت PreLoad.
کاهش مقدار DOM Element صفحات.
اولیت لود فونت سایت زودتر از متن صفحات.
کاهش تعداد درخواست‌های HTTP صفحات که برای لود انواع داده‌ها است.
استفاده از سیستم کشینگ مناسب و چند لایه برای داده‌هاس استاتیک همچون تصاویر، استایل‌ها و فایل‌های js.
کاهش مقدار استفاده از انیمیشن و استایل‌های متحرک در سایت.
کاهش نمایش داده‌هایی غیر ضروری در سایت. به عنوان نمونه نمایش تاریخ و ساعت روز یا نمایش محتواهای تصادفی همچون جملات روز و… در یک سایت موضوعی نیست که برای کاربران شما اهمیت داشته باشد.
به همین ترتیب متناسب با نوع سایت و ساختاری که صفحات سایت شما دارد باید از موارد غیر ضروری برای لود در صفحات دوری کنید تا نرخ FCP را بهبود دهید.

جمع بندی و کلام آخر

در این مقاله به این موضوع پرداختیم که FCP یا همان First Contentful Paint چیست. یاد گرفتیم که متریک FCP مربوط به لود و نمایان شدن اولین فریم‌هایی است که در سایت شما رخ می‌دهد.

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

منبع:https://hexella.com/category

عالی بود(1)جالب نیست!(0)