FCP چیست؟ 10 نکته برای بهبود FCP در وردپرس

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

FCP مخفف چیست؟

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

FCP صفحه یعنی چه؟

به تمام زمان صرف شده از ابتدای بارگذاری صفحه ی شما تا زمانی که هر محتوا بر روی صفحه نمایش داده می‌شود FCP صفحه می‌گویند.

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

گوگل اخیراً اعلام کرده است که وب سایت ها را بر اساس FCP و FID رتبه بندی می کند. اما fcp و fid چیست و دقیقا چه کاربردی دارد؟ در این مقاله به این موضوع خواهیم پرداخت، پس همچنان در ادامه همراه ما باشید.

fcp و fid چیست و دقیقا چه کاربردی دارد؟

fcp و fid وب سایت ها را به آهسته، متوسط ​​و سریع دسته بندی می کنند. “اما وب سایت من در 2 ثانیه بارگیری می شود”، چرا سرعت بارگیری سایت من در این جمله حائز اهمیت است؟ داده‌های فیلد، داده‌های جمع‌آوری‌شده از گزارش تجربه کاربر Chrome (Crux) است. کروم داده ها را از کاربران واقعی جمع آوری می کند.

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

اگر می خواهید از سرعت واقعی سایتتان مطلع شوید Field Data این کار را برایتان آسان خواهد کرد. Field Data سرعت واقعی را که کاربران شما تجربه می کنند را به شما نشان می دهد.

چگونه FCP را کاهش دهید؟

اگر می‌خواهید بفهمید که چگونه FCP را کاهش دهید، در اینجا چند نکته وجود دارد که ما در ادامه مطلب برایتان هر یک را شرح خواهیم داد با ما همراه باشید.

برای کاهش FCP  به چه نکاتی باید توجه کنید؟

1_TTFB را کاهش دهید

FCP = TTFB + زمان رندر.

بنابراین برای کاهش FCP باید TTFB را کاهش دهید.

چندین تکنیک برای کاهش TTFB در وردپرس وجود دارد. ساده ترین آنها استفاده از یک افزونه کش خوب مانند FlyingPress و یک ارائه دهنده میزبانی خوب مانند Cloudways است.

2_منابع مسدودکننده Render را حذف کنید

هنگامی که مرورگر محتوای HTML را دریافت کرد، ممکن است مجبور شود منابع اضافی را برای شروع رندر بارگیری کند. آنها معمولا CSS و جاوا اسکریپت هستند. برای جاوا اسکریپت، باید یک ویژگی defer را به تگ اسکریپت اضافه کنید.

ویژگی defer به مرورگر می‌گوید که فقط زمانی فایل اسکریپت را اجرا کند که سند HTML به طور کامل تجزیه شود. برای CSS، ما باید آنها را در پایین، به صورت ناهمزمان بارگذاری کنیم.

تقریباً همه پلاگین های کش می توانند هر دو را انجام دهند. چیزی که معمولا توصیه می کنیم FlyingPress است زیرا می تواند CSS حیاتی را نیز تولید کند.

3_ CSS Critical ایجاد کنید

وقتی CSS را به صورت همزمان بارگیری نمی کنید، مرورگر سبک های لازم را ندارد. با این کار Flash of Unstyled Content of FOUC ایجاد می شود. برای جلوگیری از این امر، ما باید CSS بحرانی تولید کنیم. CSS بحرانی CSS است که در HTML درج شده است تا هیچ منبعی نیازی به دانلود نداشته باشد و مرورگر بتواند بلافاصله محتوا را ارائه دهد.

4_ از تم ها و صفحه سازهای خوب کدگذاری شده استفاده کنید

یک تم خوب نقش مهمی در کاهش FCP دارد. از تم های خوب کدگذاری شده مانند GeneratePress یا Astra استفاده کنید. صفحه سازها همچنین تعداد زیادی div و CSS ناخواسته را تزریق می کنند. از سازنده هایی مانند اکسیژن استفاده کنید که div ناخواسته را تزریق نمی کند و کنترل بیشتری روی همه چیز دارد.

5_ از عناصر وابسته به JS در Above Fold اجتناب کنید

هر چیزی که برای رندر کردن نیاز به اجرای جاوا اسکریپت داشته باشد می تواند به First Contentful Paint آسیب برساند. بنابراین به عنوان یک قانون سرانگشتی، از عناصری که نیاز به جاوا اسکریپت برای ارائه دارند اجتناب کنید.

مانند موارد زیر:

• اسلایدرهایی مانند اسلایدر Revolution
• Google Ads
• Mega Menu plugins
• Animations

6_ از پیش بارگذاری صفحات در پس زمینه استفاده کنید

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

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

کد به شکل زیر است:

<link rel=”prefetch” href=”URL_TO_PAGE”>

از افزونه هایی مانند Flying Pages استفاده کنید که این کار را بطور هوشمندانه ای خودکار می کند.

7_ تصاویر “Above Fold” را از Lazy Loading حذف کنید

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

اگر از Flying Images استفاده می کنید، می توانید تصاویر را با کلمات کلیدی که می توانند نام فایل، کلاس، شناسه ی تصویر باشند حذف کنید.

8_ تصاویر درون خطی «Critical»

تصاویر درون خطی به این معنی است که مرورگر نیازی به درخواست HTTP دیگری برای دانلود تصویر ندارد. محتوای تصویر از قبل در داخل HTML وجود دارد.

یک تصویر معمولی در HTML:

<img src=”https://yout-site.com/logo.png”/>

یک تصویر base64 در HTML (در خط):

<img src=”data:image/png;base64,…[content]…”/>

9_ اندازه DOM را کاهش دهید

هنگامی که مرورگر شما یک سند HTML دریافت می کند، باید به ساختاری درخت مانند تبدیل شود که برای رندر و نقاشی با کمک CSS و جاوا اسکریپت استفاده می شود.

این ساختار درخت مانند DOM یا Document Object Model نامیده می شود. هر چه عناصر بیشتری به صفحه اضافه کنید، زمان رندر و First Contentful Paint افزایش می یابد.

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

ممکن است در Google PageSpeed Insights شما خطای فونت گوگل پی اس آی را مشاهده کرده باشید. فایل های فونت معمولا در فایل های CSS اضافه می شوند.

برای اینکه یک مرورگر فونت ها را آماده کند، باید HTML را تجزیه کند، فایل های CSS را دانلود کند، آنها را تجزیه کند و فایل های فونت را دانلود کند. تا زمانی که همه اینها انجام نشود، متن نامرئی است! فلش متن نامرئی (FOIT) نیز نامیده می شود.

نسخه ی نمایشی:

می توانید با افزودن یک display:swap به CSS (@font-face) این مشکل را برطرف کنید. این به مرورگر می‌گوید که از یک فونت پیش‌فرض استفاده کند تا زمانی که فونت واقعی دانلود شود.

نتیجه

از آنجایی که گوگل شروع به تمرکز بیشتر روی سرعت سایت کرده است، بهبود FCP دیگر یک «خوب بودن» نیست، بلکه یک «ضرورت» است. نه تنها گوگل، FCP و FMP معیارهایی هستند که نشان می‌دهند چه زمانی یک سایت برای کاربر قابل مشاهده است. اندازه گیری زمان بارگذاری کامل همیشه کافی نیست.

با تشکر از همراهی شما، اگر سؤال یا بازخوردی دارید برای ما در بخش نظرات کامنت کنید.