Dengan sejarah penerbitan lebih dari 140 tahun, Nikkei adalah salah satu bisnis media paling kredibel 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. Sekarang, mereka mendapatkan hasil yang luar biasa dari platform baru.
Peningkatan performa - Indeks Kecepatan 2X lebih baik - waktu menuju interaktif 14 detik lebih cepat - pemuatan 75% lebih cepat dengan pengambilan data
Dampak bisnis - Traffic organik 2,3 kali lipat - Konversi (langganan) meningkat 58% - Pengguna aktif harian meningkat 49% - Penayangan halaman 2 kali lipat per sesi
Ringkasan bisnis
Tantangan
Nikkei melihat peningkatan pesat dalam 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 beberapa kategori, mereka memahami bahwa situs mereka tidak sepenuhnya dioptimalkan untuk seluler di beberapa area dan sangat lambat dimuat.
Situs mereka memerlukan waktu ~20 detik untuk menjadi interaktif secara konsisten dan rata-rata 10 detik di Speed Index. Mengetahui bahwa 53% pengguna seluler akan meninggalkan pengalaman jika pemuatan membutuhkan waktu lebih dari 3 detik, Nikkei ingin mengurangi waktu pemuatan untuk memberikan pengalaman yang lebih baik dan mempercepat bisnis mereka di web.
Nilai kecepatan tidak dapat dibantah, terutama untuk berita keuangan. Kami menjadikan kecepatan sebagai salah satu metrik inti, dan pelanggan kami telah mengapresiasi perubahan tersebut.
Taihei Shigemori, Manager, Digital Strategy
Hasil
Nikkei mencapai peningkatan performa yang mengesankan. Skor Lighthouse mereka melonjak dari 23 menjadi 82. Pengukuran waktu hingga interaksi mereka meningkat sebesar 14 detik. Traffic organik, kecepatan, rasio konversi, dan pengguna harian aktif juga meningkat.
PWA adalah aplikasi multi-halaman (MPA) yang mengurangi kompleksitas frontend, yang dibuat dengan Vanilla JavaScript. Lima engineer frontend inti bekerja selama satu tahun untuk mencapai performa ini.
Engineer front-end Nikkei telah membuktikan bahwa UX yang hebat menghasilkan performa bisnis yang baik. Kami sepenuhnya berinvestasi dalam melanjutkan perjalanan kami untuk menghadirkan tingkat kualitas baru ke web.
Hiroyuki Higashi. Product Manager, Nikkei
Solusi
Nikkei membuat dan meluncurkan Progressive Web App, dengan menggunakan desain responsif, JavaScript vanila, 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 layanan, hal ini memungkinkan pengguna menginstal PWA, sehingga mudah diakses. Dan untuk memastikan performa sepenuhnya berada dalam kendali mereka, mereka mengoptimalkan JavaScript pihak ketiga.
Praktik terbaik
- Tingkatkan kecepatan pemuatan dan interaktivitas dengan menggunakan API web, kompresi, dan praktik pengoptimalan kode modern.
- Tingkatkan UX secara bertahap dengan menambahkan fitur PWA seperti dukungan offline dan Add to Home Screen.
- Buat anggaran performa menjadi strategi performa.
Pembahasan Mendalam Teknis
Kecepatan itu penting
Kecepatan kini semakin penting. Karena smartphone menjadi perangkat penjelajahan utama bagi banyak pengguna, Nikkei melihat peningkatan traffic seluler yang cepat di layanan mereka. Namun, dengan menggunakan Lighthouse, mereka menyadari bahwa situs lama mereka tidak sepenuhnya dioptimalkan untuk perangkat seluler, dengan Speed Index rata-rata 10 detik, pemuatan awal yang sangat lambat, dan paket JavaScript yang besar. Saatnya Nikkei membangun ulang situsnya dan menyesuaikan praktik terbaik performa web. Berikut hasil dan pengoptimalan performa utama di PWA baru.
Memanfaatkan API web & praktik terbaik untuk mempercepat pemuatan
Pramuat permintaan kunci
Penting untuk memprioritaskan pemuatan jalur kritis. Dengan menggunakan HTTP/2 Server Push, mereka dapat memprioritaskan JavaScript dan CSS penting yang mereka tahu akan diperlukan 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 me-resolve handshake dan negosiasi DNS/TCP/SSL terlebih dahulu untuk origin pihak ketiga
utama ini.
Melakukan pengambilan data secara dinamis untuk halaman berikutnya
Saat yakin bahwa pengguna akan membuka halaman tertentu, mereka
tidak hanya menunggu navigasi terjadi. Nikkei secara dinamis menambahkan
<link rel=prefetch>
ke <head> dan mengambil halaman berikutnya terlebih dahulu sebelum pengguna benar-benar mengklik
link. Hal ini memungkinkan navigasi halaman instan.
CSS Jalur Kritis Inline
Mengurangi CSS pemblokir render adalah salah satu praktik terbaik untuk mempercepat pemuatan. Situs ini menyisipkan semua CSS penting dengan 0 stylesheet pemblokir render. Pengoptimalan ini mengurangi sorotan pertama yang bermakna lebih dari 1 detik.
Mengoptimalkan paket JavaScript
Dalam pengalaman sebelumnya, paket JavaScript Nikkei membengkak, dengan total ukuran lebih dari 300 KB. Melalui penulisan ulang ke JavaScript vanilla dan pengoptimalan pengelompokan modern, seperti pengelompokan berbasis rute dan tree-shaking, mereka dapat memangkas pemborosan ini. Mereka mengurangi ukuran paket JavaScript sebesar 80%, sehingga menjadi 60 KB dengan RollUp.
Praktik terbaik lainnya yang diterapkan
- Kompresi: Gzip/Brotli semua resource yang dapat dikompresi menggunakan CDN Fastly
- Caching: Mengaktifkan caching HTTP, caching sisi edge
- Pengoptimalan gambar: Gunakan imgix untuk pengoptimalan dan deteksi format gambar
- Pemuatan lambat untuk resource non-penting: Gunakan intersection observer API untuk memuat fragmen paruh bawah
- Memiliki strategi pemuatan font web: Prioritaskan penggunaan font sistem
- Mengoptimalkan first meaningful paint: Merender sisi server konten
- Menggunakan anggaran performa: Mempertahankan waktu transmisi dan penguraian/kompilasi JavaScript tetap rendah
Mengoptimalkan JavaScript pihak ketiga
Meskipun tidak mudah untuk mengoptimalkan JavaScript pihak ketiga dibandingkan dengan skrip Anda sendiri, Nikkei berhasil meminifikasi dan menggabungkan semua skrip terkait iklan, yang sekarang 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 penyelesaian jaringan tambahan untuk setiap skrip yang didownload. Nikkei menggunakan pendekatan berikut dan meningkatkan waktu inisialisasi sebesar 100 md, serta mengurangi ukuran JS sebesar 30%:
- Paketkan semua skrip yang diperlukan menggunakan bundler JS (mis., Webpack)
- Memuat skrip yang dipaketkan secara asinkron, sehingga tidak memblokir rendering halaman
- Melampirkan banner iklan yang dihitung ke Shadow DOM (vs iframe)
- Memuat iklan secara progresif saat pengguna men-scroll dengan Intersection Observer API
Meningkatkan situs secara bertahap
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 layanan, semua resource inti dan artikel teratas disimpan di Penyimpanan Cache dan digunakan kembali bahkan dalam situasi darurat seperti jaringan yang tidak stabil atau offline, sehingga memberikan performa yang konsisten dan dioptimalkan.
Retas Nikkei
Perusahaan surat kabar harian tradisional dengan sejarah lebih dari 140 tahun berhasil mempercepat digitalisasinya melalui kekuatan web dan PWA. Insinyur front-end Nikkei membuktikan bahwa UX yang hebat menghasilkan kinerja bisnis yang kuat. Perusahaan ini akan terus berupaya menghadirkan kualitas baru ke web.