WordPress'te Daha Az HTTP İsteği Nasıl Yapılır (11 İpucu)

Web sitenizi görüntülemek için, bir kullanıcının tarayıcısı sunucunuza HTTP istekleri gönderir. Ancak, birden çok optimize edilmemiş dosyanız varsa, sunucunun birçok isteği işlemesi gerekir. Bunlar, sayfa yükleme sürelerinizi önemli ölçüde artırabileceğinden, web sitenizin daha az HTTP isteği yapmasını isteyeceksiniz.

Neyse ki, onları azaltmak mümkün, bu yazının konusu da bu.

HTTP isteklerine giriş

Bir kullanıcı web sitenizi her ziyaret ettiğinde, tarayıcısının sunucunuzdaki kaynakları indirmesi gerekir. Tarayıcı onunla iletişim kurmak için HTTP (Köprü Metni Aktarım Protokolü) ile istekler gönderir.

Web siteleri farklı veri biçimleri içerir ve HTML, CSS, resimler ve videolar için dosyaların tümü bir sunucuda depolanır - bu içeriği bir tarayıcıda oluşturmak için HTTP istekleri gerekir.

Birisi internette gezinirken uygulanan adımlar şunlardır:

Bir web sitesi oluşturmanın yalnızca bir HTTP isteği gerektirmediğini unutmamak önemlidir. Her bir resim dosyası, eklenti stil sayfası, JavaScript komut dosyası, web yazı tipi vb. genellikle kendine ait olacaktır. Bu nedenle, siteniz optimize edilmemişse yükleme sürelerini olumsuz etkileyebilir.

Neden WordPress sitenizin daha az HTTP isteği yapmasını isteyebilirsiniz?

Bir web sitesi oluştururken, gereksiz dosyaları en aza indirmek önemlidir. Ardından, bir ziyaretçinin tarayıcısının sunucudan çok fazla kaynak talep etmesi gerekmez. Siteniz daha az HTTP isteği yapacağı için çok daha hızlı yüklenecektir.

Kaba bir kural olarak, daha yüksek sayıda HTTP isteği daha yavaş sayfa hızlarına yol açar. Sayfayı oluşturmadan önce indirilecek daha fazla kaynak varsa, kullanıcıların içeriği görüntülemek için uzun süre beklemesi gerekecektir.

Örneğin, yalnızca 50 istek içeren bir web sitesi genellikle 70 istek içeren bir web sitesinden daha hızlı yüklenir. Bunun nedeni, işlenecek ve indirilecek daha az kaynak olmasıdır.

Tüm HTTP istekleri eşit yaratılmadığından, gerçek hikaye biraz daha karmaşıktır. Büyük, yavaş yüklenen bir HTTP isteği, hızlı yüklenen beş küçük HTTP isteğinden daha büyük bir etkiye sahip olabilir. Ancak kabaca bir kural olarak – daha az HTTP isteği = daha hızlı yüklenen web sitesi .

Web sitenizdeki HTTP isteklerini azaltarak, Önemli Web Verilerinizi, özellikle de En Büyük İçerik Boyası (LCP) puanınızı iyileştireceksiniz. Buna karşılık, ziyaretçiler içeriği daha hızlı göreceğinden bu, kullanıcı deneyimini (UX) iyileştirebilir.

Web sitenizin HTTP isteklerini nasıl test edebilirsiniz?

Daha önce de belirttiğimiz gibi, HTTP istekleri oluşturmanın bir parçasıdır. Ancak, her HTTP isteği aynı değildir. Web sitenizde bunları azaltmaya başlamadan önce tam olarak hangilerini hedefleyeceğinizi bilmeniz gerekir.

Bunu yapmak için GTmetrix gibi bir performans analizi aracı kullanabilirsiniz. Web sitenizin URL'sini girerek başlayın ve Sitenizi test edin :

Sayfa boyutunuz ve toplam istek sayısı hakkında bilgi içeren bir performans raporu alacaksınız. Bu verileri görüntülemek için Sayfa Ayrıntıları'na gidin:

Şelale sekmesine tıklayarak bireysel istekleri de görüntüleyebilirsiniz. Bu size her bir dosyanın indirilmesinin ne kadar sürdüğünü gösterecektir:

Bu Şelale grafiğini kullanarak, sitenizdeki hangi öğelerin gereksiz HTTP isteklerine neden olduğunu belirleyebilirsiniz. Sorunu bulduktan sonra doğru çözümü uygulayabilir ve web sitenizi hızlandırabilirsiniz.

Yukarıdaki tabloda görebileceğiniz gibi, her HTTP isteğinin farklı bir boyutu vardır ve yüklenmesi farklı bir süre alır.

Çabalarınızdan en yüksek getiriyi istiyorsanız, en büyük ve en yavaş HTTP isteklerini ortadan kaldırmaya odaklanmaya çalışın.

Ayrıca, üçüncü taraf HTTP isteklerini ( sitenizin başka birinin sunucusundan yüklediği Google Analytics komut dosyaları gibi kaynaklar ) kaldırmaya da odaklanmalısınız. Bu üçüncü taraf istekleri, ekstra DNS aramaları gerektirir ve başka performans dezavantajlarına sahiptir.

WordPress'te nasıl daha az HTTP isteği yapılır ve siteniz nasıl hızlandırılır (11 ipucu)

Web sitenizi test ettikten sonra, HTTP isteklerini azaltmanın zamanı geldi.

Aşağıda, daha az HTTP isteği yapmak ve kalan HTTP isteklerini optimize etmek için 11 farklı yolu inceleyeceğiz. Bu ipuçlarından birkaçı, HTTP isteklerini mutlaka ortadan kaldırmaz , ancak istekleri daha hızlı yüklenmelerini sağlayacak şekilde optimize eder, bu da sitenizi hızlandırmak için hala önemlidir.

1. GEREKSİZ EKSİKLERİ SİLİN
2. RENDER-BLOCKING JAVASCRIPT'İ ERTELEYİN VE/VEYA JAVASCRIPT YÜRÜTMEYİ GECİKTİRİN
3. KOŞULLU OLARAK YÜKLEME KODLARI
4. ÜÇÜNCÜ TARAF İSTEKLERİNİ EN AZA İNDİRİN
5. GÖRÜNTÜLERİNİZİ İYİLEŞTİRİN
6. TEMELLİ YÜKLEMEYİ UYGULAYIN
7. BİR SİSTEM YAZI TİPİ YIĞINI KULLANIN
8. CSS VE JAVASCRIPT'İ BİRLEŞTİRİN
9. GÖRÜNTÜLERİ BİRLEŞTİRMEK İÇİN CSS SPRITES KULLANIN
10. SİTENİZİN KODUNU KÜÇÜK YAPIN
11. EMOJİLERİ DEVRE DIŞI BIRAK

1. Gereksiz eklentileri silin

Web sitenizde birden fazla eklenti kurulu olabilir. Aktif olarak kullanmıyor olsanız bile, gereksiz eklentiler HTTP isteklerini artırabilir ve web sayfalarınızı yavaşlatabilir.

Eklenti isteklerinizi analiz etmek için GTmetrix Şelale raporunda "eklentiler" ifadesini arayın. Bu, yalnızca wp-content/plugins klasörünüzden gelen HTTP isteklerini görüntüler:

Farenizi bir sonucun üzerine getirerek isteği hangi eklentinin oluşturduğunu göreceksiniz. Sitenizi optimize etmek için gereksiz eklentileri arayarak listeyi gözden geçirin. Belirli bir araç web sitenize aktif olarak katkıda bulunmuyorsa, onu silmeyi düşünün.

2. Oluşturmayı engelleyen JavaScript'i erteleyin ve/veya JavaScript yürütmesini geciktirin

Daha az HTTP isteği yapmak ve HTTP isteklerinizi optimize etmek istiyorsanız, JavaScript'e odaklanmak başka bir harika taktiktir.

Sitenizin JavaScript'inin yüklenme şeklini optimize etmenin iki ana yolu vardır:

1. Oluşturmayı engelleyen JavaScript'i erteleyin
2. JavaScript yürütmeyi geciktir

Oluşturmayı engelleyen JavaScript'i erteleyin

Oluşturmayı engelleyen JavaScript'i ertelemek, HTTP isteklerini kendi başına kaldırmaz, ancak sitenizin JavaScript yüklemesinin daha önemli HTTP isteklerini engellememesini sağlar.

Yükleme işlemi sırasında bir tarayıcı, işlemeyi engelleyen bir kaynakla karşılaşabilir. Bu CSS veya JavaScript dosyaları, kaynak işlenene kadar işlemeyi duraklatır. Bu gereksiz dosyalara sahipseniz, içeriğinizin görüntülenme süresini uzatabilirler.

Bu dosyalara erteleme veya zaman uyumsuz öznitelikler eklemek, tarayıcıya bunları daha sonra çalıştırması için bilgi verir. Erteleme öznitelikleriyle, komut dosyaları HTML ayrıştırma sırasında indirilir ve ardından yürütülür. Eşzamansız öznitelikler, betiği kullanılabilir olur olmaz çalıştıracaktır.

Bunu uygulamak için ücretsiz Async JavaScript eklentisi gibi özelliklere özel bir eklenti kullanabilirsiniz.

Veya, WP Rocket ve FlyingPress dahil olmak üzere birçok genel performans/önbellek eklentisi de bu özelliği sunar.

Bunu yaparken kendinizi rahat hissediyorsanız, bunu sitenizin kodunda manuel olarak da ayarlayabilirsiniz.

Bir erteleme özelliğini uygulamak için, functions.php dosyanızı açmanız ve kaynak için <script> etiketini bulmanız yeterlidir. Buraya bir erteleme özelliği ekleyin:

 <script src="resource.js" defer></script>

Eşzamansız bir öznitelik şöyle görünür:

 <script src="resource.js" async></script>

Genel olarak, zaman uyumsuz öznitelikleri kullanmak en iyisidir. Ancak, komut dosyası başka bir komut dosyasına bağlı olduğunda erteleme niteliklerini kullanmanız gerekir.

JavaScript yürütmeyi geciktir

İlk sayfa yüklemesi için daha az HTTP isteği yapmak istiyorsanız, başka bir popüler taktik, kullanıcı etkileşimine kadar sitenizin JavaScript yürütmesinin bir kısmını/tümünü geciktirmektir.

Bunu ayarladığınızda, siteniz, bir kullanıcı tıklama, kaydırma vb. bazı etkileşimler gerçekleştirene kadar dosyaları yüklemek için bekleyecektir.

Bu HTTP isteklerini ziyaretin ilerleyen zamanlarına taşıyarak, ilk yükleme için daha az HTTP isteğinde bulunabilir ve En Büyük İçerikli Boyama gibi kullanıcı deneyimi odaklı ölçümleri büyük ölçüde hızlandırabilirsiniz.

Bunu ayarlamak için şu performans eklentilerinden birini kullanabilirsiniz:

• WP Roketi
• UçanBasın
• Perfmatters

İşte FlyingPress'te nasıl göründüğü: seçili komut dizileri dışındaki tüm komut dosyalarınızı geciktirebilir veya yalnızca seçili komut dosyalarını geciktirebilirsiniz:

3. Komut dosyalarını koşullu olarak yükleyin

Bazı eklentiler sitenizde gereksiz yere komut dosyası yükler. Örneğin, bir eklenti yalnızca Bize Ulaşın sayfanızdaki formları işleyebilir, ancak komut dosyalarını başka bir alana ekleyebilir. Bu durumda, eklentinin komut dosyalarını koşullu olarak yüklemenizi öneririz.

Eklentilerinizi koşullu olarak yüklemek için Perfmatters gibi bir araç yüklemeyi düşünün. Belirli sayfalarda veya gönderilerde eklentileri veya tek tek komut dosyalarını devre dışı bırakmak için yerleşik bir komut dosyası yöneticisi ile birlikte gelir:

Ücretsiz bir seçenek olarak Asset CleanUp eklentisini de düşünebilirsiniz.

Eklentilerinizi koşullu olarak yükleyin ve ardından web sitenizi tekrar GTmetrix üzerinden çalıştırın. Hâlâ fazla sayıda HTTP isteği fark ederseniz, bir sonraki yönteme geçme zamanı.

4. Üçüncü taraf isteklerini en aza indirin

Web siteniz yüklenirken, bir ziyaretçinin tarayıcısının, ek HTTP istekleri gerektiren üçüncü taraf bir platformdan veri çekmesi gerekebilir. Ayrıca, üçüncü taraf bir sunucuya güvendiğiniz için bu istekler web sitenizi önemli ölçüde yavaşlatabilir.

Üçüncü taraf komut dosyalarına bazı örnekler:

• Gömülü YouTube videoları
• Google Analytics izleme komut dosyaları
• Google Yazı Tipleri
• Üçüncü taraf reklamları

Oluşturmayı engelleyen kaynaklar gibi, üçüncü taraf komut dosyalarına zaman uyumsuz veya erteleme nitelikleri uygulayabilirsiniz.

Google Analytics ve Google Fonts gibi hizmetler için, aşağıdaki gibi eklentileri kullanarak bunları yerel olarak barındırmayı da düşünebilirsiniz:

• OMGF – Google Yazı Tiplerini yerel olarak barındırın.
• CAOS – Google Analytics'i yerel olarak barındırın.

5. Resimlerinizi optimize edin

Tıpkı eklentilerde olduğu gibi, web sitenizden gereksiz görselleri kaldırmak önemlidir. Her resim kendi HTTP isteğini gerektirdiğinden, sitenizdeki fotoğraf sayısını en aza indirmek isteyeceksiniz.

Ardından, tüm resimlerinizin optimize edilmesi gerekir. Bu, HTTP isteklerinin sayısını azaltmayacak olsa da boyutlarını küçültecektir. Bu, sayfa yükleme süresini etkili bir şekilde iyileştirebilir.

En iyi görüntü optimize edicilerden biri Optimole'dir. Bu ücretsiz eklenti, aşağıdakileri içeren hepsi bir arada bir görüntü optimizasyon özellikleri paketi sunar:

• Her kullanıcının cihazı için optimize edilmiş uyarlanabilir görüntüler sunar.
• Görüntüleri sıkıştırma.
• Resimleri yeniden boyutlandırma
• Görüntüleri en uygun biçimlere dönüştürme.
• Yerleşik içerik dağıtım ağı (CDN) aracılığıyla görüntüler sunmak.

Siz yeni resimler yükledikçe, Optimole onları sıkıştıracak ve yeniden boyutlandıracaktır. Bu nedenle, aşırı kaynak gerektiren büyük görüntü dosyaları için endişelenmenize gerek kalmayacak.

6. Yavaş yüklemeyi uygulayın

Yavaş yükleme uygulamak da iyi bir fikirdir. Bu, bir ziyaretçi sayfayı aşağı kaydırana kadar ekranın alt kısmındaki resimlerin ve videoların yüklenmesini engeller.

Bu, bu HTTP isteklerini kullanıcının ziyaretinde daha sonraya taşır, bu da ilk yükleme için daha az HTTP isteği yapmanıza ve En Büyük İçerikli Boyama sürenizi hızlandırmanıza olanak tanır.

WordPress 5.5, yerel tarayıcı yavaş yükleme kullanan görüntüler için yerleşik yavaş yükleme ekledi.

Ancak, tüm tarayıcılar henüz yerel yavaş yüklemeyi desteklememektedir. Ek olarak, özel bir yavaş yükleme eklentisi kullanmak, sitenizdeki yavaş yükleme işlevi üzerinde daha fazla kontrol sahibi olmanızı sağlar.

Örneğin, En Büyük İçerikli Boyama sürelerinizi olumsuz etkilememek için ilk birkaç resmi geç yüklemeden hariç tutmak isteyebilirsiniz.

Önceki bölümdeki Optimole eklentisini kullanırsanız, sitenizin resimlerini en iyi şekilde yavaş yüklemek için yerleşik bir özellik de içerir.

Ayrıca geç yükleme davranışını eklentinin ayarlarından daha fazla ayarlayabilirsiniz.

7. Bir sistem yazı tipi yığını kullanın

Web sitenizi benzersiz kılmak için çeşitli özel yazı tipleri kullanabilirsiniz. Ancak, siteniz yüklenirken her yeni yazı tipi başka bir HTTP isteği ekleyecektir.

Bu nedenle, kullandığınız özel yazı tipi sayısını sınırlandırmak en iyisidir.

Alternatif olarak, bir ziyaretçinin işletim sisteminden yerel yazı tiplerini kullanan bir sistem yazı tipi yığınına bağlı kalabilirsiniz.

Neve, GeneratePress veya Astra gibi belirli temalar, sistem yazı tiplerine geri dönmenizi sağlar. Ancak yazı tipi yığınınızı CSS ile de değiştirebilirsiniz.

8. CSS ve JavaScript'i birleştirin

CSS ve JavaScript dosyaları için daha az HTTP isteğinde bulunmanın başka bir yolu, ayrı CSS ve JavaScript dosyalarını tek bir stil sayfası veya dosyada birleştirmektir.

Autoptimize eklentisi ile site dosyalarını birkaç adımda kolayca bir araya getirebileceksiniz:

Ayarlar > Otomatik Optimizasyon altında, JavaScript ve CSS kodunu optimize etmek için eklentiyi etkinleştirin. Ardından, Aggregate JS-files ve Aggregate CSS-files öğelerinin yanındaki kutuları işaretleyin:

Bu, CSS'nizi bir dosyada ve JavaScript'i başka bir dosyada derleyecektir. Autoptimize, birden çok dosya için birçok istek göndermek yerine sitenizin daha az HTTP isteği yapmasını sağlar.

Not – CSS ve JavaScript'i birleştirmek, HTTP isteklerini azaltmanın kesin bir yolu olsa da, web barındırıcınıza bağlı olarak gerçek dünyada herhangi bir performans etkisi olmayabilir.

Ana makineniz HTTP/2 veya sonraki bir sürümünü kullanıyorsa (bugünlerde çoğu ana bilgisayar bunu kullanır), aslında HTTP/2 çoklamayı desteklediğinden dosyaları birleştirmemek daha iyi olabilir (bu, birden çok sunucu isteği olmadan sunucudan birden çok dosya indirebileceği anlamına gelir).

Barındırıcınızın HTTP/2 kullanıp kullanmadığından emin değilseniz destek ekibine ulaşabilirsiniz.

9. Görüntüleri birleştirmek için CSS karakterlerini kullanın

Tipik bir WordPress sitesinde, her resim ayrı bir dosyadır. Bir sayfada birden çok fotoğraf varsa, tarayıcı birkaç HTTP isteği gönderir. Ancak, bir CSS sprite bu görüntüleri tek bir dosyada birleştirir.

CSS Sprites Aracı, CSS sprite'ları oluşturmak ve özelleştirmek için ücretsiz bir yazılımdır. Başlamak için resimlerinizi yükleme kutusuna bırakın:

CSS hareketli grafiğini oluşturduktan sonra, onu WordPress Medya Kitaplığına ekleyin. Ardından, her bir resmi web sitenize yerleştirmek için oluşturulan HTML ve CSS kodunu kullanabilirsiniz.

10. Sitenizin kodunu küçültün

Site dosyalarınızı küçültmek, daha az HTTP isteği yapmanıza yardımcı olmaz, ancak sitenizin HTML, CSS ve JavaScript kodu için kaçınılmaz HTTP isteklerini optimize etmenize yardımcı olur.

Kod yazarken okunabilirliği artıran karakterler ve boşluklar ekleyebilirsiniz. Bir isteği işlemek için gerekli olmadıklarından bunları kaldırabilirsiniz.

WordPress sitenizin kodunu küçültmenin en kolay yolu, daha önce bahsettiğimiz Autoptimize eklentisi gibi bir eklenti kullanmaktır.

WordPress önbelleğe alma eklentilerinin çoğu, WP Rocket, FlyingPress, WP Fastest Cache ve daha fazlası dahil olmak üzere kod küçültme özelliklerini de içerir.

Veya Cloudflare'nin CDN'sini kullanıyorsanız, Cloudflare'ın kodunuzu sizin yerinize küçültmesini de sağlayabilirsiniz.

Sitenizin dosyalarını küçülttüğünüzde, HTTP istekleri daha hızlı yürütülür. Daha hafif kod ile web sitenizi hızlandıracak ve hantal istekleri en aza indireceksiniz.

11. Emojileri devre dışı bırakın

Varsayılan olarak, WordPress emojileri sitenize fazladan bir HTTP isteği ekler. Bir HTTP isteğinden daha kurtulmak için WordPress emojilerini devre dışı bırakabilirsiniz.

En basit seçenek için, hafif Devre Dışı Emoji eklentisini yükleyebilirsiniz.

Alternatif olarak, bu kodu alt temanızın functions.php dosyasına veya Kod Parçacıkları gibi bir kod yöneticisi eklentisine ekleyebilirsiniz:

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

Tüm bu ipuçlarını uyguladıktan sonra, daha az HTTP isteği olan bir siteniz olmalıdır!

Web sitenizde daha az HTTP isteği yapın 🎯

Kaba bir kural olarak, web sitenizde ne kadar çok HTTP isteği varsa o kadar yavaş yüklenir. Bu, sitenizin kullanıcı deneyimini (UX) olumsuz etkileyerek ziyaretçilerin içeriğinizi okumadan veya bir ürün satın almadan ayrılmasına neden olabilir.

Web sitenizi hızlandırmak için, mümkün olduğu kadar çok HTTP isteğini ortadan kaldırmak ve kalan HTTP isteklerini olabildiğince çabuk yüklenecek şekilde optimize etmek istiyorsunuz.

Bu gönderideki ipuçlarıyla hem işinizi halledebilir hem de ziyaretçileriniz için hızlı yüklenen bir site oluşturabilirsiniz.

👉 Ancak, sitenizin HTTP isteklerini optimize etmenin performans bulmacasının yalnızca bir parçası olduğunu unutmayın. Sitenizin hızlı yüklenmesini istiyorsanız, kaliteli WordPress barındırma hizmetine de ihtiyacınız olacak – en iyi seçenekleri görmek için en iyi WordPress barındırma özetimize göz atın.

WordPress'te HTTP isteklerinin sayısını azaltmakla ilgili herhangi bir sorunuz var mı? Aşağıdaki yorumlar bölümünde bize sorun!