140 yılı aşkın yayıncılık geçmişiyle Nikkei, Japonya'daki en yetkili medya kuruluşlarından biridir. Bu yayın grubu, basılı gazetelerinin yanı sıra dijital mülklerine aylık 450 milyondan fazla ziyaretçi çekiyor. Nikkei, daha iyi bir kullanıcı deneyimi sunmak ve web'deki işini hızlandırmak için Kasım 2017'de https://r.nikkei.com adresinde progresif web uygulamasını (PWA) başarıyla kullanıma sundu. Bu içerik üreticiler, yeni platformdan harika sonuçlar elde ediyor.
Performans artışları - 2 kat daha iyi Hız Dizini - Etkileşime hazır olma süresinde 14 saniye kısalma - Önceden getirme ile% 75 daha hızlı yükleme
İşletme üzerindeki etkisi - 2,3 kat organik trafik - %58 daha fazla dönüşüm (abonelik) - %49 daha fazla günlük etkin kullanıcı - Oturum başına 2 kat sayfa görüntüleme sayısı
PDF biçimindeki örnek olayı indirin
İşletmeye genel bakış
Zorluk
Nikkei, akıllı telefonların birçok kullanıcı için web'e erişimin ana noktası haline gelmesiyle birlikte eski web sitesine yönelik mobil trafikte hızlı bir artış gördü. Ancak bir web sayfasını tarayan ve birden fazla kategoride iyileştirme önerileri sunan bir denetleme aracı olan Lighthouse'u kullandıklarında sitelerinin birden fazla alanda mobil için tam olarak optimize edilmediğini ve yüklenmesinin çok yavaş olduğunu anladılar.
Web sitelerinin tutarlı bir şekilde etkileşimli hale gelmesi yaklaşık 20 saniye sürüyordu ve Hız Dizini'nde ortalama 10 saniye olarak ölçülüyordu. Mobil kullanıcıların% 53'ünün yüklenmesi 3 saniyeden uzun süren deneyimlerden ayrıldığını bilen Nikkei, daha iyi bir deneyim sunmak ve web'deki işini hızlandırmak için yükleme süresini kısaltmak istiyordu.
Hızın değeri, özellikle finans haberleri için tartışılmazdır. Hızı temel metriklerimizden biri haline getirdik ve müşterilerimiz bu değişikliği memnuniyetle karşıladı.
Taihei Shigemori, Dijital Strateji Yöneticisi
Sonuçlar
Nikkei, etkileyici performans artışları elde etti. Lighthouse puanı 23'ten 82'ye yükseldi. Etkileşime hazır olma süresi ölçümleri 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şturulmuş, ön uç 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 bir kullanıcı deneyiminin iyi bir iş performansı sağladığını kanıtladı. Web'e yeni bir kalite seviyesi getirme yolculuğumuza devam etmek için tüm gücümüzle çalışıyoruz.
Hiroyuki Higashi. Product Manager, Nikkei
Çözüm
Nikkei, duyarlı tasarım, vanilla JavaScript ve çok sayfalı mimari kullanarak bir Progresif Web Uygulaması oluşturup kullanıma sundu. Şirket, keyifli bir kullanıcı deneyimi oluşturmaya odaklandı. Hizmet çalışanı ekleyerek ağdan bağımsız olarak öngörülebilir performans sağlayabildiler. Bu sayede, en iyi makaleler her zaman kullanılabilir ve Cache Storage kullanılarak depolandıkları için neredeyse anında yüklenir. Web uygulaması manifest dosyası eklediler. Bu dosya, hizmet çalışanıyla birlikte kullanıcıların PWA'yı yüklemesine olanak tanıyarak kolayca erişilebilmesini sağlıyor. Ayrıca performansı tamamen kendi kontrolleri altında tutmak 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 özelliklerini ekleyerek kullanıcı deneyimini kademeli olarak iyileştirin.
- Performans stratejisine performans bütçeleri ekleyin.
Teknik Olarak Kapsamlı İ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 geldiğinden Nikkei, hizmetinde mobil trafiğin hızla arttığını gördü. Ancak Lighthouse'u kullanarak eski web sitelerinin mobil için tam olarak optimize edilmediğini fark ettiler. Hız dizini ortalama 10 saniyeydi, ilk yükleme çok yavaştı ve büyük bir JavaScript paketi vardı. Nikkei'nin web sitesini yeniden oluşturması ve web performansı ile ilgili en iyi uygulamaları benimsemesi gerekiyordu. Yeni PWA'daki sonuçlar ve temel performans optimizasyonları aşağıda verilmiştir.
Yükleme hızını artırmak için web API'lerinden yararlanma ve en iyi uygulamalar
Önemli istekleri önceden yükleme
Kritik yolun yüklenmesine öncelik vermek önemlidir. HTTP/2 Server Push'u kullanarak, kullanıcının ihtiyaç duyacağını bildikleri kritik JavaScript ve CSS paketlerine öncelik verebilirler.
Herhangi bir kaynağa birden fazla ve maliyetli gidiş-dönüş yolculuk yapmaktan kaçının.
Web sitesinin izleme, reklamlar ve diğer birçok kullanım alanı için üçüncü taraf kaynaklarını yüklemesi gerekiyordu. Bu 3. taraf kaynakları için DNS/TCP/SSL el sıkışması ve anlaşmasını önceden çözmek üzere
<link rel=preconnect>
kullanılıyordu.
Sonraki sayfayı dinamik olarak önceden getirme
Kullanıcının belirli bir sayfaya gideceğinden emin olduklarında, yalnızca gezinmenin gerçekleşmesini beklemiyorlardı. Nikkei, <head> öğesine dinamik olarak <link rel=prefetch> ekler ve kullanıcı bağlantıyı tıklamadan önce sonraki sayfayı önceden getirir. Bu, anında sayfa gezinmesine olanak tanır.
Kritik yol CSS'sini satır içine alma
Oluşturmayı engelleyen CSS'yi azaltmak, yükleme hızını artırmaya yönelik en iyi uygulamalardan biridir. Web sitesi, 0 oluşturmayı engelleyen stil sayfasıyla tüm kritik CSS'yi satır içine yerleştiriyor. Bu optimizasyon, ilk anlamlı gösterim süresini 1 saniyeden fazla kısalttı.
JavaScript paketlerini optimize etme
Nikkei'nin önceki deneyiminde JavaScript paketleri şişirilmişti ve toplamda 300 KB'tan daha ağırdı. Bu şişkinliği, vanilla JavaScript'e yeniden yazarak ve modern paketleme optimizasyonları (ör. rotaya dayalı parçalama ve ağaç sallama) yaparak azaltabildiler. RollUp ile JavaScript paket boyutunu %80 azaltarak 60 KB'a düşürdüler.
Uygulanan diğer en iyi uygulamalar
- Sıkıştırma: Fastly CDN kullanarak sıkıştırılabilir tüm kaynakları Gzip/Brotli ile sıkıştırın.
- Önbelleğe alma: HTTP önbelleğe almayı etkinleştirin, kenar tarafı önbelleğe alma
- Resim optimizasyonu: Optimizasyon ve resim biçimi algılama için imgix'i kullanın.
- Kritik olmayan kaynakları geç yükleyin: Ekranın alt kısmındaki parçaları yüklemek için Intersection Observer API'yi kullanın.
- Web yazı tipi yükleme stratejiniz olsun: Sistem yazı tipinin kullanımına öncelik verin.
- İlk anlamlı boyamayı optimize edin: İçeriği sunucu tarafında oluşturun.
- Performans bütçelerini kullanın: JavaScript iletim ve ayrıştırma/derleme sürelerini düşük tutma
Üçüncü taraf JavaScript'ini optimize etme
Üçüncü taraf JavaScript'lerini kendi komut dosyalarınıza kıyasla optimize etmek kolay olmasa da Nikkei, reklamla ilgili tüm komut dosyalarını başarıyla küçültüp paketledi. Bu komut dosyaları artık kendi içerik yayınlama ağından (CDN) 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 komut dosyaları genellikle sayfa oluşturmayı engeller ve indirilen her komut dosyası için ek ağ dönüş süresi gerektirir. Nikkei aşağıdaki yaklaşımı benimseyerek başlatma süresini 100 ms iyileştirdi ve JS boyutunu %30 azalttı:
- Gerekli tüm komut dosyalarını bir JS paketleyici (ör. Webpack)
- Paketlenmiş komut dosyasını eşzamansız olarak yükleyin. Böylece sayfa oluşturma engellenmez.
- Hesaplanmış reklam banner'ını gölge DOM'a (iFrame'e değil) ekleme
- Intersection Observer API ile kullanıcı kaydırdıkça reklamları kademeli olarak yükleme
Web sitesini kademeli olarak iyileş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ı manifest dosyasından ve hizmet çalışanlarından yararlandı. Hizmet çalışanlarında önce önbellek stratejisini kullanarak tüm temel kaynaklar ve en popüler makaleler, önbellek depolama alanında saklanır ve tutarsız veya çevrimdışı ağ gibi acil durumlarda bile yeniden kullanılarak tutarlı ve optimize edilmiş performans sağlanır.
Hack the Nikkei
140 yılı aşkın geçmişe sahip geleneksel bir günlük gazete şirketi, web ve PWA'nın gücüyle dijitalleşme sürecini başarıyla hızlandırdı. Nikkei'nin ön uç mühendisleri, mükemmel bir kullanıcı deneyiminin güçlü bir işletme performansı sağladığını kanıtladı. Şirket, web'e yeni bir kalite seviyesi getirme yolculuğuna devam edecek.