الگوریتم جدید گوگل Core Web Vitals

چند مدت پیش گوگل با اعلام عامل رتبه بندی جدید برای سال ۲۰۲۱ باعث ایجاد حیرت قابل توجهی شد: تجربه صفحه (paper experience). تجربه کاربری همیشه بخش اساسی در ساختن بهترین سایت موجود بوده است اما اکنون نقش بزرگتری در کمک رسانی به شما در ساختن سایت های فوق العاده برای کاربران تان ایفا خواهد کرد. تمام اینها با استفاده از معیارهای جدید خواهد بود که مرکزیت آن Core Web Vitals است. وقتش رسیده است که با LCP، FID و CLS آشنا شوید!

به روز رسانی تجربه صفحه از جانب گوگل طراحی شده توسط Web Vitals

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

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

Core Web Vitals زیر مجموعه Web Vitals هستند که بر تمام صفحات وب اعمال میشوند که باید توسط مالک سایت اندازه گیری شود و در تمام ابزارهای گوگل نمایان می شود هر کدام از Core Web Vitals نماینگر جنبه ای متمایز از تجربه کاربر هستند که قابل اندازه گیری است و نتیجه مهم و کاربرمحوری از تجربه واقعی را نشان میدهد.

سه اصل تجربه صفحه:

تا این لحظه سه اصل تجربه صفحه به شرح زیر است:

• عملکرد بارگیری (سرعت نمایش داده های روی صفحه نمایش چقدر است؟)
• واکنش پذیری (ریسپانسیو بودن) (سرعت واکنش صفحه به ورودی کاربرد چگونه است؟)
• پایداری بصری (آیا در حین بارگیری صفحه، اشیاء روی صفحه نمایش حرکت میکنند؟)

برای اندازه گیری سه جنبه ضروری تجربه کاربر، گوگل سه معیار مرتبط را انتخاب کرده است – اصطلاحاً Core Web Vitals

• Largest Contentful Paint (LCP): این معیار مدت زمان نمایش بزرگترین محتوا بر صفحه نمایش را اندازه میگیرد. این محتوا میتواند عکس یا مجموعه ای از متون باشد. امتیاز خوب زمانی حاصل میشود که کاربران احساس کنند سرعت بارگیری صفحه بالا است. سرعت نمایش پایین منجر به کلافگی میشود.
• First Input Delay (FIS): این معیار سرعت واکنش سایت به اولین تعامل کاربر را اندازه گیری میکند. این تعامل میتواند کلیک بر کلیدی در سایت باشد. امتیاز خوب زمانی حاصل میشود که کاربر احساس کند سایت نسبت به ورودی هایش سریع واکنش نشان میدهد و بنابراین واکنش پذیر (ریسپانسیو) است. کندی دوباره منجر به کلافگی میشود.
• Cumulative Layout Shift (CLS): این معیار پایداری بصری سایت شما را اندازه میگیرد. به عبارت دیگر، آیا در حین بارگیری اشیاء روی صفحه نمایش حرکت میکنند؟ و فراوانی این اتفاق چقدر است؟  هیچ چیز بیشتر از این باعث کلافگی نمیشود وقتی که میخواهید بر یک کلیدی کلیک کنید و تبلیغی کند در همان نقطه ظاهر میشود.

ابزارهای مختلف از معیارهای متفاوت استفاده میکنند

ابزار تجربه هر صفحه از شماری از Web Vitals استفاده میکند، که از منابع مختلف جمع آوری میشوند. از آنجایی که هر ابزاری دارای هدف و کاربردی است، معیارهای مورد استفاده برای هر ابزار متفاوت است. با این حال، وجه مشترک متداول Core Web Vitals هستند که گوگل از اینها در ابزار تجربه هر صفحه استفاده میکند.

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

این Core Web Vitals چه چیزهایی هستند؟

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

LCP: Largest Contentful Paint

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

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

در گذشته معیارهای مانند First Meaningful Content وجود داشت که مدت زمان ظاهر شدن اولین محتوای مهم بر صفحه را اندازه گیری میکرد. اما، برخلاف آنچه که از اسم این معیار به نظر می رسد، FMC اغلب نمیتوانست بفهمد کدام قسمت محتوا که بر صفحه ظاهر میشود از اهمیت برخوردار است. معیارهای پیچیده منجر به تولید داده های بی فایده می شوند.

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

آنچه که باید بدانید

حالا که میدانید LCP چیست، میتوانید سایتان را بهینه کنید. با توجه به گفته های گوگل، هدف شما برای LCP باید بارگیری صفحه در اولین ۲.۵ ثانیه باشد. هرچیزی زیر ۴ثانیه نیازمند بهینه سازی است و هرچیزی بالا ۴ثانیه به معنای عملکرد ضعیف است.

LCP همچنین پویا است، زیرا ممکن است اولین چیزی که بلافاصله بارگیری میشود، تصویر بزرگ نباشد پس LCP به تصویر بزرگی که ظاهر میشود شیفت میکند.

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

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

گوگل ابزارهای مختلفی را برای کمک به شما در یافتن همه این عناصر ارائه می دهد. برای مثال PageSpeed Insights داده های زیادی را برای Web Vitals و همچنین توصیه های زیادی برای بهبود صفحه ی شما ارائه میدهد. اگه ما سایت yoast.com را در  PageSpeed Insights آزمایش کنیم، نتایج زیر به دست می آید و توصیه ها از سوی گوگل ارائه میشود. در مورد سایت ما، مقدار LCP مقدار میانگین بود. در تصویر زیر شما میتوانید ببینید که  PageSpeed Insights به درستی آن عنصر را شناسایی کرده است. اکنون شما میدانید چه چیزهایی را باید بهینه سازید.

با توجه به گوگل، LCP تحت تاثیر چند عامل مختلف است:

• زمان پاسخ آهسته سرور: سرور خود را بهینه سازید. از CDN، cache assets و غیره استفاده کنید.
• جاو اسکرپیت و CSS: CSS خود را به حداقل برساند، critical CSS  و  inline critical CSS را به تعویق بیاندازید.
• منابعی که آهسته بارگیری میشوند: تصاویر را بهینه سازید، منابع را پیش بارگیری کنید و متون را فشرده سازید.
• مشکلات مربوط به رندرینگ از سوی کاربر: critical JavaScript را به حداقل برساند، از رندرینگ سمت سرور و پیش رندرینگ استفاده کنید.

گوگل مستندارت بیشتری در باره LCP و چگونگی بهینه سازی سایت برای آن را ارائه کرده است.

FID: First Input Delay

First Input Delay زمانی لازم برای پاسخگویی مرورگر به اولین تعامل کاربر را اندازه گیری میکند. هرچه مرورگر سریعتر واکنش نشان دهد، آن صفحه واکنش پذیرتر (رسپانسیوتر) به نظر میرسد. اگر میخواهید یک تجربه مثبت برای کاربران خود ایجاد کنید، پس باید بر روی واکنش پذیری صفحه تان کار کنید.

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

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

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

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

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

این سخت ترین قسمت است. اکثر سایت ها میتوانند با کاهش زمان لازم برای اجرای جاوا اسکریپت، شکستن کارهای پیچیده به کارهای ساده یا حذف کدهای غیرمفید امتیاز خوبی بگیرند.

برای مثال، yoast.com امتیاز بسیار خوبی دارد اما عالی نیست. هنوز فرآیندهای وجود دارد که مانع دریافت امتیاز عالی میشود. رفع برخی از آنها پیچیده و دشوار است یا به سادگی نیاز به چنین کدهای برای سایت مان داریم. شما باید به امتیاز خود نگاهی بیندازید و تعیین کنید که کاری از سمت شما ساخته است. سعی کنید بهبودهایی را بیابید که انجام آنها آسان تر است یا نتیجه بهتری برای عملکرد سایت تان دارد.

CLS: Cumulative Layout Shift

سومین Core Web Vital یک معیار کاملا جدید است: Cumulative Layout Shift. این معیار سعی در تعیین میزان پایداری اشیایی است که روی صفحه نمایش داده میشود. این معیار به پرش اشیاء در حین بارگیری توجه میکند. اینگونه تصور کنید که میخواهید بر یک کلیدی کلیک کنید. در پیش زمینه هنوز محتوای بزرگ در حال برگیری است. نتیجه چه میشود؟ زمانی که محتوا کاملا بارگیری میشود، مکان کلید مقداری جا به جا میشود. این منجر به کلافگی کاربر میگردد.

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

برای مثال، CNN.com را در نظر بگیرید. سایت های خبری به طور معمول بسیار پیچیده و سرعت بارگیری پایینی دارند و CNN نیز از این قاعده مستثنی نیست. CNN در آزمایش PageSpeed Insights امتیاز بسیار بدی دارد. اگر به مشکلات و نکات مربوطه در پایین صفحه دقت کنید، متوجه میشوید که کمتر از پنج عنصر متحرک پیدا نشده است. زمانی که یک صفحه بارگیری میشود، عناصر زیادی پرش دارند و مدتی طول میکشد تا ثابت و مفید شوند. و از آنجایی که کاربران همیشه صبور نیستند، تلاش میکنند بر کلیدی که ظاهر شده است کلیک کنند اما به یک باره تبلیغی به جای کلید نمایش داده میشود.

Cumulative Layout Shift فریم ها را مقایسه میکند تا حرکت عناصر را تعیین کند. این معیار تمام نقاطی که پرش رخ میدهد را در نظر میگیرد و شدت حرکت آنها را محاسبه میکند. برای گوگل امتیاز ۰.۱ خوب تلقی میشود. در حالی که هر چیزی بین ۰.۱ تا ۰.۲۵ نیازمند بهینه سازی است. و هرچیزی بالاتر از ۰.۲۵ ضعیف در نظر گرفته میشود.

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

قبلاً اشاره کردیم که تبلیغات یکی از عوامل مخرب برای این معیار هستند. تبلیغات معمولا به جاوا اسکریپت نوشته شده اند و به خوبی بهینه نشده اند. علاوه بر این از یک سرور خارجی ارائه میشوند. کندی در هر مرحله اضافه میشود و شما باید سخت تلاش کنید تا تبلیغات در مکان درست نمایش داده شوند. اما عامل دیگری نیز وجود دارد که منجر به حرکت اشیاء میشود: تصاویر.

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

مستندات گوگل درباره CLS و همچنین چگونگی بهینه سازی آن را بخوانید.

ابزارهایی برای اندازه گیری Web Vitals

ابزارهای بسیاری به منظور مانیتورینگ Web Vitals و بهبود عملکرد سایت تان وجود دارد. فهرستی از مهمترین ابزار را تهیه کرده ایم که به شرح زیر است:

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

Lighthouse: گوگل این ابزار را به عنوان ابزاری برای ممیزی PWAها ساخته است اما اینک ابزاری عالی برای نظارت بر عملکرد سایت است. این ابزار دارای بازرسی های متعددی است که PageSpeed Insights آنها را ندارد و حتی بررسی های سئو را انجام می دهد.

Search Console: اینک میتوانید اطلاعات مفید درباره سایتتان را مستقیم از Search Console دریافت کنید!

این بود Core Web Vitals

گوگل در سال ۲۰۲۱ الگوریتم هایش را برای رتبه بندی نوین به روز رسانی خواهد کرد: تجربه صفحه. به منظور اندازه گیری تجربه صفحه، گوگل مجموعه ای از معیارهای جدید را ساخته است به نام Web Vitals که سه معیار اصلی دارد: LCP، FID و  CLS. این معیارها به بررسی عملکرد، واکنش پذیری و پایداری بصری می پردازند که سه اصل اساسی در به روز رسانی گوگل است.