Make Fewer HTTP Requests çözümü, web sitelerine yönelik HTTP isteklerinin azaltılarak, site performansının yükseltilmesi amacıyla geliştirilmiş bir yöntemdir. Sorunun çözümü için öncelikle HTTP protokolünü anlamak faydalı olacaktır. Bu sebeple biraz bundan bahsedelim. HTTP istekleri “ASCII” şeklinde yazılarak, terimlere vakıf kişiler tarafından okunmaktadır. ASCII, Latin alfabesi ile oluşturulmuş, 7 bit değerinde karakter kümesi olarak tanımlanabilir. HTTP istekleri sisteminde ilk satırda yer alan karakterler “İstek Satırı”, diğerleri ise “Header” (Üstbilgi Satırları) olarak işlemektedir. İstek satırları üç alandan oluşur. Bunlar;

  • İsteklerin metod alanı
  • URL alanı
  • HTTP versiyon alanı şeklindedir

Örnek olarak;

HTTP/1.1 200 OK

Date: Mon, 09 Aug 2021 11:28:47 GMT

Content-Type: text/html; charset=utf-8

Transfer-Encoding: chunked

Connection: keep-alive

Set-Cookie: WHMCS8PwvgYx4SgB1=l9gcbn1q6auil8q5tcbk39cui4; path=/; secure; HttpOnly

Expires: Thu, 19 Nov 1981 08:52:00 GMT

Cache-Control: no-store, no-cache, must-revalidate

Pragma: no-cache

URL’ler, isteklerin yapıldığı web adreslerini gösterir. Her bir isteğe ait web adresi bulunmalıdır. HTTP istekleri, Header satırlarında sunuculara bilgi iletmek ve Host adresini belirtmek amacıyla verileri içerisinde barındırmaktadır. Bu bilgiler aşağıdaki gibi sıralanmaktadır.

  • Host: İsteğin iletildiği web adresi
  • User-Agent: Kullanıcıya ait tarayıcı ve bilgisayar verileri
  • Accept: HTTP ya da JSON gibi onaylanacak olan format

HTTP İstek Metodları

HTTP istek metodlarına geçmeden önce, yukarıda verilen bilgiler doğrultusunda oluşturulan HTTP istek örneğini inceleyebilirsiniz.

Örnek HTTP isteğinde görüldüğü üzere, tarayıcılar bir nesne için istekte bulunurken GET metodunu kullanırlar. Geliştirilen programlar içerisinde ya da yardımcı araçlarla farklı HTTP istek metodları da uygulanmaktadır. HTTP istek metodu, iletilen isteğin belirli bir kategoride yer almasını sağlamaktadır. Örnek olarak; GET metodu, sunucu üzerinden verileri almak için kullanılmaktadır. Kullanıcı şifreleri gibi özel içeriklerin yer aldığı isteklerde GET metodunun kullanılması tavsiye edilmemektedir. HTTP isteklerinde sık olarak kullanılan diğer metotlar ise aşağıdaki şekilde sıralanmaktadır.

  • POST Metodu: İstekte belirtilmiş olan Host ‘a varlıkların, veri kümelerinin ya da tek bir verinin iletilmesi için kullanılmaktadır.
  • PUT Metodu: Sunucuda mevcut bulunan bir kaynağa ait içeriklerin değiştirilmesinde kullanılmaktadır.
  • DELETE Metodu: Kayıtlı olan kaynağın, sistemden tamamen silinmesi için kullanılmaktadır.

HTTP İstek Cevapları

HTTP istek cevapları, istek mesajlarındaki gibi ASCII şeklinde aktarılmaktadır ve isteklere benzer nitelikte veri alanlarını kapsamaktadır. Yukarıda örnek olarak verilen HTTP isteğine verilen cevap, aşağıdaki örnekte gösterilmektedir.

Yukarıda verilen HTTP istek cevabında yer alan ilk satır, Durum Satırı olarak tanımlanmaktadır. Durum satırları, protokol versiyonları, durum kodları ya da onlara karşılık gelen mesajları içerisinde barındırmaktadır. Sonrasında devam eden 3 satır ise HTTP cevabına ait Header satırlarıdır.

  • Date Alanı: İletilen istek sonucunda, sunucu talep edilen verileri mevcut dosya sisteminden çekmektedir. Bu işlemin gerçekleştiği, istemciye sunulduğu zamanı Date alanı göstermektedir.
  • Server: Sunucularla ilgili bilgileri kapsamaktadır. İstek mesajlarındaki User-agent bilgisi ile benzerlik göstermektedir.
  • Content-Type: İletilen nesnelerin türlerini ifade etmektedir. İstemci iletilen verileri nasıl yorumlaması gerektiğini, bu bilgi sayesinde bilmektedir.

En son satırda ise istekte bulunulan nesneler yer almaktadır.

HTTP Durum Kodlarının Kullanımı

HTTP durum kodları, mesajlar ile birlikte sunuculardan istemcilere iletilen cevaplarda, isteklerin nasıl sonuçlanacağını belirten alanlar olarak ifade edilmektedir.  HTTP cevap örneğinde, ilk satır “HTTP/1.1 200 OK” kodu ile başlamaktadır. Bu kod, sunucunun isteği başarılı bir şekilde işlediğini ve sonucunda, geçerli bir nesneye dönüştürdüğünü göstermektedir. HTTP durum kodları belirlenmiş kategorilere ayrılmaktadır. Kategorilere göre her bir durum kodunun ilk sayısı değişmektedir. HTTP durum kodları kategorileri ise aşağıdaki şekilde sıralanmaktadır.

  • 1xx Bilgi Mesajları
  • 2xx Başarılı
  • 3xx Yeniden Yönlendirme
  • 4xx İstemci Hatası
  • 5xx Sunucu Hatası

Yazılan programlarda, iletilen istekler sonucunda, mevcut durum kodları baz alınarak, bazı işlemlerin gerçekleştirilmesi ya da kullanıcılara hata mesajlarının iletilmesi mümkün olmaktadır. Sunuculardan iletilen, sık rastlanan durum kodları ise aşağıda yer almaktadır.

  • 200: OK (İstek Başarılı)
  • 401: Unauthorized (Yetkisiz Erişim)
  • 403: Forbidden (Erişim Yasağı)
  • 404: Not Found (Dosya Bulunamadı)
  • 500: Internal Server Error (Sunucu İçerisinde Hata)

Make Fewer HTTP Requests Hatası Nasıl Çözülür?

HTTP protokolünün detaylı şekilde açıklanmasının ardından, Make Fewer HTTP Requests hatasının çözümüne geçilmektedir. GTMetrix gibi site performans ölçüm araçları, web sitelerini belirli bir standarta taşımak için çalışmaktadır. HTTP isteklerinin azaltılması isteği de Make Fewer HTTP Requests hatası olarak karşımıza çıkmaktadır. Hata düzeltildiğinde, web sitesinin genel performansı da iyileştirilmiş olmaktadır. Make Fewer HTTP Requests hatası genellikle CSS ya da JavaScript dosyalarına yönelik alınmaktadır. CSS dosyaları ve diğer dosyalar üzerinde gerçekleştirilecek düzenlemeler, sorunun çözülmesine yardımcı olmaktadır. Make Fewer HTTP Requests çözümü ise iki şekilde gerçekleştirilmektedir. Bunlar;

CSS Birleştirme İşlemi İle Make Fewer HTTP Requests Çözümü  

CSS (Cascading Style Sheets), HTML ile birlikte kullanılabilen, metinlerin ve formatların biçimlendirilmesinde yararlanılan işaretleme dili olarak tanımlanmaktadır. CSS, Türkçe karşılığı ile Stil Şablonu, web sitelerinde daha ileri seviyede seçenekler sunan şablonların hazırlanmasını sağlamaktadır. CSS dosyaları da web sitelerinin ziyareti sırasında, sorgular ile birlikte alınmaktadır. Sorgu sayısı arttıkça, HTTP istekleri de buna paralel olarak artmaktadır. Her bir HTTP isteği, site performansını etkiler. Ne yazık ki ne kadar fazla HTTP isteği olursa, site performansı o derece düşer. Bu nedenle CSS dosyalarını birleştirmek, Make Fewer HTTP Requests sorununa çözüm olarak kullanılabilir. CSS ’ler web sitelerinde daha kolay yönetilebilmeleri için genellikle ayrı şekilde yazılır. Bu noktada ayrı ayrı yazılan CSS ‘leri, tek bir dosyada toplamak, işlevsel bir çözüm sunmaktadır. CSS dosyalarının birleştirilmesi ile gönderilen HTTP istekleri de azaltılarak, Make Fewer HTTP Requests sorunu kesin olarak çözümlenmektedir. Bu yöntemde dikkat edilmesi gereken en önemli nokta ise CSS dosyalarında yer alan dosya yollarının doğru bir şekilde girilmesi ve CSS ’lerin çağrılmış olduğu alanlarda da düzenlemelerin yapılmasıdır.

JavaScript Birleştirme İşlemi İle Make Fewer HTTP Requests Çözümü 

JavaScript dosyaları, web sitelerinde genellikle metin dosyaları olarak yer almaktadır.  JavaScript, web sayfalarının talimatlarının yerine getirilmesinde, pencerelerin açılmasında, form alanlarının doğrulanmasında, açılır menü tasarımlarında da kullanılmaktadır. Bir web sitesinde, birden fazla JavaScript dosyası barındırıldığında, her bir dosyanın tek tek çağrılması, sunucu üzerinde aşırı işlem gücüne neden olmaktadır. Bu durum da GTmetrix gibi site performans araçlarında Make Fewer HTTP Requests hatası şeklinde yorumlanmaktadır. Make Fewer HTTP Requests hatasının çözüm yollarından biri de mevcut JavaScript dosyalarının tek bir .js dosyasında bir araya getirilmesi ile sağlanmaktadır. İşlem akışı sırasında, gerekli olmayan JavaScript dosyalarının temizlenmesi de sitenin performansını arttırmaktadır. Make Fewer HTTP Requests hata çözümünde sitenin alt yapısı da önem taşır. WordPress tabanlı sitelerde minimum sayıda eklenti kullanmak, çok fazla görsel kullanımından kaçınmak, fonksiyon kullanımlarını azaltmak yine site performansını iyileştiren öneriler arasında yer almaktadır.

Make Fewer HTTP Requests Çözümü Alternatif Yolları

Make Fewer HTTP Requests hatası için temel çözüm önerileri 2 ana başlık altında toplanmaktadır. Bunlar, CSS ve JavaScript dosyalarının birleştirilmesi olarak tanımlanmaktadır. Her iki yöntem uygulandıktan sonra yapılacak küçük düzenlemeler, site performansını bir üst seviyeye taşımak mümkündür.

CSS Image Sprite Kullanımı

Web sitesi tasarımlarında görsel kullanımı kaçınılmaz bir durumdur. CSS Image Sprite kullanarak, sitede barındırılan görselleri bir araya getirmek ve büyük bir dosyada kaydetmek, site performansını ölçülebilir oranda iyileştirdiği görülmektedir. X ve Y koordinatları aracılığıyla, birleştirilen görseller tek tek CSS kaynağından çağırmaktadır. Bu yöntem ile tarayıcılar, birden çok görseli tek bir HTTP isteği ile elde edilebilmektedir. CSS Image Sprite oluşturmak için CSS Sprites Generator aracından yararlanılmaktadır.

Görüntülerin Base64 Koduna Dönüştürülmesi

Web sitesinde kullanılan logo gibi işlevsel görseller, Base64 dizesine kodlanabilir. Yapılan bu işlem, görüntü dosyalarının, komut dosyasına dönüştürülmesini sağlar. Oluşturulan kod içerisinde, görselin görüntülenmesinde kullanılan resim etiketi, kod olarak tanımlanabilmektedir. Base64 kod oluşturmak için, Base64 Dosya Kod aracından yararlanılır. Base64 Dosya Kod aracı, seçilen görselin kodunu otomatik olarak oluşturabilir. Bu yöntem de web sitelerinin daha az HTTP isteği göndermesini sağlar.

Eklenti Miktarlarının Düşürülmesi

Hangi altyapı ile çalışırsanız çalışın, web sitesi tasarımında kullanılan eklentiler arttıkça, site performansı buna bağlı olarak düşer. Tabi ki değişik amaçlar için eklenti kullanımının web sitelerine sunduğu birçok avantajlar vardır. Ancak konu site performansı olduğunda ve bununla ilgili hata mesajı almamak için, eklenti miktarının oldukça iyi ayarlanması gerekir. Web tasarımcılar, site performans araçlarında yüksek puan alabilmek için, tasarımın görselliğinden çok işlevselliği ön plana alırlar.

Kullanılmayan JavaScript Dosyalarının Kaldırılması

Web siteleri geliştirme süreçlerinde ilk eklenen birçok JavaScript dosyası, daha sonra gereksiz bulunarak atıl bırakılmaktadır. Bu dosyalar sitenin HTTP isteklerini çoğaltırken, site içerisindeki işlevselliği de olumsuz etkiler.  Bu sebeple kullanılmayan JavaScript dosyalarının kaldırılması, site performansını da olumlu bir şekilde etkiler. Bu işlemin nasıl yapılacağını soracak olursanız JavaScript dosyalarını kaldırma işlemi için aşağıdaki adımları takip etmelisiniz.

  • Web sitesinin kontrol paneline giriş yapılır.
  • Kaynak kodları açılır.
  • İşlemlere başlamadan önce mutlaka sitenin yedeği alınır.
  • Sitede kullanılan tüm JavaScript dosyalarının görüntülenmesi için, kaynak kod üzerinde .js araması yapılır.
  • Tüm JavaScript dosyalarına erişim sağlandıktan sonra, bir defada çıkarılıp çıkarılmadığı kontrol edilir.
  • Site içerisinde düzgün şekilde çalışıp çalışmadıklarına bakılır.
  • Gereksiz JavaScript dosyaları kaldırılır.
  • Site yeniden kontrol edilir.

Yukarıda belirtilen işlem adımlarında herhangi bir sorun oluşursa, site yedeği yüklenerek, işlem adımları tekrar edilebilir.

Sık Karşılaşılan Hatalar ve Çözümleri