آموزش بهبود FCP در وردپرس: First Contentful Paint Time چیست؟

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

 FCP  یا First Contentful Paint Time چیست؟

در واقع فاکتور (FCP) نشان‌دهنده‌ی بازه‌ی زمانی است که برای نمایش قسمت اول یک صفحه وب در مرورگر لازم است. یعنی بازدیدکننده از زمانی که یک صفحه را در مرورگر باز می‌کند و چیزی مثل متن، تصویر، ویدیو و… را می‌بیند چقدر در انتظار می‌ماند.برای گوگل میزان FCP پذیرفته شده، باید کمتر از ۱٫۸ ثانیه باشد. بیشتر صفحات وب توسط کارشناسان محتوا ایجاد می‌شوند و اگر این نگارنده‌ها با بهینه‌سازی موتور جستجو آشنا نباشند، می‌توانند زمان لود محتوا را با مشکل مواجه کنند. بنابراین در این مطلب به سادگی هرچه تمام، فرآیند دقیق این معیار را بررسی می‌کنیم تا بتوانید بهترین سرعت را رقم بزنید.

چرا زمان بهبود FCP در وردپرس مهم است؟

کاملاً درست است که FCP  در معیارهای مستقیم “core web vital” نیست، اما در اولین تجربه‌ی کاربر از سایت شما اثر بسیار بزرگی دارد. اگر المان‌های صفحه شما دیر بارگذاری شوند فاکتور حیاتی سرعت را از دست خواهید داد.

زمان‌بندی لود المان صفحه بعد از بهبود FCP در وردپرس باید چقدر باشد؟

بهتر است شما هدف را روی یک ثانیه یا کمتر بگذارید اما از منظر گوگل تا ۱.۵ ثانیه هم پذیرفته است. تاثیرگذارترین عامل در کاهش مدت زمان FCP، سرعت سرویس هاستینگ است. اگر هاستینگ پرسرعتی دارید اما فاصله مکانی کاربران و سرورهای شما زیاد است، مثلا کاربران در ایران هستند و سرورها در کانادا نگهداری می‌شوند، می‌توانید از شبکه توزیع محتوا برای افزایش سرعت استفاده کنید.

اگر خشت اول، یعنی هاست پرسرعت را دارید در ادامه تکنیک‌هایی را خواهید آموخت تا بتوانید  زمان FCP خود را به محدوده ۰.۶ تا ۰.۸ ثانیه در کشور خود و زیر ۱ ثانیه در سطح بین‌المللی برسانید.

راهنمای گام به گام بهبود FCP در وردپرس

در این بخش فرآیندی را معرفی می‌کنیم که به شما کمک می‌کند زمان FCP را کاهش دهید.

گام صفرم: پیش از هر اقدامی برای بهبود FCP در وردپرس، ‌FCP را تست کنید

قبل از آن که بهبود را شروع کنیم بایستی اطمینان داشته باشیم که مدت زمان FCP را با ابزار قابل استنادی سنجیده‌اید و نتایج دقیقی در اختیار دارید. برای این کار می‌توانید از ابزارهایی مثل SiteSpeedBot و یا GT Metrix استفاده کنید. اگر از SiteSpeedBot استفاده می‌کنید، حتما وی‌پی‌ان را روی امریکا تنظیم کنید. در نهایت بهترین ابزار برای سنجش این فاکتور Google PageSpeed ​​Insights است.

نکته: تست را چندبار و در ساعات پیک بازدید انجام دهید. چرا که سرعت ارسال داده در ساعات مختلف روز و بسته به میزان ترافیک سایت متغییر است. بنابراین برای بهبود FCP در وردپرس به جای یک نتیجه‌ی واحد باید روی میانگین نتایج تمرکز کنید.

گام اول:  برای بهبود FCP در وردپرس، ابتدا TTFB را کاهش دهید

برای تثبیت زمان FCP، باید زمان اولین بایت (TTFB) را بهبود ببخشید. پیش از این در یک مقاله‌ی کامل از لیمومگ درباره‌ی اولین بایت داده صحبت کرده‌ایم. این فاکتور در ابزارهایی مثل  Google Pagespeed  Insights به عنوان «‌‌Server Response Time» نیز شناخته می‌شود. این معیار نشان‌دهنده زمانی است که سرور برای تحویل اولین بایت به مرورگر پس از درخواست کاربر سپری می‌کند.

زمان FCP به شدت به زمان‌بندی TTFB بستگی دارد. هدف اصلی این است که زمان پاسخگویی TTFB یا پردازش اولین داده سرور باید در کشوری که سایت در آن میزبانی می‌شود، حدود ۰.۱ تا ۰.۲ ثانیه و در سطح بین‌المللی حدود ۰.۲ تا ۰.۵ ثانیه باشد.در صورتی که TTFB شما بالاتر از این محدوده ها باشد، برای بهبود FCP در وردپرس باید روی کاهش آن کار کنید. در این بخش به طور خلاصه عوامل مؤثر در بهبود TTFB را بررسی می‌کنیم:

استفاده از شبکه توزیع محتوا برای بهبود FCP در وردپرس

اگر مخاطبان سایت شما همگی در یک کشور به خصوص زندگی می‌کنند و سرورهای شما در همان کشور نگهداری می‌شوند، نیازی به DNS ندارید. اما اگر مخاطبانی در سطح بین‌الملل دارید. یا این که سرورهای شما در کشوری که خدمات بهتری ارائه می‌دهد، نگهداری می‌شوند می‌توانید با استفاده از شبکه‌ی توزیع محتوا داده‌ها را از نزدیک‌ترین سرورهای موقت به کاربر در سطح دنیا، سرعت اولین بایت داده را بهبود ببخشید. شبکه توزیع محتوای Cloudflare یکی از بهترین و کارآمدترین گزینه‌ها برای کاهش فاصله کاربر و سرور و در نتیجه بهبود FCP در وردپرس است که اتفاقاً رایگان هم هست.

از Caching صفحه و Edge Caching استفاده کنید

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

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

مرحله دوم: lazy loading را برای لوگو غیرفعال کنید

همانطور که در ابتدای متن اشاره کردیم، در بیشتر سایت‌ها لوگو اولین المان صفحه است که بارگذاری می‌شود. بنابراین اجازه بدهید چند نکته برای بهبود لود لوگو ارائه کنیم. ویژگی lazyloading  یا بارگذاری تنبل تکنیکی است که برای بهینه‌سازی سرعت سایت استفاده می‌شود. به این صورت که به جای این که تمام مدیاهای موجود در صفحه را به یک‌باره و در اولین ورود کاربر لود شوند، به ترتیب و همگام با اسکرول کاربر بارگذاری شوند.

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

در نتیجه، تصاویر فضای بالای صفحه یا  ” Above The Fold ” باید منتظر باشند تا کتابخانه جاوا اسکریپت بارگذاری تنبل را قبل از لود تصاویر در بالای صفحه را اجرا کند. کتابخانه جاوا اسکریپت lazyload را به “render blocking” تبدیل می شود و مشکل همینجا ایجاد می‌شود. بنابراین بهتر است این ویژگی را یا به کلی یا برای چند فایل غیرفعال کنیم.

چطور lazyloading را غیرفعال کنیم؟

اگر این ویژگی را با استفاده از افزونه‌هایی مثل WP Rocket یا lazyloading فعال کرده‌اید، کارتان خیلی ساده‌تر است. کافی است تصویر را باز کنید یا URL را کپی کنید، آن را در ابزار قرار دهید و تنظیماتی را انتخاب کنید که بارگذاری تنبل این تصویر خاص را حذف کند. احتمالاً تا همین‌جا و با همین اقدام‌ها هم‌زمان FCP سایت شما به زیر ۱ ثانیه رسیده‌است.

اما برای بهینه‌سازی بیشتر می‌توانید تنظیمات preload یا پیش‌بارگذاری را نیز تغییر بدهید.

راهنمای پیش‌ بارگذاری مرورگر و دستورالعمل پیش‌ بارگذاری

راهنمایی مرورگر پیش‌بارگذاری یا به انگلیسی «preload browser hint» قطعه‌ای از کد HTML است که در قسمت سرصفحه سایت قرار می‌گیرد تا به مرورگر بگوید ترتیب بارگذاری پیش‌فرض فایل‌ها را در صفحه بازنویسی کند. با پیاده‌سازی یک تگ پیش بارگذاری که حاوی لوگو است، به مرورگر دستور می دهید که لوگو را زودتر از زمان معمول بارگذاری کند، بنابراین FCP را حتی بیشتر بهبود می بخشد.

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

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

• تصویر لوگو را فشرده کنید

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

معمولاً اندازه یک لوگو در حدود ۵-۱۰ کیلوبایت است، اما چه بسا در برخی موارد نیاز باشد که بسیار بزرگتر هم باشد. اما مثلاً لوگوهایی با عرض ۵۰۰-۱۰۰۰ پیکسل و حجم ۱۰۰-۳۰۰ کیلوبایت زیاده‌روی است. بیشتر لوگوها معمولاً حدود ۱۰۰ یا ۲۰۰ پیکسل عرض دارند.

• رفع خطاهای ۴۰۴

گاهی خطای ۴۰۴ می‌تواند عاملی برای افزایش زمان FCP باشد. این خطا مربوط به عدم بارگیری یا وجود یک فایل است که باعث تاخیر در رندر می‌شود. در یکی از مقالات پیشین لیمومگ با عنوان «برطرف کردن خطا ۴۰۴ در وردپرس» به طور کامل این فاکتور را بررسی کرده‌ایم. بهتر است به طور مرتب سایت‌تان را برای خطاها پس از اتصال سایت به سرچ کنسول بخش coverage را بررسی کنید تا هیچ خطایی از چشم‌تان پنهان نماند.

• بهینه‌سازی جاوا اسکریپت

۱. به تعویق انداختن یا DEFER جاوا اسکریپت:

بهینه‌سازی جاوا اسکریپت هم می‌تواند به شما در کاهش زمان‌بندی لود محتوا برای اولین بار کمک کند. ابتدا مطمئن شوید که جاوا اسکریپت را تا حد امکان به تعویق می‌اندازید. تعویق جاوا اسکریپت یک بهینه‌سازی خاص JS است و می‌توانید با استفاده از افزونه ای مثل  WP Rocket این کار را انجام دهید.

۲. تاخیر یا مکث در جاوا اسکریپت:

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

۳. کدهای جاوا اسکریپت را به پایین صفحه منتقل کنید؛

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

۴. CSS خود را بهینه کنید

بهینه سازی CSS هم گرچه کم اما می تواند به شما در کاهش زمان FCP کمک کند. تاثیر این فاکتور روی سایت‌هایی که از قالب‌های بهینه شده استفاده می‌کنند زیاد نیست. اما اگر شما قالب قدیمی با CSS کمتر بهینه شده دارید؛ بهتر است این روش‌ را نیز امتحان کنید. برای بهینه‌سازی CSS هم می‌توانید روی WP Rocket حساب کنید!

آیا می‌خواهید لیموهاست این بهینه‌سازی‌ها را برایتان انجام دهد؟

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