Dengan sejarah publikasi lebih dari 140 tahun, Nikkei adalah salah satu bisnis media paling tepercaya di Jepang. Selain koran cetak, mereka memiliki lebih dari 450 juta kunjungan bulanan ke properti digital mereka. Untuk memberikan pengalaman pengguna yang lebih baik dan mempercepat bisnis mereka di web, Nikkei berhasil meluncurkan Progressive Web App (PWA) - https://r.nikkei.com - pada November 2017. Mereka kini melihat hasil yang luar biasa dari platform baru.
Peningkatan performa - Indeks Kecepatan 2X lebih baik - Waktu hingga interaktif 14 detik lebih cepat - Pemuatan 75% lebih cepat dengan pengambilan data sebelumnya
Dampak bisnis - Traffic organik 2,3X lebih banyak - Konversi (langganan) 58% lebih banyak - Pengguna aktif harian 49% lebih banyak - Kunjungan halaman per sesi 2X lebih banyak
Ringkasan bisnis
Tantangan
Nikkei mengalami peningkatan pesat traffic seluler ke situs lama mereka karena smartphone menjadi titik masuk utama ke web bagi banyak pengguna. Namun, dengan menggunakan Lighthouse, alat audit yang memindai halaman web dan memberikan rekomendasi tentang cara meningkatkan kualitas di berbagai kategori, mereka memahami bahwa situs mereka belum sepenuhnya dioptimalkan untuk seluler di berbagai area dan sangat lambat dimuat.
Situs mereka membutuhkan waktu sekitar 20 detik agar dapat berinteraksi secara konsisten dan memiliki Rata-Rata Indeks Kecepatan 10 detik. Mengetahui bahwa 53% pengguna seluler akan keluar dari pengalaman jika pemuatannya membutuhkan waktu lebih dari 3 detik, Nikkei ingin mengurangi waktu pemuatannya untuk memberikan pengalaman yang lebih baik dan mempercepat bisnisnya di web.
Nilai kecepatan tidak dapat disangkal, terutama untuk berita keuangan. Kami menjadikan kecepatan sebagai salah satu metrik inti kami, dan pelanggan kami mengapresiasi perubahan ini.
Taihei Shigemori, Manager, Digital Strategy
Hasil
Nikkei mencapai peningkatan performa yang mengesankan. Skor Lighthouse mereka melonjak dari 23 menjadi 82. Pengukuran waktu hingga interaktif mereka meningkat 14 detik. Traffic organik, kecepatan, rasio konversi, dan pengguna aktif harian semuanya meningkat.
PWA adalah aplikasi multi-halaman (MPA) yang mengurangi kompleksitas front-end, dibangun dengan Vanilla JavaScript. Lima engineer front-end inti bekerja selama setahun untuk mencapai performa ini.
Para engineer front-end Nikkei telah membuktikan bahwa UX yang hebat menghasilkan performa bisnis yang baik. Kami sepenuhnya berinvestasi untuk melanjutkan perjalanan kami dalam menghadirkan kualitas baru di web.
Hiroyuki Higashi. Product Manager, Nikkei
Solusi
Nikkei membuat dan meluncurkan Progressive Web App, menggunakan desain responsif, JavaScript vanilla, dan arsitektur multi-halaman. Mereka berfokus untuk membangun pengalaman pengguna yang menyenangkan. Dengan menambahkan pekerja layanan, mereka dapat memberikan performa yang dapat diprediksi, terlepas dari jaringan. Hal ini juga memastikan bahwa artikel teratas selalu tersedia dan dimuat hampir segera karena disimpan menggunakan Cache Storage. Mereka menambahkan manifes aplikasi web, dan bersama dengan pekerja layanannya, hal ini memungkinkan pengguna menginstal PWA, sehingga dapat diakses dengan mudah. Untuk memastikan performa sepenuhnya berada dalam kendali mereka, mereka mengoptimalkan JavaScript pihak ketiga.
Praktik terbaik
- Tingkatkan kecepatan pemuatan dan interaktivitas dengan menggunakan API web modern, kompresi, dan praktik pengoptimalan kode.
- Tingkatkan UX secara progresif dengan menambahkan fitur PWA seperti dukungan offline dan Tambahkan ke Layar Utama.
- Bangun anggaran performa ke dalam strategi performa.
Pembahasan Mendalam Teknis
Kecepatan itu penting
Kecepatan kini lebih penting dari sebelumnya. Seiring dengan makin banyaknya pengguna yang menggunakan smartphone sebagai perangkat utama untuk menjelajah, Nikkei mengalami peningkatan traffic seluler yang pesat di layanannya. Namun, dengan menggunakan Lighthouse, mereka menyadari bahwa situs lama mereka tidak sepenuhnya dioptimalkan untuk perangkat seluler, dengan Indeks Kecepatan rata-rata 10 detik, pemuatan awal yang sangat lambat, dan paket JavaScript yang besar. Saatnya Nikkei membangun ulang situsnya dan menerapkan praktik terbaik performa web. Berikut adalah hasil dan pengoptimalan performa utama di PWA baru.
Memanfaatkan API web & praktik terbaik untuk mempercepat pemuatan
Memuat permintaan kunci terlebih dahulu
Penting untuk memprioritaskan pemuatan jalur kritis. Dengan HTTP/2 Server Push, mereka dapat memprioritaskan paket JavaScript dan CSS penting yang mereka ketahui akan dibutuhkan pengguna.
Hindari beberapa perjalanan pulang pergi yang mahal ke asal mana pun
Situs perlu memuat resource pihak ketiga untuk pelacakan, iklan, dan banyak
kasus penggunaan lainnya. Mereka menggunakan
<link rel=preconnect>
untuk melakukan pra-resolusi handshake dan negosiasi DNS/TCP/SSL untuk 3 origin pihak ketiga utama ini.
Melakukan pengambilan data halaman berikutnya secara dinamis
Saat yakin bahwa pengguna akan membuka halaman tertentu, mereka tidak hanya menunggu navigasi terjadi. Nikkei menambahkan
<link rel=prefetch>
secara dinamis ke <head> dan melakukan pengambilan data halaman berikutnya sebelum pengguna mengklik
link. Tindakan ini memungkinkan navigasi halaman instan.
CSS jalur penting inline
Mengurangi CSS yang memblokir rendering adalah salah satu praktik terbaik pemuatan cepat. Situs menyisipkan semua CSS penting dengan 0 stylesheet yang memblokir rendering. Pengoptimalan ini mengurangi first meaningful paint lebih dari 1 detik.
Mengoptimalkan paket JavaScript
Pada pengalaman sebelumnya, paket JavaScript Nikkei terlalu besar, dengan total lebih dari 300 KB. Melalui penulisan ulang ke JavaScript vanilla dan pengoptimalan bundling modern, seperti chunking berbasis rute dan tree-shaking, mereka dapat mengurangi pembengkakan ini. Mereka mengurangi ukuran paket JavaScript sebesar 80%, hingga menjadi 60 KB dengan RollUp.
Praktik terbaik lainnya yang diterapkan
- Kompresi: Gzip/Brotli semua resource yang dapat dikompresi menggunakan Fastly CDN
- Penyimpanan cache: Aktifkan penyimpanan cache HTTP, penyimpanan cache sisi tepi
- Pengoptimalan gambar: Gunakan imgix untuk pengoptimalan dan deteksi format gambar
- Pemuatan lambat untuk resource yang tidak penting: Gunakan Intersection Observer API untuk memuat fragmen paruh bawah
- Memiliki strategi pemuatan font web: Prioritaskan penggunaan font sistem
- Mengoptimalkan first meaningful paint: Merender konten di sisi server
- Terapkan anggaran performa: Menjaga waktu transmisi dan penguraian/kompilasi JavaScript tetap rendah
Mengoptimalkan JavaScript pihak ketiga
Meskipun tidak semudah mengoptimalkan JavaScript pihak ketiga dibandingkan dengan skrip Anda sendiri, Nikkei berhasil meminimalkan dan menggabungkan semua skrip terkait iklan, yang kini ditayangkan dari jaringan penayangan konten (CDN) miliknya sendiri. Tag terkait iklan biasanya menyediakan cuplikan untuk memulai dan memuat skrip lain yang diperlukan, yang sering kali memblokir rendering halaman dan juga memerlukan waktu perjalanan pulang pergi jaringan tambahan untuk setiap skrip yang didownload. Nikkei mengambil pendekatan berikut dan meningkatkan waktu inisialisasi sebesar 100 md, serta mengurangi ukuran JS sebesar 30%:
- Gabungkan semua skrip yang diperlukan menggunakan bundler JS (misalnya, Webpack)
- Muat skrip yang di-bundle secara asinkron, sehingga tidak memblokir rendering halaman
- Lampirkan banner iklan yang dihitung ke Shadow DOM (vs. iframe)
- Memuat iklan secara progresif saat pengguna men-scroll dengan Intersection Observer API
Meningkatkan kualitas situs secara progresif
Selain pengoptimalan dasar ini, Nikkei memanfaatkan Manifes Aplikasi Web dan pekerja layanan untuk membuat situs mereka dapat diinstal dan bahkan berfungsi secara offline. Dengan menggunakan strategi cache-first di pekerja layanannya, semua resource inti dan artikel teratas disimpan di Cache Storage dan digunakan kembali bahkan dalam situasi darurat seperti jaringan yang tidak stabil atau offline, sehingga memberikan performa yang konsisten dan dioptimalkan.
Meretas Nikkei
Perusahaan surat kabar harian tradisional dengan sejarah lebih dari 140 tahun berhasil mempercepat digitalisasinya melalui kekuatan web dan PWA. Engineer front-end Nikkei membuktikan bahwa UX yang hebat menghasilkan performa bisnis yang kuat. Perusahaan akan melanjutkan perjalanannya dalam menghadirkan tingkat kualitas baru ke web.