Nikkei با سابقه بیش از 140 سال انتشار یکی از معتبرترین مشاغل رسانه ای در ژاپن است. آنها همراه با روزنامه چاپی خود، بیش از 450 میلیون بازدید ماهانه از املاک دیجیتال خود دارند. برای ارائه تجربه کاربری بهتر و سرعت بخشیدن به تجارت خود در وب، Nikkei با موفقیت یک برنامه وب پیشرفته (PWA) - https://r.nikkei.com - را در نوامبر 2017 راه اندازی کرد. آنها اکنون نتایج شگفت انگیزی را از پلتفرم جدید می بینند. .
افزایش عملکرد - 2 برابر شاخص سرعت بهتر - زمان تعاملی 14 ثانیه سریعتر - بارگیری 75٪ سریعتر با واکشی اولیه
تأثیر تجاری - 2.3 برابر ترافیک ارگانیک - 58٪ تبدیل (اشتراک) بیشتر - 49٪ بیشتر کاربران فعال روزانه - 2 برابر بازدید از صفحه در هر جلسه
نمای کلی کسب و کار
چالش
Nikkei شاهد افزایش سریع ترافیک تلفن همراه به وب سایت قدیمی خود بود زیرا تلفن های هوشمند به نقطه اصلی ورود به وب برای بسیاری از کاربران تبدیل شدند. با این حال، با استفاده از Lighthouse ، یک ابزار حسابرسی که یک صفحه وب را اسکن می‌کند و توصیه‌هایی در مورد چگونگی بهبود در چندین دسته ارائه می‌دهد، متوجه شدند که سایت آنها برای تلفن همراه در مناطق مختلف کاملاً بهینه نشده است و بارگیری آن بسیار کند است.
وب سایت آنها حدود 20 ثانیه طول کشید تا به طور مداوم تعاملی شود و میانگین 10 ثانیه در شاخص سرعت بود. نیکی با دانستن اینکه 53 درصد از کاربران تلفن همراه تجربه‌ای را که بیش از 3 ثانیه طول بکشد، رها می‌کنند، می‌خواست زمان بارگذاری آنها را کاهش دهد تا تجربه بهتری ارائه کند و به تجارت خود در وب سرعت بخشد.
ارزش سرعت به خصوص برای اخبار مالی غیرقابل انکار است. ما سرعت را به یکی از معیارهای اصلی خود تبدیل کردیم و مشتریان ما از این تغییر قدردانی کردند.
Taihei Shigemori، مدیر، استراتژی دیجیتال
نتایج
Nikkei به دستاوردهای عملکردی چشمگیری دست یافت. امتیاز Lighthouse آنها از 23 به 82 افزایش یافت. اندازه گیری زمان تا تعامل آنها 14 ثانیه بهبود یافت. ترافیک ارگانیک، سرعت، نرخ تبدیل و کاربران فعال روزانه همگی افزایش یافتند.
PWA یک برنامه چند صفحه ای (MPA) است که پیچیدگی قسمت جلویی را کاهش می دهد و با Vanilla JavaScript ساخته شده است. پنج مهندس اصلی به مدت یک سال برای دستیابی به این عملکرد کار کردند.
مهندسان بخش جلویی Nikkei ثابت کرده‌اند که UX عالی عملکرد تجاری خوبی را به همراه دارد. ما کاملاً در ادامه سفر خود برای آوردن سطح جدیدی از کیفیت به وب سرمایه گذاری کرده ایم.
هیرویوکی هیگاشی. مدیر محصول، Nikkei
راه حل
Nikkei با استفاده از طراحی واکنش‌گرا، جاوا اسکریپت وانیلی و معماری چند صفحه‌ای، یک برنامه وب پیشرفته را ایجاد و راه‌اندازی کرد، آنها بر ایجاد یک تجربه کاربری لذت بخش تمرکز کردند. آنها با اضافه کردن یک سرویس دهنده، بدون توجه به شبکه، توانستند عملکرد قابل پیش بینی ارائه دهند. این همچنین تضمین می کند که مقالات برتر همیشه در دسترس هستند و تقریباً بلافاصله بارگیری می شوند زیرا با استفاده از حافظه پنهان ذخیره می شوند. آنها یک مانیفست برنامه وب را اضافه کردند، و همراه با سرویس دهنده خود به کاربران اجازه می دهد PWA را نصب کنند، بنابراین به راحتی قابل دسترسی است. و برای اطمینان از اینکه عملکرد کاملاً در کنترل آنها است، جاوا اسکریپت شخص ثالث خود را بهینه کردند.
بهترین شیوه ها
- با استفاده از APIهای وب مدرن، فشرده سازی و شیوه های بهینه سازی کد، سرعت بارگذاری و تعامل را بهبود بخشید.
- با افزودن ویژگی‌های PWA مانند پشتیبانی آفلاین و افزودن به صفحه اصلی، UX را به تدریج افزایش دهید.
- بودجه عملکرد را در استراتژی عملکرد بسازید.
شیرجه عمیق فنی
سرعت مهم است
سرعت مهمتر از همیشه است. از آنجایی که تلفن های هوشمند به ابزار اصلی مرورگر برای بسیاری از کاربران تبدیل شدند، Nikkei شاهد افزایش سریع ترافیک تلفن همراه در سرویس آنها بود. اما با استفاده از Lighthouse ، آنها متوجه شدند که وب سایت قدیمی آنها به طور کامل برای تلفن همراه بهینه نشده است، با شاخص سرعت به طور متوسط 10 ثانیه، بار اولیه بسیار آهسته و یک بسته جاوا اسکریپت بزرگ. زمان آن رسیده بود که Nikkei وب سایت خود را بازسازی کند و بهترین شیوه های عملکرد وب را تطبیق دهد. در اینجا نتایج و بهینه سازی عملکرد کلیدی در PWA جدید آمده است.
استفاده از API های وب و بهترین روش ها برای سرعت بارگذاری
درخواست های کلیدی را از قبل بارگیری کنید
مهم است که بارگذاری مسیر بحرانی را اولویت بندی کنید . با استفاده از HTTP/2 Server Push، آنها می‌توانند بسته‌های مهم جاوا اسکریپت و CSS را که می‌دانند یک کاربر به آن نیاز دارد، اولویت‌بندی کنند.
از سفرهای رفت و برگشت متعدد و پرهزینه به هر مقصدی خودداری کنید
وب سایت نیاز به بارگیری منابع شخص ثالث برای ردیابی، تبلیغات و بسیاری موارد استفاده دیگر داشت. آنها از <link rel=preconnect> برای حل و فصل دست دادن DNS/TCP/SSL و مذاکره برای این مبداهای کلیدی شخص ثالث استفاده کردند.
به صورت پویا صفحه بعدی را از قبل واکشی کنید
هنگامی که آنها مطمئن بودند که کاربر به صفحه خاصی هدایت می شود، فقط منتظر انجام ناوبری نبودند. Nikkei به صورت پویا <link rel=prefetch> را به <head> اضافه می کند و قبل از اینکه کاربر واقعاً روی پیوند کلیک کند، صفحه بعدی را از قبل واکشی می کند. این امکان پیمایش فوری صفحه را فراهم می کند.
CSS مسیر بحرانی درون خطی
کاهش رندر مسدود کردن CSS یکی از بهترین روش‌های بارگذاری سریع است. وب سایت تمام CSS های حیاتی را با 0 شیوه نامه مسدود کننده رندر درج می کند. این بهینه سازی رنگ معنی دار اول را بیش از 1 ثانیه کاهش داد.
بهینه سازی بسته های جاوا اسکریپت
در تجربه قبلی خود، بسته‌های جاوا اسکریپت Nikkei پف کرده بودند و در مجموع بیش از 300 کیلوبایت وزن داشتند. از طریق بازنویسی در جاوا اسکریپت وانیلی و بهینه‌سازی‌های باندلینگ مدرن، مانند تکه‌شدن مبتنی بر مسیر و تکان دادن درخت، آنها توانستند این نفخ را کاهش دهند. آنها اندازه بسته جاوا اسکریپت خود را 80 درصد کاهش دادند و با RollUp آن را به 60 کیلوبایت کاهش دادند.
سایر بهترین شیوه های اجرا شده
- فشرده سازی : Gzip/Brotli همه منابع قابل تراکم با استفاده از Fastly CDN
- ذخیره سازی : ذخیره HTTP، حافظه پنهان کنار لبه را فعال کنید
- بهینه سازی تصویر : از imgix برای بهینه سازی و تشخیص فرمت تصویر استفاده کنید
- منابع غیر بحرانی بار تنبل : از API مشاهدهگر تقاطع برای بارگیری قطعات زیر تاشو استفاده کنید
- استراتژی بارگذاری فونت وب داشته باشید : استفاده از فونت سیستم را در اولویت قرار دهید
- بهینه سازی اولین رنگ معنی دار : سمت سرور محتوا را رندر کنید
- بودجه های عملکرد را بپذیرید : زمان انتقال جاوا اسکریپت و تجزیه/کامپایل را کم نگه دارید
بهینه سازی جاوا اسکریپت شخص ثالث
در حالی که بهینه‌سازی جاوا اسکریپت‌های شخص ثالث در مقایسه با اسکریپت‌های خود آسان نیست، Nikkei با موفقیت تمام اسکریپت‌های مرتبط با تبلیغات را که اکنون از شبکه تحویل محتوای خود (CDN) ارائه می‌شوند، کوچک‌سازی و بسته‌بندی کرد. تگ‌های مرتبط با آگهی معمولاً قطعه‌ای را برای شروع و بارگیری سایر اسکریپت‌های مورد نیاز ارائه می‌دهند، که اغلب رندر صفحه را مسدود می‌کنند و همچنین برای هر یک از اسکریپت‌های دانلود شده به زمان اضافی شبکه نیاز دارند. Nikkei رویکرد زیر را در پیش گرفت و زمان اولیه سازی را 100 میلی ثانیه بهبود بخشید، به علاوه اندازه JS را 30٪ کاهش داد:
- تمام اسکریپت‌های مورد نیاز را با استفاده از یک بسته‌کننده JS (مثلاً Webpack) بسته‌بندی کنید.
- Async اسکریپت همراه را بارگیری می کند، به طوری که رندر صفحه را مسدود نمی کند
- بنر تبلیغاتی محاسبه شده را به Shadow DOM (در مقابل iframe) وصل کنید
- با استفاده از Intersection Observer API به تدریج تبلیغات را روی اسکرول کاربر بارگیری کنید
بهبود تدریجی وب سایت
علاوه بر این بهینه‌سازی‌های اولیه، Nikkei از Web App Manifest و کارگران خدماتی استفاده کرد تا وب‌سایت خود را قابل نصب و حتی آفلاین کنند. با استفاده از استراتژی cache-first در سرویس‌کار خود، تمام منابع اصلی و مقالات برتر در حافظه پنهان ذخیره می‌شوند و حتی در موقعیت‌های احتمالی مانند شبکه‌های ورقه‌ای یا آفلاین، مجدداً استفاده می‌شوند و عملکرد ثابت و بهینه را ارائه می‌کنند.
نیکی را هک کنید
یک شرکت روزنامه سنتی روزانه با سابقه بیش از 140 سال با موفقیت دیجیتالی شدن خود را از طریق قدرت وب و PWA تسریع کرد. مهندسان بخش جلویی Nikkei ثابت کردند که UX عالی عملکرد تجاری قوی را ارائه می دهد. این شرکت به سفر خود برای آوردن سطح جدیدی از کیفیت به وب ادامه خواهد داد.