مطالعه موردی تغییراتی که GoDaddy برای بهبود عملکرد وب‌سایت برای میلیون‌ها سایت پیاده‌سازی کرده است، به آنها کمک می‌کند تا به امتیازات خوب PageSpeed Insights و Core Web Vitals دست یابند.
GoDaddy بزرگترین پلت فرم خدمات در جهان برای کارآفرینان در سراسر جهان است. ما مأموریت داریم تا جامعه جهانی خود را با بیش از 20 میلیون مشتری - و کارآفرینان در همه جا - با ارائه تمام کمک‌ها و ابزارهایی که برای رشد آنلاین نیاز دارند، تقویت کنیم.
در سال 2019 GoDaddy Websites + Marketing را با تعهد به ارائه ابزارها و خدماتی راه اندازی کرد که استفاده از آنها آسان است و به صاحبان مشاغل کمک می کند تا به اهداف خود برسند. Websites + Marketing ساخت وب سایت را با ابزارهای بازاریابی و تجارت الکترونیک ادغام می کند و آنها را با بهترین راهنمایی های کلاس جفت می کند تا به مشتریان کمک کند با سرمایه گذاری های جدید خود به موفقیت برسند.
از زمان راه‌اندازی وب‌سایت‌ها + بازاریابی، عملکرد بخش مهمی از محصول و چیزی است که به طور فعال نظارت و روی آن کار شده است. در این مقاله، سفر GoDaddy را از استفاده از تست عملکرد آزمایشگاهی تا استفاده از داده‌های دنیای واقعی با Core Web Vitals و مجموعه‌ای از پیشرفت‌های انجام شده در محصول برای دریافت نرخ عبور بسیار بالا برای سایت‌های مشتریان خود مرور می‌کنیم.
ردیابی عملکرد با Lighthouse
ما برای ردیابی عملکرد به داده های Lighthouse تکیه کرده ایم. هر بار که یک وب سایت بر روی پلتفرم منتشر می شود، عملکرد آن را با استفاده از ابزار داخلی خود به نام "Lighthouse4u" اندازه گیری می کنیم، که Google Lighthouse را به عنوان یک سرویس ارائه می دهد https://github.com/godaddy/lighthouse4u . این به ما نشان خوبی از نحوه عملکرد سایت ها در یک محیط آزمایشگاهی داد.
از آنجایی که میلیون‌ها سایتی که ما روی پلتفرم خود میزبانی می‌کنیم دارای طیف گسترده‌ای از ویژگی‌ها و محتوا هستند، ترکیب داده‌های عملکرد با ابرداده‌های مربوط به هر سایت در حال آزمایش (مانند الگوی استفاده‌شده، نوع ابزارک‌های ارائه‌شده و غیره) مهم بود. این به ما اجازه داد تا در مورد اینکه چه ویژگی‌های وب‌سایتی عملکرد پایین‌تری دارند، نتیجه‌گیری کنیم، در حالی که بینشی برای یافتن بهبود در کجا فراهم می‌کند.
به عنوان مثال، این به ما کمک کرد تشخیص دهیم که "popup modal" تاثیر منفی بر سرعت صفحه دارد. سایت های دارای این ویژگی 12 امتیاز کمتر از سایت های بدون آن داشتند. پس از به‌روزرسانی کد برای به تعویق انداختن بارگذاری جاوا اسکریپت، امتیاز Lighthouse خود را 2 امتیاز بهبود دادیم. ما توانستیم این یادگیری را برای ویژگی‌های دیگری مانند "بنر کوکی" که بلافاصله پس از بارگیری صفحه ارائه می‌شود، اعمال کنیم.
همراه با بررسی سایت‌های مشکل‌ساز بر اساس ویژگی‌ها، تجزیه و تحلیلی از بسته جاوا اسکریپت خود انجام دادیم و دیدیم که بخش بزرگی از اندازه آن از وابستگی‌های خارجی (immutable.js و draft.js) ناشی می‌شود. ما با تغییر ساختار مصرف کنندگان به وابستگی بار تنبل به تقاضا، اندازه بسته را کاهش دادیم. این امر منجر به کاهش بیش از 50 درصدی اندازه بسته نرم افزاری جاوا اسکریپت رایج شد که از بیش از 200 کیلوبایت به حدود 90 کیلوبایت (کوچک شده) رسید. اندازه کوچکتر بسته نرم افزاری به مرورگر اجازه می دهد تا دارایی های خارجی را بارگیری کند و اسکریپت های حیاتی را زودتر در چرخه عمر بارگذاری اولیه سایت اجرا کند، که منجر به افزایش در بزرگترین رنگ محتوایی (LCP) و تاخیر ورودی اولیه (FID) می شود .
به لطف تلاش‌های مستمر ما، میانگین امتیاز سایت مشتری Lighthouse از حدود 40 امتیاز در نوامبر 2020 به بالاتر از 70 امتیاز در می 2021 رسید. با این حال، همه تلاش‌های ما جواب نداد و گاهی اوقات شگفت‌زده می‌شدیم که نتایج همیشه بین آنچه که بود سازگار نبود. تست شده در محیط های آزمایش محلی و نتایجی که در این زمینه به دست آوردیم. نتایج آزمایشگاهی واقعاً مفید بودند، اما زمان آن فرا رسیده بود که روی تجربیات واقعی کاربر مشاهده شده در این زمینه تمرکز کنیم.
ردیابی داده های واقعی کاربر با Core Web Vitals
پس از افزودن کتابخانه web-vitals به سایت‌های مشتریانمان، توانستیم داده‌ها را روی دستگاه‌های واقعی از بازدیدکنندگان واقعی اندازه‌گیری کنیم، جایی که سخت‌افزار، سرعت شبکه، تعامل کاربر (مانند پیمایش یا کلیک کردن) در یک خط پایه ثابت مانند یک آزمایشگاه نیست. تنظیم با استفاده از Lighthouse این یک گام بزرگ در مسیر درست بود، زیرا اکنون داده‌هایی داشتیم که نمایانگر آنچه بازدیدکنندگان وب‌سایت ما تجربه می‌کردند بود.
تمرکز بر ضعیف ترین پیوند ما: تغییر چیدمان تجمعی (CLS)
تجزیه و تحلیل داده های جدید به ما دیدگاه جدیدی در مورد آنچه که باید برای بهبود سرعت وب سایت انجام می شد به ما داد. به دلیل کار انجام شده برای بهبود امتیاز Lighthouse، LCP صدک 75 ما 860 میلی‌ثانیه و FID ما در همان آستانه زیر 10 میلی‌ثانیه بود، بنابراین ما از ضریب قبولی بالایی برای این معیارها در سایت‌های مشتریان خود لذت بردیم: 78 درصد و 98 درصد. به ترتیب. با این حال، اعداد CLS (Cumulative Layout Shift) کاملاً متفاوت از آنچه در Lighthouse به آن عادت داشتیم به نظر می رسند. CLS ما در صدک 75 0.17 بود – بالاتر از آستانه 0.1 برای «گذراندن» – و بنابراین نرخ قبولی ما در تمام سایت‌های ما فقط 47٪ بود.
این معیار میزان پاس کلی ما را به 40 درصد کاهش داد، بنابراین ما تصمیم گرفتیم یک هدف بلندپروازانه تعیین کنیم تا این عدد را تا پایان آگوست 2021 به بالای 60 درصد برسانیم. برای انجام این کار، باید روی CLS تمرکز کنیم .
در زندگی واقعی، کاربران با صفحه ارتباط برقرار می‌کنند و از محتوای «بالاتر» عبور می‌کنند، که Core Web Vitals بهتر می‌گیرد. به دلیل تنوع در نحوه تعامل کاربران با سایت در هنگام بارگیری اولیه، CLS با داده های آزمایشگاهی و میدانی متفاوت بود.
جاده ای برای عبور از تمام Core Web Vitals
بهبود عملکرد مستلزم آزمون و خطا است و هر تلاشی همیشه آنطور که انتظار می رود کار نمی کند. با این حال، در اینجا چند پیشرفت وجود دارد که به ما در رسیدن به اهدافمان کمک کرد.
رزرو فضا برای بارگذاری تصاویر امتیاز CLS ما را به شدت بهبود بخشید زیرا از تغییر محتوای زیر تصاویر جلوگیری می کند. ما از ویژگی aspect-ratio CSS برای رفع این مشکل در مرورگرهایی که از آن پشتیبانی می‌کنند استفاده کردیم. برای کسانی که این کار را نمی کنند، ما یک تصویر مکان نگهدار شفاف را بارگذاری کردیم که در حافظه پنهان و اندازه آن فقط چند بایت بود، بنابراین تقریباً بلافاصله بارگیری می شود.
این رفتار کلی تصویر به ما این امکان را می‌دهد که ارتفاع تصویر نهایی را در حین رندر سمت سرور، بر اساس عرض و نسبت تصویر تصویر، از قبل محاسبه کنیم. این منجر به نشانه گذاری HTML با فضای عمودی مناسب برای تصویر نهایی شد. این بهبود به‌ویژه در دستگاه‌های تلفن همراه قابل مشاهده بود، زیرا تصاویر در گستره کامل درگاه‌های نمایش تلفن همراه ارائه می‌شوند.
برخی از مؤلفه‌ها در سایت‌های مشتریان ما دارای محتوای پویا هستند (مثلاً فهرستی از نظرات مشتریان خارجی) و نمی‌توان آنها را به CSS خالص تبدیل کرد تا از مزایای عملکرد رندر سمت سرور استفاده کند. اینها مناطق دشواری برای بهبود تغییرات چیدمان هستند زیرا محتوا (در نتیجه ارتفاع) متفاوت خواهد بود. در آن موارد، ما جزء را در ظرفی پیچیده کردیم که min-height بر اساس مشاهده میانگین ارتفاع برای هر یک از اجزای خاص از پیش تعیین شده بود. زمانی که مولفه دینامیک داخلی رندر انجام شد min-height حذف می‌شود. اگرچه این راه حل کامل نیست، اما به ما امکان داد تا تغییر طرح را تا حد زیادی کاهش دهیم.
در حالی که روی بهبودهای CLS تمرکز داشتیم، به کار بر روی LCP ادامه دادیم. در بسیاری از وب‌سایت‌ها، تصاویر بزرگترین عاملی هستند که به LCP کمک می‌کنند و برای ما این یک زمینه واضح برای بهبود بود. ما با استفاده از IntersectionObserver برای بارگذاری تنبل تصاویر بهبودهایی ایجاد کرده بودیم، اما متوجه شدیم که اندازه‌های تصویر به بهترین شکل برای هر نقطه شکست (موبایل، تبلت، دسکتاپ، دسکتاپ بزرگ) تنظیم نشده است، بنابراین کد تولید تصویر خود را به‌روزرسانی کردیم تا تصاویر را بر اساس گیره و مقیاس‌بندی کنیم. نقطه شکست و سپس دوباره مقیاس وضوح بر اساس تراکم پیکسل. به عنوان مثال، این کار اندازه یک تصویر بزرگ خاص را از 192 کیلوبایت به 102 کیلوبایت کاهش داد.
برای رندر سریع وب‌سایت‌ها در دستگاه‌هایی با اتصالات شبکه ضعیف، کدی را اضافه کردیم تا به صورت پویا کیفیت تصویر را بر اساس سرعت اتصال کاهش دهیم. این را می توان با استفاده از ویژگی downlink که توسط navigator.connection برگردانده شده است انجام داد. ما پارامترهای پرس و جو مبتنی بر URL را برای کاهش کیفیت تصویر از طریق API دارایی خود بر اساس آن شرایط شبکه اعمال می کنیم.
تعدادی از بخش های سایت های مشتریان ما به صورت پویا بارگیری می شوند. از آنجایی که می‌دانیم چه بخش‌هایی در یک سایت مشخص در زمان انتشار آن ارائه می‌شوند، از راهنمایی منبع rel=preconnect برای مقداردهی اولیه اتصال و دست دادن‌های ضروری قبل از زمان استفاده کردیم. ما همچنین از نکات منابع برای بارگیری سریع فونت ها و سایر منابع مهم استفاده می کنیم.
هنگام ساخت سایت های خود، مشتریان بخش های مختلفی را اضافه می کنند که ممکن است دارای اسکریپت های درون خطی باشند تا قابلیت های مختلف را امکان پذیر کنند. وجود این اسکریپت‌ها در صفحه HTML همیشه برای عملکرد بهینه نیست. ما تصمیم گرفتیم این اسکریپت ها را خارجی کنیم تا به مرورگر اجازه دهیم محتوای اسکریپت را به صورت ناهمزمان بارگیری و تجزیه کند. اسکریپت های جدید خارجی نیز می توانند در بین صفحات به اشتراک گذاشته شوند. این باعث افزایش عملکرد بیشتر در قالب حافظه پنهان مرورگر و CDN شد. ما اسکریپت های مهم را در خط نگه می داریم تا مرورگر آنها را سریعتر تجزیه و اجرا کند.
نتایج
با تمرکز تلاش ما بر روی CLS نتیجه داد، نرخ عبور Core Web Vitals ما از حدود 40٪ به تقریبا 70٪ رسید: بهبود 75٪!
همانطور که کاربران برای به‌روزرسانی و انتشار مجدد سایت‌های خود به پلتفرم ما باز می‌گردند، آخرین پیشرفت‌های عملکردی را دریافت می‌کنند و در نتیجه تعداد سایت‌هایی با "گذر از Core Web Vitals" به طور پیوسته در حال افزایش است، همانطور که در نمودار زیر نشان داده شده است:
نتیجه گیری
یافتن زمینه هایی برای بهبود عملکرد و ردیابی موفقیت آمیز پیشرفت به شدت به ابزارهایی که برای اندازه گیری استفاده می شود بستگی دارد. در حالی که Lighthouse برای اندازه‌گیری عملکرد بالاتر در یک "تنظیمات آزمایشگاهی" مفید بود، مشکلات عملکردی را که فقط از تعاملات کاربر (مانند پیمایش در صفحه) رخ می‌داد به‌دقت ثبت نکرد.
ردیابی Core Web Vitals دنیای واقعی با ابرداده به ما این امکان را می‌دهد تا تأثیر پیشرفت‌های خود را تجسم، هدف‌گیری و اندازه‌گیری کنیم. سفر برای بهبود نمرات Core Web Vitals به تیم این امکان را داد تا الگوهای غیرعملکردی موجود در سرتاسر پایگاه کد ما را شناسایی و جایگزین کنند. گاهی اوقات تغییرات امیدوارکننده تقریباً تأثیری را که ما انتظار داشتیم نداشتند، برخی اوقات برعکس این اتفاق می افتاد. دنیایی بکر نیست، پس باید به تلاش ادامه دهید.