140 yılı aşkın yayıncılık geçmişiyle, Nikki Japonya’daki en yetkili medya şirketlerinden biridir. Basılı gazetelerinin yanı sıra, dijital mülklerine aylık 450 milyondan fazla ziyaretleri var. Daha iyi bir kullanıcı deneyimi sağlamak ve web’deki işlerini hızlandırmak için Nikkei, Progresif Web Uygulamasını (PWA) başarıyla başlattı – – Kasım 2017’de. Şimdi yeni platformdan harika sonuçlar alıyorlar.
Performans kazanımları
- 2 kat daha iyi Hız Endeksi
- 14 saniye daha hızlı etkileşim süresi
- Ön getirme ile %75 daha hızlı yükleme
iş etkisi
- 2,3 kat organik trafik
- %58 daha fazla dönüşüm (abonelik)
- %49 daha fazla günlük aktif kullanıcı
- Oturum başına 2 kat sayfa görüntüleme
PDF’i indirin Örnek olay incelemesi
İşletmeye genel bakış #
Meydan okumak #
Akıllı telefonlar birçok kullanıcı için web’e ana giriş noktası haline geldiğinden, Nikkei eski web sitelerinin mobil trafiğinde hızlı bir artış gördü. Ancak, kullanarak deniz feneriBir web sayfasını tarayan ve birden çok kategoride nasıl iyileştirilebileceğine ilişkin öneriler sunan bir denetim aracı olan , sitelerinin birden çok alanda mobil cihazlar için tam olarak optimize edilmediğini ve yüklenmesinin çok yavaş olduğunu anladılar.
Web sitelerinin sürekli etkileşimli hale gelmesi yaklaşık 20 saniye sürüyordu ve Hız Dizininde ortalama 10 saniyeydi. Mobil kullanıcıların %53’ünün, yüklenmesi 3 saniyeden uzun süren bir deneyimden vazgeçeceğini bilen Nikkei, daha iyi bir deneyim sağlamak ve web’deki işlerini hızlandırmak için yükleme sürelerini kısaltmak istedi.
Özellikle finans haberleri için hızın değeri tartışılmaz. Hızı temel ölçütlerimizden biri haline getirdik ve müşterilerimiz bu değişikliği takdir etti.
Taihei Shigemori, Yönetici, Dijital Strateji
Sonuçlar #
Nikkei etkileyici performans kazanımları elde etti. Lighthouse puanları 23’ten 82’ye yükseldi. Etkileşime geçme süreleri 14 saniye arttı. Organik trafik, hız, dönüşüm oranı ve aktif günlük kullanıcıların tümü de arttı.
PWA, Vanilla JavaScript ile oluşturulmuş, ön uç karmaşıklığını azaltan çok sayfalı bir uygulamadır (MPA). Bu performansı elde etmek için beş çekirdek ön uç mühendisi bir yıl boyunca çalıştı.
Nikkei ön uç mühendisleri, mükemmel UX’in iyi bir iş performansı getirdiğini kanıtladı. Web’e yeni bir kalite düzeyi getirme yolculuğumuza devam etmeye tamamen yatırım yaptık.
Hiroyuki Higashi, Ürün Müdürü, Nikkei
Çözüm #
Nikkei, duyarlı tasarım, normal JavaScript ve çok sayfalı bir mimari kullanarak bir Progresif Web Uygulaması oluşturup piyasaya sürdü ve keyifli bir kullanıcı deneyimi oluşturmaya odaklandı. Bir servis çalışanı ekleyerek, ağdan bağımsız olarak öngörülebilir performans sağlayabildiler. Bu ayrıca, Önbellek Depolama kullanılarak depolandıkları için en iyi makalelerin her zaman kullanılabilir olmasını ve neredeyse anında yüklenmesini sağlar. Bir web uygulaması bildirimi eklediler ve hizmet çalışanlarıyla birlikte bu, kullanıcıların PWA’yı yüklemesine olanak tanıyarak kolayca erişilebilir hale getirdi. Performansın tamamen kendi kontrollerinde olduğundan emin olmak için 3. taraf JavaScript’lerini optimize ettiler.
En iyi uygulamalar #
- Modern web API’leri, sıkıştırma ve kod optimizasyon uygulamalarını kullanarak yükleme hızını ve etkileşimi iyileştirin.
- Çevrimdışı destek ve Ana Ekrana Ekle gibi PWA özelliklerini ekleyerek kullanıcı deneyimini aşamalı olarak geliştirin.
- Performans stratejisine performans bütçeleri oluşturun.
Derin Teknik İnceleme #
Hız önemlidir #
Hız her zamankinden daha önemli. Akıllı telefonlar birçok kullanıcı için ana göz atma cihazı haline geldikçe, Nikkei hizmetlerinde mobil trafikte hızlı bir artış gördü. Ama kullanarak deniz feneri, ortalama 10 saniyelik Hız Dizini, çok yavaş ilk yükleme ve büyük bir JavaScript paketi ile eski web sitelerinin mobil cihazlar için tam olarak optimize edilmediğini fark ettiler. Nikkei’nin web sitesini yeniden oluşturma ve web performansı en iyi uygulamalarını uyarlama zamanı gelmişti. İşte yeni PWA’daki sonuçlar ve temel performans iyileştirmeleri.
Yüklemeyi hızlandırmak için web API’lerinden ve en iyi uygulamalardan yararlanma #
Anahtar isteklerini önceden yükle #
Bu kritik yolun yüklenmesine öncelik vermek önemlidir. HTTP/2 Server Push’u kullanarak, bir kullanıcının ihtiyaç duyacağını bildikleri kritik JavaScript ve CSS paketlerine öncelik verebilirler.
Herhangi bir kaynağa birden fazla, maliyetli gidiş-dönüşten kaçının #
Web sitesinin izleme, reklamlar ve diğer birçok kullanım durumu için 3. taraf kaynakları yüklemesi gerekiyordu. Kullandılar <link rel=preconnect> bu önemli 3. taraf kaynakları için DNS/TCP/SSL el sıkışmasını ve anlaşmasını önceden çözmek için.
Sonraki sayfayı dinamik olarak önceden getir #
Kullanıcının belirli bir sayfaya gideceğinden emin olduklarında, gezinmenin gerçekleşmesini beklemediler. Nikkei dinamik olarak ekler <link rel=prefetch> için <head> ve kullanıcı gerçekten bağlantıyı tıklamadan önce sonraki sayfayı önceden getirir. Bu, anında sayfada gezinmeyi sağlar.
Satır İçi Kritik Yollu CSS #
Oluşturmayı engelleyen CSS’yi azaltmak, hızlı yüklemenin en iyi uygulamalarından biridir. Web sitesi, tüm kritik CSS’yi 0 ile satır içine alır engelleme stil sayfalarını oluşturma. Bu optimizasyon, ilk anlamlı boyamayı 1 saniyeden fazla azalttı.
JavaScript paketlerini optimize edin #
Önceki deneyimlerinde, Nikkei’nin JavaScript paketleri şişmişti ve toplamda 300 KB’nin üzerindeydi. Normal JavaScript’e yeniden yazma ve rota tabanlı parçalama ve ağaç sallama gibi modern gruplama optimizasyonları sayesinde bu şişkinliği düzeltmeyi başardılar. RollUp ile JavaScript paket boyutunu %80 azaltarak 60 KB’ye düşürdüler.
Uygulanan diğer en iyi uygulamalar #
Üçüncü taraf JavaScript’i optimize etme #
3. taraf JavaScript’lerini kendi komut dosyalarınıza kıyasla optimize etmek o kadar kolay olmasa da, Nikkei artık kendi içerik dağıtım ağından (CDN) sunulan, reklamla ilgili tüm komut dosyalarını başarılı bir şekilde küçülttü ve paketledi. Reklamla ilgili etiketler genellikle, diğer gerekli komut dosyalarını başlatmak ve yüklemek için bir snippet sağlar; bu, genellikle sayfanın oluşturulmasını engeller ve ayrıca indirilen komut dosyalarının her biri için ekstra ağ geri dönüş süresi gerektirir. Nikkei aşağıdaki yaklaşımı benimsedi ve başlatma süresini 100 ms iyileştirdi, artı JS boyutunu %30 azalttı:
- Bir JS paketleyici (ör. Webpack) kullanarak gerekli tüm komut dosyalarını paketleyin
- Paketlenmiş betiği zaman uyumsuz olarak yükleyin, böylece sayfanın işlenmesini engellemez
- Hesaplanan reklam başlığını Gölge DOM’a ekleyin (iframe’e karşı)
- Intersection Observer API ile kullanıcı kaydırmasında aşamalı olarak reklam yükleyin
Web sitesini aşamalı olarak geliştirmek #
Bu temel optimizasyonlara ek olarak, Nikkei Web Uygulaması Bildirimi Ve hizmet çalışanları web sitelerini yapmak için kurulabilir ve hatta çevrimdışı çalışın. kullanarak önbellek öncelikli stratejisine bağlı olarak, tüm temel kaynaklar ve en önemli makaleler Önbellek Deposunda depolanır ve kesintili veya çevrimdışı ağ gibi beklenmedik durumlarda bile yeniden kullanılarak tutarlı, optimize edilmiş performans sağlanır.
Nikkei’yi Hackleyin #
140+ yıllık geçmişe sahip geleneksel bir günlük gazete şirketi, web ve PWA’nın gücüyle dijitalleşmesini başarıyla hızlandırdı. Nikkei’nin ön uç mühendisleri, mükemmel UX’in güçlü iş performansı sağladığını kanıtladı. Şirket, web’e yeni bir kalite düzeyi getirme yolculuğuna devam edecek.