Muazzam Ağ Yüklerinden Nasıl Kaçınılır (Akıllı Yol)

Az önce bir Google PageSpeed ​​Insights raporu çalıştırdınız ve teşhis bölümünde şu uyarı çıktı:

"Muazzam" başlangıçta korkutucu gelse de, "Avoid muazzam ağ yüklerinden kaçının" mesajı kolayca düzeltilebilir.

Bu kılavuzda, sorunu ortadan kaldırmak ve uyarıyı bir daha asla görmemenizi sağlamak için en etkili teknikleri bulacaksınız.

Hemen dalalım!

Ağ yükleri nedir?

İki kişi arasındaki bir diyaloğa benzer şekilde, tarayıcılar ve sunucular ağ istekleri ve yanıtları aracılığıyla iletişim kurar. Dolayısıylaağ yükleri, bir kullanıcı web sitenizi yüklediğinde bir web tarayıcısı ve bir sunucunun değiş tokuş ettiği bilgilerdir.

Daha teknik anlamda ağ yükleri, ağ üzerinden aktarılan HTML, CSS, JavaScript dosyaları, resimler, videolar ve web sitenizi oluşturan diğer içerikler gibi kaynakların toplam boyutunu temsil eder .

Çok Büyük Ağ Yüklerinden Kaçının uyarısı ne anlama geliyor?

Daha basit bir ifadeyle, "Çok büyük ağ yüklerinden kaçının", sayfanızın boyutunun çok büyük olduğu anlamına gelir. Google PSI raporunun bunu dikkatinize çekmesinin nedeni, önerilen toplam sayfa boyutu olan 1,6 MB'ı (veya 1.600 KB) aşmış olmanızdır.

Hatırlamak!

Bu uyarı durumunda, optimizasyon çabalarınızı yalnızca ana sayfanız ile sınırlamamalısınız. Mümkün olduğunda tüm sayfaların izlenmesi ve boyutlarının küçültülmesi gerekir.

Optimum sayfa boyutu ne olmalıdır?

Optimum bir sayfa boyutu olmasa da Google, Etkileşim Süresini 10 saniyenin altında tutarken teorik olarak bir 3G bağlantısında indirilebilecek maksimum veri miktarı olan 1,6 MB'lık sınır hedefinin olduğunu bulmuştur.

Google PSI testi 1,6 megabitlik bir bağlantı kullanır (bu oldukça yavaştır), bu nedenle gerçekçi bir şekilde, hızlı ağlara erişimi olan kitleler arasında rekabet edebilmek için 1-1,5 MB arasındaki herhangi bir şeyi hedeflemek istersiniz.

Bu, Google Analytics, Facebook Pixel gibi popüler üçüncü taraf hizmetleri için yeterli alan ve sitenizin hızını kötü bir şekilde etkilemeden aktarılacak iyi miktarda resim sağlar.

Bu da bizi bir sonraki önemli kısma getiriyor.

Devasa ağ yükleri neden zararlıdır?

Ağ üzerinden aktarılan büyük miktarda veri , web sitenizin performansını ve ziyaretçilerini olumsuz etkiler.

Büyük ağ yükleri indirmek için daha fazla zaman gerektirir ve bu da aşağıdakilere zarar verir:

• yükleme süreleri
• En yüksek Contentful Paint puanı
• Genel Performans Puanı ve Önemli Web Verileri

Bu arada, daha yavaş ağlardaki ve sınırlı veri planlarındaki kullanıcılar ve mobil kullanıcılar, durgun, sinir bozucu kullanıcı deneyimi, yanıt vermeyen sayfalar ve hatta web sitenize erişimin engellenmesi ile karşılanır.Bahsetmiyorum bile, web sitenizi yüklemeye çalıştıkları için ağ sağlayıcıları tarafından ekstra ücret alınabilir.

Şaşırtıcı olmayan bir şekilde, bu, işletmenizin daha yüksek hemen çıkma ve çıkış oranları, azalan kullanıcı katılımı ve kötü dönüşüm oranları yaşayacağı anlamına gelir.

Sonuç olarak, Çok büyük ağ yüklerinden kaçının uyarısını düzeltmemek çevrimiçi işinize ve kullanıcılaragerçek parayamal olur.

Şans eseri, PageSpeed ​​Insights raporu daha ayrıntılı bir görünüme izin verir, böylece sorun gidermeye başlamadan önce suçluları çok daha hızlı bir şekilde daraltabilirsiniz.

Çok büyük ağ yüklerinin nedenlerini belirleme

"Çok büyük ağ yüklerinden kaçının" uyarısını genişletmek, size dosya türüne ve bunların sunulduğu yere göre sayfa ağırlığının ayrıntılı bir dökümünü verir.

Büyük ağ yükleri için en yaygın suçlular şunlardır:

1. Optimize edilmemiş CSS ve JavaScript dosyaları (üçüncü taraf JS dahil)
2. Büyük resimler ve videolar
3. Eklentilerin veya üçüncü taraf kitaplıkların aşırı kullanımı
4. Optimize edilmemiş web yazı tipleri

Doğal olarak bir sonraki adım, hangi tekniklerin ve optimizasyonların web sayfanızın boyutunu en etkili şekilde küçültmenize yardımcı olacağını keşfetmektir.

DIY yapmak için zamanınız yok mu? NitroPack, otomatik pilotta PSI uyarılarını ortadan kaldıran hepsi bir arada eklentidir. Şimdi dene →

WordPress'te Muazzam Ağ Yüklerinden Nasıl Kaçınılır?

1. Hafif WordPress Temaları ve Sayfa Oluşturucuları Seçin

İlk etapta hafif bir kurulum kullanmak, sayfa boyutunun küçültülmesini garanti eder. Bazı WordPress temaları ve sayfa oluşturucular (Divi ve Elementor gibi), web sitenizi hızla şişirebilen ve yavaşlatabilen aşırı özellikler, özelleştirme seçenekleri ve önceden yüklenmiş varlıklarla birlikte gelir.

Web sitenizi geliştirmeden önce CSS, JavaScript ve yazı tiplerini test etmeyi düşünün. Ayrıca, hangi WordPress temalarının hız ve Önemli Web Verileri performansı üzerinde harika sonuçlar gösterdiğine göz atın.

Zaten şişirilmiş bir tema veya sayfa oluşturucu kullanıyorsanız, ağ yüklerini azaltmak için bunları optimize etmenin birkaç yolu vardır:

• Üstbilginizi, altbilginizi ve kenar çubuğunuzu CSS'de kodlayın (bunu sayfa oluşturucuda yapmaktan kaçının)
• Ekstra sayfa oluşturucu eklentilerinin kullanımını sınırlayın ve CSS ve JavaScript'lerini sizden önce test edin
• Tembel yükleme arka plan resimleri (doğrudan önerdiğimiz tekniklere atlayın)
• Sayfa tasarımınızı ve kaynaklarınızı basitleştirmek için bazı işlevlerden ayrılmayı düşünün

2. Web Sitenizi Şişiren WordPress Eklentilerine Dikkat Edin

WordPress, eklentiler aracılığıyla çok sayıda işlevsellik sunar.

Bununla birlikte, özellikle dinamik içerik oluşturan veya harici kaynaklar yükleyen çok sayıda eklenti kullanmak, ağ yükünü artırabilir. Her eklenti, tarayıcı tarafından yüklenecek fazladan CSS, JavaScript veya başka varlıklar ekleyerek daha büyük bir yüke neden olabilir.

WordPress eklentilerinin sayfa boyutunuzu şişirmesini önlemek için şunları yapabilirsiniz:

• Aktif eklentilerinizin hala web siteniz ve iş ihtiyaçlarınızla alakalı olup olmadığını kontrol edin: büyük eklenti koleksiyonlarında, site sahipleri genellikle belirli bir anda neyin yararlı olduğunu düşünmezler ve ardından sitenin gelişimi sırasında eklentileri tekrar ziyaret etmeyi unuturlar.
• Eklenti CSS ve JavaScript'i boşaltın: bazı eklentiler, gerçekte yalnızca belirli bir sayfada veya öğede tetiklenmeleri gerektiğinde site genelinde yüklenme eğilimindedir. Asset CleanUp gibi bir araç kullanmak, bunları kısıtlamanıza yardımcı olabilir. Komut dosyalarını ve stilleri kullanılmadıkları yerlere boşaltarak, CSS ve JavaScript dosyalarının boyutunu azaltabilir ve ağ yüklerini azaltabilirsiniz.
• jQuery bağımlılıklarını ortaya çıkarın: bazı eklentiler büyük ölçüde jQuery'ye güvenir veya onu verimsiz kullanır. PSI uyarı dökümünüzde en büyük CSS/JS dosyaları arasında eklentiler fark ederseniz, komut dosyası bağımlılıklarını optimize etmesi için bir geliştiriciye başvurun.

3. CSS ve JavaScript dosyalarını küçültün

Küçültme, boşluk, yorumlar ve satır sonları gibi gereksiz karakterleri CSS ve JavaScript dosyalarından kaldırmayı içerir. Bu gereksiz unsurların ortadan kaldırılması, sayfa boyutu üzerinde anında bir etkiye sahiptir.

Tek bir kod satırı yazmadan CSS ve JavaScript'i küçültün. NitroPack'i kullanmaya başlayın →

4. Üçüncü Taraf JavaScript'i Geciktirin

Üçüncü taraf suçluları belirledikten sonra, daha önemli kaynaklar için ana ileti dizisinde yer açmak üzere onları görünümün altına yükleyerek önceliklerini azaltmanın zamanı geldi.

Üçüncü taraf kodunun etkisini manuel olarak azaltmak bazıları için fazla teknik gelebilir ve bu sizin durumunuzsa, hazır bir çözüme başvurmanızı öneririm. Özel bir çözüm veya NitroPack gibi eksiksiz bir performans optimizasyonu eklentisi için Flying Scripts'e dönün.

5. Resimlerinizi Optimize Edin

Yüksek çözünürlüklü görüntüleri ve videoları optimizasyon olmadan doğrudan WordPress'e yüklemek, büyük dosya boyutlarına neden olur.

Web sayfalarına büyük dosyalar yüklediğinizde ne olur? Tahmin ettin. Artan ağ yükü.

Görüntüleri optimize etmenin birkaç yolu:

• Görüntüleri yeniden boyutlandırma: Görüntülerinizi manuel olarak yeniden boyutlandırmak için görüntü düzenleme yazılımını veya çevrimiçi araçları kullanmak çok zaman alabilir. Görüntülerin cihazlarda her zaman doğru boyutlarda olmasını sağlamak için NitroPack'in Uyarlanabilir Görüntü Boyutlandırmasını keşfedin.
• Görüntüleri sıkıştır: Görüntüleri %85 oranında sıkıştırmak, görsel kaliteyi önemli ölçüde etkilemeden dosya boyutlarını küçültür. Medya kitaplığınızdaki mevcut görüntüleri toplu olarak optimize etmek için görüntü sıkıştırma eklentilerini kullanabilirsiniz.
• Görüntüleri WebP'de dönüştürün: WebP gibi yeni nesil görüntü biçimlerinin kullanılması, içeriğin daha hızlı yüklenmesi ve sunulması için görüntü dosyası boyutunun küçültülmesine yardımcı olur.
• Tembel yükleme görüntüleri: Görüntülerin yüklenmesini, görüntülenecekleri zamana kadar ertelemek için yavaş yüklemeyi uygulayın. Bu teknik, yalnızca ekranda görünen görüntüleri yükleyerek ilk ağ yükünü azaltırken, geri kalanı kullanıcı aşağı kaydırdıkça yüklenir.

NitroPack ile tüm görüntülerinizi otomatik pilotta optimize edin! Yavaş yükleme, WebP, Uyarlanabilir Görüntü Boyutlandırma ve çok daha fazlası →

6. Web Yazı Tiplerinizi Optimize Edin

Web yazı tipleri, kaynak optimizasyonunda genellikle göz ardı edilir, ancak büyük ağ yüklerine neden olan en önemli varlıklar arasındadır.

Web alanı için tasarlanmış yazı tiplerini kullandığınızdan emin olun. Bunları .woff2 biçiminden tanıyacaksınız. Ayrıca, bunları yerel olarak barındırmak, harici isteklerin sayısını azaltacaktır.

Diğer etkili yazı tipi optimizasyon teknikleri şunları içerir:

• Kullanıcı etkileşimi için gerekli olana kadar yazı tipi yüklemesinin ertelenmesi
• Yazı tiplerini alt kümeleme ve yazı tipindeki mevcut tüm glifler yerine yalnızca bir sayfada gerçekten görüntülenen karakterleri kullanma
  

Ağ Yüklerini Azaltmaya Yönelik Diğer Teknikler

CDN kullan

Bir İçerik Dağıtım Ağı (CDN), küresel olarak dağıtılan bir sunucular ağıdır. Bir CDN kullanarak, web sitenizin resimler, CSS, JavaScript dosyaları ve diğer ortamlar gibi statik varlıklarının kopyalarını farklı coğrafi bölgelerdeki sunucularda depolayabilirsiniz.

Ziyaretçiler web sitenize eriştiğinde, CDN bu varlıkları konumlarına en yakın sunucudan sunarak verilerin kat ettiği mesafeyi azaltır ve ağ gecikmesini en aza indirir.

Bu, daha hızlı içerik teslimi ve azaltılmış ağ yükleri ile sonuçlanır. Ek olarak, bir CDN, trafik artışlarının üstesinden gelmeye ve yükü birden çok sunucuya dağıtmaya yardımcı olarak web sitenizin genel performansını ve güvenilirliğini artırabilir.

NitroPack ile yüksek kaliteli Cloudflare CDN'nin tüm avantajlarına ve eksiksiz performans optimizasyonuna sahip olun →

GZIP ve Brotli Kullanarak Varlıkları Sıkıştırın

CDN kullanmanın mantıksal bir uzantısı olarak, GZIP ve Brotli gibi sıkıştırma tekniklerinden yararlanmalısınız. HTML, CSS, JavaScript ve diğer dosyalar dahil olmak üzere web sitenizin varlıklarının boyutunu önemli ölçüde azaltabilirler.

• GZIP, web sunucunuzda etkinleştirilebilen, yaygın olarak desteklenen bir sıkıştırma yöntemidir. Varlıkları ağ üzerinden gönderilmeden önce sıkıştırarak ağ yükünü azaltır ve yükleme sürelerini iyileştirir.
• Brotli , daha da iyi sıkıştırma oranları sunan daha yeni bir sıkıştırma algoritmasıdır.

Gerçekte Brotli, genel olarak daha yüksek bir sıkıştırma oranıyla GZIP'den daha esnektir. Aslında Squash Benchmarks testleri, Brotli'nin tüm sıkıştırma seviyelerinde daha iyi bir sıkıştırma oranı (yani daha küçük sıkıştırılmış dosyalar ürettiği anlamına gelir) sağladığı sonucuna varır.

Önbelleğe Alma Uygula

Önbelleğe alma, sonraki erişim sürelerini iyileştirmek için sık erişilen verileri veya varlıkları geçici depolamada depolayan bir tekniktir.

Önbelleğe alma mekanizmalarını uygulayarak, ağ yüklerini en aza indirerek sunucuya yapılan isteklerin sayısını azaltabilirsiniz.

Kullanabileceğiniz farklı önbellek türleri vardır:

• Tarayıcı önbelleğe alma: Web sunucunuzda önbelleğe alma başlıklarını yapılandırmak, ziyaretçilerin tarayıcılarına statik varlıkları yerel olarak depolama talimatı verir.
• Sunucu tarafı önbelleğe alma: Nesne önbelleğe alma, sayfa önbelleğe alma veya veritabanı sorgu önbelleğe alma gibi sunucu tarafı önbelleğe alma tekniklerini uygulamak, dinamik web sitelerinin performansını önemli ölçüde artırabilir.

NitroPack ile Muazzam Ağ Yüklerinden Otomatik Olarak Kaçının

Büyük ağ yüklerini azaltmak için 1 numaralı çıkarım, web sitenizi mümkün olduğunca yalın tutmaktır.

NitroPack ile, aşağıdakiler dahil 35'ten fazla otomatikleştirilmiş optimizasyon elde edersiniz:

• Gelişmiş önbelleğe alma mekanizması
• Cloudflare tarafından yerleşik CDN
• HTML, CSS ve JavaScript küçültme
• Eksiksiz görüntü optimizasyon yığını (gecikmeli yükleme, uyarlanabilir görüntü boyutlandırma, WebP, vb.)
• Yazı tipi altkümesi

Diğer performans optimizasyonu eklentilerinin aksine NitroPack, web sitesi şişkinliğini ortadan kaldırmak ve ayrı optimizasyon eklentilerine olan ihtiyacı azaltmak için bulut üzerinde çalışır.

NitroPack'i çalışırken görmek için web sitenizde bir demo testi çalıştırın.

90+ Lighthouse performans puanına sahip 180.000 site sahibine katılın! NitroPack'i 3 dakikada kurun →

Gelecekte çok büyük ağ yüklerinden kaçınmak için en iyi uygulamalar

Bu uyarının performans raporlarınızı bir daha asla sıyırmamasını sağlamak için şunları yapmalısınız:

• Web sitesi varlıklarını düzenli olarak denetleyin ve optimize edin (en az 28 günde bir)
• Web geliştirme süreçlerinde performansa öncelik verin (evet bu tasarım da demektir)
• Web sitesi performansını farklı cihazlarda ve ağlarda test edin (GTmetrix ile simüle edin)
• Web performansı trendleri ve teknikleri ile güncel kalın