چگونه بهینه سازی CLS یاهو را افزایش داد! بازدید از صفحه اخبار ژاپن در هر جلسه 15 درصد

بهینه سازی CLS با 0.2 منجر به افزایش 15 درصدی بازدید از صفحه در هر جلسه، 13 درصد طولانی تر شدن مدت جلسه و کاهش 1.72 درصدی در نرخ پرش شد.

Tomoki Kiraku

Milica Mihajlija

Shunya Shishido

یاهو ژاپن یکی از بزرگترین شرکت های رسانه ای در ژاپن است که هر ماه بیش از 79 میلیارد بازدید از صفحه را ارائه می دهد. پلتفرم خبری آنها، یاهو! JAPAN News بیش از 22 میلیارد بازدید از صفحه در ماه دارد و یک تیم مهندسی برای بهبود تجربه کاربری اختصاص داده شده است.

آنها با نظارت مداوم Core Web Vitals، امتیاز بهبود یافته تغییر چیدمان تجمعی (CLS) سایت را با افزایش 15 درصدی بازدید از صفحه در هر جلسه و 13 درصد افزایش در مدت زمان جلسه مرتبط کردند.

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

برای جزئیات فنی در مورد چگونگی بهبود CLS، Yahoo! پست تیم مهندسی ژاپن نیوز .

شناسایی موضوع

نظارت بر Core Web Vitals، از جمله CLS، در تشخیص مشکلات و شناسایی این که از کجا می آیند بسیار مهم است. در یاهو JAPAN News، Search Console یک نمای کلی از گروه‌هایی از صفحات با مشکلات عملکرد ارائه کرد و Lighthouse به شناسایی فرصت‌های هر صفحه برای بهبود تجربه صفحه کمک کرد. با استفاده از این ابزارها، آنها دریافتند که صفحه جزئیات مقاله دارای CLS ضعیفی است.

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

این تیم از Chrome DevTools برای شناسایی عناصری که چیدمان صفحه را تغییر می دهند استفاده کرد. Layout Shift Regions در DevTools عناصری را که به CLS کمک می کنند با برجسته کردن آنها با یک مستطیل آبی هر زمان که تغییر طرح اتفاق می افتد، تجسم می کند.

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

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

بهبود CLS برای تصاویر

برای تصاویر با اندازه ثابت، با مشخص کردن ویژگی‌های width و height در عنصر img و با استفاده از ویژگی aspect-ratio CSS موجود در مرورگرهای مدرن، می‌توان از تغییرات طرح‌بندی جلوگیری کرد. با این حال، یاهو! JAPAN News نه تنها از مرورگرهای مدرن، بلکه از مرورگرهای نصب شده در سیستم عامل های نسبتا قدیمی مانند iOS 9 نیز پشتیبانی می کرد.

آنها از جعبه های نسبت ابعاد استفاده کردند - روشی که از نشانه گذاری برای رزرو فضای صفحه قبل از بارگذاری تصویر استفاده می کند. این روش مستلزم دانستن نسبت ابعاد تصویر از قبل است که آنها توانسته اند از API باطن دریافت کنند.

نتایج

تعداد URL های با عملکرد ضعیف در کنسول جستجو تا 98٪ کاهش یافت و CLS در داده های آزمایشگاهی از حدود 0.2 به 0 کاهش یافت. مهمتر از آن، چندین پیشرفت مرتبط در معیارهای کسب و کار وجود داشت.

وقتی یاهو JAPAN News معیارهای تعامل کاربر را قبل و بعد از بهینه سازی CLS مقایسه کرد، آنها شاهد پیشرفت های متعددی بودند:

با بهبود CLS و سایر معیارهای Core Web Vitals، Yahoo! JAPAN News همچنین برچسب "صفحه سریع" را در منوی زمینه Chrome Android دریافت کرد.

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

برای اطلاعات بیشتر، Yahoo! پست تیم مهندسی ژاپن .