140 yılı aşkın bir yayıncılık geçmişine sahip olan Nikkei, Japonya'daki en yetkili medya işletmelerinden biridir. Dijital mülkleri, basılı gazetelerinin yanı sıra ayda 450 milyondan fazla kez ziyaret ediliyor. Nikkei, daha iyi bir kullanıcı deneyimi sunmak ve web'deki işlerini hızlandırmak için Kasım 2017'de Progresif Web Uygulaması (PWA) - https://r.nikkei.com sayfasını başarıyla kullanıma sundu. Şu anda yeni platformdan mükemmel sonuçlar görüyorlar.
Performans artar - 2 kat daha yüksek Hız Endeksi - 14 saniye daha hızlı etkileşime geçme süresi - Önceden getirme ile% 75 daha hızlı yükleme
İşletme üzerindeki etki - Organik trafikte 2,3 kat artış - %58 daha fazla dönüşüm (abonelikler) - Günlük etkin kullanıcı sayısında% 49 artış - Oturum başına 2 kat sayfa görüntülemesi
Örnek olayı PDF olarak indirin
İşletmeye genel bakış
Meydan okuma
Birçok kullanıcı için akıllı telefonlar ana giriş noktası haline geldiğinde Nikkei, eski web sitesinin mobil trafiğinde hızlı bir artış olduğunu fark etti. Ancak, bir web sayfasını tarayan ve birden çok kategoride nasıl iyileştirilebileceğine ilişkin öneriler sunan bir denetleme aracı olan Lighthouse'u kullanarak, sitelerinin birden fazla alanda mobil cihazlar için tam olarak optimize edilmediğini ve çok yavaş yüklendiğini fark ettiler.
Web sitelerinin tutarlı bir şekilde etkileşimli hale gelmesi yaklaşık 20 saniye sürdü ve Hız Endeksi'nde ortalama 10 saniyeydi. Yükleme süresi 3 saniyeden uzun olan mobil kullanıcıların% 53'ünün, bir deneyimden vazgeçeceğini bilen Nikkei, daha iyi bir deneyim sunmak ve web'deki işlerini hızlandırmak için yükleme süresini kısaltmak istedi.
Hızın değeri, özellikle finans haberleri söz konusu olduğunda tartışmasızdır. Hızı temel metriklerimizden biri haline getirdik ve müşterilerimiz bu değişikliği takdirle karşıladı.
Taihei Shigemori, Dijital Strateji Müdürü
Sonuçlar
Nikkei etkileyici performans artışları elde etti. Lighthouse puanı 23'ten 82'ye yükseldi. Etkileşime ayırma süresini 14 saniye iyileştirdi. 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ş, kullanıcı arabirimi karmaşıklığını azaltan çok sayfalı bir uygulamadır (MPA). Bu performansa ulaşmak için beş çekirdek kullanıcı arabirimi mühendisi bir yıl boyunca çalıştı.
Nikkei kullanıcı arabirimi mühendisleri, mükemmel kullanıcı deneyiminin iyi iş performansı sağladığını kanıtlamıştır. Web'e yeni bir kalite seviyesi getirme yolculuğumuzu sürdürmek için elimizden geleni yapıyoruz.
Hiroyuki Higashi. Ürün Müdürü, Nikkei
Çözüm
Nikkei duyarlı tasarım, vanilya JavaScript ve çok sayfalı mimari kullanarak bir Progresif Web Uygulaması oluşturup kullanıma sunarak keyifli bir kullanıcı deneyimi oluşturmaya odaklandı. Bir Service Worker ekleyerek ağdan bağımsız olarak öngörülebilir bir performans sunabildiler. Bu, aynı zamanda en popüler makalelerin Önbellek Depolama Alanı kullanılarak depolandıklarından, her zaman kullanılabilir olmalarını ve neredeyse anında yüklenmesini sağlar. Bir web uygulaması manifestosu eklediler ve hizmet çalışanlarıyla birlikte, kullanıcıların PWA'yı yüklemesine ve kolayca erişilebilir olmasına olanak tanıyorlar. Ayrıca, performansın tamamen kendi kontrollerinde olduğundan emin olmak için üçüncü taraf JavaScript'lerini optimize ettiler.
En iyi uygulamalar
- Modern web API'leri, sıkıştırma ve kod optimizasyonu uygulamalarından yararlanarak yükleme hızını ve etkileşimi iyileştirin.
- Çevrimdışı destek ve Ana Ekrana Ekle gibi PWA özellikleri ekleyerek kullanıcı deneyimini kademeli olarak iyileştirin.
- Performans stratejisine performans bütçelerini oluşturun.
Ayrıntılı Teknik İnceleme
Hız önemlidir
Hız her zamankinden daha önemli. Akıllı telefonlar birçok kullanıcının ana göz atma cihazı haline gelirken Nikkei, hizmetlerindeki mobil trafikte hızlı bir artış gördü. Ancak, Lighthouse'u kullanarak, Hız Endeksi ortalama 10 saniye, çok yavaş ilk yükleme ve büyük bir JavaScript paketi nedeniyle eski web sitelerinin mobil için tamamen optimize edilmediğini fark ettiler. Nikkei için web sitesini yeniden tasarlaması ve web performansı en iyi uygulamalarını uyarlama zamanı gelmişti. Yeni PWA'daki sonuçlar ve önemli performans optimizasyonları aşağıda verilmiştir.
Yükleme hızını artırmak için web API'lerinden ve en iyi uygulamalardan yararlanma
Önemli istekleri önceden yükleyin
Kritik yolun yüklenmesine öncelik vermek önemlidir. HTTP/2 Server Push ile, kullanıcının ihtiyaç duyacağını bildiği kritik JavaScript ve CSS paketlerinin öncelik sırasını belirleyebilirler.
Herhangi bir kalkışa birden fazla, maliyetli yöne gitmekten kaçının
Web sitesinin izleme, reklamlar ve daha birçok kullanım alanı için üçüncü taraf kaynaklarını yüklemesi gerekiyordu. Bu önemli üçüncü taraf kaynakları için DNS/TCP/SSL el sıkışması ve pazarlığını önceden çözmek üzere <link rel=preconnect> aracını kullandılar.
Sonraki sayfayı dinamik olarak önceden getirme
Kullanıcı, belirli bir sayfaya gideceğinden emin olduğunda gezinmenin gerçekleşmesini beklemekle yetinmiyordu. Nikkei, <head> öğesine dinamik olarak <link rel=prefetch> etiketini ekler ve kullanıcı bağlantıyı tıklamadan önce sonraki sayfayı önceden getirir. Bu, anında sayfada gezinmeyi etkinleştirir.
Satır içi kritik yol CSS'si
Oluşturma engelleme CSS'sini azaltmak, yükleme hızını artırmayla ilgili en iyi uygulamalardan biridir. Web sitesi, tüm kritik CSS'leri 0 oluşturma engelleme stil sayfaları ile satır içine alır. Bu optimizasyon, ilk anlamlı boyamayı 1 saniyeden fazla azalttı.
JavaScript paketlerini optimize edin
Nikkei'nin önceki deneyimlerinde, toplamda 300 KB'ın üzerinde ağırlığa sahip JavaScript paketleri şişmişti. Vanilya JavaScript'e yapılan bir yeniden yazma ve rota temelli parçalama ve ağaç sallama gibi modern paket optimizasyonları ile bu şişkinliği gidermeyi başardılar. Toplayıcı sayesinde JavaScript paketinin boyutunu %80 azaltmış ve 60 KB'a indirmiştir.
Uygulanan diğer en iyi uygulamalar
- Sıkıştırma: Fastly CDN kullanarak tüm sıkıştırılabilir kaynakları Gzip/Brotli
- Önbelleğe alma: HTTP önbelleğe alma, kenar tarafı önbelleğe almayı etkinleştirin
- 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özlemleyici API'sini kullanın
- Web yazı tipi yükleme stratejiniz olsun: Sistem yazı tipi kullanımına öncelik verin
- İlk anlamlı boyamayı optimize etme: İçerik sunucusu tarafını oluşturun
- Performans bütçelerini kullanmaya başlayın: JavaScript iletim ve ayrıştırma/derleme sürelerini düşük tutma
Üçüncü taraf JavaScript'i optimize etme
3. taraf JavaScript'leri optimize etmek kendi komut dosyalarınıza kıyasla kolay olmasa da Nikkei, reklamla ilgili tüm komut dosyalarını başarıyla küçültüp gruplandırdı. Bunlar artık kendi içerik yayınlama ağından (CDN) sunuluyor. Reklamla ilgili etiketler genellikle diğer gerekli komut dosyalarını başlatmak ve yüklemek için bir snippet sağlar. Bu da genellikle sayfanın oluşturulmasını engeller ve indirilen komut dosyalarının her biri için fazladan ağ dönüşüm süresi gerektirir. Nikkei aşağıdaki yaklaşımı uygulayarak başlatma süresini 100 ms iyileştirdi ve JS boyutunu %30 azalttı:
- Gerekli tüm komut dosyalarını bir JS paketleyicisi (ör. Web paketi)
- Paketlenmiş komut dosyasını, sayfanın oluşturulmasını engellememesi için eşzamansız olarak yükleme
- Hesaplanan reklam banner'ını Gölge DOM'a (iframe'e kıyasla) ekleyin
- Intersection Observer API ile kullanıcı kaydırıldığında reklamları kademeli olarak yükleyin
Web sitesini kademeli olarak iyileştirme
Nikkei, bu temel optimizasyonlara ek olarak Web Uygulaması Manifest'i ve hizmet çalışanlarından yararlanarak web sitesini yüklenebilir hale getirdi ve hatta çevrimdışı olarak çalıştı. Hizmet çalışanlarında önbellek öncelikli stratejisini kullanan tüm temel kaynaklar ve en çok okunan makaleler Önbellek Depolama'da depolanır ve stabil olmayan veya çevrimdışı ağ gibi beklenmedik durumlarda bile yeniden kullanılır. Böylece tutarlı ve optimize edilmiş performans sağlanır.
Nikkei'yi hack'leyin
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şmesini başarıyla hızlandırdı. Nikkei’nin ön uç mühendisleri, mükemmel kullanıcı deneyiminin güçlü bir iş performansı sağladığını kanıtladı. Şirket, web'e yeni bir kalite seviyesi getirme yolculuğuna devam edecek.