WordPress'te Daha Az HTTP İsteği Nasıl Yapılır ve Sitenizi Hızlandırırsınız

Yavaş bir WordPress sitesi mi yaşıyorsunuz? Sorunun kaynağı çok fazla HTTP isteği olabilir. Daha az HTTP isteği yaparak sitenizin sayfa yükleme süresini azaltmak, kullanıcıların bu içeriğe ne kadar hızlı erişebileceğini iyileştirir ve genel web tarama deneyimlerini etkiler. Sayfa yükleme hızları önemlidir ve kullanıcıların bir uygulamayı veya web sitesini kullanma konusundaki hislerini doğrudan etkiler.

Ancak HTTP istekleri nelerdir? Sayfa başına kaç tane yapılmalı? Şu anda kaç istekle ilgileniyorsunuz? Bizimle kalın: Bu makalede, HTTP isteklerini tanımlayacağız, neden önemli olduklarını, nasıl ölçüleceğini ve nasıl düşük tutulacağını açıklayacağız .

HTTP İstekleri Nelerdir?

HTTP, İnternet'te içerik ve veri (HTML dosyaları, CSS, resimler, videolar vb.) sunmak için kullanılan bir iletişim protokolüdür. World Wide Web, sunucularda barındırılan birçok bilginin bulunduğu geniş bir yerdir, değil mi? Bu içeriğe erişmek istiyorsanız, tarayıcınızın istek göndermesi ve yanıt alması gerekir. İstekler olmadan, sizinle sunucu arasında etkili bir iletişim yoktur.

Bir HTTP isteği, kullanıcı ve sunucu arasındaki bir iletişim katmanı olarak da görülebilir. İstemci tarafından gönderilen mesaja HTTP (Köprü Metni Aktarım Protokolü) adı verilir ve bu, istek mesajlarının üç bölümde etkili bir şekilde yapılandırılmasına yardımcı olur: istek satırı, başlık ve gövde.

Gördüğünüz gibi, bir siteyi her ziyaret ettiğinizde, içeriği görüntülemek için bazı HTTP istekleri yapılır. Sonuç olarak, bir sayfada ne kadar çok HTTP isteği yapılırsa, yüklenmesi o kadar uzun sürer.

Merak ediyor olabilirsiniz, kaç tane HTTP isteği "çok fazla" HTTP isteğidir? WordPress sitenizi nereye yerleştireceğinizi bilmeniz için bazı önemli rakamların üzerinden geçelim:

• Olağanüstü performans: HTTP isteklerini sayfa başına 25'in altında alma
• Sağlıklı performans: HTTP isteklerini sayfa başına 50'nin altında tutmak
• Web'deki ortalama HTTP istekleri: 70 HTTP isteği

Çok fazla HTTP isteği sitenizi yavaşlatacağından sitenizi sağlıklı tutmanız önemlidir. Nedenini bir sonraki bölümde açıklıyoruz.

HTTP İsteklerini Neden Azaltmalısınız?

Mükemmel hız ve performansı korumak için daha az HTTP isteğinde bulunmalısınız. Yahoo, "son kullanıcı yanıt süresinin %80'inin ön uçta harcandığını" söyledi. Başka bir deyişle, performansınız esas olarak HTTP istekleri sayesinde oluşturulan resimler, stil sayfaları ve komut dosyalarından etkilenir.

İçeriği görüntülemek için önemli bir bileşendir, ancak sunucu ile kullanıcı arasında karşılıklı sohbetin yüklenmesi zaman alır. Bu veri gidiş dönüş, gidiş-dönüş yanıt süresi (RTT) olarak adlandırılır:

Daha az HTTP isteğinde bulunmanın bir başka nedeni de Önemli Web Verilerinizi, özellikle de En Büyük İçerik Boyası (LCP) KPI'nızı sağlıklı tutmaktır.

LCP, ilk anlamlı içerik parçasının ne kadar hızlı yüklendiğini belirler. Her şey kullanıcıların hız algısı ile ilgili.

WordPress sitenizin LCP puanını üç faktör etkiler: yavaş sunucu yanıt süreleri, oluşturmayı engelleyen JavaScript ve CSS ve yavaş kaynak yükleme süresi. Bu nedenle, HTTP isteklerinin sayısını azaltmak, daha hızlı sayfaların anahtarıdır. Web siteniz ne kadar az HTTP isteğinde bulunursa, kullanıcıya en önemli içeriği (LCP) o kadar hızlı yükleyebilir.

Sonuç olarak:

Ve unutmayın, kullanıcılar içeriğinize daha hızlı erişebilirse, onların sayfada kalma ve sitenizle etkileşim kurma şansını artırırsınız. Etkileşim aynı zamanda ürünlerinizi satın alabilecekleri anlamına da gelir… Ve yalnızca ziyaretçilerin hayal kırıklığını önlemekle kalmaz, aynı zamanda Google da sitenizi sevecektir.

Bu bizi bir sonraki önemli soruya götürüyor: WordPress siteniz kaç tane HTTP isteği yapıyor?

Sitenizin HTTP İsteklerini Test Etme ve Ölçme

WordPress sitenizde HTTP isteklerini simüle eden bazı çevrimiçi araçlar vardır, yani:

• GTmetrix ( sayfa ayrıntılarınıza erişmek için ücretsiz bir hesabınızın olması gerekir ) — sadece sitenizin URL'sini girin, denetimi çalıştırın ve “Özet ” sekmesini açın. Sayfanızın kaç tane istekte bulunduğunu öğrenmek için "Sayfa Ayrıntıları" adlı son bölüme gidin.

Şelale sekmesi, sitenizde bireysel HTTP isteklerinin ne kadar sürdüğünü görmenin harika bir yoludur:

Elementor gibi belirli bir eklentiden gelen HTTP isteklerine de bakabilirsiniz:

• Pingdom — sayfanızın kaç HTTP İsteği gerektirdiğini öğrenmek için URL'nizi kutuya koymanız yeterlidir:

• Query Monitor — sayfa yüklemelerini yavaşlatan eklentileri veya komut dosyalarını belirlemek için ücretsiz bir hata ayıklama aracı. HTTP API Çağrıları paneli, sayfa yükleme sırasında gerçekleştirilen HTTP istekleriyle ilgili bilgileri gösterir.

Web Sitenize Daha Az HTTP İsteği Yapmanın 10 Yolu (Manuel ve Eklentiyle)

Daha az HTTP isteği, indirilecek daha az bayt anlamına gelir, ancak bu optimizasyonu başlatmak göz korkutucu olabilir. Merak etme. Aşağıdaki teknik listemiz sayesinde HTTP isteklerinizi azaltabileceksiniz. Her taktik için her zaman iki çözüm sunacağız: bir WordPress eklentisi ve bir manuel eklenti.

1. CSS ve JavaScript'i Birleştirin

Etki: Yüksek

HTTP isteklerini azaltmanın kolay bir yolu, birden çok JS ve CSS dosyasını birleştirmektir.

WordPress temanız ve eklentileriniz ile birçok CSS stil sayfası ve JS'nin yüklenmesi gerekir. Bu, tarayıcının web sayfalarını oluşturmak için tüm bu kaynakları yüklemesini gerektirir; bu, birden çok HTTP isteği anlamına gelir.

Çevrimiçi araçları kullanarak CSS ve JS'yi birleştirmek:

• Küçült — Birden çok CSS veya JavaScript dosyasını birleştirir.
• Birleştir– CSS ve JavaScript dosyalarını birleştirmek ve sıkıştırmak için URL yeniden yazma ile birleştirilmiş PHP betiği.
• csscompressor.net (yalnızca CSS) — Çevrimiçi CSS sıkıştırıcı, hızlı ve kullanımı ücretsiz.
• jscompress.com (yalnızca JS) — Bu JavaScript sıkıştırma aracı, JavaScript dosyalarını tek bir dosyada birleştirmenize olanak tanır.
• SmartOptimizer — Birleştirme tekniklerini kullanarak ön ucu optimize ederek web sitenizin performansını artıran bir PHP kitaplığı.
• CSS-JS-Booster — CSS ve JavaScript dosyalarını birleştirir, küçültür ve gzip'ler.
• CSS Crush — CSS dosyalarını birleştirir ve küçültür.
• csscompressor.net (yalnızca CSS) — çevrimiçi CSS sıkıştırıcı, hızlı ve kullanımı ücretsiz.
• jscompress.com (yalnızca JS) — Bu JavaScript sıkıştırma aracı, JavaScript dosyalarını tek bir dosyada birleştirmenize olanak tanır.

Yeni birleştirilmiş CSS ve JS dosyalarınızı WordPress sitenize yükleme:

Amacımız, tüm ayrı istekleri tek bir dosyada bir araya getirmektir.

• Tüm CSS kodunuzu tek bir ana dosyaya kopyalayıp yapıştırın ve dosyayı sunucuya yeniden yükleyin (bunu yalnızca WordPress dosyalarınızdan memnunsanız yapın)
• C-paneli kullanıyorsanız:
  • cPanel'inize giriş yapın
  • 'Dosya Yöneticinize' gidin
  • WordPress sitenizi içeren klasöre tıklayın
  • Yeni birleştirilmiş dosyayla kök dizininizde bir klasör oluşturun

Bir eklenti kullanarak CSS ve JS dosyalarını birleştirmek (en hızlı ve en güvenli yol):

• WP Rocket: küçültülmüş dosyaları dosya türü başına bir dosyada birleştirir (CSS veya JavaScript)

• Autoptimize: betiklerinizin (CSS veya JavaScript) birleştirilmesinde size yardımcı olur.

2. Görüntüleri CSS Spritelarıyla Birleştirin

Etki: Yüksek

CSS hareketli grafikleri, görüntü kaynakları için yapılan HTTP isteklerinin sayısını azaltmanın harika bir yoludur. Sitenizdeki tüm CSS dosyaları oluşturmayı engelliyor, yani ne kadar çok CSS dosyası yüklenirse, bunun sitenizi yavaşlatması o kadar olasıdır.

Bunu önlemek için sitenizdeki görselleri optimize etmeli ve tek bir dosyada birleştirmelisiniz. Bu yapıldıktan sonra, CSS sprite tekniğine yönelme zamanı: Gerektiği yerde o görüntü dosyasının sadece bir kısmını görüntülemek için CSS'yi kullanın. Bu teknik, birçok küçük resim, logo veya simgenin kullanıldığı site performansını artırır.

WordPress'te CSS sprite'larını kullanarak görüntüleri birleştirmeyle ilgili özel makalemizde daha fazla bilgi edinebilirsiniz.

Web tabanlı araçları kullanarak görüntüleri CSS hareketli grafikleriyle birleştirmek:

• CSS Sprite Oluşturucu, Düzenleyici ve Kod
• CSSspritest aracı
  • Sürükle ve bırak oluşturucuyu kullanarak birden fazla görüntüyü tek bir görüntüde birleştirmek için CSSspritestool sitesine gidin.
  • Yüklediğiniz her resim için bir miktar CSS koduyla birlikte birleştirilmiş bir resim dosyası alırsınız.
  • Birleştirilmiş görüntü dosyasını WordPress sitenize yükleyin
  • Özelleştiriciyi kullanarak CSS kodunu WordPress sitenize ekleyin
  • Her resmi HTML kullanarak istediğiniz yerde görüntüleyin

3. Görüntüleri Optimize Edin (ve Önemsiz Olanları Silin)

Etki: Yüksek

Resimleri özel olarak CSS hareketli grafikleriyle birleştirmenize izin veren mevcut bir WordPress eklentisi olmasa da, resimlerinizi optimize etmek için yine de bazı inanılmaz eklentileri kullanabilirsiniz. Görseller, kullanıcı deneyimi için olmazsa olmazlardandır, ancak burada dikkat çeken nokta şudur: Sitenizdeki her görsel, ayrı bir HTTP isteğidir! Sonuç olarak, bunları akıllıca seçin ve yalnızca içeriğinize değer katan görsellere sahip olmayı düşünün.

Görüntüleri optimize etmek, kaliteden ödün vermeden ağırlıklarını azaltmak anlamına gelir. İçeriğin tanımlanamadığı yerde hafif bir görüntüyü bulanıklaştırmanın bir anlamı yok, değil mi?

İşte kullanabileceğiniz bazı yeniden boyutlandırma araçları:

• Photoshop
• GIMP — Ücretsiz, Windows ve Mac
• IrfanView — Windows için Ücretsiz
• Mac için Önizleme — Zaten yüklü!

Resimlerinizi otomatik olarak optimize etmek için bir WordPress eklentisi kullanmanızı öneririz:

• Imagify — WP Rocket'in arkasındaki aynı şirket olan WP Media tarafından. Ayda 20 MB'a kadar görüntüyü ücretsiz olarak optimize edin.
• Optimole (Optimole ile Görüntü optimizasyonu ve Tembel Yükleme)

Daha fazla görüntü optimizasyonu eklentisi keşfetmek için özel makalemizi okuyun.

Not : Görüntüleri optimize etmek, HTTP isteklerinin sayısını doğrudan azaltmaz, ancak boyutlarını küçültür ve daha hızlı yüklenmelerini sağlar.

4. Resimlerde Tembel Yüklemeyi Etkinleştir

Etki: Yüksek

"Tembel yükleme" uygulamak, görüntülerin tarayıcı görünüm alanının dışına yüklenmesini ertelemek anlamına gelir. Basit bir deyişle, ziyaretçiniz tamamen aşağı kaydırmazsa, sayfanın sonuna yerleştirilen resimler yüklenmez bile. Tembel yükleme komut dosyası sayesinde, yalnızca ekranın üst kısmındaki görüntüleri yüklediğiniz için HTTP isteklerinin sayısını azaltırsınız.

Tembel yükleme komut dosyasını manuel olarak uygulama:

İlk olarak, resimlerinizi nasıl yükleyeceğinizi belirlemelisiniz: <img> etiketini mi yoksa CSS'yi mi kullanıyorsunuz? Web.Dev, her iki yöntem için tembel kod dosyasının nasıl uygulanacağını çok iyi açıklar. Ayrıca Kesişme Gözlemcisi API'sini kullanarak öğenin görünüm alanında olup olmadığını kontrol etmeniz gerekir.

Tembel yükleme, sırasıyla bir görüntüde ve bir iframe'de şu şekilde görünebilir:

<img src=”image.jpg” alt=”…” loading=”lazy”><iframe src=”video-player.html” title=”…” loading=”lazy”></iframe>

Komut dosyasını otomatik olarak uygulamak için tembel bir yükleme eklentisi kullanma:

• Lazy Load by WP Rocket (Ücretsiz) — içeriği yalnızca kullanıcı tarafından göründüğünde görüntüler.
• WP Rocket — tembel yükleme özellikleriyle birlikte gelir. Önbelleğe alma, kodunuzu temizleme vb. gibi diğer birçok avantajla birlikte gelen premium bir eklentidir.)
• Daha fazla tembel yük eklentisi arıyorsanız, makalemize bir göz atın.

5. HTML, CSS ve JavaScript'i küçültün

Etki: Orta

Kodunuzu küçültmek, bir dosyadan daha hafif hale getirmek için gereksiz boşlukları, yorumları ve fazladan karakterleri kaldırmak anlamına gelir. Bu teknik JavaScript, CSS ve HTML dosyalarına uygulanabilir. Tabii ki, son kullanıcılar için çok önemli olmayan kodu temizlemekle ilgili.

Küçültülmemiş JS örneği	Küçültülmüş bir JS örneği

Kodunuzu manuel olarak küçültme :

Dosyayı düzenlemeden önce, saklamak üzere bilgisayarınıza kaydetmek üzere sunucunuzdan bir kopya indirin.

• HTML'yi küçültme: kod sayfanızı açın ve yorumları (<!– … –>), fazladan boşlukları, satır sonlarını ve benzer içeriği kaldırın
• CSS'yi küçültme: CSS dosyalarından fazladan boşlukları ve yorumları kaldırın (/* … */) Kimliği, sınıfı veya değişken adlarını olabildiğince kısaltın
• JS'yi küçültme: JS yorumlarını (//) ve kaynak koddan fazladan boşlukları kaldırın. Mümkün olduğunda dizileri nesnelere dönüştürün, koşullu ifadelerinizi optimize edin ve temel sabit ifadelere yanıtlar bulun.

Çevrimiçi bir araç kullanarak kodunuzu küçültme :

• Dosyayı düzenlemek için Sublime text gibi bir kod düzenleyici kullanın
• Kodunuzu şu çevrimiçi araçlardan birine yapıştırın: Kapatma Derleyicisi, CSS nano, JS nano, UNCSS. (Kontrol etmeniz için ücretsiz küçültme kodlarının tam bir listesine sahibiz).
• Eski kodunuzu yeni küçültülmüş kodla değiştirin ve sitenize geri yükleyin

Kodunuzu küçültmek için bir WordPress eklentisi kullanma :

• WP Rocket — CSS ve JS'nizi otomatik olarak küçültün. Tek yapmanız gereken iki kutuyu işaretlemek. WP Rocket, dosya optimizasyonu için özel bir bölüme sahiptir.

6. Ağır Eklentileri Hafif Eklentilerle Değiştirin

Etki: Orta

Sitenizin yavaş yükleme hızları, WordPress sitenizi çok fazla HTTP isteğiyle aşırı çalıştıran bir veya iki eklentiden kaynaklanabilir. Bir eklentiyi hafif olarak sınıflandırmak için şunlara bakmalısınız: kod kalitesi ve profesyonellik, özellikler, kodun bunları ne kadar verimli yürüttüğü ve dosya boyutu.

WordPress sitenizin yavaş eklentilerini nasıl işaretlersiniz?

Diyelim ki iki iletişim formu eklentisi (A ve B) arasında tereddüt ediyorsunuz. Teşhisinizi yürütmek için 5 adımımızı kullanın:

1. HTTP istek sayınızı kontrol etmek için Pingdom'u kullanarak bir performans testi yapın - puanınızı yazın
2. A eklentisini etkinleştirin ve testinizi tekrar çalıştırın - puanınızı yazın
3. A eklentisini devre dışı bırakın ve aynı denetimi yapmak için B eklentisini kurun
4. Her eklenti için kaç tane HTTP isteği eklendiğini karşılaştırın
5. Daha az HTTP isteği olan birini seçin ve yavaş olanı silin!

Hangi eklentilerin sitenizi çok fazla HTTP isteğiyle yavaşlattığını belirlemek için bir eklenti kullanmak:

• Query Monitor eklentisi, sitenize hangi eklentilerin zarar verdiğini belirlemek ve bunları kaldırmanıza yardımcı olmak için kullanılabilir.

7. Komut Dosyalarını Yalnızca Gerektiğinde (ve Yalnızca Belirli Sayfalarda) Yükleyin

Etki: Orta

Daha az HTTP isteğinde bulunmanın başka bir yolu, yüklenmesi gerekmeyen belirli sayfalardan/yazılardan komut dosyalarını ve eklentileri seçerek devre dışı bırakmaktır.

Komut dosyasını yalnızca gerektiğinde yüklemek için bir WordPress eklentisi kullanın:

• Perfmatters — bir sayfadaki veya gönderideki bir komut dosyasını devre dışı bırakmanıza olanak tanır.

• Asset Cleanup Pro - bu biraz daha az kullanıcı dostudur ancak işi de yapar.

8. Harici Komut Dosyalarını / HTTP İsteklerini Azaltın

Etki: Orta

Her üçüncü taraf komut dosyasını yüklemek, tarayıcının yaptığı ve sayfa performansını yavaşlatan fazladan bir HTTP isteğidir (üçüncü taraf komut dosyalarının etkisini nasıl azaltabileceğiniz aşağıda açıklanmıştır). Tüm üçüncü taraf entegrasyonlarınızı takip etmek, hangi harici varlıkların site hızınızı yavaşlattığını anlamak için çok önemlidir. HTTP isteklerinizi nasıl azaltacağınızı açıklıyorduk. Dış etkenlerden etkilenmeyelim değil mi?

Çok fazla HTTP isteği genellikle kaynakları ağdan alınmaya zorlar ve bunu performansımız için istemiyoruz.

Harici komut dosyaları çoğunlukla Google Analytics etiketlerinden, Facebook Piksellerinden, YouTube videolarından, sosyal paylaşım düğmelerinden ve A/B test etiketlerinden gelir. İstek ekleyen tüm dosyaların belirlenmesi önemle tavsiye edilir.

En ağır harici komut dosyalarını tanımlamak için araçları kullanma:

• Bu Chrome Geliştirme Araçları, PageSpeed ​​Insights ve WebPageTest gibi performans araçları bunları belirlemenize yardımcı olabilir.

Üçüncü taraf isteklerini manuel olarak optimize etme :

Artık hangi harici komut dosyalarının performansı etkilediğini belirlediğinize göre, bunlarda async veya defer özniteliğini kullanabilirsiniz:

< komut dosyası zaman uyumsuz src= “script.js”> < komut dosyası erteleme src= “script.js”>

Her iki özniteliği kullanma hakkında daha fazla bilgi edinmek istiyorsanız, üçüncü taraf JS'yi verimli bir şekilde yüklemek için tüm adımları listeleyen Web.Dev'i okumanızı öneririz.

Harici komut dosyalarınızın performans üzerindeki etkisini azaltmak için bir eklenti kullanmak:

• WP Rocket, üçüncü taraf kodunun etkisini birçok yönden azaltmanıza yardımcı olur:
  • Google Analytics dosyalarını ve etiketlerini yerel olarak barındırma.
  • DNS isteklerini önceden getirme, yani harici dosyalar daha hızlı yüklenir.
  • Tarayıcıların CSS dosyalarınızda Google yazı tiplerini daha hızlı keşfetmesine yardımcı olmak için yazı tiplerini önceden yükleme.

• ​​Reklamlar ve analizler gibi üçüncü taraf JS'nizi erteleyerek, tarayıcınıza önce neyi yüklemesi gerektiğini söylemeniz yeterlidir.

Hikaye için, Telegraph kısa süre önce tüm senaryolarını erteledi ve reklam şarj süresini ortalama dört saniye iyileştirdi.

9. Bir CDN kullanın

Etki: Orta

İçerik Dağıtım Ağı (CDN), içeriği mümkün olan en yakın konumdan sunan coğrafi olarak dağıtılmış sunucuları ifade eder. Bir kullanıcı nerede olursa olsun, sitenizin içeriğine hızlı ve verimli bir şekilde erişebilir. Onlar tarafından yapılan her HTTP isteği, mümkün olan en yakın konumdan sunulacaktır.

Piyasada bulunan en iyi CDN'ler:

• RocketCDN
• bulut parlaması CDN'si

Sizin için doğru CDN'yi seçmenize yardımcı olacak bir kılavuz da yazdık.

10. Oluşturmayı Engelleyen JavaScript ve CSS'yi Erteleyin

Etki: Orta

Bu kaynak çok faydalı mı, yoksa daha sonra yüklemek uygun mu? Kaynağın hemen kullanılması ihtiyacı, kaynağın işlemeyi engelleyip engellemediğini belirleyecektir. Oluşturmayı engelleyen JavaScript ve CSS'yi ortadan kaldırmak için erteleme seçeneğini veya zaman uyumsuz seçeneğini kullanmanız gerekir.

Oluşturmayı engelleyen kaynakları manuel olarak kaldırma :

İlk olarak, Google PageSpeed ​​Insights'ta bir denetim yapın ve fırsatlar bölümünü kontrol edin. “Oluşturmayı engelleyen kaynakları ortadan kaldırın” bölümünüz varsa, muhtemelen aşağıdaki örneğimizde olduğu gibi bir şey yapmanız gerekir:

Bu sorunu manuel olarak ortadan kaldırmak için erteleme ve zaman uyumsuz özniteliklerini kullanmanız gerekir.

JS'yi ertelemek için erteleme özniteliğine bir örnek:

<script erteleme src=”/example-js-script”></script>

Her iki komut dosyasını da manuel olarak kullanarak oluşturmayı engelleyen kaynakların nasıl ortadan kaldırılacağını açıklayan ayrıntılı eğitimimizi izleyin.

Daha basit bir şey istiyorsanız, bir WordPress eklentisi kullanın.

JS ve CSS'yi ertelemek için bir WordPress eklentisi kullanma :

• WP Rocket — JS dosyalarınızı en basit şekilde ertelemenize yardımcı olur.   Eklenti ayrıca, oluşturmayı engelleyen kaynakları oluşturan "CSS dağıtımını optimize et" özelliğini de sunar. Ayrıca, ihtiyacınız varsa herhangi bir JS veya CSS dosyasının ertelenmesini engelleyebilirsiniz.

Bir Eklenti ile HTTP İsteklerini Azaltma

WP Rocket gibi bir eklenti, HTTP isteklerini azaltmaya ve sitenizi önemli ölçüde hızlandırmaya yardımcı olur. WP Roketi olan ve olmayan bir WordPress sitesinin performans denetimini yapalım. Karşılaştırmadan sonra WordPress için en iyi önbelleğe alma eklentilerinden biri olduğunu göreceksiniz.

Aşağıdaki KPI'ları ölçmek için GTmetrix kullanacağız:

• Genel performans notu (A'dan F'ye)
• Önemli Web Verileri puanları (LCP, CLS ve FID) + TTI ve TBT (Not: FID mevcut değilse FCP'yi ölçeceğiz)
• HTTP isteklerinin sayısı (Toplam sayfa istekleri)

İçerik açısından, WordPress sitem biraz metin, birkaç sosyal medya simgesi, 8 resim, YouTube'dan gömülü bir video, iğneli bir harita (Google Haritalar'dan) ve fotoğraflarıyla birlikte müşterilerden 3 referans içeriyor.

Senaryo 1 — Performansı ve HTTP İsteklerini Ölçme – WP Roketi Yok

GTmetrix kullanarak performans sonuçlarına bir göz atalım. Pek cesaret verici değiller ve genel performans notum için “E” aldım:

Sayfamın 140 HTTP isteği yaptığını ve bunların %42.9'unun JS'den kaynaklandığını fark ettik. Sayfamın tam olarak yüklenmesi 10.2sn sürüyor ve sayfanın boyutu 5.11 MB.

GTmetrix'in ana önerileri şunlardır:

• Üçüncü taraf JS'yi verimli bir şekilde yükleyin (JS'yi erteleyin, gerekli kaynaklara erken bağlantılar kurun ve yerleşik üçüncü taraf kaynaklara tembel yük uygulayın)
• Oluşturmayı engelleyen kaynakları ortadan kaldırın (Kritik CSS ve JS'yi satır içinde teslim etmeyi ve tüm kritik olmayan JS/stilleri ertelemeyi düşünün. Makalemizde kritik CSS'nin ne olduğu hakkında daha fazla bilgi edinin)
• Kodumu optimize et (JS ve CSS'yi birleştir ve küçült / CSS dağıtımını optimize et)
• Sayfa önbelleğe almayı uygulayın

Bil bakalım ne oldu? Bu tam olarak WP Rocket'in WordPress siteniz için yapabileceği şeydir (diğer şeylerin yanı sıra). 2. senaryoda, WP Rocket'i etkinleştireceğiz ve web sitemizin sağlığını tekrar kontrol edeceğiz. İyi şeyler geliyor.

Senaryo 2 — Performansı ve HTTP İsteklerini Ölçme — WP Rocket ile

Şimdi WP Rocket etkinleştirildiğine göre, aynı sayfayı kullanarak başka bir performans denetimi yapalım.

Bu sefer sonuçlar çok cesaret verici ve genel performans notumla ilgili olarak “E”den “A”ya gittik:

Bir başka etkileyici gelişme, WP Rocket'in etkinleştirilmesiyle (-87%) 140'tan 18'e düşen HTTP isteklerimin sayısıdır.

Genel olarak konuşursak, tüm KPI'larım daha iyi ve web sitem WP Rocket kullanırken çok daha hızlı:

WP Rocket önbellek eklentisi etkinleştirildiğinde performansımız küresel olarak arttı.

WP Rocket, “Web Sitenize Nasıl Daha Az HTTP İsteği Yapılır” bölümünde listelenen hemen hemen tüm teknikleri otomatik olarak uygulamıştır.

WP Rocket'in kontrol panelinden CSS kodumun küçültüldüğünü, birleştirildiğini ve optimize edildiğini görebilirsiniz:

Aynı optimizasyon otomatik olarak JS'ime de uygulandı:

Toplama

WP Rocket, WordPress sitemin HTTP isteklerini %87 oranında azaltmaya yardımcı oldu . Örnek olay incelememizde, eklentinin etkinleştirilmesiyle taleplerimizin 140'tan 18'e çıktığını gördük. Zamandan ve emekten tasarruf edersiniz!

WP Roketi olmadan	WP Roketi ile
140 HTTP İsteği	18 HTTP İsteği (-87%)

Sitenizin mükemmel performansını korumak için, HTTP isteklerini 50'nin altında tutmanız önerilir. WP Rocket, bu sayıyı asla aşmamak için harika bir otomatik araçtır! Gereksiz HTTP isteklerini azaltarak ve ortadan kaldırarak performansı artıracaktır - sizin tarafınızdan herhangi bir teknik bilgi gerektirmeden.

Bugün WP Rocket sayesinde daha az çalışın ve daha iyi performans sonuçları elde edin! 14 günlük para iade garantimiz var: Memnun kalmazsanız size geri ödeme yaparız. Hadi, bir deneyin ve yorumlarda HTTP isteklerinizin nasıl olduğunu bize bildirin.