اگر بتوانید عملکرد وب سایت خود را تا 10 درصد بهبود دهید ، آیا این کار را انجام می دهید؟
نمره دهی عملکرد سایت یک شبکه پیچیده از معیارها است و First Contentful Paint (FCP) تنها یکی از عواملی است که Google هنگام ارزیابی سرعت بارگذاری صفحه در نظر می گیرد. FCP که مسئول 10 of از نمره عملکرد کلی وب سایت است ، نقش مهمی در ایجاد یک تجربه کاربری مثبت برای بازدیدکنندگان دارد.
اولین رنگ محتوا یک سایت (FCP) کل زمانی است که طول می کشد تا یک صفحه از لحظه ارسال درخواست تا جایی که هرگونه محتوا روی صفحه نمایش داده می شود بارگیری شود.
هرچه نمره FCP بیشتر باشد ، بارگذاری محتوا کندتر می شود. وقتی بازدیدکنندگان فکر می کنند که بارگیری صفحه بسیار طولانی می شود ، می تواند پرچم قرمز بزرگی باشد. در مطالعه ای که توسط شرکت های طراحی برتر انجام شد ، 42 درصد از مردم گفتند که یک شرکت را ترک می کنند وب سایت ضعیفبه
اما نمره پایین FCP نشان می دهد که صفحه به سرعت بارگیری می شود ، به این معنی که محتوا زودتر تحویل داده می شود. و بارگذاری سریع محتوا یکی از راه هایی است که می تواند بازدیدکنندگان را در سایت شما پیمایش کند. در حقیقت ، Deloitte دریافت که الف بهبود 0.1 ثانیه ای در زمان بارگذاری نرخ تبدیل 8.4 for برای سایت های خرده فروشی و 10.1 for برای سایت های مسافرتی افزایش یافته است.
وقتی میلی ثانیه تفاوت ایجاد می کند ، بهتر است هر کاری که می توانید انجام دهید تا سرعت سایت خود را افزایش دهید. بنابراین بیایید نگاهی به نحوه کاهش FCP بیندازیم تا سایت شما تا حد ممکن سریع و کاربرپسند شود.
اولین رنگ محتوا چیست؟
First Contentful Paint (FCP) مدت زمانی است که طول می کشد تا کاربر اولین محتوای یک وب سایت را ببیند ، اعم از تصاویر ، متن ، لوگوها ، گرافیک پس زمینه یا عناصر غیر سفید
در جدول زمانی زیر ، می توانید FCP را در فریم دوم هنگامی که اولین عناصر متن و تصویر روی صفحه ظاهر می شوند مشاهده کنید.
منبع تصویر
First Contentful Paint یکی از شش معیاری است که در Google دنبال می شود گزارش عملکرد فانوس دریایی، همراه با Time to Interactive ، Speed Index ، Total Blocking Time ، Largest Contentful Paint و Cumulative Layout Shift. هر معیار جنبه ای از سرعت بارگذاری صفحه را اندازه گیری می کند.
منبع تصویر
First Contentful Paint معیار مهمی برای قضاوت در مورد جدول زمان بارگذاری صفحه است زیرا نقطه ای را مشخص می کند که در آن کاربر می تواند متوجه شود که چیزی روی صفحه اتفاق می افتد. بدون این اطمینان ، کاربر ممکن است صفحه را ترک کند تا وب سایت سریع تری را مرور کند.
First Contentful Paint با رنگ متفاوت است Core Web Vitals بزرگترین رنگ محتوا (LCP) زیرا LCP زمان قابل مشاهده شدن بزرگترین عنصر در وب سایت را اندازه گیری می کند. از طرف دیگر ، FCP اولین عنصر بارگیری را اندازه گیری می کند ، که لزوماً بزرگترین عنصر نیست.
LCP سریع به مردم اطمینان می دهد که محتوای اصلی برای آنها مفید است. اما FCP سریع به مردم اطمینان می دهد که چیزی در صفحه اتفاق می افتد ، که می تواند آنها را به اندازه کافی در اطراف نگه دارد تا بقیه صفحه بارگذاری شود.
نحوه آزمایش اولین رنگ محتوا
FCP را می توان در آزمایشگاه (پیش از انتشار) و در صحرا (کاربران دنیای واقعی) اندازه گیری کرد.
آزمایش FCP در آزمایشگاه راه خوبی برای حل مسائل قبل از شروع به کار سایت شما است ، اما دقیق ترین روش برای ارزیابی عملکرد نیست. این همان جایی است که آزمایش میدانی آغاز می شود و به شما نشان می دهد که چگونه افراد با سایت شما در صورت وجود تفاوت در دستگاه ها ، اتصالات شبکه و تعاملات کاربران ، تعامل می کنند.
برای آزمایش رنگ اول محتوا می توانید از ابزارهای زیر استفاده کنید:
ابزارهای میدانی
ابزارهای آزمایشگاهی
برای این مقاله ، بیایید به بررسی نحوه انجام آزمایش با Lighthouse بپردازیم-یک ابزار خودکار منبع باز برای بهبود کیفیت صفحات وب. (اگر قبلاً هرگز این ممیزی را انجام نداده اید ، پیوند را برای دستورالعمل های آسان گام به گام دنبال کنید).
هنگامی که آزمایش URL مشخصی را انجام می دهید ، Lighthouse یک برگه جدید باز می کند تا نمای کلی عملکرد سایت را به اشتراک بگذارد. در مثال زیر ، سایت از نظر سئو و دسترسی خوب عمل می کند اما نیاز به کار در زمینه عملکرد و بهترین شیوه ها دارد.
منبع تصویر
اگر عمیق تر شود ، حسابرسی همچنین نمرات مربوط به هر یک از شش معیار عملکرد ، از جمله First Contentful Paint (FCP) را می دهد. در آزمون نشان داده شده در زیر ، نمره FCP 2.5 ثانیه است – زمانی که “نیاز به بهبود دارد”.
منبع تصویر
اما برای بهبود FCP باید بدانید که چه چیزی نمره “خوب” را می سازد.
ایده آل اولین محتوا سرعت رنگ
گوگل اولین نمره گذاری رنگ محتوا را توصیه می کند 1.8 ثانیه یا کمتر به منظور ارائه تجربه خوب مرور به بازدیدکنندگان سایت شما.
منبع تصویر
اما چه چیزی نمره FCP شما را تعیین می کند؟
مانند همه چیز Google ، روشی برای اندازه گیری وجود دارد. نمره FCP شما با مقایسه زمان FCP سایت شما با زمان FCP برای سایتهای واقعی و با استفاده از داده های مربوط به آن تعیین می شود بایگانی HTTPبه می توانید عمیق تر شیرجه بزنید تا نحوه آن را ببینید Lighthouse آستانه ها و نمرات متریک را تعیین می کندبه
هنگام ارزیابی نمره FCP شما ، گوگل می گوید “یک آستانه خوب برای اندازه گیری ، صدک 75 درصد بارگذاری صفحات ، تقسیم بندی شده در دستگاه های تلفن همراه و رومیزی است.” این امر به ارائه تجربیات دقیق کاربر کمک می کند.
اگر سایت شما نمره FCP ضعیفی دارد ، مراحل زیر را می توانید برای اصلاح ثانیه ها و ایجاد سایت سریعتر انجام دهید که بازدیدکنندگان می خواهند در آن حرکت کنند. اما ابتدا بیایید بررسی کنیم که چه چیزی منجر به نمره ضعیف می شود.
چه چیزی باعث ایجاد رنگ اول با محتوای بالا می شود
فایل های متنی بزرگ ، زمان پاسخگویی سرور آهسته و هدایت مجدد صفحات همه می توانند به نمره بالای First Contentful Paint بالا کمک کنند. اگر شما دارای اولین رنگ محتوا (FCP) بالا هستید ، احتمالاً به یکی از عوامل زیر برمی گردد:
- کند شدن زمان بارگذاری فونت
- زمان پاسخگویی کند سرور (TTFB)
- تعداد درخواست بالا و اندازه های انتقال بزرگ
- ارائه منابع مسدود کننده
- CSS استفاده نشده یا ناکارآمد
- عناصر مبتنی بر اسکریپت در بالای تاشو
- بارگذاری تنبل در بالای تاشو
- خط کشی نکردن تصاویر بالای تاشو
- اندازه DOM بیش از حد
- تغییر مسیر چندین صفحه
اما به خاطر داشته باشید ، نمره عملکرد Lighthouse میانگین وزنی تمام نمرات متریک است – و FCP 10٪ از کل آن را تشکیل می دهد. در نتیجه ، نمرات با وزن زیاد تأثیر بیشتری بر نمره کلی عملکرد شما خواهند داشت. در اینجا نحوه وزن دهی به سایر معیارهای Lighthouse آورده شده است:
منبع تصویر
اگر نمره کلی عملکرد شما نیاز به بهبود دارد ، بهتر است قبل از مقابله با اولین رنگ محتوا ، زمان خود را برای بهینه سازی کل زمان مسدود کردن یا بزرگترین رنگ محتوا اختصاص دهید. همانطور که شیوه های توسعه خوب را در سایت پیاده سازی می کنید ، به احتمال زیاد نمره FCP شما پایین می آید.
اما اگر می خواهید FCP را بهبود بخشید ، می توانید چند مرحله هدفمند را برای حرکت از نمره قرمز به سبز بردارید.
نحوه بهبود اولین رنگ محتوا
بهبود نمره First Contentful Paint (FCP) همیشه ساده نیست. اما با برنامه ریزی عملی مناسب ، اولویت بندی خطاهای عمده ای که بیشترین تأثیر را دارند ، آسان تر است. بیایید نحوه انجام این کار را تجزیه کنیم.
1. لیستی از مسائل با اولویت بالا ایجاد کنید.
اولین قدم برای کاهش نمره FCP برای هر سایت ، اجرای لیست آزمایشات و آزمایشات میدانی است که در بالا برای درک آنها استفاده شده است دقیقا آنچه باید روی آن کار کنید
بیایید به گزارش عملکرد Lighthouse از قبل بازگردیم. اگر نمره FCP “نیاز به بهبود دارد” ، بهتر است در گزارش به فرصتها یا توصیه های تشخیصی اشاره کنید. برای مشاهده همه توصیه ها ، به برگه “همه” بروید. یا برای توصیه های خاص نمره First Contentful Paint (FCP) ، به برگه “FCP” بروید.
منبع تصویر
آزمون فوق دو فرصت را برای بهبود FCP به اشتراک می گذارد: حذف منابع مسدود کننده رندر و اطمینان از قابل مشاهده بودن متن در هنگام بارگذاری Webfont.
با یادگیری مسائل مهم م FCثر بر FCP ، لیستی از محل تمرکز و آنچه را که باید برطرف کنید خواهید داشت.
2. بیاموزید که چه چیزی را نادیده بگیرید.
یکی دیگر از ویژگی های مفید گزارش عملکرد Lighthouse این است که بدانید چه چیزی را انجام می دهید نکن نیاز به تمرکز بر این فهرست در بخش “ممیزی های گذرانده شده” گزارش عملکرد ایجاد می شود.
منبع تصویر
در حالی که نادیده گرفتن این مسائل غیرممکن است ، بدانید که Google دائماً معیارهای مورد استفاده برای ارزیابی سرعت بارگذاری صفحه را به روز می کند. این تمرین خوبی است که به طور معمول آزمایش هایی را انجام دهید تا از عملکرد سایت اطمینان حاصل کنید – ممکن است لازم باشد روزی “ممیزی گذرانده شده” را در اولویت قرار دهید.
3. برای رفع مشکلات با تیم وب خود کار کنید.
هنگامی که می دانید به چه موضوعاتی باید توجه کنید ، صرفاً اقدام برای بهبود مواردی است که بر First Contentful Paint (FCP) تأثیر می گذارند.
این پست وارد علف های هرز توسعه وب نمی شود. اما این راهنمای مفصل از Google منابع بسیار خوبی برای درک هر عاملی است که بر سرعت و عملکرد صفحه تأثیر می گذارد. اگر یکی بر نمره FCP شما تأثیر می گذارد ، می توانید به بررسی نحوه حل مشکل بپردازید.
این که آیا نمره اولین رنگ محتوا (FCP) شما قرمز ، زرد یا سبز نشان داده می شود ، همیشه باید پیشرفت هایی انجام شود. این سرگرم کننده – و گاهی اوقات ، ناامید کننده – بخشی از توسعه وب است.
اما به یاد داشته باشید ، تغییرات کوچک می توانند تأثیر زیادی داشته باشند. کاهش زمان پاسخگویی سرور ، فشرده سازی تصاویر و آگاهی از عناصر بالای پوشه می تواند نمره FCP شما را پایین بیاورد ، سایت شما را سرعت بخشیده و اطمینان حاصل کند که بازدیدکنندگان سایت از مرور سریعتر و طولانی تری برخوردار خواهند بود.