Geleneksel web sitelerinin performansını% 24 oranında artırmak için yalnızca üç yönteme ihtiyaç vardır
Teknik insanlar için performans optimizasyonu ebedi bir konudur. Çerçevelerin, dillerin, kitaplıkların ve diğer araçların sürekli gelişimiyle, geleneksel optimizasyon yöntemleri hala uygulanabilir mi? İnovasyon ortamında kısayol optimizasyon yöntemleri nelerdir? Bu yazıda, yazar web sitesini bir yıl önce test nesnesi olarak kullanacak ve web sitesi performansını% 24 oranında etkili bir şekilde artıran en son üç yöntemi deneyecek ve sonra öğreneceğiz.
Yazar | SwissGreg
Çevirmen | Crescent Moon, Baş Editör | Tu Min
Üretildi | CSDN ( İD: CSDNhaberler)
Aşağıdaki çeviridir:
Geçen hafta sonu, bir yıl önce oluşturulan bir web sitesinin performansını iyileştirdik.
Web sitemiz İsviçre'deki yazılım geliştiriciler için bir iş arama platformudur. Bu web sitesinin performansı iki nedenden dolayı çok önemlidir:
İyi kullanıcı deneyimi: Hem web sitesinin yükleme süresini (ve kullanıcıyla etkileşim süresini) hem de web sitesini kullanmanın hızlılığını içerir.
SEO: Trafiğimiz büyük ölçüde Google'a bağlıdır aramak ,ve İyi bilinen Google, üstün performansa sahip sitelere karşı daha önyargılıdır (Google aramak Hız raporu konsolda görüntülenir).
Eğer çevrimiçiysen aramak "Web sitesi performansının temelleri", aşağıdakiler gibi birçok ipucu bulacaksınız:
-
Belirli bir süre için önbelleğe alınabilecek statik dosyalar sağlamak için CDN (İçerik Dağıtım Ağı) kullanın.
-
Görüntü boyutunu ve biçimini optimize edin.
-
GZIP veya Brotli sıkıştırması kullanın.
-
Kritik olmayan JS ve CSS kodunun boyutunu azaltın.
Birçok kolay hedefe ulaştık.
Ek olarak, ana sayfamız temelde filtrelenebilir bir liste olduğundan (React ile yazılmış), bir seferde yalnızca 10 liste öğesi (250 yerine) işleyebilen react-window'u kullanıma sunduk.
Yukarıdaki teknikler performansı büyük ölçüde geliştirmemize yardımcı oldu, ancak hız raporunu kontrol ettikten sonra, hala iyileştirme için yerimiz olduğunu hissediyorum.
Bu nedenle, web sitesinin hızını artırmak için daha alışılmadık yollar araştırmaya başladık ve sonunda büyük başarı elde ettik! Bu haftanın raporu:
Bu rapor, web sitesinin genel yükleme süresinin% 24 oranında azaldığını gösteriyor!
Peki, bu tür sonuçlara ulaşmak için ne gibi çabalar gösterdik?
1. JSON verileri için rel = "preload" kullanın
İndex.html dosyasına eklenen bu kod satırı, tarayıcıya talimat verebilir: JavaScript, JSON verilerini istemek için AJAX / fetch'i çağırmadan önce bu verileri almalıdır.
Verilerin gerçekten kullanılması gerektiğinde, verileri yeniden getirmeye gerek kalmadan tarayıcı önbelleğinden okunabilir. Bu teknik, yükleme süresinden yaklaşık 0,5 saniye tasarruf etmemize yardımcı oldu.
Bu tekniği daha önce uygulayabilirdik, ancak Chrome tarayıcısında yinelemeye neden olan bazı sorunlar vardı indir . Ama şimdi değişmiş görünüyor.
2. Sunucu tarafında süper basit önbelleğe alma uygulayın
JSON ön yüklemesini uyguladıktan sonra bulduk indir İş listesi hala darboğazdır (sunucudan bir yanıt almak yaklaşık 0,8 saniye sürer). Bu nedenle, sunucu tarafı önbelleğe almayı incelemeye karar verdik. İlk olarak, düğüm önbelleğe almayı denedik, ancak şaşırtıcı bir şekilde, edinme süresi kısalmadı.
/ Api / jobs uç noktasının basit bir getAll uç noktası olduğundan bahsetmeye değer, dolayısıyla iyileştirme için yer yok.
Ancak, bir adım daha ileri gitmeye ve bir JS değişkeni aracılığıyla kendi önbelleğimizi oluşturmaya karar verdik. Aşağıdaki gibi:
Burada listelenmeyen tek şey, önbelleği silen POST / jobs uç noktasıdır (cachedJobs = undefined).
Böylesine basit bir kod parçası 0,4 saniyelik yükleme süresini kısaltır!
3. CSS ve JS paketlerinin boyutunu azaltın
Son olarak, web sayfasının yüklenmesi gereken CSS ve JS paketlerinin boyutunu kontrol ettik. "Harika yazı tipi" paketinin boyutunun 70 KB'ı aştığını fark ettik.
Ancak, simgelerin yalnızca yaklaşık% 20'sini kullandık.
Bununla nasıl başa çıkacağız? İcomoon.io üzerinden kullanmamız gereken simgeleri seçtik ve özelleştirilmiş, modern bir simge paketi oluşturduk.
Bu nedenle 50kb tasarruf edilir!
Yukarıdaki üç alışılmadık teknik, web sitemizin yükleme süresini% 24 oranında azaltmamıza yardımcı oldu. Web sitesinin yüklenme süresinin% 43 oranında (1-2 saniyeye) kısaldığını gösteren raporlar bile var.
Şu anda bu iyileştirmelerden çok memnunuz. Ancak, daha iyisini yapabileceğimize inanıyoruz!
Yardımcı olabilecek diğer alışılmadık püf noktaları biliyorsanız, lütfen aşağıdaki yorumlarda yorum yapın. mesaj bırakın !
orijinal : Https://dev.to/swissgreg/how-we-improved-website-performance-by-24-with-3-unormal-changes-9ei
Bu makale bir CSDN çevirisidir, lütfen yeniden basımın kaynağını belirtin.
Son
