داستان Core Web Vitals: قسمت اول ( ابزارهای سنجش)

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

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

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

معرفی پارامترهای ارزیابی Core Web Vital:

من در اینجا تلاش میکنم تا به ساده ترین شکل ممکن مفهوم هر پارامتر رو توضیح بدم.

• پارامتر CLS یا Cumulative Layout Shift:

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

• پارامتر LCP یا Largest Contentful Paint:

مدت زمانی که بزرگترین کانتنت یا المان در یک صفحه وب لازم هست که به طور کامل لود بشه. مقدار ایده آل برای این مورد کمتر از 2.5 ثانیه است.

• پارامتر FID یا First Input Delay:

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

چطور بفهمیم اوضاع سایتمون بر اساس شاخص های Core Web Vital چطوره؟

برای اینکه بفهمیم اوضاع وب سایتمون از نظر شاخص های Core Web Vitals به چه شکل هست، می تونیم از ابزارهای مختلف استفاده کنیم.

در این بخش سعی میکنم چند تا ابزار ساده که با بعضیاش قطعا همه کار کردیم معرفی کنیم .

1- استفاده از Google Page Speed:

همونطور که میدونید شما با کمک ابزار Google Page Speed میتونید پارامترهای مختلف سئو سایتتون رو بررسی کنید. و خیلی ساده است. کافیه ابتدا فیلترشکن مبارک رو روشن کنیم و از طریق این لینک وارد Google page Speed بشید!

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

حالا همونطور که میبینید میتونید وضعیت پارامترهای مختلف را در وب سایتتان بسنجید.

2- استفاده از Google Search Console

شما می تونید آمار شاخص های core web vitals مربوط به url های مختلف سایتتون رو در گوگل سرچ کنسول هم مشاهده کنید. برای این کار وارد حساب شخصی مربوط به وب سایت خودتون بشید و در منوی سمت چپ روی گزینه Core Web Vitals کلیک کنید.

در این جا شما می تونید یک شمای کلی از تمام url های سایتتون مشاهده کنید و وضعیتشون رو بسنجید.

3- استفاده از افزونه Core Web Vitals مرورگر کروم:

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

4- اندازه گیری با کمک مرورگر کروم:

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

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

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

5- وب سایت defaced.dev:

این وب سایت هم امکانی رو برای تشخیص مشکل CLS قرار داده و شما می تونید وضعیت صفحات مختلف سایتتون رو با کمک این وب سایت بسنجید. البته VPN فراموش نشود! بعد از روشن کردن VPN میتونید از طریق این لینک وارد این وب سایت بشید.

شما در این کادر میتونید آدرس وب سایتتون رو بنویسید و در حالت دسکتاپ یا موبایل وضعیت پرش المان ها در وب سایتتون رو بسنجید.

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

6- وب سایت webvitals.dev:
شما از طریق این وب سایت هم می تونید یک دیتای بسیار خوب از وضعیت CLS وب سایتتون به دست بیارید. برای این کار کافی VPN رو روشن کرده و وارد این لینک بشید.

این وب سایت اطلاعات بسیار کاملی رو از وضعیت CLS وب ساییتون میده و واقعا پیشنهادش می کنم.

.

.

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

قسمت دوم (راه کارهای بهبود شاخص های Core Web Vital)

پایان قسمت اول ....

منابع:

https://nitropack.io/blog/post/core-web-vitals

https://onlinemediamasters.com/cumulative-layout-shift-wordpress/