WordPress Sitenizi Hızlandırmak için HTTP İsteklerini Azaltma

0
4758
views
WordPress Sitenizi Hızlandırmak için HTTP İsteklerini Azaltma

Bir web sitesini her ziyaret ettiğinizde, sahne arkasında bir sürü teknik şey oluyor. Ekranınıza kelimeler ve görüntüler yüklenirken, arka planda tarayıcınız dosya istiyor ve alıyor.

Bu HTTP istekleri sayfa yükleme hızlarını etkiler ve sonuçta kullanıcı deneyimini, hemen çıkma oranını ve SEO’yu etkiler. Siteniz sunucuya ne kadar az HTTP isterse siteniz o kadar hızlı yüklenir.

Öyleyse bir HTTP isteği nedir ve bunları azaltmak için ne yapabilirsiniz? Sunucu isteklerinin nasıl çalıştığına, sitenizin ne kadar HTTP isteği gönderdiğini tam olarak anlamaya yardımcı olacak araçlara ve sitenizin isteklerini nasıl azaltacağınıza ve daha hızlı hale getireceğinize dair ipuçlarına bakalım.

HTTP istekleri nelerdir?

Birisi sitenizdeki bir sayfayı her ziyaret ettiğinde, tarayıcıları web sunucunuza ping gönderir ve sayfanın içeriğini içeren dosyaları ister. Bu dosyalar HTML, CSS ve JavaScript dosyalarını, görüntüleri, simgeleri ve diğer dosyaları içerebilir.

İsteğe HTTP isteği denir. HTTP, Köprü Metni Aktarım Protokolü’nü ve temelde bir dosya için istek gönderen bir tarayıcının adını ve bu dosyayı tarayıcıya gönderen sunucuyu ifade eder.

Sunucu bir kullanıcının tarayıcısından bir HTTP isteği aldığında, sunucunuz gerekli dosyaları göndererek yanıt verir. Kullanıcının tarayıcısı daha sonra sayfayı işler.

HTTP isteklerini takip etmek neden bu kadar önemlidir? Çünkü birisi sitenizi her ziyaret ettiğinde, tarayıcılarının ziyaret ettikleri sayfayı oluşturmak için gereken her dosya için ayrı bir HTTP isteği yapması gerekir. Çok fazla dosya içermeyen minimalist bir siteniz varsa, dosyalarınızı istemek ve indirmek için uzun sürmez. Ancak bu, çoğu web sitesi, özellikle de çok fazla resim, animasyon ve diğer dinamik içerik kullananlar için geçerli değildir.

Sitenizdeki sayfalardaki öğe sayısını azaltarak, bir web sayfasını oluşturmak için gereken HTTP isteklerinin sayısını en aza indirebilirsiniz. Bu da siteniz için yükleme sürelerinin hızlanmasına yardımcı olacaktır.

Ancak, önce sitenizden kaç tane HTTP isteğinde bulunduğunuzu bilmeniz gerekir.

Web Sitenizin Kaç HTTP İsteği Yaptığını Kontrol Etme

Bir Chrome kullanıcısıysanız, sitenizin her yüklenişinde kaç tane HTTP isteğinde bulunduğunu kontrol etmek için tarayıcının Geliştirici Araçlarını kullanabilirsiniz.

Bunu yapmak için sitenizde kontrol etmek istediğiniz sayfayı sağ tıklayın ve “Denetle” yi tıklayın. Ardından “Ağ” sekmesini tıklayın.

Ağ paneli web sayfanızın ağ etkinliğini görüntüler. Yükün yüklendiğinde ne olacağını görmek için sayfayı panel açıkken yenile ve HTTP isteklerini gerçek zamanlı olarak gör.

WP Roket blogu için HTTP isteklerini kontrol ederken göreceksiniz:

Chrome Geliştirici Araçları, HTTP istekleri dahil olmak üzere ağ bilgileri sağlar.

Sol sütunda sayfanın göstermesi gereken tüm dosyalar bulunur. “Boyut” sütununda her bir dosyanın boyutunu göreceksiniz. “Zaman” sütunu her dosyanın yüklenmesinin ne kadar sürdüğünü gösterirken, “Şelale” sütunu tüm ağ isteklerinin görsel bir şelalesini görüntüler.

Ancak sitenizin kaç tane HTTP isteğinde bulunup bulunmadığını gerçekten bilmek istediğiniz sayı. Bu sayıyı sol alt köşede göreceksiniz, bu durumda, 51 istek.

GTmetrix ve Pingdom gibi araçlar, HTTP isteklerini izlemenize yardımcı olabilir. Postumuzu göz atın Neden Benchmark My WordPress Sitesi Should Sayfa Hızı ve daha fazlası.

Web Sitenizin HTTP İsteklerini Nasıl Azaltabilirsiniz?

Sitenizi optimize etmek ve sitenizin oluşturması gereken dosya sayısını azaltmak, hızlandırmanıza yardımcı olabilir – daha az dosya daha az HTTP isteği anlamına gelir.

HTML, CSS ve JavaScript Dosyalarını Küçültme ve Birleştirme

Sitenizin gerektirdiği her HTML, CSS ve JavaScript dosyası, sitenizi yüklemek için gereken HTTP isteklerinin sayısını artırır. Dolayısıyla, bu varlıkları birleştirip küçülterek, yalnızca yüklemesi gereken dosya sayısını azaltmakla kalmaz, sitenizin toplam dosya boyutunu da azaltırsınız.

“Minification”, kodun çalışması için gerekli olmayan yorum, biçimlendirme, beyaz boşluk ve yeni satırlar gibi gereksiz karakterleri HTML, CSS ve JavaScript dosyalarından kaldırmak anlamına gelir.

Bu arada dosyaları birleştirmek de tıpkı göründüğü gibi. Örneğin, web sayfanız 5 harici CSS dosyası ve 5 harici JavaScript dosyası yüklüyse, CSS ve JavaScript’inizin her birinin ayrı bir dosyada birleştirilmesi, 10 yerine yalnızca 2 istekle sonuçlanacaktır. Ancak, HTTP / 2 kullanarak, aynı anda birkaç istemin olabileceği ve dosyaların birleştirilmesinin yükleme süresi üzerinde daha az etkisi olacağı anlamına gelir.

WP Roket kullanarak, dosyalarınızı “Statik Dosyalar” sekmesi altında kolayca küçültebilir ve birleştirebilirsiniz. Küçültmek ve birleştirmek istediğiniz dosyaları kontrol edin. İşiniz bittiğinde “Değişiklikleri Kaydet” e basmayı unutmayın.

WP Rocket, sitenizin dosyalarını kolayca küçültmenizi ve birleştirmenizi sağlar.

Render-Blocking CSS ve JavaScript Dosyalarını Onar

Web sayfanızda eşzamansız olmayan bir CSS ve JavaScript varsa, eşzamansız yapmak veya ertelemek en iyisidir.

Niye ya? Bir kullanıcının tarayıcısı sayfanızı yüklediğinde, sayfanın varlıklarını yukarıdan aşağıya yükler. Tarayıcı bir CSS veya JavaScript dosyasına ulaştığında, bu dosya zaman uyumsuz değilse, tarayıcı bu CSS veya JavaScript dosyasını tam olarak yükleyene kadar sayfadaki her şeyi yüklemeyi durdurur.

Dosyalarınızı eşzamansız olarak yüklediğinizde, kullanıcının tarayıcısı sayfadaki diğer öğeleri yüklemeye devam ettiği sırada bunları yükler.

Dosyaları ertelemek, onları yüklemek için sayfanızın başka bir bölümüne taşımak anlamına gelir. Örneğin, JavaScript’i sitenizin <head> bölümünden, </body> etiketinden hemen önce sayfanızın altına taşımak. Bu teknik, sayfanın geri kalanının JavaScript’in tamamen yüklenmesini beklemeden yüklenmesini sağlar.

WP Rocket ile “Statik Dosyalar” sekmesinin altındaki seçenekleri işaretleyerek renderleme engelleyen CSS ve JavaScript’i düzeltebilirsiniz.

WP Roketinde render-bloke eden CSS ve JavaScript seçenekleri.

Not: WP Rocket’in renderleme engelleme özelliğini kullanmayı seçerseniz, WP Rocket’ın ipuçlarını ve belgelerini dikkatlice izleyin. Bu özellik ileri düzey kullanıcılar için tasarlanmıştır.

Ekranın üstüne yüklemek istediğiniz herhangi bir CSS varsa, dosyalarınızı senkronize olmayan şekilde yüklemenin sitenizin kullanıcıya gösterilme şeklini etkilememesini sağlamak için metin alanına belirli CSS kurallarını girebilirsiniz.

Görüntüleri Silme ve Optimize Etme

Görüntüler genellikle çoğu web sayfasında yüklenmesi en uzun süren dosyalardır. Kesinlikle gerekli olsalar da – web siteleri görsel içerik olmadan sıkıcı görünüyor – sitenizde gerek duymadığınız resimleriniz olabilir. Bu nedenle, resimlerinizi değerlendirmek için zaman ayırın ve kullanmadığınız medya kitaplığınızdan kaldırın.

Resimlerinizi gözden geçirip hangilerini saklamak istediğinize karar verdikten sonra, bunları optimize etmeli ve sıkıştırmalısınız. Resimlerinizi optimize etmek gereksiz dosya bilgilerini kaldırır. Popüler Imagify eklentisini kullanmanızı  öneririm .

CSS spitation, HTTP istekleri gerektiren görüntü dosyalarının sayısını daha fazla görüntüleyebilir. Bu teknik, birden fazla fotoğraf çekmenize ve bunları tek bir fotoğrafta küçültmenize izin verir. Daha sonra CSS tekniklerini kullanarak sprite üzerinde değişiklik yapabilir ve sadece belirli bir kısmını görüntüleyebilirsiniz. SpriteMe gibi CSS sprite oluşturmanıza yardımcı olabilecek bazı harika araçlar var . Özellikle sosyal medya simgeleri gibi daha küçük dosyalar için CSS sprite oluşturma çabaları için iyi bir değerdir – daha az bireysel simge dosyası daha az HTTP isteği anlamına gelir, ancak HTTP / 2 kullanıyorsanız ve sitenizden birden fazla dosya aynı anda aktarılabiliyorsa bu daha az gereklidir.

Tembel resimlerinizi yüklemek, sayfanızın yüklenme süresini de artırabilir. Bu teknik, yalnızca sayfanızı kaydırırken kullanıcının görünümüne gelen görüntüleri yüklemek için JavaScript kullanarak çalışır.

Resimlerin sayfalarınızın yavaş yüklenmesini sağlamanın bir başka yolu da “tembel yükleme” eklentisi kullanmaktır. Tembel yükleme, bazı JavaScript’lerin ziyaretçinin o andaki vitrine baktığı ve yalnızca (neredeyse) görünümdeki görüntüleri yüklediği bir tekniktir. Bunun için iyi bir eklenti, kullanıcının sayfayı aşağı kaydırmaya başlayana kadar görüntülerin yüklenmesini geciktiren Lazy Load eklentisidir.

Dış Komut Dosyalarının Değerlendirilmesi ve Azaltılması

Bu noktada, Chrome’daki Ağ paneline geri dönmek ve başka hangi dosyaların istek eklediğini görmek iyi bir fikirdir.

Örneğin, Gravatar’ın blog yorumlarınız için kullanıcı resimleri aldığında yükleme sürenize bir saniye daha eklediğini görebilirsiniz. Twitter entegrasyonu, sitenizin yaptığı HTTP isteklerinin sayısına da eklenebilir.

Hangi üçüncü taraf entegrasyonlarının sitenizi yavaşladığını bilmek, hangi varlıkları koruyacağınız ve hangilerinin sayfa hızını yavaşlatmaya değmeyeceği konusunda bilinçli kararlar vermenize yardımcı olacaktır.

Bonus: Bir İçerik Dağıtım Ağı Kullanın

Bir CDN kullanmak, sayfalarınızın kullanıcılar için ne kadar hızlı yüklendiğini hızlandırabilir. Bir CDN, genellikle dünyanın çeşitli yerlerinde bulunan bir sunucular ağıdır. Bu sunucular, sitenizdeki görüntüler, CSS ve JavaScript dosyaları gibi statik içeriği önbelleğe alır. Birisi sitenize girdiğinde, statik içerik kullanıcının fiziksel konumuna en yakın bulunan sunucudan sunulur. Sunucuya daha kısa mesafeler daha hızlı veri alımı anlamına gelir. Ancak, site ziyaretçilerinizin çoğunluğu yerel ise, bir CDN’nin gereksiz olmadığını – CDN’lerin uluslararası trafiğe sahip web sitelerine daha uygun olduğunu unutmayın.

WP Rocket ile web sitenizi popüler bir CDN olan CloudFlare ile entegre edebilirsiniz. CloudFlare özelliğini etkinleştirmek için WP Rocket’taki “CDN” sekmesine gidin ve ardından hesabınızı ekleyin. Daha fazla bilgi için, WP Rocket’in CloudFlare ile WP Roketinin nasıl kullanılacağı hakkındaki belgelerine bakın.

Cloudflare, küçük web siteleri olan kullanıcılar için faydalı bir seçenek olsa da, daha büyük web siteleri MaxCDN (şimdi StackPath), KeyCDN veya hatta jsDelivr gibi açık kaynaklı bir seçenek olarak premium bir servise yatırım yapmalıdır.

Sonuç

Sitenizin ne kadar HTTP isteğinde bulunduğunu tam olarak bilmek, onları azaltmak ve sitenizi hızlandırmaktır.

Hubspot, web sayfanızın küçültülmesi gereken en uygun dosya veya dosya boyutunda olmamasına rağmen, Hubspot 10-30 dosya aramayı hedefliyor. Ancak, bu, yüksek kaliteli video, resim ve diğer dinamik içerik gerektiren birçok büyük web sitesi için gerçekçi bir amaç değildir.

Öyleyse, eskiden Yahoo! ve Google, ortalama sayfa isteği sayısı aslında sayfa başına 99’dur – bu nedenle daha azını deneyin ve hedefleyin.

CEVAP VER

Please enter your comment!
Please enter your name here