چگونه FCP را بهینه کنیم با راهکار های عملی
چگونه FCP را بهینه کنیم با راهکار های عملی
FCP چیست؟
FCP مخفف First Contentful Paint به معنی «نمایش اولین محتوای قابل مشاهده» است.
به زبان ساده، FCP مشخص میکند مرورگر چه زمانی موفق میشود اولین بخش قابل مشاهده محتوای صفحه را نمایش دهد.
این محتوا میتواند شامل مواردی مانند:
- متن
- تصویر
- SVG
- Canvas
- عناصر HTML
برای مثال تصور کنید کاربر وارد صفحه اصلی یک فروشگاه میشود. اگر بعد از مدتی عنوان اصلی سایت یا یک تصویر قابل مشاهده نمایش داده شود، این اتفاق بخشی از فرایند اندازهگیری FCP است.
بنابراین هرچه مرورگر سریعتر بتواند اولین محتوای صفحه را نمایش دهد، FCP بهتر خواهد بود.
FCP خوب چقدر است؟
بهطور کلی، برای ارزیابی FCP میتوان این محدودهها را در نظر گرفت:
- کمتر از ۱.۸ ثانیه: خوب
- ۱.۸ تا ۳ ثانیه: نیازمند بهبود
- بیشتر از ۳ ثانیه: ضعیف
البته نباید فقط با یک تست تصمیمگیری کرد. نوع دستگاه، سرعت اینترنت، موقعیت جغرافیایی کاربر، عملکرد سرور و وضعیت کش میتوانند نتیجه را تغییر دهند.
هدف اصلی باید این باشد که صفحات مهم سایت در شرایط واقعی تا حد امکان سریع شروع به نمایش محتوا کنند.
نمره خوب FCP چیست؟
براساس Google ، این معیار باید در مدت زمان 1 ثانیه اتفاق بیفتد . این یک تجربه کاربری خوب را برای بازدید کنندگان سایت شما فراهم می کند.
اگر FCP سایت شما 3+ ثانیه طول بکشد ، گوگل سرعت سایت را کند می دانید. طبق تحقیقات ، بیش از 53٪ از کاربران تلفن همراه در صورتی که زمان بارگیری صفحه بیش از 3 ثانیه، سایت را ترک می کنند. بنابراین این معیار را جدی بگیرید.
FCP چگونه کاهش پیدا می کند؟
اگر میخواهید سایت شما در صفحه اول گوگل قرار بگیرد، باید روی سرعت بارگذاری آن نیز کار بکنید. کمپانی گوگل اعلام کرده که در سالهای اخیر، یکی از اصلیترین فاکتورهای رتبهبندی سایتها در این موتور جستجو، سرعت سایت میباشد. ما در سئو ایران سعی بر این داشتهایم تا کاملترین مجموعه مقالات سرعت سایت مثل همین fcp یکی از اصطلاحات سئو را در اختیار شما قرار دهیم تا بتوانید اطلاعات جامع و به روزی را در این مورد به دست آورید.
اگر بارگذاری صفحات سایت شما کند باشد، بسیاری از بازدید کنندگان آن را از دست خواهید داد؛ چرا که نسل جدید کاربران گوگل با افزایش کیفیت سایتهای جدید، به دنبال سریعترین نتایج در پاسخ به نیاز خود میباشند. در صورتی که سایت شما نتواند پاسخی سریع به جستجو و نیاز کاربر بدهد، کاربر سایت شما را ترک کرده و سایتهای رقیب شما در این مسیر پیروز میدان خواهند شد. در واقع در سئو سایت برگ برنده در دست سایتهایی میباشد که بهترین تجربه کاربری از لحاظ سرعت لود، ظاهر، سطح دسترسی، محتوا و عملکرد سایت را در اختیار بازدید کنندگان خود قرار دهند.
موارد زیادی در سرعت بارگذاری صفحات سایت تاثیر گذار هستند که به کمک ابزارهای تست سرعت سایت میتوانید آنها را بررسی کنید. در معروفترین این ابزارها مانند GTmetrix، Google PageSpeed Insights، Google LightHouse و… فاکتورهای مختلفی جهت آنالیز سرعت سایت شما تعریف شده است که همه آنها به نوعی در مجموع نمرهای که سایت شما در این خصوص میگیرد، تاثیر میگذارند. یکی از معروفترین فاکتورهای سنجش سرعت سایت در این ابزارها، FCP میباشد. با توجه به این که در میان منابع داخلی هیچ مقاله شفاف و کاملی در خصوص این فاکتور پیدا نکردیم، تصمیم بر این داریم تا در این مقاله برای شما به معرفی کامل FCP پرداخته و راههای کاهش دادن آن را بررسی کنیم.
چگونگی اندازه گیری فاکتور FCP :
فاکتور FCP را می توان بر اساس داده های وب سایت های ارائه دهنده و آزمایش در گوگل کروم تجزیه تحلیل کرد یا نتیجه هر دو را با هم ترکیب نمود تا نتیجه قابل اطمینانی را در این زمینه بدست آورید.
داده های آزمایشی گوگل کروم به شما این امکان را می دهند که فاکتور FCP خود را در یک محیط آزمایشی با تنظیمات پیش فرض اندازه گیری نمایید. در ادامه ابزارهایی را به شما معرفی می کنیم که برای اندازه گیری و بهینه سازی فاکتور FCP کمک می کنند.
1) Chrome DevTools :
برای اندازه گیری FCP در Chrome DevTools بر روی صفحه مورد نظر کلیک راست کرده و بر روی Inspect کلیک کرده و به بخش Performance در تنظیمات بروید و روی گزینه Reload کلیک کنید تا صفحه مورد نظر به طور کلی برای شما آنالیز شود. برای پیدا کردن دقیق فاکتور FCP به بخش Timings در آن صفحه بروید و گزینه FCP برای شما در آن بخش نمایش داده خواهد شد که مقدار آن هم با بردن موس بر روی آن مطابق تصویر به شما نمایش داده خواهد شد.
2) Lighthouse :
دومین ابزار برای اندازه گیری فاکتور FCP بخش Lighthouse کروم می باشد. برای استفاده از این بخش مانند بخش بالا عمل کنید و در صفحه مورد نظر با کلیک راست بر روی گزینه Inspect کلیک کنید. سپس در انتهای موارد منو بار بر روی علامت << انتهایی کلیک کرده و سپس به بخش Lighthouse بروید. سپس گزینه Navigation را انتخاب کنید و بر روی گزینه Analyze page load کلیک کنید تا داده های مربوط به FCP را مطابق شکل مشاهده نمایید.
3) PageSpeed Insights :
این بخش ابزارهای آزمایشی کروم و سایر موارد کاربردی را با هم ترکیب می کند و در اصل ترکیبی از بخش Lighthouse و تجربه کاربری کروم را به شما ارائه می دهد. برای استفاده از این ابزار تنها کافی است آدرس URL صفحه مورد نظر خود را در بخش جستجو بزنید تا برای شما داده های کلی وب سایتتان را آنالیز نماید.
همچنین شما در این ابزار مانند Lighthouse می توانید ببینید که برای کاربران موبایل و دسکتاپ چه داده هایی مورد انالیز قرار می گیرند.
همچنین مانند Lighthouse، بخش PageSpeed Insights توصیه های کاملی را برای بهینه سازی فاکتور FCP به شما ارائه می دهد تا با برطرف کردن موارد گفته شده فاکتور FCP را به بهترین شکل ممکن بهینه سازی کنید.
4) Chrome User Experience Report :
این بخش که به اختصار به (CrUX) هم معروف است، به شما نشان می دهد که کاربران واقعی وب در کروم چه تجربه هایی دارند. چندین راه برای استفاده از این ابزار وجود دارد که آنها را معرفی خواهیم کرد.
استفاده از CrUX API: اگر از API تا به حال استفاده خاصی نکرده اید، می توانید از یک توسعه دهنده وب در این زمینه کمک بگیرید
چرا FCP سایت بالا میرود؟
قبل از اجرای راهکارها باید علت FCP بالا مشخص شود.
مهمترین عوامل عبارتاند از:
- TTFB بالا
- CSSهای سنگین
- فایلهای Render-Blocking
- JavaScript زیاد
- فونتهای سنگین
- تصاویر بهینهنشده
- هاست ضعیف
- نبود کش مناسب
- استفاده بیش از حد از افزونهها
- درخواستهای خارجی زیاد
- کدنویسی نامناسب قالب
- حجم بالای HTML
بنابراین اگر قصد دارید FCP را کاهش دهید، بهتر است ابتدا بفهمید کدام عامل بیشترین تأثیر را روی سایت شما دارد.
FCP را با چه ابزارهایی بررسی کنیم؟
برای بررسی FCP میتوانید از ابزارهای مختلف استفاده کنید.
یکی از ابزارهای رایج Google PageSpeed Insights است که اطلاعاتی درباره عملکرد صفحات و فرصتهای بهینهسازی ارائه میکند.
همچنین ابزارهای دیگری مانند Lighthouse و ابزارهای تست عملکرد میتوانند اطلاعات ارزشمندی ارائه دهند.
اما هنگام تست باید به یک نکته مهم توجه کنید:
- فقط به یک تست اکتفا نکنید.
- بهتر است صفحات مهم را چند بار و در شرایط مختلف بررسی کنید.
FCP و LCP چه تفاوتی دارند؟
- FCP و LCP هر دو به نمایش محتوا مربوط هستند، اما یکسان نیستند.
- FCP زمانی را بررسی میکند که اولین محتوای قابل مشاهده نمایش داده میشود.
- اما LCP روی نمایش بزرگترین عنصر محتوایی مهم در بخش قابل مشاهده صفحه تمرکز دارد.
- برای مثال ممکن است FCP سایت شما خوب باشد، اما تصویر اصلی صفحه بسیار دیر نمایش داده شود و در نتیجه LCP ضعیف باشد.
بنابراین برای بهینهسازی سرعت باید هر دو معیار را بررسی کرد.
چکلیست عملی کاهش FCP :
اگر میخواهید همین حالا روی بهینهسازی FCP سایت کار کنید، این چکلیست میتواند شروع خوبی باشد:
سمت سرور :
- بررسی TTFB
- استفاده از هاست مناسب
- بررسی CPU و RAM
- بهینهسازی PHP
- فعال بودن OPcache
- بررسی PHP Workers
کش :
- فعالسازی Page Cache
- تنظیم صحیح Browser Cache
- بررسی Object Cache
- جلوگیری از کش اشتباه صفحات داینامیک
CSS :
- حذف CSS اضافی
- Minify
- بهینهسازی Critical CSS
- جلوگیری از بارگذاری استایلهای غیرضروری
JavaScript :
- حذف اسکریپتهای اضافی
- Minify
- Defer در موارد مناسب
- Delay برای اسکریپتهای غیرضروری
تصاویر :
- استفاده از WebP یا AVIF
- کاهش حجم تصاویر
- تعیین ابعاد مناسب
- Lazy Load تصاویر پایین صفحهعدم
- Lazy Load بیدلیل تصویر اصلی
فونت :
- کاهش تعداد فونتها
- استفاده از WOFF2
- کاهش وزنهای غیرضروری
- مدیریت صحیح Preload
وردپرس :
- حذف افزونههای غیرضروری
- بررسی قالب
- بهینهسازی صفحهساز
- کاهش درخواستهای خارجی
- بررسی دیتابیس
FCP و TTFB چه ارتباطی دارند؟
- این دو معیار ارتباط نزدیکی با یکدیگر دارند.
- اگر سرور پاسخ را دیر ارسال کند، مرورگر دیرتر میتواند پردازش HTML را آغاز کند.
- به همین دلیل TTFB بالا میتواند یکی از عوامل FCP ضعیف باشد.
- البته FCP فقط به TTFB وابسته نیست و CSS، فونت، JavaScript و سایر منابع نیز روی آن تأثیر دارند.
- به همین دلیل برای کاهش FCP باید زنجیره کامل بارگذاری صفحه را بررسی کرد.
بهترین روش برای کاهش FCP در وردپرس :
اگر سایت شما وردپرسی است، بهتر است بهینهسازی را مرحلهای انجام دهید.
- مرحله اول: ابتدا PageSpeed و دادههای عملکردی سایت را بررسی کنید.
- مرحله دوم: TTFB را اندازهگیری کنید.
- مرحله سوم: وضعیت کش را بررسی کنید.
- مرحله چهارم: فایلهای CSS و JavaScript را شناسایی کنید.
- مرحله پنجم: تصاویر و فونتهای صفحه را بررسی کنید.
- مرحله ششم: افزونهها و قالب را ارزیابی کنید.
- مرحله هفتم: دیتابیس و Object Cache را بررسی کنید.
- مرحله هشتم: صفحه را دوباره تست کنید.
- مرحله نهم: تغییرات را با نتایج قبلی مقایسه کنید.
این روش بسیار بهتر از آن است که بدون بررسی، تمام گزینههای یک افزونه بهینهسازی را فعال کنیم.
جمعبندی :
بهینهسازی FCP یکی از بخشهای مهم افزایش سرعت سایت است و هدف آن این است که اولین محتوای قابل مشاهده صفحه در سریعترین زمان ممکن به کاربر نمایش داده شود.
برای کاهش FCP نباید فقط روی یک عامل تمرکز کرد. ابتدا باید TTFB و سرعت سرور بررسی شود و سپس مواردی مانند CSSهای Render-Blocking، JavaScript، تصاویر، فونتها، کش، افزونهها و درخواستهای خارجی مورد بررسی قرار گیرند.
در وردپرس نیز انتخاب هاست مناسب، استفاده صحیح از Page Cache، بهینهسازی CSS و JavaScript، کاهش افزونههای غیرضروری، بهینهسازی تصاویر و بررسی عملکرد PHP میتواند تأثیر قابل توجهی داشته باشد.
در نهایت، بهترین استراتژی این است که ابتدا مشکل را اندازهگیری و شناسایی کنید، سپس فقط همان بخش را بهینه کنید و بعد نتیجه را دوباره اندازه بگیرید. این رویکرد هم ریسک خراب شدن سایت را کاهش میدهد و هم باعث میشود بدانید دقیقاً کدام تغییر باعث بهبود FCP شده است.