ویرگول
ورودثبت نام
مجید خالقیان
مجید خالقیان
خواندن ۲ دقیقه·۲ ماه پیش

توضیح مختصر درباره معیارهای کلیدی اصلی وب (Core Web Vitals)

در این نوشته سعی می‌کنیم خیلی خلاصه درباره معیارهایی که گوگل به عنوان مهم‌ترین سنجه‌های بارگذاری یک صفحه وب معرفی کرده توضیح دهیم.

یکم: Largest Contentful Paint (LCP)

زمان بارگذاری محتوای اصلی صفحه یا به‌عبارتی زمان رنگی شدن بزرگترین المان (Element) در صفحه است.

برای مثال اگر یک عکس بیشتر صفحه را گرفته، زمانی که طول می‌کشد تا کامل نمایش داده شود مهم است. این زمان شامل زمان Render هم می‌شود.

این معیار باید زیر ۲.۵ ثانیه باشد که با توجه به سرعت اینترنت در ایران رسیدن به آن کمی دشوار است.


دوم: Interaction to Next Paint (INP)

این معیار چند ماه پیش (اسفند ۱۴۰۲) به عنوان معیار اصلی در نظر گرفته شد. به طور خلاصه این معیار تاخیر زمانی تمامی برهم‌کنش‌های کاربر با صفحه، شامل کلیک، لمس و کیبورد، در کل طول عمر صفحه را بررسی می‌کند.

در نظر بگیرید یک سایت یک منوی همبرگری دارد، زمانی که کاربر روی دکمه باز شدن آن کلیک می کند و باز می‌شود اهمیت دارد (البته این یک مثال ساده است).

طبیعتا این معیار با پردازشگر دستگاهی که کاربر استفاده می‌کند ارتباط دارد و ممکن است برای برخی از کاربران کند تر باشد. INP برای یک سایت خوب زیر ۲۰۰ میلی ثانیه است.


سوم: Cumulative Layout Shift (CLS)

به طور خلاصه بررسی جابجایی غیرمنتظره چیدمان است.

اگر ساده بخواهیم بگوییم این است که چیزی در صفحه وب به یکباره نپرد. مثلا به صورت ناگهانی یک المان بالای یک المان دیگر ظاهر نشود و همه المان ها به پایین Shift نشوند!! این موضوع معمولا در Single Page Application یا SPA رخ می دهد. برای همین پیشنهاد می شود که وبسایت‌های محتوا محور و سایت‌هایی که ورودی آنها از گوگل هستند SPA نباشند. مواردی مانند زمان بارگذاری طولانی فونت‌ها، CSS و… می‌توانند روی این معیار تاثیر بگذارند چرا که ممکن است ظاهر صفحه به یکباره بپرد.


پرسش: چگونه متوجه شویم این معیارها در سایت ما خوب است؟

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

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

https://pagespeed.web.dev

طراحی وبسایتگوگلCore Web Vitals
Full-Stack Developer
شاید از این پست‌ها خوشتان بیاید