140 yılı aşkın yayıncılık geçmişiyle Nikkei, Japonya'daki en yetkili medya şirketlerinden biridir. Basılı gazetelerinin yanı sıra dijital mülklerine aylık 450 milyondan fazla ziyaret alıyor. Nikkei, daha iyi bir kullanıcı deneyimi sunmak ve web'de işlerini hızlandırmak için Kasım 2017'de https://r.nikkei.com adresinde bir Progresif Web Uygulaması (PWA) kullanıma sundu. Artık yeni platformdan muhteşem sonuçlar elde ediyorlar.
Performans artışı - Hız endeksi 2 kat arttı - Etkileşime geçme süresi 14 saniye daha kısa - Önceden getirme özelliğiyle% 75 daha hızlı yükleme
İşletmeye etkisi - 2,3 kat organik trafik - %58 daha fazla dönüşüm (abonelikler) - Günlük etkin kullanıcı sayısında% 49 artış - Oturum başına 2 kat daha fazla sayfa görüntüleme
İşletmeye genel bakış
Zorluk
Akıllı telefonlar birçok kullanıcı için web'e giriş noktası haline geldikçe Nikkei, eski web sitesine gelen mobil trafikte hızlı bir artış elde etti. Bununla birlikte, bir web sayfasını tarayan ve çeşitli kategorilerde nasıl iyileştirme yapılacağına dair öneriler sunan Lighthouse'u kullanarak sitelerinin birçok alanda mobil kullanım için tamamen optimize edilmediğini ve yüklenmesinin çok yavaş olduğunu fark ettiler.
Web sitelerinin tutarlı bir şekilde etkileşimli hale gelmesi yaklaşık 20 saniye sürüyordu ve Hız Dizini'nde ortalama 10 saniyelik bir süre elde ediliyordu. Mobil kullanıcıların% 53'ünün, yüklenmesi 3 saniyeden uzun süren bir deneyimden ayrıldığını bilen Nikkei, daha iyi bir deneyim sunmak ve web'deki işlerini hızlandırmak için yükleme sürelerini azaltmak istiyordu.
Hızın değeri, özellikle finansal haberler için tartışılmaz. Hızı temel metriklerimizden biri haline getirdik ve müşterilerimiz bu değişikliği takdir etti.
Taihei Shigemori, Dijital Strateji Müdürü
Sonuçlar
Nikkei, etkileyici performans kazanımları elde etti. Lighthouse puanı 23'ten 82'ye fırladı. Etkileşime geçme süresi ölçümü 14 saniye iyileşti. Organik trafik, hız, dönüşüm oranı ve günlük etkin kullanıcı sayısı da arttı.
PWA, Vanilla JavaScript ile oluşturulan, kullanıcı arabirimi karmaşıklığını azaltan çok sayfalı bir uygulamadır (MPA). Bu performansı elde etmek için beş temel ön uç mühendisi bir yıl boyunca çalıştı.
Nikkei'nin ön uç mühendisleri, mükemmel kullanıcı deneyiminin işletme performansını iyileştirdiğini kanıtladı. Web'e yeni bir kalite seviyesi getirme yolculuğumuza devam etmek için tam anlamıyla çalışıyoruz.
Hiroyuki Higashi. Ürün Müdürü, Nikkei
Çözüm
Nikkei, duyarlı tasarım, standart JavaScript ve çok sayfalı bir mimari kullanarak bir Progresif Web Uygulaması oluşturdu ve kullanıma sundu. Şirket, keyifli bir kullanıcı deneyimi oluşturmaya odaklandı. Hizmet çalışanı ekleyerek ağ ne olursa olsun tahmin edilebilir performans elde ettiler. Bu sayede, en popüler makaleler önbelleğe alınmış depolama alanı kullanılarak depolandığından her zaman kullanılabilir ve neredeyse anında yüklenir. Bir web uygulaması manifest dosyası eklediler. Bu dosya, hizmet çalışanlarıyla birlikte kullanıcıların PWA'yı yüklemesine olanak tanır ve böylece uygulamaya kolayca erişilebilir. Performansın tamamen kendi kontrollerinde olmasını sağlamak için üçüncü taraf JavaScript'lerini optimize ettiler.
En iyi uygulamalar
- Modern web API'leri, sıkıştırma ve kod optimizasyonu uygulamalarını kullanarak yükleme hızını ve etkileşimi artırın.
- Çevrimdışı destek ve ana ekrana ekleme gibi PWA özellikleri ekleyerek kullanıcı deneyimini aşamalı olarak iyileştirin.
- Performans stratejisine performans bütçelerini dahil etme
Ayrıntılı Teknik İnceleme
Hız önemlidir
Hız her zamankinden daha önemli. Akıllı telefonlar birçok kullanıcı için ana tarama cihazı haline geldikçe Nikkei, hizmetlerindeki mobil trafikte hızlı bir artış elde etti. Ancak Lighthouse'u kullanarak eski web sitelerinin mobil için tamamen optimize edilmediğini fark ettiler. Hız Dizini ortalama 10 saniye sürüyor, başlangıç yüklemesi çok yavaş ve büyük bir JavaScript paketi var. Nikkei'nin web sitesini yeniden oluşturup web performansı en iyi uygulamalarını uyarlamasının zamanı gelmişti. Yeni PWA'daki sonuçlar ve temel performans optimizasyonları aşağıda verilmiştir.
Yükleme işlemini hızlandırmak için web API'lerinden ve en iyi uygulamalardan yararlanma
Anahtar isteklerini önceden yükleme
Kritik yolun yüklenmesine öncelik vermek önemlidir. HTTP/2 sunucu itme özelliğini kullanarak, kullanıcının ihtiyaç duyacağını bildikleri kritik JavaScript ve CSS paketlerine öncelik verebilirler.
Herhangi bir kalkış noktasına birden fazla, maliyetli gidiş dönüşten kaçının
Web sitesinin izleme, reklamlar ve diğer birçok kullanım alanı için üçüncü taraf kaynakları yüklemesi gerekiyordu. Bu önemli üçüncü taraf kaynakları için DNS/TCP/SSL el sıkışmasını ve pazarlığı önceden çözmek amacıyla <link rel=preconnect> kullandılar.
Sonraki sayfayı dinamik olarak önceden getirme
Kullanıcının belirli bir sayfaya gideceğinden emin olduktan sonra, yalnızca gezinmenin gerçekleşmesini beklemezler. Nikkei, <link rel=prefetch> öğesini <head> öğesine dinamik olarak ekler ve kullanıcı bağlantıyı tıklamadan önce sonraki sayfayı önceden getirir. Bu sayede sayfalar arasında anında gezinebilirsiniz.
Kritik yol CSS'sini satır içine alma
Oluşturma işlemini engelleyen CSS'yi azaltmak, yükleme hızını artırmaya yönelik en iyi uygulamalardan biridir. Web sitesi, tüm kritik CSS'yi 0 oluşturma engelleyen stil sayfasıyla satır içine yerleştiriyor. Bu optimizasyon, ilk anlamlı gösterimi 1 saniyeden fazla azalttı.
JavaScript paketlerini optimize edin
Önceki deneyimlerinde Nikkei'nin JavaScript paketleri şişmişti ve toplam ağırlığı 300 KB'dan fazlaydı. Vanilya JavaScript'e yeniden yazma ve rotaya dayalı parçalama ve ağaç sallama gibi modern paketleme optimizasyonları sayesinde bu kabarıklığı düzeltmeyi başardılar. JavaScript paketi boyutunu %80 azaltarak RollUp ile paketi 60 KB'a düşürdüler.
Uygulanan diğer en iyi uygulamalar
- Sıkıştırma: Fastly CDN'yi kullanarak sıkıştırılabilen tüm kaynakları Gzip/Brotli ile sıkıştırın
- Önbelleğe alma: HTTP önbelleğe alma, uç taraf önbelleğe alma
- Resim optimizasyonu: Optimizasyon ve resim biçimi algılama için imgix'i kullanın
- Kritik olmayan kaynakları geç yükleme: Ekranın alt kısmındaki parçaları yüklemek için kesişim gözlemci API'sini kullanın
- Web yazı tipi yükleme stratejiniz olsun: Sistem yazı tipi kullanımına öncelik verin
- İlk anlamlı boyamayı optimize edin: İçeriği sunucu tarafında oluşturun
- Performans bütçelerini kullanma: JavaScript aktarımı ve ayrıştırma/derleme sürelerini düşük tutma
Üçüncü taraf JavaScript'i optimize etme
Üçüncü taraf JavaScript'leri kendi komut dosyalarınıza kıyasla optimize etmek kolay olmasa da Nikkei, reklamlarla ilgili tüm komut dosyalarını başarıyla küçültüp paketledi. Bu komut dosyaları artık kendi içerik yayınlama ağı (CDN) üzerinden yayınlanıyor. Reklamla ilgili etiketler genellikle gerekli diğer komut dosyalarını başlatmak ve yüklemek için bir snippet sağlar. Bu, genellikle sayfanın oluşturulmasını engeller ve indirilen her komut dosyası için ağda fazladan işlem süresi gerektirir. Nikkei, aşağıdaki yaklaşımı benimseyerek başlatma süresini 100 ms iyileştirdi ve JS boyutunu %30 azalttı:
- Bir JS paketleyici (ör. Webpack)
- Gruplandırılmış komut dosyasını, sayfanın oluşturulmasını engellememesi için eşzamansız olarak yükler
- Hesaplanan reklam banner'ını gölge DOM'a ekleme (iFrame yerine)
- Intersection Observer API ile kullanıcı ekranı kaydırırken reklamları kademeli olarak yükleme
Web sitesini kademeli olarak geliştirme
Nikkei, bu temel optimizasyonlara ek olarak web sitesinin yüklenebilir olmasını ve hatta çevrimdışı çalışmasını sağlamak için Web Uygulaması Manifesti ve hizmet çalışanlarından yararlandı. Hizmet çalışanlarında öncelikle önbelleğe alma stratejisini kullanarak tüm temel kaynakları ve en popüler makaleleri önbelleğe depolayan ve kararsız veya çevrimdışı ağ gibi acil durumlarda bile yeniden kullanan bu çözüm, tutarlı ve optimize edilmiş bir performans sunar.
Hack the Nikkei
140 yılı aşkın geçmişi olan 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 kullanıcı deneyiminin güçlü işletme performansı sağladığını kanıtladı. Şirket, web'e yeni bir kalite düzeyi getirme yolculuğunu sürdürecek.