Dengan sejarah publikasi selama lebih dari 140 tahun, Nikkei adalah salah satu bisnis media paling kredibel di Jepang. Bersama surat kabar cetak, mereka memiliki lebih dari 450 juta kunjungan per bulan 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. Kini mereka telah melihat hasil yang luar biasa dari platform baru ini.
Peningkatan performa - Indeks Kecepatan 2X lebih baik - Waktu penyiapan interaktif 14 detik lebih cepat - pemuatan 75% lebih cepat dengan pengambilan data
Dampak bisnis - 2,3X traffic organik - 58% lebih banyak konversi (langganan) - 49% lebih banyak pengguna aktif harian - 2X penayangan halaman 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 cara meningkatkan kualitas di berbagai kategori, mereka memahami bahwa situs mereka belum sepenuhnya dioptimalkan untuk perangkat seluler di berbagai area dan sangat lambat dimuat.
Situs mereka membutuhkan waktu ~20 detik untuk menjadi interaktif secara konsisten dan rata-rata 10 detik pada Speed Index. Dengan mengetahui bahwa 53% pengguna seluler akan berhenti menonton jika waktu pemuatan 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 diragukan lagi, terutama untuk berita keuangan. Kami menjadikan kecepatan sebagai salah satu metrik inti kami, dan pelanggan kami mengapresiasi perubahan tersebut.
Taihei Shigemori, Manajer, Strategi Digital
Hasil
Nikkei mencapai peningkatan performa yang mengesankan. Skor Lighthouse mereka melonjak dari 23 menjadi 82. Waktu-ke-interaktif 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 front-end, yang dibuat dengan JavaScript Vanilla. Lima insinyur inti {i>front-end<i} bekerja selama satu tahun untuk mencapai kinerja ini.
Para engineer front-end Nikkei telah membuktikan bahwa UX yang hebat membawa performa bisnis yang baik. Kami berkomitmen penuh untuk melanjutkan perjalanan kami dalam menghadirkan tingkat kualitas yang baru ke web.
Hiroyuki Higashi. Product Manager, Nikkei
Solusi
Nikkei membuat dan meluncurkan Progressive Web App, menggunakan desain responsif, JavaScript vanila, dan arsitektur multi-halaman, mereka berfokus untuk membangun pengalaman pengguna yang menyenangkan. Dengan menambahkan pekerja layanan, pekerja layanan dapat memberikan performa yang dapat diprediksi, apa pun jaringannya. Hal ini juga memastikan bahwa artikel teratas selalu tersedia dan dimuat hampir seketika karena artikel tersebut disimpan menggunakan Cache Storage. Mereka menambahkan manifes aplikasi web, dan bersama dengan pekerja layanannya, hal ini memungkinkan pengguna menginstal PWA sehingga mudah diakses. 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.
- Menyusun anggaran performa ke dalam strategi performa.
Pembahasan Mendalam Teknis
Kecepatan itu penting
Kecepatan kini semakin penting. Karena smartphone telah 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. Sudah waktunya bagi Nikkei untuk membangun ulang situs mereka dan menyesuaikan praktik terbaik performa web. Berikut adalah hasil dan pengoptimalan performa utama di PWA baru.
Memanfaatkan web API & praktik terbaik untuk mempercepat pemuatan
Pramuat permintaan utama
Penting untuk memprioritaskan pemuatan jalur kritis. Dengan menggunakan HTTP/2 Server Push, mereka dapat memprioritaskan paket JavaScript dan CSS penting yang 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-resolve handshake dan negosiasi DNS/TCP/SSL untuk origin pihak ketiga utama ini.
Mengambil data halaman berikutnya secara dinamis
Ketika yakin bahwa pengguna akan menavigasi ke halaman tertentu, mereka
tidak hanya menunggu navigasi terjadi. Nikkei secara dinamis menambahkan <link rel=prefetch> ke <head> dan mengambil halaman berikutnya sebelum pengguna benar-benar mengklik link. Tindakan ini memungkinkan navigasi halaman yang cepat.
CSS jalur kritis inline
Mengurangi CSS pemblokiran render adalah salah satu praktik terbaik untuk mempercepat pemuatan. Situs menjadi inline semua CSS penting dengan 0 stylesheet pemblokir rendering. Pengoptimalan ini mengurangi waktu penggambaran pertama yang bermakna lebih dari 1 detik.
Paket JavaScript Optimize
Dalam pengalaman mereka sebelumnya, paket JavaScript Nikkei membengkak, dengan total berat lebih dari 300 KB. Melalui penulisan ulang pada JavaScript vanila dan pengoptimalan pemaketan modern, seperti pemotongan berbasis rute dan tree-shaking, mereka dapat menghilangkan penggelembungan ini. Mereka mengurangi ukuran paket JavaScript sebesar 80%, lalu menurunkannya menjadi 60 KB dengan Gabungan.
Praktik terbaik lainnya yang diterapkan
- Kompresi: Gzip/Brotli semua resource yang dapat dikompresi menggunakan Fastly CDN
- Pembuatan cache: Mengaktifkan cache HTTP, cache sisi tepi
- Pengoptimalan gambar: Gunakan imgix untuk pengoptimalan dan deteksi format gambar
- Pemuatan lambat resource non-kritis: Gunakan intersection observer API untuk memuat fragmen paruh bawah
- Miliki strategi pemuatan font web: Prioritaskan penggunaan font sistem
- Optimize first Artinya paint: Merender sisi server konten
- Gunakan anggaran performa: Menjaga 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 memaketkan 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 penyelesaian jaringan tambahan untuk setiap skrip yang didownload. Nikkei melakukan pendekatan berikut dan meningkatkan waktu inisialisasi sebesar 100 md, serta mengurangi ukuran JS sebesar 30%:
- Gabungkan semua skrip yang diperlukan menggunakan pemaket JS (misalnya, Webpack)
- Asinkron memuat skrip yang dipaketkan, sehingga tidak menghalangi 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 {i>website<i} secara progresif
Selain pengoptimalan dasar ini, Nikkei memanfaatkan Manifes Aplikasi Web dan pekerja layanan untuk membuat situs mereka dapat diinstal dan bahkan bekerja secara offline. Dengan strategi yang mengutamakan cache pada pekerja layanannya, semua resource inti dan artikel teratas disimpan dalam Cache Storage dan digunakan kembali bahkan dalam situasi darurat seperti jaringan yang tidak stabil atau offline, sehingga memberikan performa yang konsisten dan optimal.
Retas Nikkei
Sebuah perusahaan surat kabar harian tradisional yang telah berdiri selama lebih dari 140 tahun berhasil mempercepat digitalisasinya melalui kecanggihan web dan PWA. Insinyur {i>front-end<i} Nikkei membuktikan bahwa UX yang hebat menghasilkan kinerja bisnis yang kuat. Perusahaan akan melanjutkan perjalanannya untuk menghadirkan tingkat kualitas yang baru ke web.