Core Web Vital معیارهای سرعتی هستند که بخشی از سیگنالهای Page Experience Google برای اندازه گیری تجربه کاربر هستند. معیارها بار بصری را با بزرگترین رنگ محتوایی اندازه گیری می کنند (LCP) ، ثبات بصری با تغییر آرایش تجمعی (CLS) ، و تعامل با تأخیر ورودی اول (FID)

تجربه صفحه و معیارهای موجود در Core Web Vital رسماً برای رتبه بندی صفحات در ماه مه 2021 استفاده می شود.

منبع: گوگل

ساده ترین راه برای دیدن معیارهای سایت شما استفاده از گزارش Core Web Vital در Google Search Console. با استفاده از این گزارش ، می توانید به راحتی ببینید که آیا صفحات شما به عنوان “URL های ضعیف” دسته بندی شده اند ، “URL ها نیاز به بهبود دارند” یا “URL های خوب”.

در داخل این گزارش ، می توانید اطلاعات دقیق تری در مورد مسائل خاص و لیستی از صفحات تحت تأثیر را پیدا کنید.

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

واقعیت 2: داده ها از گزارش تجربه کاربر Chrome (CrUX) تهیه می شوند که داده های کاربران فعال Chrome را ثبت می کند. معیارها در صدک 75 کاربر ارزیابی می شوند ، بنابراین اگر 70٪ از کاربران شما در گروه “خوب” و 5٪ در “نیاز به بهبود” قرار دارند ، هنوز صفحه شما به عنوان “نیاز به بهبود” ارزیابی می شود.

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

واقعیت 4: با افزودن این معیارهای جدید ، AMP به عنوان یک الزام از ویژگی Top Stories در تلفن همراه حذف می شود. از آنجا که داستان های جدید در واقع داده هایی در مورد معیارهای سرعت ندارند ، احتمالاً ممکن است از معیارهای مربوط به دسته بزرگتری از صفحات یا حتی کل دامنه برای این مورد استفاده شود.

واقعیت 5: برنامه های تک صفحه ای چند معیار را اندازه گیری نمی کنند ، FID و LCP، از طریق انتقال صفحه. ما در یک دقیقه درمورد آنچه که هستند صحبت خواهیم کرد.

واقعیت 6: ممکن است معیارها با گذشت زمان تغییر کنند و ممکن است آستانه ها نیز تغییر کنند. Google قبلاً معیارهای اندازه گیری سرعت در ابزارهایشان را در طول سالها و همچنین آستانه آنهایی را که سریع یا خیر تلقی می شود ، تغییر داده است. کاملاً محتمل است که همه اینها در آینده دوباره تغییر کند. در حقیقت ، ما سال گذشته در زمینه بهبود معیارهای قبلی کارهایی انجام دادیم ، اما برای بهبود معیارهای جدید باید دوباره کارهایی انجام دهیم.

فقط برای تعیین انتظارات ، به یاد داشته باشید که بیش از 200 عامل رتبه بندی وجود دارد. من انتظار بهبودی از بهبود Core Web Vital ندارم. مشخص نیست که آنها چه تاثیری بر رتبه بندی دارند اما به نظر نمی رسد که یک سیگنال قوی باشد ، خصوصاً با توجه به اینکه بسیاری از اجزای تجربه صفحه قبلاً توسط Google برای تعیین رتبه بندی استفاده شده بود.

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

بزرگترین رنگ محتوای (LCP) – بارگذاری

LCP بزرگترین عنصر قابل مشاهده است که در ویوپورت بارگیری می شود.

منبع: web.dev/vital

بزرگترین عنصر معمولاً یک تصویر برجسته یا شاید برچسب

باشد اما می تواند هر یک از این موارد باشد:

• عنصر
• عنصر درون عنصر
• تصویر درون یک عنصر
• تصویر پس زمینه با عملکرد url () بارگیری می شود
• بلوک متن

چطور ببینیم LCP

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

در Chrome DevTools ، این مراحل را دنبال کنید:

1. عملکرد> بررسی “عکسهای صفحه”
2. روی “شروع نمایه سازی و بارگیری مجدد صفحه” کلیک کنید
3. LCP روی نمودار زمان بندی است
4. روی گره کلیک کنید ؛ این عنصر برای است LCP

بهینه سازی LCP

با ما LCP عنصر موجود در این صفحه و بسیاری از صفحات دیگر به عنوان تصویر برجسته ، ما می توانیم با بارگیری مجدد این تصویر یا احتمالاً جمع بندی کلی تصویر برای بارگیری تصویر همراه با HTML کد اساساً ما می خواهیم این تصویر را سریعتر از آنچه در حال حاضر بارگیری می کنیم بارگیری کنیم.

منابع

تغییر چیدمان تجمعی (CLS) – ثبات بینایی

CLS نحوه حرکت عناصر یا پایداری طرح بندی صفحه را اندازه گیری می کند. اندازه محتوا و مسافت حرکت را در نظر می گیرد. یک مسئله مهم در مورد اندازه گیری این است که اندازه گیری آن حتی پس از بارگیری اولیه صفحه ادامه دارد. Google در مورد این معیار خاص بازخورد می گیرد ، بنابراین احتمالاً در آینده شاهد تغییراتی در آن خواهیم بود.

منبع: web.dev/vital

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

علل شایع CLS عبارتند از:

• تصاویر بدون ابعاد
• تبلیغات ، جاسازی ها و فریم های بدون ابعاد
• تزریق محتوا با JavaScript
• استفاده از قلم ها یا سبک ها در اواخر بار

چطور ببینیم CLS

در PageSpeed ​​Insights ، در بخش Diagnostics ، لیستی از عناصر در حال تغییر را پیدا خواهید کرد.

استفاده كردن WebPageTest. در Filmstrip View ، از گزینه های زیر استفاده کنید:

• تغییرات چیدمان را برجسته کنید
• اندازه تصویر بند: عظیم
• فاصله تصویر بند انگشتی: 0.1 ثانیه

توجه داشته باشید که چگونه فونت ما بین 5.1s ‑ 5.2s دوباره سبک می شود و با استفاده از فونت سفارشی ، طرح را تغییر می دهد.

ممکن است بخواهید امتحان کنید تغییر طرح بندی GIF ژنراتور.

مجله سر و صدا همچنین از تکنیک جالبی برخوردار بودند که در آنجا همه چیز را با یک خط قرمز جامد 3 پیکسل مشخص کردند و یک فیلم از بارگیری صفحه را ضبط کردند تا مشخص شود که تغییرات چیدمان در حال انجام است.

بهینه سازی CLS

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

منابع

تأخیر ورودی اول (FID) – تعامل

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

تعاملات مثال:

• کلیک کردن روی پیوند یا دکمه
• وارد کردن متن در یک قسمت خالی
• انتخاب یک منوی کشویی
• با کلیک بر روی یک جعبه تأیید.

تلاش برای کلیک کردن روی چیزی و هیچ اتفاقی روی صفحه ممکن است ناامیدکننده باشد.

منبع: web.dev/vital

همه کاربران با یک صفحه ارتباط برقرار نمی کنند ، بنابراین ممکن است یک صفحه نداشته باشند FID ارزش. همچنین به همین دلیل است که ابزارهای آزمایشگاهی ارزشی ندارند زیرا با صفحه تعامل ندارند. استفاده از زمان مسدود کردن کل (TBT) بجای.

علت FID

جاوا اسکریپت برای موضوع اصلی رقابت می کند. فقط یک موضوع اصلی وجود دارد و JavaScript برای اجرای وظایف بر روی آن رقابت می کند.

منبع: https://web.dev/long-tasks-devtools

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

بهینه سازی FID

من هیچ نگرانی برای سایت ما ندارم FID، اما به طور کلی ، شما می خواهید کارهای طولانی را از بین ببرید و JavaScript را که نیازی به آن نیست بعداً موکول کنید.

منابع

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

داده های میدانی

داده های آزمایشگاه

من گزارش را دوست دارم GSC زیرا می توانید داده های بسیاری از صفحات را به صورت هم زمان مشاهده کنید ، اما داده ها کمی تأخیر دارد و با میانگین نورد 28 روزه بنابراین نمایش تغییرات ممکن است مدتی طول بکشد. در Chrome 88 ، Google است اضافه کردن Core Web Vital درست در DevTools.

شما همچنین می توانید پیدا کنید به ثمر رساندن وزنه ها برای فانوس دریایی در هر زمان و دیدن تغییرات تاریخی.

افکار نهایی

شما می خواهید Core Web Vital ها را بهبود ببخشید تا کاربران شما تجربه بهتری داشته باشند. باید دید آنها چه تاثیری خواهند گذاشت سئو، اما همانطور که در مقاله سرعت صفحه ذکر کردم ، آنها باید به شما کمک کنند داده های بیشتری را در تجزیه و تحلیل خود ثبت کنید که “احساس” افزایش می کند.

با توسعه دهندگان خود کار کنید آنها خبرگان اینجا هستند. سرعت صفحه می تواند بسیار پیچیده باشد. اگر خودتان هستید ممکن است لازم باشد به یک افزونه یا سرویس اعتماد کنید تا از این قبیل استفاده کنید WP Rocket یا NitroPack.