آموزش و اخبار

First Contentful Paint یا FCP چیست و چگونه آن را برطرف کنیم؟

fcp

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

خطای FCP یا First Contentful Paint چیست؟

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

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

fcp-timeline
در تایم لاین بارگذاری، FCP در فریم دوم اتفاق می‌افتد، زیرا این زمان است که اولین عناصر متن و تصویر به صفحه نمایش داده می‌شوند

میزان استاندارد FCP یا اولین نمایش محتوا چقدر است؟

FCP را می‌توان به سه بازه زمانی تعریف کرد که به‌صورت زیر است:

  • محدوده ایده آل: کمتر از 1.8 ثانیه. این محدوده بهترین تجربه کاربری را به همراه دارد و باعث می‌شود کاربران احساس کنند که صفحه به‌سرعت بارگذاری شده است.
  • محدوده قابل‌قبول: بین 1.8 تا 3 ثانیه. در این محدوده، کاربر همچنان تجربه خوبی دارد؛ اما ممکن است کمی تاخیر در بارگذاری صفحه احساس کند.
  • محدوده ضعیف: بیشتر از 3 ثانیه. در این حالت، کاربر ممکن است صبر نکند تا صفحه به‌طور کامل بارگذاری شود و سایت را ترک کند.

میزان استاندارد FCP

اکنون که متوجه شدید میزان استاندارد FCP چیست، بهتر است با نحوه اندازه‌گیری آن نیز آشنا شوید.

 

First Contentful Paint را چگونه اندازه‌گیری کنیم؟

ابزارهای مختلفی برای این کار وجود دارد؛ اما آیا می‌دانید بهترین ابزار برای اندازه‌گیری FCP چیست؟ page speed insight یکی از ابزارهای رایگان و قدرتمند برای اندازه‌گیری FCP است. کارکردن با این ابزار ساده است که در ادامه به شما آموزش خواهیم داد.

۱- وارد سایت https://developers.google.com/speed/pagespeed/insights/ شوید.

۲- آدرس دقیق صفحه‌ای را که می‌خواهید آن را تحلیل کنید، در کادر مشخص‌شده وارد و روی دکمه Analyze کلیک کنید.

اندازه گیری FCP

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

PAGE SPEED LIGHT

4- در بخش Diagnose performance issues می‌توانید اطلاعات دقیقی را در مورد FCP و سایر معیارهای عملکرد وب‌سایت خود مشاهده کنید. همچنین نتایج برای نمایش در دسکتاپ و نمایش در گوشی موبایل در دسترس است.

PAGE SPEED ERROR

 

۵- PageSpeed Insights پیشنهاداتی را برای بهبود FCP ارائه می‌دهد. این پیشنهادات ممکن است شامل بهینه‌سازی تصاویر، کاهش اندازه فایل‌های CSS و جاوا اسکریپت و … باشد.

FCP یا اولین نمایش محتوا را چگونه بهینه‌سازی کنیم؟

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

Eliminate render-blocking resources

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

Minify CSS

با حذف فاصله‌های اضافی، کامنت‌ها و کوتاه‌کردن نام متغیرها در فایل‌های CSS، می‌توانید اندازه آن‌ها را کاهش دهید و زمان بارگذاری صفحه را بهبود بخشید.

Remove unused CSS

اگر از یک فریم‌ورک یا کتابخانه CSS استفاده می‌کنید، ممکن است بخش‌هایی از آن CSS در صفحه شما استفاده نشود. با استفاده از ابزارهای تحلیل CSS، می‌توانید CSS استفاده‌نشده را شناسایی و حذف کنید.

Remove unused JavaScript

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

Preconnect to required origins

به کمک تگ <link rel=”preconnect”> می‌توانید به مرورگر اطلاع دهید که به چه دامنه‌هایی نیاز دارد. این کار باعث می‌شود مرورگر از قبل، اتصال به این دامنه‌ها را آغاز کند و در نتیجه زمان بارگذاری منابع از این دامنه‌ها کاهش یابد.

بهینه سازی FCP

Reduce server response times (TTFB)

TTFB زمان بین درخواست ارسال‌شده توسط مرورگر و دریافت اولین بایت از پاسخ سرور است. برای کاهش TTFB می‌توانید از یک سرور سریع و بهینه استفاده کنید، از کشینگ بهره بگیرید و کدهای خود را بهینه کنید.

 

Avoid multiple page redirects

هر ریدایرکت صفحه باعث ایجاد یک درخواست HTTP اضافی می‌شود و زمان بارگذاری صفحه را افزایش می‌دهد. تا حد امکان از ریدایرکت‌های غیرضروری صفحه اجتناب کنید.

Preload key requests

با استفاده از تگ <link rel=”preload”> می‌توانید به مرورگر اطلاع دهید که کدام منابع برای نمایش اولیه صفحه ضروری هستند. این کار باعث می‌شود مرورگر این منابع را قبل‌از اینکه مورد نیاز باشند، بارگذاری کند.

Avoid enormous network payloads

حجم بالای داده‌هایی که باید از شبکه بارگذاری شوند، می‌تواند مقدار FCP را افزایش دهد. برای رفع این مشکل، اندازه تصاویر را کاهش دهید، فایل‌های CSS و جاوا اسکریپت را فشرده کنید و از تکنیک‌هایی مانند lazy loading برای بارگذاری تصاویر بهره بگیرید.

Serve static assets with an efficient cache policy

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

Avoid an excessive DOM size

DOM (Document Object Model) ساختاری است که محتوای یک صفحه وب را نمایش می‌دهد. یک DOM بزرگ و پیچیده ممکن است پردازش را برای مرورگر دشوار کند و FCP را افزایش دهد. برای کاهش اندازه DOM، از المان‌های HTML بهینه استفاده و از ساختارهای تودرتو و پیچیده اجتناب کنید.

Minimize critical request depth

critical request depth به تعداد درخواست‌های HTTP اشاره دارد که برای رندرکردن محتوای بالای صفحه لازم است. کاهش این عمق به معنای کاهش تعداد درخواست‌هایی است که مرورگر باید قبل‌از نمایش اولین محتوا انجام دهد.

Ensure text remains visible during webfont load

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

Keep request counts low and transfer sizes small

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

 

سخن پایانی

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