اف سی پی چیست و چگونه FCP را کاهش دهیم؟

اف سی پی چیست؟ معمولا افرادی که این کیورد را سرچ می کنند که در حوزه طراحی سایت و یا وبمستر فعالیت دارند و سوال خود را اینگونه مطرح کرده اند که اف سی پی چیست ؟

کاری با تخصص شما نداریم. اما در هنگام وارد شدن به یک سایت، در هنگام لود شدن آن کمی دقت داشته باشید ، متوجه زمان های تلف شده بسیاری هستید. این زمان های بین بارگذاری به دو عامل نسبت داده می شوند : عامل کاربری و عامل سروری.

همان طور که از اسمشان پیداست ، مورد اول به این معنی است که عامل از سمت سیستم خود کاربر است که بنا به هر دلایلی در کند شدن سرعت لود SITE تاثیر گذار بوده همانند : کاهش پهنای باند (سرعت نت) ، پر شدن حجم کش و تاریخچه ، اتمام حجم اینترنت ، آنتن دهی بد سیم کارت ها و برخی مودم ها و … این عوامل از سمت کاربر تاثیر بسیاری در کاهش سرعت بارگذاری site دارد.

اما عامل سروری به چه شکلی است و تاثیر آن بر روی سرعت لود SITE و اف سی پی چیست؟ به‌طور کلی وقتی شما سایتی را می خواهید باز کنید. در واقع درخواستی را به کامپیوتر های قوی‌ ولی مشابه کامپیوتر و سیستم خود می دهید که آنها سرور نام دارند و سایت مورد نظر شما همانند یک نرم افزار بر روی آنها نصب‌شده است.

حال به هر عاملی که خارج  از سمت کاربر و اپراتور باشد ، به روایتی از سمت خود SITE و سرور باشد را عامل سروری می گویند همانند : ضعیف بودن سرور ، سنگین بودن اطلاعات در صفحات سایت ، سئو نبودن محتوای درون آن و … که باعث می شود به‌طور چشمگیری شاهد افزایش اف سی پی باشیم.

اما تایم اف سی پی چیست و چرا اینقدر برای وبمستران ، طراحان SITE و متخصصان سئو مهم است.

این مقاله ، محتوای جامعی در مورد fcp و بهینه سازی fcp برای شما دوستان می باشد. با مطالعه این مقاله به اطلاعات خوبی خواهید رسید که به پاسخ سوالات خود خواهید رسید. با این مقاله پویا وب همراه باشید.

پادکست :

اف سی پی چیست
اف سی پی چیست

اف سی پی چیست ؟ آشنا شدن با Gtmetrix

جی تی متریکس یک ابزار جهانی است که با سرمایه گذاری دو شرکت بزرگ یاهو و گوگل ساخته شد. این ابزار با معیار های جهانی که برای لود سایت در نظر گرفته شد ، SITE مورد نظر را ، از تمام عوامل مورد برسی قرار می دهد.

با وارد کردن آدرس URL کامل سایت ، پس از گذشتن کمی زمان و آنالیز آدرس ، جی تی متریکس یکسری اطلاعات جامع نسبت به معیار ها تعریف شده بر آن ، به شما نشان خواهد داد.

بیشتر وبمستران و متخصصان سئو ، همواره با اطلاعاتی که از Gtmetrix می گیرند ، در تلاش هستند که مشکلات SITE خود را برطرف کنند و افزایش لود سایت و بارگذاری خوبی برای کاربران ایجاد کنند. اما جی تی متریکس با اف سی پی چیست؟

یکی از همین معیار های جی تی متریکس ، fcp نام دارد. این معیار مخفف first contentful paint است. قبل از وارد شدن به بحث تخصصی fcp بهتر است کمی با معیار دیگر این ابزار آشنا شویم تا درک بهتری از موضوع اصلی داشته باشیم.

اف سی پی چیست

معیار های دیگر در کنار اف سی پی چیست ؟

  1. Speed Index : SI
  2. first contentful paint : FCP
  3. Largest Contentful Paint : LCP
  4. Time to Interactive : TTI
  5.  Total Blocking Time : TBT
  6. Cumulative Layout Shift : CLS

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

مورد اول Speed Index و SI : به شاخص سرعت بارگذاری یک سایت اشاره دارد. سرعت بارگذاری و لود اطلاعات در هر سایتی را نسبت به آیتم های موجود در آن را با این معیار نشان میدهند.

مورد دوم first contentful paint و fcp : همان موضوع این مقاله است ، یعنی اف سی پی چیست؟ اینجا یکی از ریز معیار ها ملزم به گفتن است. قبل از خود FCP معیاری به نام FP وجود دارد که قبلا معیار اندازه گیری با آن بوده و الان دیگر جواب گو نیست. برای همین از معیار first contentful paint استفاده می شود. این معیار به معنی اولین محتوای لود شده که می تواند نوشته ها ، عکس ها و آیتم های موجود دیگر در اول صفحه باشد ، است.

اف سی پی چیست

مورد سوم Largest Contentful Paint و LCP : به معیاری گفته می شود که آیتم های موجود در صفحه کاملا بارگذاری شده است و برای کاربر قابل درک و رویت است. این معیار از سال 2020 برای تجربه کاربری بهتر کاربران در لایت هاوس (lighthouse) ایجاد و تایید شده.

مورد چهارم Time to Interactive و TTI : که به میزان و معیاری گفته می شود یک وب سایت قابلیت تعامل با کاربر را دارد و مرورگر ما نیز قابل انجام دستورات مربوطه را داشته باشد.

مورد پنجم Total Blocking Time و TBT : به‌طور کلی زمان بین دو معیار FCP و TTI را اندازه گیری می کند. این مقدار ، به زمانی گفته می شود که کاربر کلا هیچ دسترسی و قابلیت کار کردن با آیتم های درون سایت ، از لحظه ظاهر شدن تا رندر شدن کامل را ندارد.

اف سی پی چیست

مورد ششم Cumulative Layout Shift و CLS : به معیار و امتیاز عملکردی گفته می شود که از ثبات بصری در حین رندر های آخر وب سایت درخواست شده ، توسط مرورگر است. این معیار و متریک اندازه گیری ، جابجایی های غیر منتظره و یهویی عناصر و المان های موجود در سایت را اندازه گیری می کند و به آن امتیاز می دهد.

معیار های حائز اهمیت و نکات مهمی در جهت آشنایی کامل با gtmetrix وجود دارد ، که برای سئو کردن یک سایت بسیار مهم است.

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

ولی یک سوال مهمی که پیش می آید این است که ، سرعت لود و این معیار ها در سئو چه تاثیری دارد؟

اف سی پی چیست

تاثیر سرعت لود سایت و fcp در سئو چیست ؟

همانطور که می دانید سئو به معنی بهینه سازی موتور های جستوجوگر است. موتور های جستوجوگر به معدل گیری به سایت شما نسبت به فاکتور ها و معیار ها امتیاز می دهد و در نمایش جستوجوی کیورد ها نشان می دهد.

معدل گیری بین ایندکس ربات ها طبق الگوریتم و ، رفتار کاربر با ایندکس کردن صفحه و SITE مورد نظر است.

حال تمام موارد لود ، بارگذاری ، رندرینگ و FCP تاثیر بسیار زیادی بر crawler های گوگل و رفتار های خود کاربر دارد. این موضوع کمی از جانب کاربر حالت روانشناسی دارد و باید خودتان با تجربه و جمع آوری اطلاعات در این حوضه ، اطلاعات روانشناسی را کسب کنید.

اما به‌طور کلی بهینه سازی اف سی پی تاثیر بسیار خوبی در بارگذاری و سرعت لود SITE ، سئو سایت و رفتار کاربر دارد.

بیشتر بخوانید:

سئو چیست و چه کاربردی دارد؟

اف سی پی چیست

Fcp چیست و چطور باید بهینه سازی اف سی پی کنیم؟

همانطور کمی پیش در بالا گفتیم first contentful paint ، معیاریست که مدت زمان اولین بارگذاری محتوا های درج شده در صفحه ، توسط سرور در مرورگر کاربر نشان داده می شود. محتوای موجود می تواند عناصری مانند : نوشته ها ، عکس ها ، لینک ها ، آیتم های مختلف و … باشد. بیایید با ذکر مثال به fcp به‌طور دقیق تر بپردازیم.

 

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

 

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

اف سی پی چیست

اگر سرور و SITE مربوطه محدودیت نداشته باشد و مشکلی برای آن پیش نیامده باشد ، درخواست شما را قبول و انیمیشن کوچک مربوطه ، روشن شده و در جهت عقربه های ساعت با سرعت بیشتر میچرخد. (البته این در مرورگر کروم است)

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

اما نکته حائز اهمیت این است که این از دید کاربر معمولی است!

این قسمت سبز شدن انیمیشن بارگذاری تا لود و رندر کامل از چندین بخش تبدیل شده که در بالا انواع معیار های آن ها را نام بردیم.

اما متریک اف سی پی چیست و در کدام مرحله از این لود قرار دارد؟

اف سی پی چیست

مرحله بعدی در آشنایی با first contentful paint

بعد از سبز شدن چرخنده لود SITE ، با یک تغییرات جزعی در رنگ پس زمینه صفحه مرورگر خود برخورد می کنیم. این تغییرات پس زمینه از همان مراحل رندرینگ و معیار های متریک است که FP نام دارد.

FP یعنی firs paint ، همانطور که از اسمش پیداست یعنی اولین رنگ. خوب این به این معنی است که یک علائمی از بارگذاری در SITE مورد نظر داریم. این قسمت معمولا حالا یا با استفاده از کد نویسی و یا با استفاده از خود cms مربوطه ، رنگ مورد نظر انتخاب می شود.

طبق استاندارد های gtmetrix این قسمت بایستی لودی زیر 0.9 ثانیه باشد ، که البته کمتر سایت هایی در این مدت زمان لود در قسمت FP دارند. اما به‌طور معمول و از سر تجربه ای که خودمان داشتیم و از استادان داخلی و خارجی بدست آوردیم ، تایم 1.2 تا 1.5 ثانیه هم برای این قسمت ، مورد قبول است.

بیشتر بخوانید:

Lcp چیست و چگونه آن را بهینه کنیم ؟

اف سی پی چیست
تفاوت اف پی و اف سی پی چیست؟

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

 

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

 

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

 

یادتون باشه که در قسمت performance حدود 10 تا 15 درصد این امتیاز از قسمت fcp بدست می آید و مهم است که آن را حتما بهینه کنید.

اف سی پی چیست

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

 

  • کمتر از ۰.۹ ثانیه : خوب
  • بین ۰.۹ تا ۱.۲ ثانیه : قابل قبول، اما نیازمند بهینه سازی
  • بین ۱.۳ تا ۱.۶ ثانیه : کمی طولانی ‌تر از حد استاندارد
  • بیشتر از ۱.۶ ثانیه : خیلی طولانی‌ تر از حد استاندارد
  •  

این معیار و ملاک های زمانی را ، برای اینکه بدانید چه مدت زمان باید در FCP سپری شود ، توسط خود سایت gtmetrix ارائه می شود. اما از نظر ما شما می توانید برای داشتن یک performance و امتیاز خوب در این سایت ، و هم اینکه چون مورد اول بسیار سخت و غیر ممکن است ، به تایم های دیگر اتکا می کنیم.

اف سی پی چیست

در گزینه دوم تمرکز داشته باشید. SITE هایی که حتی پرفورمنس بالای 60 درصد دارند fcp زیر یک ثانیه ندارند.

به غیر از  یک سری وب سایت های قوی و خاص مانند خود سایت gtmetrix ، moz و … هستند که در برخی مواقع performance 100 دردصد دارند.  حتی  FCP آن ها به 500 میلی ثانیه هم نمی رسند.

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

درست است که شبکه جهانی ، یک شاه راه است که در آن واحد به واحد دیگر به هر جایی دسترسی دارد. اما مسیر لایت هاوس بسیار مهم است.

اف سی پی چیست
شروع به بهینه سازی fcp

برخی برای بار اول با خود میگویند که شاید این یک کد مخصوص و یا یک حرکت ساده و مستمر دارد که به مرور زمان FCP سایت ما را کاهش و آن را بهینه سازی می کند. اما کاش اینطور بود .😂

 

یک موضوع قبل از پرداختن به مواردی که در جهت بهینه سازی اف سی پی است ، این است که ، با پیشرفت روز افزون فضای مجازی و عواملات آن ، شرایط هایی بوجود می آِید که شاید باعث شود که یک معیار متریکس دیگر به این الگوریتم ها اضافه شود.

 

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

بیشتر بخوانید: Si چیست و چگونه آن را بهینه کنیم؟

اف سی پی چیست

راه های بهینه سازی اف سی پی چیست؟

  1. کاهش زمان پاسخ اولیه سرور (TTFB).
  2. استفاده از CDN با تنظیمات صحیح.
  3. استفاده صحیح از کش.
  4. جلوگیری از ریدایرکت های پیاپی.
  5. فشرده کردن فایل های سی اس اس.
  6. پاک کردن سی اس اس غیرقابل استفاده.
  7. استفاده از rel=”preload” در منابع مثل جی اس، سی ال اس یا فونت ها.
  8. پرهیز از صفحات طولانی با داده‌های سنگین.
  9. تعداد  CSS و  JS های پشت سر هم را کم کنید.
  10. استفاده از font-display در فونت ها.
  11. حذف منابعی که از باعث ایجاد وقفه یا توقف در Render میشن.
  12. هر چی DOM صفحه سنگین تر باشه صفحه کند تره، مباحث JS هست.
  13. حجم و تعداد فایل ها رو کم نگه دارید.
  14. زمان FCP تا حد زیادی به کیفیت فنی سرور شما و کدنویسی‌ های انجام شده در سایتتون بستگی داره. بهترین هاست رو تهیه کنید.
  15. سئو یا بهینه سازی متن ها و رسانه هایی چون عکس ها و ویدیو ها.
  16. ایجا بارگذاری تنبل یا همان لِیزی لود در عکس ها و ویدیو ها.  

تماس با پویا وب

اشتراک گذاری در whatsapp
اشتراک گذاری در telegram
اشتراک گذاری در facebook
اشتراک گذاری در google

دیدگاه ها بسته شده است

آژانس طراحی سایت پویا وب با طراحی وب سايت حرفه‌ای و طراحی فروشگاه اینترنتی بيش از پانصد شرکت و ميزبانی بيش از هزار وب سايت، فعاليت رسمی خود را از تابستان سال 1395 آغاز کرده و همواره می‌کوشد خدمات خود را با بالاترين کيفيت ممکن و با بهره‌گيری از جدیدترین متدها به شما ارائه دهد.