Sitenizde ne kadar fazla HTTP isteği varsa, siteniz o kadar yavaş yüklenir. Bu nedenle, HTTP isteklerinin sayısını azaltabilir ve nasıl yüklendiğini optimize edebilirseniz, web sitenizin performansını iyileştirebilirsiniz. Bu gönderide, WordPress’te nasıl daha az HTTP isteğinde bulunacağınız hakkında bilmeniz gereken her şeyi size anlatacağız.
HTTP isteklerine, neden önemli olduklarına ve WordPress sitenizin isteklerini nasıl analiz edeceğinize ilişkin temel bir girişle başlayalım. Ardından, sitenizin isteklerini azaltmak için uygulayabileceğiniz bazı ipuçlarını ve stratejileri paylaşacağız.
HTTP İstekleri Nelerdir?
Bir web sitesi oluşturduğunuzda, birçok farklı bölümü vardır. Bir sayfada kullandığınız farklı görüntü dosyalarına, içeriğin nasıl göründüğünü kontrol eden CSS stil sayfalarına, tüm bu harika işlevleri ekleyen JavaScript dosyalarına sahipsiniz.
Birisi web sitenizi ziyaret ettiğinde, tarayıcısının o sayfa için gereken tüm kaynakları sunucunuzdan indirmesi için bir yola ihtiyacı vardır. Bunu yapmak için, her bir kaynak için sunucuya HTTP istekleri yapar. Web tarayıcısı bu dosyaları aldığında, ziyaretçiniz için web sayfasını bir araya getirebilir. Tabii ki, bundan biraz daha karmaşık, ama temel fikir bu. Köprü Metni Aktarım Protokolü’nün kısaltması olan HTTP, bu bilgisayarların nasıl iletişim kurduğudur.
Anlaşılması gereken önemli bir şey, her bir ayrı öğenin ayrı bir HTTP isteği olmasıdır. Örneğin, bir web sayfasında beş resim dosyanız varsa, tarayıcının her resim için bir tane olmak üzere beş ayrı HTTP isteği yapması gerekir.
Benzer şekilde, dört WordPress eklentisi kullanıyorsanız ve her eklenti kendi CSS stil sayfasını eklerse, ziyaretçinin tarayıcısının her eklentinin stil sayfası için bir tane olmak üzere dört ayrı HTTP isteği yapması gerekir.
HTTP İsteklerini Azaltmak Neden Önemlidir?
Genel olarak, web sitenizin sahip olduğu daha fazla HTTP isteği, daha yavaş yüklenir. Bu nedenle, web sitenizin daha hızlı yüklenmesini istiyorsanız, sitenizin gerektirdiği HTTP isteklerinin sayısını optimize etmeniz ve azaltmanız gerekir.
Bu biraz fazla basitleştirme olsa da, temel fikir, web tarayıcısının yalnızca tüm HTTP isteklerini indirmeyi bitirdikten sonra web sitesini ziyaretçinize göstermesidir. Bu nedenle, bir web sitesinin sayfayı gösterebilmesi için 70 HTTP isteği yapması gerekiyorsa, bu, 40 HTTP isteği yapması gerektiğinden daha uzun sürecektir.
Ek olarak, bazı HTTP istekleri diğer HTTP isteklerini “engelleyecektir”, bu da tarayıcının kendisinden önceki HTTP isteklerini indirmeyi bitirene kadar belirli HTTP isteklerini indirmeye başlayamayacağı anlamına gelir.
Sitenizin HTTP İsteklerini Nasıl Görebilir ve Analiz Edebilirsiniz?
Yukarıda, her şeyin eşit olduğunu, HTTP isteklerinin sayısını azaltmanın sitenizi hızlandıracağını öğrendiniz. Ancak, tüm HTTP istekleri her zaman “eşit” değildir. Bazı HTTP istekleri diğerlerinden daha büyüktür. Bazıları diğerlerinden daha yavaştır.
Örneğin, 3 MB’lık devasa bir resim dosyası talebi, 20 KB’lık küçük bir resim talebinden çok daha uzun sürecektir.
Sitenizde en büyük iyileştirmeyi yapmak istiyorsanız, öncelikle büyük, yavaş yüklenen HTTP isteklerine odaklanmak işinize yarayacaktır.
Sitenizin HTTP isteklerini analiz etmek için Waterfall analizi denen bir şey kullanabilirsiniz. Çoğu hız testi aracı bunu sunar, ancak GTMetrix ve Pingdom’daki arayüzler çok uygundur. Tarayıcınızın geliştirici araçlarını da kullanabilirsiniz.
Daha az HTTP isteği yapmak için iki strateji vardır:
HTTP isteklerini kaldırın. Mümkünse, gereksiz her HTTP isteğini tamamen kaldırmalısınız. Örneğin, sitenize hiçbir değer katmayan ve kendi CSS ve JavaScript’ini yükleyen bir eklentiniz varsa, tüm HTTP isteklerinden kurtulmak için bu eklentiyi tamamen kaldırmanız yeterlidir.
HTTP isteklerini birleştirin. Mutlaka yüklemeniz gereken HTTP istekleriniz varsa bunları tek bir dosyada birleştirebilirsiniz. Örneğin, altı küçük CSS dosyası yerine, bunları daha büyük tek bir CSS dosyasında birleştirebilirsiniz; bu, tarayıcının daha az istek yapması gerektiğinden daha hızlı yüklenir.
HTTP isteklerini kaldırmaya odaklanan taktiklerle başlayacağız ve ardından kalan HTTP isteklerini nasıl birleştireceğimize geçeceğiz. Temel fikir, yapabildiklerini kaldırmak ve sonra kalanları birleştirmektir.
Gereksiz WordPress Eklentilerini Kaldırın
Başlamak için, eklentilerinizden gelen tüm istekleri almak için waterfall analizini kullanmak isteyeceksiniz. Bunu, wp-content/plugins klasöründen kaynaklanan her HTTP isteğini çekecek olan “eklentiler” arayarak yapabilirsiniz. Dosyanın adının üzerine gelirseniz, hangi eklentiden geldiğini görebilirsiniz.
Temel olarak, tüm listeyi gözden geçirmek ve her bir eklentinin sitenize gerçekten değer katıp katmadığını kendinize sormanız gerekir. Bir eklenti yararlı değilse (ancak HTTP istekleri ekliyorsa), onu kaldırmanız daha iyi olur.
Ağır Eklentileri Daha Hafif Eklentilerle Değiştirin
Gereksiz eklentileri kırptıktan sonraki adım, kullandığınız eklentileri daha hafif alternatiflerle değiştirip değiştiremeyeceğinizi görmektir. Örneğin, sitenize sosyal paylaşım butonları eklemek istediğinizi varsayalım. Bu iyi bir özellik, ancak bazı sosyal paylaşım eklentileri çok sayıda HTTP isteği ekleyebilir.
Örneğin, popüler AddThis eklentisi, kendi HTTP isteklerinin altısını ekler (bazı harici istekler dahil). NovaShare veya Grow by MediaVine gibi daha optimize edilmiş bir alternatif kullanarak bu yoğunluğun çoğunu kesebilirsiniz.
Site Genelinde Gerekmeyen Komut Dosyalarını Koşullu Olarak Yükleyin
Bu noktada sitenizin hiçbir yerinde ihtiyaç duyulmayan tüm eklentileri kaldırmış olmalısınız. Ancak, sorunlara neden olabilecek başka bir eklenti sınıfı daha vardır — yalnızca sitenizin belirli bölümlerinde gerekli olan ancak komut dosyalarını her yere yükleyen eklentiler.
Örneğin, popüler Contact Form 7 eklentisini inceleyelim. Muhtemelen bu eklentiye sadece birkaç sayfada ihtiyacınız var. Ancak, Contact Form 7, komut dosyalarını sitenizdeki her sayfaya yükler. Bu nedenle, Contact Form 7, blog gönderilerinizde herhangi bir iletişim formu olmamasına rağmen, blog gönderilerinize bazı HTTP istekleri eklemeye devam ediyor.
Buradaki gelişmiş bir taktik, eklentileri yalnızca ihtiyaç duyulan yerlere koşullu olarak yüklemektir. Örneğin, Contact Form 7 Bize Ulaşın sayfanıza yüklenmesine izin verebilir, ancak diğer her yerde devre dışı bırakabilirsiniz.
Geliştirici değilseniz, bunu kod olmadan yapmak için Asset CleanUp veya Perfmatters gibi eklentileri kullanabilirsiniz. Perfmatters ile önce komut dosyası yöneticisini etkinleştirmeniz gerekir. Ardından, bir sayfada yüklenen tüm komut dosyalarını görüntülemek ve gerekli olmayanları devre dışı bırakmak için komut dosyası yöneticisini açabilirsiniz.
Gerçekten gerekli olan bir komut dosyasını yanlışlıkla devre dışı bırakırsanız sorunlara neden olabileceğinizden dikkatli olun. Bu yararlı bir taktik olsa da, aynı zamanda gelişmiş bir taktiktir.
Gereksiz Görüntüleri Kaldırın (ve Gerisini Optimize Edin)
İyi kullanıldığında görseller web sitenizi daha kullanıcı dostu ve ilgi çekici hale getirir. Sitenize değer katarlar. Ancak sitenizdeki her resim ayrı bir HTTP isteğidir. Bu nedenle, değer katmayan resimleriniz varsa, bu HTTP isteklerini ortadan kaldırmak için bunları kaldırmak en iyisidir.
Örneğin, bir komik GIF buna değer mi? Olabilir… ama olmayabilir de — içeriğinize ne zaman daha fazla resim eklediğinizde bunu düşünmeniz gerekir.
Son olarak, kalan görüntüleri yeniden boyutlandırdığınızdan ve sıkıştırdığınızdan emin olun. Bu, HTTP isteklerinin sayısını tek başına azaltmayacak olsa da, bu HTTP isteklerinin boyutunu küçülterek daha hızlı yüklenmesini sağlayacaktır.
Resimler ve Videolar için Geç Yüklemeyi Kullanın
Geç yükleme ile siteniz, bir kullanıcı aşağı kaydırmaya başlayana kadar ekranın alt kısmındaki resimlerin, videoların ve iframe’lerin yüklenmesini bekleyecektir. Bu kaynaklar hemen yüklenmediğinden, ilk sayfa yüklemesi için HTTP isteğinde bulunmaya gerek yoktur. WordPress 5.5’ten itibaren, WordPress artık HTML yükleme özniteliğini kullanan görüntüler için yerel tembel yükleme içeriyor.
Özel Yazı Tiplerini Sınırlayın
Özel yazı tipleri, sitenizdeki tasarımı ve kullanıcı deneyimini geliştirmek için harikadır. Ancak, kullandığınız her özel yazı tipi türü başka bir HTTP isteği eklediğinden, bunları nasıl kullandığınıza dikkat etmeniz gerekir.
Özel yazı tiplerini kullanacaksanız, küçük bir sayıya bağlı kaldığınızdan emin olun. Gönderi başlığınız ve gönderi gövdesi için gerçekten farklı bir yazı tipine mi ihtiyacınız var, veya aynı yazı tipini kullanabilir misiniz? Beş yazı tipi ağırlığına gerçekten ihtiyacınız var mı? Yoksa sadece ikisini mi seçeceksin?
Aynısı, Font Awesome ve IcoMoon gibi simge yazı tipleri için de geçerlidir. Simge yazı tipleri faydalı olabilir, ancak muhtemelen birden çok simge yazı tipi kitaplığı yüklemeniz gerekmez. Yalnızca bir simge yazı tipi kitaplığı seçmek ve buna bağlı kalmak daha iyidir.
Son olarak, bir adım daha ileri gitmek ve sitenizin yazı tipleriyle ilgili HTTP isteklerini tamamen ortadan kaldırmak istiyorsanız, bir sistem yazı tipi yığını kullanmayı düşünebilirsiniz. Bu size tasarım açısından daha az esneklik sağlarken, aynı zamanda ziyaretçilerinizin sitenizi oluşturmak için herhangi bir yazı tipi dosyası yüklemek zorunda kalmayacağı anlamına da gelir.
Üçüncü Taraf HTTP İsteklerini Azaltın/Ortadan Kaldırın
Şimdiye kadar, esas olarak WordPress sitenizin sunucusundaki dosyalar için HTTP isteklerini azaltmaya odaklandık. Ancak, ziyaretçilerinizin tarayıcılarının da üçüncü taraf sunuculardan dosya istemesi gerekebilir.
Siteniz bu üçüncü taraf sunucuların hızının insafına kaldığı için bu istekler daha da zahmetli olabilir.
Bazı örnekler:
Google Analytics — İzleme komut dosyası Google’ın sunucularında barındırılır, ancak ziyaretçilerin tarayıcılarının yine de bu dosyayı indirmesi gerekir.
Gömülü YouTube videoları — YouTube sunucularına çok sayıda HTTP isteği görürsünüz.
Üçüncü Taraf Reklam Hizmetleri — Reklamlarınızın sunulmasıyla ilgili tonlarca üçüncü taraf isteği göreceksiniz.
Google Yazı Tipleri — Yazı tipi dosyalarınızı yüklemek için Google sunucularına yönelik üçüncü taraf istekleri göreceksiniz.
Aynı taktiklerin birçoğunu yukarıdan bu üçüncü taraf HTTP isteklerine uygulayabilirsiniz.
Örneğin, bir eklenti kendi üçüncü taraf isteklerini eklerse (yukarıdan AddThis eklentisinin yaptığı gibi), onu kaldırabilir ve daha optimize edilmiş bir şey kullanabilirsiniz. YouTube videoları için bunları tembelce yükleyebilir ve ilk sayfa yüklemesini bir küçük resim ile değiştirebilirsiniz. Bu, bir ziyaretçi videoyu oynatmak isteyene kadar bu HTTP isteklerinin eklenmesini geciktirecektir.
Google Analytics veya Facebook Pixel gibi gerekli olan üçüncü taraf komut dosyaları için bu komut dosyalarını yerel olarak barındırmayı deneyebilirsiniz.
WP Rocket, Google Analytics ve Facebook Pixel’i yerel olarak barındırmak için yerleşik eklentilere sahiptir veya CAOS (Complete Analytics Optimization Suite) gibi bir eklenti kullanabilirsiniz.
CSS ve JavaScript Dosyalarını Birleştirin
WordPress temanız ve eklentileriniz arasında, siteniz muhtemelen birden fazla CSS stil sayfası ve JavaScript dosyası yükleyecektir; bu, yalnızca tarayıcının sayfayı oluşturması için ihtiyaç duyduğu CSS ve JavaScript’i indirmesi için birden çok HTTP isteği anlamına gelir.
Tüm bu ayrı istekleri azaltmak için, bu ayrı dosyaları/biçim sayfalarını tek bir dosya/biçim sayfasında birleştirebilirsiniz. Buna, kullandığınız araca bağlı olarak dosya birleşimi veya dosya birleştirme adı verilir. Birçok WordPress önbelleğe alma eklentisi, CSS ve JavaScript dosyalarını birleştirmek için özellikler içerir.
Dosya kombinasyonunun faydaları HTTP/2 ile daha az belirgindir. HTTP/2, birden çok küçük dosyayı aktarmada daha verimli olacak şekilde tasarlanmıştır; bu, bir büyük CSS/JS dosyası ile birden çok küçük dosya arasında daha az fark olduğu anlamına gelir.
Ancak, GTmetrix gibi birçok performans testi aracı hala HTTP/2’yi tanımıyor, bu nedenle GTmetrix yine de “Daha Az HTTP İsteği Yap” mesajını görüntüleyebilir ve puanınızı düşürebilir. Yine de unutmayın — puanlar, gerçek sayfa yükleme süreleri kadar önemli değildir.
Oluşturmayı Engelleyen JavaScript’i Erteleyin
Oluşturmayı engelleyen JavaScript’in ertelenmesi, HTTP isteklerini kendiliğinden ortadan kaldırmaz. Ancak, sitenizin algılanan yükleme süreleri üzerinde aynı etkiye sahip olabilecek şekilde nasıl yüklendiğini optimize eder.
Ayrıca Google PageSpeed Insights/Lighthouse’daki “kritik istekleri zincirlemekten kaçının” mesajına da yardımcı olabilir. Belirli dosyalar için istekleri erteleyerek veya bunları eşzamansız olarak yükleyerek, bazı önemsiz kaynakların sitenizin görünen kısmını hızlı bir şekilde yüklemek için gereken kaynakları “engellemesini” önleyebilirsiniz.
