حل مسائل CLS در وب سایت تجارت الکترونیک Next.js (مطالعه موردی)-مجله سر و صدا

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

بسیاری از شاخص های کلیدی عملکرد (KPI) وجود دارد که نقاط مختلف در طول چرخه عمر صفحه وب را اندازه گیری می کنند (مانند TTFB ، domInteractiveو onload) ، اما این معیارها نحوه تجربه کاربر نهایی از صفحه را نشان نمی دهد.

ما می خواستیم از چند KPI که با تجربه واقعی کاربران نهایی مطابقت دارد استفاده کنیم ، بنابراین می دانیم که اگر هر یک از آن KPI ها عملکرد خوبی نداشته باشند ، آنگاه به طور مستقیم بر تجربه کاربر نهایی تأثیر می گذارد. ما متوجه شدیم معیارهای عملکرد کاربر محور تا برای این منظور مناسب باشد

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

CLS نمره کل همه تغییرات طرح بندی غیرمنتظره را که بین شروع بارگذاری صفحه و بارگیری آن اتفاق می افتد اندازه گیری می کند.

بنابراین داشتن مقدار CLS پایین برای یک صفحه اطمینان می دهد که هیچ تغییر چیدمانی تصادفی باعث ناامیدی کاربر نمی شود. بری پولارد یک مقاله عمیق عالی در مورد CLS نوشته است.

نحوه کشف مسئله CLS در صفحه محصول ما

ما از Lighthouse و WebPagetest به عنوان ابزارهای آزمایش مصنوعی خود برای اندازه گیری CLS استفاده می کنیم. ما همچنین از کتابخانه web-vitals برای اندازه گیری CLS برای کاربران واقعی به غیر از این ، ما بخش Google Search Console Core Web Vitals Report را بررسی می کنیم تا در مورد هرگونه مشکل احتمالی CLS در هر یک از صفحات خود ایده ای کسب کنیم. هنگام کاوش در بخش گزارش ، ما متوجه شدیم بسیاری از آدرس های اینترنتی از صفحه جزئیات محصول بیش از 0.1 مقدار CLS نشان می دهد که رویداد اصلی تغییر طرح در آنجا اتفاق می افتد.

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

بنابراین ما فانوس دریایی را بررسی کردیم تا بررسی کنیم که آیا می تواند عنصری را پیدا کند که می تواند باعث تغییر عمده طرح شود گزارش شده CLS تا 0.004 که بسیار پایین است.

صفحه گزارش Lighthouse دارای بخش تشخیصی است. همچنین هیچ عنصری که مقدار CLS بالایی را ایجاد کند نشان نداد.

سپس WebpageTest را اجرا کردیم و تصمیم گرفتیم نمای نوار فیلم را بررسی کنیم:

ما این ویژگی را بسیار مفید می دانیم زیرا می توانیم دریابیم کدام عنصر در کدام نقطه از زمان باعث تغییر طرح شده است. اما وقتی ما برنامه را اجرا می کنیم تست برای بررسی اینکه آیا هر گونه تغییر در طرح برجسته شده است ، هیچ چیزی به LCS بزرگ کمک نکرده است:

مزیت CLS این است که نمرات تغییر طرح بندی فردی را در طول عمر صفحه ثبت کرده و آنها را اضافه می کند.

توجه داشته باشید: نحوه اندازه گیری CLS بوده است تغییر کرد از ژوئن 2021

از آنجا که Lighthouse و WebpageTest نتوانستند هیچ عنصری را که باعث تغییر عمده طرح شده است تشخیص دهند ، این بدان معناست که پس از بارگذاری صفحه اولیه احتمالاً به دلیل برخی اقدامات کاربر اتفاق می افتد. بنابراین تصمیم گرفتیم استفاده کنیم Web Vitals پسوند Google Chrome از آنجا که می تواند CLS را در یک صفحه ثبت کند در حالی که کاربر در حال تعامل با آن است. پس از انجام اقدامات مختلف ، متوجه شدیم که وقتی کاربر از ویژگی بزرگنمایی تصویر استفاده می کند ، امتیاز تغییر طرح افزایش می یابد.

برای تأیید اینکه آیا تغییر طرح در حالی رخ می دهد که ماوس روی تصویر باشد ، از قطعه کد زیر استفاده می کنیم https://web.dev/cls/ که می افزاید console.log هنگامی که تغییر طرح رخ می دهد:

let cls = 0;

new PerformanceObserver((entryList) => {
 for (const entry of entryList.getEntries()) {
   if (!entry.hadRecentInput) {
     cls += entry.value;
     console.log('Current CLS value:', cls, entry);
   }
 }}).observe({type: 'layout-shift', buffered: true});

در تحقیقات بیشتر ، متوجه شدیم که ASDA با مشکل مشابهی روبرو شده است آن را مطرح کرد برای کروم

علت ریشه ای

در صفحه جزئیات محصول ، کاربران می توانند ماوس را روی تصویر محصول حرکت دهند تا یک قسمت بزرگنمایی شده تصویر را در کنار تصویر واقعی محصول مشاهده کنند ، زیرا این ویدیو دقیقاً نشان می دهد که ما در مورد چه چیزی صحبت می کنیم.

ویژگی بزرگنمایی تصویر به کاربران ما کمک می کند تا ظاهر و ظاهر محصول را به دست آورند و همچنین اطمینان حاصل کنند که آن نوع مناسب از محصول مورد نظر خود است.

استفاده کرده ایم react-image zoom کتابخانه برای ایجاد این قابلیت ، عملکرد را بزرگنمایی می کند.

کتابخانه های بزرگنمایی تصویر معمولاً دارای لنز هستند (مربعی که هنگام حرکت موس در تصویر حرکت می کند). از آنجا که این لنز با حرکت ماوس موقعیت بالا و چپ خود را تغییر می دهد ، به عنوان تغییر چیدمان باعث ایجاد CLS تشخیص داده می شود. ما صفحه کتابخانه و سایر کتابخانه های واکنش مشابه را بررسی کردیم (react-image-magnify، react-image-zoom، react-image-magnifiers) و دریافتند که همه آنها از یک مشکل CLS رنج می برند.

چگونه آن را برطرف کردیم

ما متوجه آن شدیم react-image-zoom از استفاده می کرد js-image-zoom کتابخانه بنابراین ما مجبور به تغییر در js-image zoom کتابخانه برای رفع مشکل

راه حل بسیار ساده است. در حالی که ماوس از تصویر محصول حرکت می کند ، عنصر لنز تصویر با تغییر موقعیت چپ و بالا حرکت می کند. برای رفع مشکل ، ما از آن استفاده کردیم transform translate که عنصر را به لایه جدیدی منتقل می کند ، یعنی هر حرکتی که در این لایه جدید انجام شود دیگر باعث تغییر طرح نمی شود:

من همچنین یک ایجاد کرده ام روابط عمومی به repo اصلی تا سایر توسعه دهندگان از این کتابخانه بتوانند از مشکل CLS خلاص شوند.

تاثیر تغییر

پس از استقرار کد در تولید ، CLS در صفحه جزئیات محصول ثابت شد و تعداد صفحات تحت تأثیر CLS تا 98 درصد کاهش یافت:

از وقتی که استفاده کردیم transform، همچنین به بزرگنمایی تصویر به عنوان تجربه ای روان برای کاربران کمک کرد.

توجه داشته باشید: پل ایرلندی عالی نوشته است مقاله در این مورد.

سایر تغییرات کلیدی که ما برای CLS ایجاد کردیم

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

• فونت های وب:
  ما متوجه شده ایم که بارگذاری دیرهنگام فونت ها باعث ناامیدی کاربران می شود زیرا محتوا چشمک می زند و همچنین باعث تغییراتی در چیدمان می شود. برای به حداقل رساندن این امر ، تغییرات کمی را انجام داده ایم:

  • ما به جای بارگذاری از CDN شخص ثالث ، فونت ها را خود میزبانی کرده ایم.
  • فونت ها را پیش بارگذاری می کنیم.
  • ما از گزینه font-display اختیاری استفاده می کنیم.

• تصاویر:
  عدم وجود ارتفاع یا عرض در تصویر باعث می شود که پس از بارگیری تصویر ، عنصر بعد از تصویر تغییر مکان دهد. این امر منجر به مشارکت عمده در CLS می شود. از آنجا که ما از Next.js استفاده می کنیم ، ما از کامپوننت تصویر داخلی به نام استفاده کردیم next/imagesبه این م componentلفه چندین بهترین شیوه مرتبط با تصویر را در بر می گیرد. در بالای آن ساخته شده است <img> تگ HTML و می تواند به بهبود LCP و CLS کمک کند. خواندن این مطلب را به شدت توصیه می کنم RFC برای آگاهی از ویژگی ها و مزایای اصلی استفاده از آن.

• اسکرول بی نهایت:
  در وب سایت ما ، صفحات فهرست محصولات دارای پیمایش بی نهایت هستند. بنابراین در ابتدا ، هنگامی که کاربران به پایین صفحه می روند ، پاورقی را برای چند ثانیه قبل از بارگیری مجموعه بعدی داده ها مشاهده می کنند ، این باعث تغییر طرح می شود. برای حل این مشکل ما چند قدم برداشتیم:

  • ما با API تماس می گیریم تا داده ها را بارگیری کند حتی قبل از اینکه کاربر به انتهای مطلق لیست برسد.
  • ما فضای کافی را برای حالت بارگذاری اختصاص داده ایم و اسکلت های محصول را در طول وضعیت بارگذاری نشان می دهیم. بنابراین اکنون که کاربر پیمایش می کند ، در حالی که محصولات در حال بارگیری هستند ، پاورقی را برای کسری از ثانیه نمی بینند.

آدی عثمانی مفصل نوشته است مقاله در این رویکرد که من به شدت توصیه می کنم آن را بررسی کنید.

غذاهای آماده کلیدی

• در حالی که Lighthouse و WebpageTest به کشف مشکلات مربوط به عملکرد تا زمان بارگیری صفحه کمک می کنند ، نمی توانند مشکلات عملکرد را پس از بارگذاری صفحه تشخیص دهند.
• پسوندهای Web Vitals می توانند تغییرات CLS ایجاد شده توسط تعاملات کاربر را تشخیص دهند ، بنابراین اگر صفحه ای دارای ارزش CLS بالایی باشد اما Lighthouse یا WebpageTest CLS کمی را گزارش دهد ، پس افزونه Web Vitals می تواند به این مسئله کمک کند.
• داده های کنسول جستجوی Google بر اساس داده های کاربران واقعی است ، بنابراین می تواند به مشکلات احتمالی احتمالی رخ دهد که در هر نقطه از چرخه عمر یک صفحه رخ می دهد. هنگامی که مشکلی شناسایی و برطرف شد ، بررسی مجدد بخش گزارش می تواند به تأیید اثربخشی رفع اشکال کمک کند. تغییرات طی چند روز در بخش گزارش وب سایت های حیاتی نشان داده می شود.

افکار نهایی

در حالی که اشکال زدایی نسبتاً مشکل تر است ، استفاده از ترکیبی از ابزارهای مختلف تا بارگذاری صفحه (Lighthouse ، WebPageTest) و افزونه Web Vitals (پس از بارگذاری صفحه) می تواند به ما در مشخص کردن مشکل کمک کند. این نیز یکی از معیارهایی است که در حال پیشرفت زیادی برای پوشش دادن طیف گسترده ای از سناریوها است و این بدان معناست که نحوه اندازه گیری آن در آینده تغییر خواهد کرد. دنبال می کنیم https://web.dev/evolving-cls/ برای اطلاع از هرگونه تغییرات آینده

در مورد ما ، ما به طور مداوم برای بهبود سایر Core Web Vitals نیز کار می کنیم. به تازگی ، ما پیش بارگذاری واکنش گرا را پیاده سازی کرده ایم و سرویس تصاویر را با فرمت WebP آغاز کرده ایم که به ما کمک می کند 75 درصد بارگذاری تصویر را کاهش دهیم ، LCP را 62 درصد و شاخص سرعت را 24 درصد کاهش دهیم. می توانید جزئیات بیشتر را بخوانید بهینه سازی برای بهبود LCP و شاخص سرعت یا از ما پیروی کنید وبلاگ مهندسی برای آگاهی از کارهای هیجان انگیز دیگری که انجام می دهیم.

ما می خواهیم تشکر کنیم قلعه الکس برای کمک به رفع اشکال CLS در صفحه محصول و حل معایب در next/images پیاده سازی.

(vf ، yk ، he)