آموزش طراحی سایت

Core Web Vitals به زبان ساده؛ سه عددی که تجربه‌ی کاربر را می‌سنجند

به این مطلب امتیاز دهید

«کور وب وایتالز» اسم پیچیده‌ای دارد ولی مفهومش ساده است: سه عدد که می‌سنجند کاربر شما چه تجربه‌ای دارد. نه اینکه سایت از نظر فنی چقدر سریع است — اینکه کاربر چه حسی می‌کند.

این راهنما هر سه را به زبان ساده توضیح می‌دهد، می‌گوید هرکدام معمولاً به چه علتی خراب می‌شوند، و مهم‌تر: کدامشان واقعاً روی کسب‌وکار شما اثر دارد.

سه عدد، سه سؤالLCP — بزرگ‌ترین محتوا کِی دیده می‌شود؟کاربر چقدر منتظر می‌ماند تا چیز معناداری ببیندINP — سایت چقدر سریع پاسخ می‌دهد؟وقتی کاربر کلیک می‌کند، چقدر طول می‌کشد تا واکنش ببیندCLS — صفحه چقدر جابه‌جا می‌شود؟آیا محتوا زیر دست کاربر می‌پرد و باعث کلیک اشتباه می‌شودهر سه از دید کاربر واقعی سنجیده می‌شوند، نه در آزمایشگاه
ترجمه‌ی ساده: چقدر صبر کرد، چقدر معطل شد، و چقدر اذیت شد

LCP — چقدر طول می‌کشد تا چیزی ببینم

بزرگ‌ترین عنصر قابل مشاهده‌ی صفحه — معمولاً تصویر اصلی یا عنوان بزرگ — چه زمانی نمایش داده می‌شود. این نزدیک‌ترین عدد به چیزی است که کاربر «سرعت سایت» می‌نامد.

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

در بیشتر سایت‌های فارسی که بررسی می‌کنیم، LCP به‌خاطر تصویر بالای صفحه خراب است. همان یک تصویر، اگر سبک شود، معمولاً بیشترین بهبود را می‌دهد.

INP — وقتی کلیک می‌کنم، چقدر معطل می‌شوم

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

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

CLS — چرا صفحه زیر دستم می‌پرد

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

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

کدامشان برای شما مهم‌تر است

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

چطور بسنجید

۱روی موبایل تست کنید نه دسکتاپبیشتر بازدید شما موبایلی است و نتیجه‌ی موبایل معمولاً بدتر است.
۲صفحات مختلف را جدا بسنجیدصفحه‌ی اصلی، صفحه‌ی خدمات و صفحه‌ی محصول رفتار متفاوتی دارند.
۳بین داده‌ی آزمایشگاهی و واقعی تفاوت بگذاریدابزارها هم شبیه‌سازی می‌کنند هم داده‌ی کاربران واقعی نشان می‌دهند. دومی معتبرتر است.
۴پیش و پس از هر تغییر بسنجیدوگرنه نمی‌دانید کدام اصلاح اثر داشت.

اگر می‌خواهید بدانید سایتتان دقیقاً کجا لنگ می‌زند، فهرست علت‌های کندی در «چرا سایت وردپرسی کند می‌شود» به ترتیب فراوانی آمده است.

رابطه‌اش با رتبه و با تماس

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

اثر بر رتبهسرعت یکی از عوامل رتبه است، ولی یکی از ده‌ها عامل. سایت سریع با محتوای ضعیف، رتبه نمی‌گیرد.
اثر بر تماساینجا اثر مستقیم و بزرگ است. کاربری که منتظر نمی‌ماند، اصلاً به دکمه‌ی تماس نمی‌رسد.

اگر قرار است برای یکی از این دو سرمایه‌گذاری کنید، برای دومی کنید. بهبود سرعت معمولاً پیش از آنکه رتبه‌تان را جابه‌جا کند، تعداد تماس‌هایتان را بالا می‌برد.

چک‌لیست بهبود هر سه شاخص

کارهایی که روی هر سه اثر می‌گذارند

تصویر بالای صفحه سبک و با ابعاد مشخص است
همه‌ی تصاویر عرض و ارتفاع تعریف‌شده دارند
فونت‌ها با تنظیم نمایش فوری بارگذاری می‌شوند
اسکریپت‌های غیرضروری حذف یا به تعویق انداخته شده‌اند
کش صفحه فعال است با استثنای صفحات فروشگاهی
تعداد افزونه‌های فعال بازبینی شده
نسخه‌ی PHP به‌روز است
بنرها و اطلاعیه‌ها فضایشان از قبل رزرو شده
نکته‌ی اولویتدو مورد اول تقریباً همیشه بیشترین اثر را دارند و کمترین ریسک را. اگر وقت محدودی دارید، فقط همان دو را انجام دهید.

تفاوت داده‌ی آزمایشگاهی و واقعی

داده‌ی آزمایشگاهی داده‌ی کاربران واقعی
چطور ساخته می‌شود شبیه‌سازی در شرایط استاندارد از بازدیدکننده‌های واقعی شما جمع می‌شود
سرعت به‌روزرسانی فوری چند هفته تأخیر دارد
کاربرد عیب‌یابی و مقایسه‌ی پیش و پس از تغییر قضاوت نهایی درباره‌ی تجربه‌ی واقعی
اعتبار راهنما معیار

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

اعداد مرزی هر شاخص

هر شاخص یک آستانه‌ی «خوب» دارد که گوگل منتشر کرده است:

شاخص خوب نیازمند بهبود ضعیف
LCP — نمایش بزرگ‌ترین محتوا تا ۲٫۵ ثانیه ۲٫۵ تا ۴ ثانیه بیش از ۴ ثانیه
INP — سرعت پاسخ به تعامل تا ۲۰۰ میلی‌ثانیه ۲۰۰ تا ۵۰۰ میلی‌ثانیه بیش از ۵۰۰ میلی‌ثانیه
CLS — جابه‌جایی چیدمان تا ۰٫۱ ۰٫۱ تا ۰٫۲۵ بیش از ۰٫۲۵

معیار سنجش، صدک هفتاد و پنجم بازدیدکننده‌های واقعی است — یعنی سه‌چهارم کاربران باید تجربه‌ی بهتر از این عدد داشته باشند. به همین دلیل میانگین گمراه‌کننده است: کاربران موبایل با اینترنت ضعیف، همان‌هایی هستند که نمره را تعیین می‌کنند.

برنامه‌ی چهارده روزه

۱روز ۱ — اندازه‌گیری پایهسه صفحه‌ی مهم را روی موبایل بسنجید و عددها را ثبت کنید.
۲روز ۲ تا ۴ — تصاویرتصویر بالای هر صفحه را سبک کنید و به همه‌ی تصاویر عرض و ارتفاع بدهید.
۳روز ۵ و ۶ — فونتفونت‌ها را با تنظیم نمایش فوری بارگذاری کنید.
۴روز ۷ — اندازه‌گیری دوبارهاثر دو تغییر اول را ببینید؛ معمولاً بیشترین بهبود همین‌جاست.
۵روز ۸ تا ۱۱ — اسکریپت‌هاابزارهای شخص ثالث را بازبینی کنید و غیرضروری‌ها را حذف یا به تعویق بیندازید.
۶روز ۱۲ — کشکش صفحه را با استثناهای درست فعال کنید.
۷روز ۱۳ و ۱۴ — بازبینی نهاییدوباره بسنجید و نتیجه را با روز اول مقایسه کنید.
چه انتظاری داشته باشیدداده‌ی آزمایشگاهی همان روز تغییر می‌کند، ولی داده‌ی کاربران واقعی چند هفته تأخیر دارد. اگر بعد از دو هفته در گزارش واقعی تغییری ندیدید، لزوماً یعنی کار بی‌اثر بوده نیست — هنوز زود است.

سؤالات متداول

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

برای کار مستمر روی دیده شدن سایت، خدمات سئو را ببینید — سرعت یکی از اجزای آن است، نه همه‌ی آن.

سه شاخص سایتتان را بررسی کنیممی‌گوییم کدامشان مشکل دارد، علتش چیست و کدام اصلاح بیشترین اثر را روی تجربه‌ی کاربر دارد. بررسی اولیه رایگان است.

۰۲۱ ۴۴۴۴ ۷۵۱۵

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا