در پایش یک فروشگاه ووکامرس، متوجه شدم امتیاز LCP روی دسکتاپ کاملاً سبز است ولی روی موبایل همان صفحه، بالای چهار ثانیه می‌ماند. وقتی شبکه را روی Fast 3G تنظیم کردم و پردازنده را روی موبایل میان‌رده، تصویر شاخص محصول همان فایل سه‌مگابایتی دسکتاپ را دانلود می‌کرد و LCP به‌خاطر همین تصمیم، از دست می‌رفت. Core Web Vitals یا همان شاخص‌های اصلی وب، مجموع سه معیار LCP، CLS و INP است که تجربه واقعی کاربر را می‌سنجند. آستانه‌های عددی این معیارها در موبایل و دسکتاپ یکسان است، اما به سه دلیل موبایل سخت‌گیرتر است: پردازنده ضعیف‌تر، شبکه ناپایدارتر و محدودیت‌های دیگری که در ادامه باز می‌کنم.

Core Web Vitals دقیقاً چه چیزی را می‌سنجد؟

Core Web Vitals سه شاخص اصلی دارد که به سه تجربه کاربری مشخص اشاره می‌کنند: LCP (Largest Contentful Paint) که سرعت بزرگ‌ترین عنصر دیدی صفحه را می‌سنجد، CLS (Cumulative Layout Shift) که میزان جهش‌های ناخواسته چیدمان را می‌شمارد و INP (Interaction to Next Paint) که پاسخ‌گویی صفحه به تعامل کاربر را می‌سنجد. اگر تعریف کامل این سه شاخص را نمی‌دانید، از Core Web Vitals چیست و چرا گوگل بر آن تاکید دارد شروع کنید.

گوگل این معیارها را هم در داده میدانی (CrUX) و هم در داده آزمایشگاهی (Lighthouse) می‌سنجد. داده میدانی، تجربه واقعی کاربران اندروید با Chrome را نشان می‌دهد؛ داده آزمایشگاهی برای عیب‌یابی سریع است. ابزارهای هر دو دسته را در ابزارهای سنجش Core Web Vitals کدامند معرفی کرده‌ام. نکته کلیدی این است که گوگل تصمیم‌گیری رتبه را بر اساس داده میدانی انجام می‌دهد، یعنی همان تجربه‌ای که کاربر موبایل می‌بیند، نه نتیجه آزمایش لپ‌تاپ شما.

Core Web Vitals در موبایل و دسکتاپ یک زبان مشترک دارند، اما موبایل با لهجه‌ای سخت‌گیرتر صحبت می‌کند؛ همان جملات، اما با انتظار بیشتر.

چرا موبایل سخت‌گیرتر است؟

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

تفاوت LCP در موبایل و دسکتاپ

LCP در موبایل معمولاً از سه منبع ضربه می‌خورد: تصویر شاخص بی‌srcset، فونت‌های خارجی و TTFB سرور. در دسکتاپ، فایل تصویر شاخص با پهنای‌باند بالا سریع می‌آید؛ در موبایل، همین فایل چند ثانیه طول می‌کشد. روش صحیح بهینه‌سازی LCP را در LCP چیست و چگونه آن را بهینه کنیم آورده‌ام؛ اما خلاصه‌اش در موبایل این است که تصویر LCP باید با ابعاد درست، فرمت مدرن و بارگذاری eager روی اولین عنصر دیدی سرو شود.

لایه دوم، TTFB است. اگر سرور شما برای هر ریکوئست کند باشد، همین کندی در موبایل دو برابر به چشم می‌آید؛ چون شبکه موبایل هم سهم خودش را از تاخیر برمی‌دارد. اثر TTFB بر سرعت نهایی را در TTFB چیست و چگونه آن را کاهش دهیم جداگانه باز کرده‌ام. در پروژه‌هایی که TTFB بالای ۸۰۰ میلی‌ثانیه داشته‌اند، LCP موبایل به‌سختی زیر سه ثانیه می‌آمده، حتی با بهترین بهینه‌سازی تصویر.

لایه سوم، فونت‌ها هستند. فونت فارسی سنگین با گلیف‌های زیاد، اگر با font-display درست سرو نشود، متن را پنهان می‌کند و LCP را عقب می‌اندازد. در موبایل، اثر این مشکل چند برابر است چون پهنای‌باند فایل فونت هم محدود است.

تفاوت CLS در موبایل و دسکتاپ

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

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

تفاوت INP در موبایل و دسکتاپ

INP جدیدترین شاخص CWV است و جانشین FID شده است. INP کل تجربه تعامل کاربر را می‌سنجد، نه فقط اولین تاخیر. در موبایل، دو عامل INP را بدتر می‌کنند: پردازنده ضعیف‌تر و اسکریپت‌های سنگین روی main thread. منوی موبایل، فیلترهای محصول، اسلایدر و پاپ‌آپ‌ها، اگر روی main thread سنگین باشند، INP موبایل را به بالای ۵۰۰ میلی‌ثانیه می‌برند. توضیح دقیق INP و اثر آن روی تجربه کاربری را در INP چیست و چه تاثیری بر تجربه کاربر دارد آورده‌ام.

در عمل، رایج‌ترین مقصر INP در پروژه‌های وردپرسی، افزونه‌های تعاملی سنگین و اسکریپت‌های third-party هستند. راه‌حل در کوتاه‌مدت، defer کردن هوشمند این اسکریپت‌ها و در بلندمدت، سبک‌سازی پوسته و افزونه‌های تعاملی است.

اندازه‌گیری درست در موبایل

هنگام اندازه‌گیری CWV موبایل، سه نکته را رعایت کنید. اول، شبیه‌سازی روی موبایل میان‌رده تنظیم کنید، نه پرچمدار. دوم، پهنای‌باند را روی Slow 4G یا Fast 3G قرار دهید تا تصویر واقعی‌تری ببینید. سوم، آزمون را سه بار اجرا کنید و میانگین بگیرید؛ چون هر بار ممکن است نتیجه متفاوت باشد. مسئله مهم در تفسیر این نتایج، جدا کردن مقصر اصلی از مقصر فرعی است؛ مثلاً در یک صفحه، هم تصویر سنگین دارید و هم TTFB بالا؛ بهتر است اول تصویر را اصلاح کنید و ببینید تا چه حد اثر دارد، سپس سراغ سرور بروید.

بهینه‌سازی CWV در وردپرس

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

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

جدول تفاوت‌های عملی موبایل و دسکتاپ

شاخصدر دسکتاپدر موبایل
LCPمعمولاً از فونت و سروربیشتر از تصویر و شبکه
CLSمحدود به بخش کوچکی از صفحهتکثیر در کل ستون
INPمقصر: اسکریپت‌های تعاملیمقصر: همان اسکریپت‌ها با پردازنده ضعیف
TTFBاثر متوسطاثر مضاعف
اثر روی رتبهمستقیممستقیم‌تر (ایندکس موبایل اول)

الگوهای مکرر در پروژه‌های موبایلی

در پروژه‌هایی که CWV موبایل را بهبود داده‌ام، سه الگو تکرار شده‌اند. اول، سایت‌هایی که CWV موبایل قرمز دارند ولی CWV دسکتاپ سبز؛ این‌ها معمولاً مشکل تصویر یا فونت دارند. دوم، سایت‌هایی که هر دو قرمز هستند؛ این‌ها ریشه‌شان در هاست یا قالب است. سوم، سایت‌هایی که CWV سبز است ولی تجربه کاربری ضعیف؛ این‌ها معمولاً مشکل UX دارند نه سرعت. تشخیص درست این سه الگو، از هر بهینه‌سازی کورکورانه مهم‌تر است.

نگاه به آینده این شاخص‌ها

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

پرسش‌های پرتکرار درباره CWV موبایل

چرا امتیاز CWV موبایل همیشه بدتر از دسکتاپ است؟ چون پردازنده، شبکه و شرایط استفاده موبایل سخت‌گیرانه‌تر است. تفاوت اصلی در LCP و INP دیده می‌شود؛ در CLS هم چون چیدمان تک‌ستونی است، هر جهش به کل صفحه سرایت می‌کند.

آیا باید CWV دسکتاپ را جدی بگیرم اگر ترافیک موبایل زیاد است؟ بله، اما اولویت اول موبایل است چون گوگل با ایندکس موبایل-اول، سایت شما را با چشم موبایل می‌بیند. اگر با مفهوم ایندکس موبایل-اول آشنا نیستید، از طراحی موبایل اول چیست و چه مزیتی دارد شروع کنید.

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

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

آیا با قالب آماده هم می‌توان CWV موبایل را سبز کرد؟ بله، به شرط انتخاب قالب سبک و رعایت اصول بهینه‌سازی تصویر و فونت. روش تست قالب را در تست تجربه کاربری موبایل چگونه انجام می‌شود آورده‌ام.

آیا شاخص TBT با INP جایگزین شده؟ TBT یک شاخص آزمایشگاهی است و INP یک شاخص میدانی. INP جای FID را در CWV گرفته، اما TBT همچنان به‌عنوان معیار آزمایشگاهی مفید است. رابطه‌شان را در تأثیر TTFB بر سرعت بارگذاری صفحه با جزئیات بیشتری آورده‌ام.

جمع‌بندی متفاوت

Core Web Vitals در موبایل و دسکتاپ، یک زبان مشترک با دو لهجه متفاوت است. آستانه‌ها یکسان‌اند، اما موبایل به‌خاطر شرایط سخت‌تر کاربر، سخت‌گیرانه‌تر قضاوت می‌کند. اگر امروز فقط یک کار می‌خواهید انجام دهید، صفحه اصلی سایتتان را روی گوشی میان‌رده خودتان با اینترنت اپراتور باز کنید و سه شاخص را اندازه بگیرید. اگر LCP بالای سه ثانیه، CLS بالای یک‌دهم و INP بالای دویست میلی‌ثانیه بود، نقشه راه اصلاح شما مشخص است: اول سراغ تصویر شاخص، بعد فونت و TTFB، و در آخر اسکریپت‌های تعاملی.

اگر تجربه‌ای از بهبود CWV موبایل در سایت خودتان دارید یا موردی که به‌ظاهر سبز بوده ولی تجربه کاربری ضعیف داشته، در دیدگاه‌ها بنویسید. همین تناقض‌ها هستند که درک ما از این شاخص‌ها را دقیق‌تر می‌کنند. 📊