با بیش از ۱۴۰ سال سابقهی انتشار، نیکی یکی از معتبرترین کسبوکارهای رسانهای در ژاپن است. آنها علاوه بر روزنامهی چاپی خود، ماهانه بیش از ۴۵۰ میلیون بازدید از داراییهای دیجیتال خود دارند. نیکی برای ارائهی تجربهی کاربری بهتر و تسریع کسبوکار خود در وب، در نوامبر ۲۰۱۷ با موفقیت یک اپلیکیشن وب پیشرونده (PWA) - https://r.nikkei.com - راهاندازی کرد. آنها اکنون نتایج شگفتانگیزی از پلتفرم جدید خود میبینند.
افزایش عملکرد - شاخص سرعت دو برابر بهتر - زمان تعامل ۱۴ ثانیه سریعتر - بارگذاری ۷۵٪ سریعتر با پیشواکشی
تأثیر تجاری - ۲.۳ برابر ترافیک ارگانیک - ۵۸٪ تبدیل بیشتر (اشتراک) - ۴۹٪ کاربران فعال روزانه بیشتر - ۲ برابر بازدید صفحه در هر جلسه
دانلود مطالعه موردی به صورت PDF
نمای کلی کسب و کار
چالش
با تبدیل شدن گوشیهای هوشمند به نقطه اصلی ورود به وب برای بسیاری از کاربران، Nikkei شاهد افزایش سریع ترافیک موبایل به وبسایت قدیمی خود بود. با این حال، با استفاده از Lighthouse ، ابزاری برای بررسی که یک صفحه وب را اسکن میکند و توصیههایی در مورد چگونگی بهبود در چندین دسته ارائه میدهد، آنها متوجه شدند که سایتشان به طور کامل برای موبایل در چندین زمینه بهینه نشده و بارگذاری آن بسیار کند است.
وبسایت آنها حدود ۲۰ ثانیه طول میکشید تا به طور مداوم تعاملی شود و به طور متوسط در شاخص سرعت ۱۰ ثانیه زمان میبرد. با توجه به اینکه ۵۳٪ از کاربران تلفن همراه اگر بارگذاری بیش از ۳ ثانیه طول بکشد، از تجربه خود صرف نظر میکنند، Nikkei میخواست زمان بارگذاری خود را کاهش دهد تا تجربه بهتری ارائه دهد و کسب و کار خود را در وب تسریع کند.
ارزش سرعت، به خصوص برای اخبار مالی، غیرقابل انکار است. ما سرعت را به یکی از معیارهای اصلی خود تبدیل کردیم و مشتریان ما از این تغییر قدردانی کردهاند.
Taihei Shigemori، مدیر، استراتژی دیجیتال
نتایج
Nikkei به دستاوردهای چشمگیری در عملکرد دست یافت. امتیاز Lighthouse آنها از ۲۳ به ۸۲ افزایش یافت. اندازهگیری زمان تعامل آنها ۱۴ ثانیه بهبود یافت. ترافیک ارگانیک، سرعت، نرخ تبدیل و کاربران فعال روزانه نیز همگی افزایش یافتند.
این PWA یک برنامه چند صفحهای (MPA) است که پیچیدگی front-end را کاهش میدهد و با Vanilla JavaScript ساخته شده است. پنج مهندس front-end اصلی به مدت یک سال برای دستیابی به این عملکرد تلاش کردند.
مهندسان رابط کاربری Nikkei ثابت کردهاند که تجربه کاربری عالی، عملکرد تجاری خوبی را به همراه دارد. ما کاملاً مصمم هستیم که سفر خود را برای ارائه سطح جدیدی از کیفیت به وب ادامه دهیم.
هیرویوکی هیگاشی. مدیر محصول، Nikkei
راه حل
Nikkei یک برنامه وب پیشرونده (PWA) ایجاد و راهاندازی کرد که با استفاده از طراحی واکنشگرا، جاوا اسکریپت معمولی و معماری چند صفحهای، بر ایجاد یک تجربه کاربری لذتبخش تمرکز داشت. با اضافه کردن یک سرویس ورکر، آنها توانستند عملکرد قابل پیشبینی را صرف نظر از شبکه ارائه دهند. این امر همچنین تضمین میکند که مقالات برتر همیشه در دسترس هستند و تقریباً بلافاصله بارگذاری میشوند زیرا با استفاده از حافظه پنهان (Cache Storage) ذخیره میشوند. آنها یک مانیفست برنامه وب اضافه کردند و همراه با سرویس ورکر خود، این به کاربران امکان میدهد PWA را نصب کنند، بنابراین به راحتی در دسترس است. و برای اطمینان از اینکه عملکرد کاملاً تحت کنترل آنهاست، جاوا اسکریپت شخص ثالث خود را بهینه کردند.
بهترین شیوهها
- با استفاده از APIهای وب مدرن، فشردهسازی و شیوههای بهینهسازی کد، سرعت بارگذاری و تعامل را بهبود بخشید.
- با افزودن ویژگیهای PWA مانند پشتیبانی آفلاین و افزودن به صفحه اصلی، به تدریج تجربه کاربری را بهبود بخشید.
- بودجههای عملکردی را در استراتژی عملکرد بگنجانید.
بررسی عمیق فنی
سرعت مهم است
سرعت از همیشه مهمتر است. همزمان با تبدیل شدن گوشیهای هوشمند به دستگاه اصلی مرور وب برای بسیاری از کاربران، Nikkei شاهد افزایش سریع ترافیک موبایل در سرویس خود بود. اما با استفاده از Lighthouse ، آنها متوجه شدند که وبسایت قدیمیشان به طور کامل برای موبایل بهینه نشده است، به طوری که شاخص سرعت به طور متوسط 10 ثانیه، بارگذاری اولیه بسیار کند و حجم زیادی از جاوا اسکریپت در آن وجود داشت. زمان آن رسیده بود که Nikkei وبسایت خود را بازسازی کند و بهترین شیوههای عملکرد وب را تطبیق دهد. در اینجا نتایج و بهینهسازیهای کلیدی عملکرد در PWA جدید آمده است.
استفاده از APIهای وب و بهترین شیوهها برای افزایش سرعت بارگذاری
درخواستهای کلید را از قبل بارگیری کنید
اولویتبندی بارگذاری مسیر بحرانی بسیار مهم است. با استفاده از HTTP/2 Server Push، آنها میتوانند بستههای مهم جاوا اسکریپت و CSS را که میدانند کاربر به آنها نیاز دارد، اولویتبندی کنند.
از سفرهای رفت و برگشت متعدد و پرهزینه به هر مبدا خودداری کنید
وبسایت برای ردیابی، تبلیغات و بسیاری از موارد استفاده دیگر نیاز به بارگذاری منابع شخص ثالث داشت. آنها از <link rel=preconnect> برای پیشحل کردن DNS/TCP/SSL handshake و مذاکره برای این منابع اصلی شخص ثالث استفاده کردند.
صفحه بعدی را به صورت پویا پیش دریافت کنید
وقتی مطمئن بودند که کاربر به صفحه خاصی هدایت میشود، منتظر نمیماندند تا پیمایش انجام شود. Nikkei به صورت پویا <link rel=prefetch> به <head> اضافه میکند و قبل از اینکه کاربر واقعاً روی لینک کلیک کند، صفحه بعدی را از قبل بارگذاری میکند. این امر پیمایش فوری صفحه را امکانپذیر میکند.
CSS مسیر بحرانی درونخطی
کاهش CSSهای مسدودکننده رندر یکی از بهترین شیوههای افزایش سرعت بارگذاری است. وبسایت تمام CSSهای حیاتی را با 0 استایلشیت مسدودکننده رندر درونخطی میکند. این بهینهسازی، زمان اولین رنگآمیزی معنادار را بیش از 1 ثانیه کاهش داد.
بهینهسازی بستههای جاوا اسکریپت
در تجربه قبلی خود، بستههای جاوا اسکریپت Nikkei حجیم شده بودند و در مجموع بیش از ۳۰۰ کیلوبایت وزن داشتند. از طریق بازنویسی به جاوا اسکریپت معمولی و بهینهسازیهای مدرن بستهبندی، مانند قطعهبندی مبتنی بر مسیر و درختتکانی، آنها توانستند این حجم زیاد را کاهش دهند. آنها اندازه بسته جاوا اسکریپت خود را ۸۰٪ کاهش دادند و با RollUp آن را به ۶۰ کیلوبایت رساندند.
سایر بهترین شیوههای اجرا شده
- فشردهسازی : Gzip/Brotli تمام منابع فشردهشده با استفاده از Fastly CDN
- ذخیره سازی : ذخیره سازی HTTP و ذخیره سازی لبه ای را فعال کنید
- بهینهسازی تصویر : از imgix برای بهینهسازی و تشخیص فرمت تصویر استفاده کنید
- بارگذاری تنبل منابع غیر بحرانی : از API ناظر تقاطع برای بارگذاری قطعات زیر صفحه استفاده کنید
- یک استراتژی برای بارگذاری فونت وب داشته باشید : استفاده از فونت سیستم را در اولویت قرار دهید
- بهینهسازی اولین رنگ معنادار : رندر کردن محتوا در سمت سرور
- بودجهبندی عملکرد را اتخاذ کنید : پایین نگه داشتن زمان انتقال و تجزیه/کامپایل جاوا اسکریپت
بهینهسازی جاوا اسکریپت شخص ثالث
اگرچه بهینهسازی جاوا اسکریپتهای شخص ثالث در مقایسه با اسکریپتهای خودتان آسان نیست، Nikkei با موفقیت تمام اسکریپتهای مرتبط با تبلیغات را که اکنون از شبکه تحویل محتوای (CDN) خودش ارائه میشوند، کوچکسازی و دستهبندی کرد. برچسبهای مرتبط با تبلیغات معمولاً قطعه کدی را برای شروع و بارگذاری سایر اسکریپتهای مورد نیاز ارائه میدهند که اغلب رندر صفحه را مسدود میکنند و همچنین برای هر یک از اسکریپتهای دانلود شده به زمان چرخش شبکه اضافی نیاز دارند. Nikkei رویکرد زیر را در پیش گرفت و زمان اولیهسازی را ۱۰۰ میلیثانیه بهبود بخشید، به علاوه اندازه JS را ۳۰٪ کاهش داد:
- تمام اسکریپتهای مورد نیاز را با استفاده از یک بسته نرمافزاری JS (مثلاً Webpack) بستهبندی کنید.
- اسکریپت همراه را به صورت ناهمزمان بارگذاری کنید، تا مانع رندر شدن صفحه نشود.
- بنر تبلیغاتی محاسبهشده را به Shadow DOM (در مقایسه با iframe) متصل کنید
- با استفاده از Intersection Observer API، تبلیغات را به تدریج در اسکرول کاربر بارگذاری کنید
بهبود تدریجی وبسایت
علاوه بر این بهینهسازیهای اساسی، Nikkei از Web App Manifest و Service Workerها برای قابل نصب کردن وبسایت خود و حتی کار کردن آن به صورت آفلاین استفاده کرد. با استفاده از استراتژی cache-first در Service Worker آنها، تمام منابع اصلی و مقالات برتر در Cache Storage ذخیره میشوند و حتی در شرایط اضطراری مانند شبکهی ناپایدار یا آفلاین، مجدداً مورد استفاده قرار میگیرند و عملکردی پایدار و بهینه ارائه میدهند.
هک کردن نیکی
یک شرکت روزنامه سنتی با سابقهای بیش از ۱۴۰ سال، با موفقیت دیجیتالی شدن خود را از طریق قدرت وب و PWA تسریع کرد. مهندسان رابط کاربری Nikkei ثابت کردند که تجربه کاربری عالی، عملکرد تجاری قوی را به همراه دارد. این شرکت به سفر خود برای ارائه سطح جدیدی از کیفیت به وب ادامه خواهد داد.