WordPress’te HTTP/S talebi nasıl azaltılır
WordPress sitenizi hızlandırmak istiyorsanız seveceğiniz hikaye budur. Bir gün parlak bir web sitesi kurdum. Çok denedim ve WooCommerce, Google Tag Manager, Oesignal, Yardım Masası, Yoast, Radyo doğrudan (oh evet yaptım), çerez bildirimi, sosyal medya ve diğer birçok eklenti ekledim. Tıpkı senin gibi, ziyaretçilerimi etkilemeye kararlıyım ya da bence bu. Ama sonra her şey çok yavaşlaşır. Çok fazla acı çektikten sonra, bu sorunu çözmek için GtMetrix’i açtım. Hayal kırıklığına uğradım, şunu gördüm:
Etkiledim mi? Naw için cehennem! Mükemmel bir skor almak ve sayfa açık süresini iki saniyeden daha azına indirmek istiyorum.Yani, test düğmesine bastım, ama tahmin et? Yine de aynı sonuçlar mide bulandırıcı. Şok oldum, hatta kızgındım. Ama kolayca pes etmiyorum çünkü bu tür şeyler kabul edilemez. Bundan sonra ne yaptığımı biliyor musun? Pingdom’daki web sitesini test ettim çünkü GtMetrix emebilirdi. Ancak, bir kez daha kötü bir sonuç var: Çok üzgünüm. Etimdeki sözün yanlış HTTP isteği olduğunu söylüyor çünkü diğer birçok sorunu hızlı bir şekilde çözebilirim. Daha da kötüsü, veranda inşa etmek için bir milyar unsur içeren WordPress E-Niaga temasını kullanıyorum. Savunmamda olağanüstü görünüyor. Bazı kullanıcılar tasarımın da doğru olduğunu kabul ediyor, bu yüzden yay, ben kendim hilelere aşık değilim
Ancak iyi bir görsel tasarım ve yavaş hız el ele gitmez. Bir çözüme ihtiyacım var ve hızlı. WordPress sitemdeki HTTP isteklerini nasıl azaltabilirim? WordPress web sitesini her ziyaret ettiğinizde, tarayıcınız ve web sitesi sunucusu arasında birçok veri hareketi. Başka bir deyişle, WordPress, kullanıcıların sitenizi yüklediklerinde gördüklerini oluşturmak için çeşitli sunuculara HTTP istekleri yaptı. WordPress sitenizin yüklemek için birçok öğeye ihtiyacı varsa, daha fazla HTTP isteğiniz olacak ve bunun tersi de geçerlidir. Daha fazla HTTP isteği, yavaş web sitesi, zayıf kullanıcı deneyimi (UX), zayıf SEO puanları ve düşük dönüşüm oranları anlamına gelir. WordPress web siteleri genellikle dinamiktir, yani web sitenizi tarayıcıda oluşturmak için birçok farklı parça alır. İyi haber şu ki, HTTP’nin talebini azaltabilir ve sitenizi önemli ölçüde hızlandırabilirsiniz. Ve bugünkü yazıda nasıl olduğunu öğreneceksiniz! GTMetrix ve Pingdom’dan gelen raporlar genellikle sorunun nerede olduğunu gösterir. Böylece, site testiniz, artırmanız gereken alanı bulmak için her iki aracı da kullanır. Raporunuz hazır olduğunda, HTTP/S isteklerini nasıl azaltacağınız ve WordPress sitenizi nasıl hızlandıracağınız aşağıda. Adım 1: Declutter arkadaşları, WordPress sitenizde birçok şey varsa, çok fazla HTTP isteğiniz olacaktır. Bunun beyni yok. HTTP talebini azaltmanın ilk adımı yanıltıcıdır.
Demek istediğim, ihtiyacınız olmayan tüm eklentilerden kurtulun. WordPress eklentileri, PHP, CSS veya JavaScript (JS) gibi birçok dosya ile birlikte gelir. Her eklenti tarafından etkinleştirilen her dosya bir HTTP isteği yapar. Çok fazla eklentiniz varsa, kesinlikle daha fazla HTTP isteğiniz olacaktır. Daha az eklenti, daha az talep. Bu çok basit. Ne yapalım? Denetim eklentinizi yapın. Web sitenizi çalıştırmak için hangi eklenti yapmanız gerekiyor? İhtiyacınız olmayan bir eklenti var mı? Üçüncü bir taraf sunucusu kullanan bir eklentiniz var mı? Bunu bu eklenti olmadan yapabilir misiniz? HTTP isteklerini azaltmak, ihtiyacınız olmayan tüm eklentilerin kurulumunu silmek için. Ara sıra bir eklentiye ihtiyacınız varsa, yalnızca ihtiyacınız olduğunda yükleyin. Bundan sonra, eklenti kurulumunu silin. Aynı şey kullanmadığınız WordPress temaları ve içerik için de geçerlidir. Tüm öğeleri temizleyin. İhtiyacınız olmayan her şeyi silin; Bu, web sitenizin hızı ve güvenliği için iyidir. Daha çok çalışabilir ve eklentileri seçici olarak yükleyebilirsiniz. Örneğin, kişi sayfanıza yüklemek için yalnızca bir kişi formu 7’ye ihtiyacınız varsa, diğer eklentilerin belirli sayfalara yüklenmesini durdurabilirsiniz.
Bu harika olacak, katılmıyor musun? Ve yalnızca bir WordPress Varlık Temizleme eklentisine ihtiyacınız olduğunu düşünmek için.
Bilgi ve İndir Demo
Bu eklentinin kullanımı kolay ve oldukça verimlidir. Veya geliştiricinin dediği gibi: “Varlıkları Temizleme” sayfalarınızı tarayın ve yüklenen tüm varlıkları algılayın. Sayfaları/yayınları düzenlerken yapmanız gereken tek şey, yalnızca yüklenmesi gerekmeyen CSS/JS’yi seçmektir, bu şekilde şişkinliği azaltır. Hombre olan kurulumunuzu temizleyin; Çöplerden kurtulun – yorum spam dahil. Oh evet, hasarlı bağlantıları kaldırın ve bunu yaparken veritabanınızı optimize edin. Bu, sitenizin hızını arttırmaya kadar dikkate alınması gereken önemli bir alandır, ancak konuya giriyorum. HTTP talebini tekrar azaltın. Adım 2: Web sitelerini görüntüler olmadan optimize edin, sıkıcı. Bin kelimelik bir resim söylüyorlar ve havalı. Ancak her resim HTTP’nin isteğinden sorumludur. Yaralanmaya tuz eklemek için, görüntü yüklenmesi uzun zaman alan elemanların üstünde. Bununla birlikte, WordPress temalarının çoğunun görüntülere ve bu konudaki birçok resme dayandığı gerçeğini görmezden gelemeyiz. Peki, bunu göz önünde bulundurarak, resminizi optimize ederek HTTP isteklerini nasıl azaltabilirsiniz? Yeni başlayanlar için, kullanmadığınız tüm görüntülerden kurtulun. Acımasız ol; Tüm şişkinlikten kurtulun – ihtiyacınız yok. Bundan sonra, gereksiz dosya verilerini silmek için görüntüleri sıkıştırın ve optimize edin.
Bilgi ve İndir Demo
Aralarından seçim yapabileceğiniz bir dizi eklenti olmasına rağmen, WP Compress’i gerçekten seviyoruz. Bu birinci sınıf bir hizmet olmasına rağmen, güçlü görüntülerin otomatik optimizasyonu, kayıpsız sıkıştırma, sunucunuzun yükünü azaltmak için bulut işleme, WebP görüntü desteği, otomatik boyut değişiklikleri ve diğerleri yatırımları çok değerli hale getirir (daha fazla bilgi edinmek için incelememize bakın). Ayrıca 100 ücretsiz resim alabilirsiniz – en azından deneyebilirsiniz. Görüntüleri optimize etmek kendi HTTP isteğinizi azaltmaz, ancak görüntü dosyası boyutunuzu azaltır, bu da daha iyi sayfa hızı anlamına gelir. Veya HTTP isteklerini azaltmak için CSS Image Sprite’ın gücünden yararlanın. Bilmeyenler için Sprite, bir görüntü dosyasına girilen bir görüntü koleksiyonudur. Ardından CSS hileleri kullanın, görüntünün hangi bölümünü görüntüleneceğini seçebilirsiniz. Ancak bu HTTP isteklerini nasıl azaltır? Aşağıdaki benzetme. Ana sayfanızda beş resme ihtiyacınız olduğunu varsayalım. Sitenizi yüklemek için, WordPress kurulumunuz resim almak için sunucuya beş seyahat alır. Şimdi, beş görüntüyü bir resim dosyasına (Sprite) koyarsanız, WordPress kurulumunuz yalnızca bir yolculuk yapar.
Bununla nereye gittiğimi görüyor musun? Daha az yolculuk, o kadar az HTTP isteği. En iyi yanı, CSS Sprite görüntüsü yapmak ve uygulamak için uğraşmanız gerekmemesidir. CSS Sprite Jenerator gibi araçları kullanabilirsiniz. CSS görüntüsünü uygulamak, CSS’nin yolunu bildiğiniz sürece kolaydır. PRO İPUÇLARI: Web siteniz, görüntülerin ve komut dosyalarının eşzamansız yüklenmesini destekleyen HTTP/2 kullanıyorsa, CSS Image Sprite hakkında her şeyi unutabilirsiniz. GTMetrix, performansı değerlendirirken HTTP/2’yi hesaba katmaz, bu nedenle görüntünüz birçok HTTP isteği yapıyor gibi görünüyorsa endişelenmeyin. Ancak diyorum ki: CSS Image Sprite, HTTP’nin isteğini sitenizde önemli ölçüde azaltabilir ve aynı şeyi nasıl uygulayacağınızı biliyorsanız, sayfanızın açılış saatinden fazladan saniye yapın ve durdurun. HTTP/2’niz var mı yoksa değil mi? Sonuçta, bir görüntü dosyası bir HTTP isteği gerektirir. On ayrı görüntü 10 HTTP isteği vb. Bunun ne anlama geldiğini anladığını biliyorum. Adım 3: Kombine & Küçük HTML, CSS & JavaScript WordPress sitemdeki birçok HTTP isteğinin ana nedeni harici bir CSS ve JavaScript dosyasıdır. Evet, 43 JS komut dosyası ve 22 CSS dosyası ile rekabet ediyorum. Bu 66 olağanüstü HTTP isteğidir. Yaklaşık 130 HTTP talebinden, harici CSS ve JavaScript talebi sorunun yaklaşık% 51’ine katkıda bulundu! Sadece aptalca. Teşekkürler Gtmetrix, elime vur. 44 JS ve 22 CSS dosyasını birleştirip en aza indirirsem, HTTP’mün isteğini, web sitesinin boyutunu ve yüklenmesi gereken süreyi önemli ölçüde azaltabilirim. Ancak bunu “birleştiren” ve “en aza indirgeme” tam olarak nedir? Raelene Morey’e Kuşlar By Kuşlardan (Ben Büyük Bir Hayranım) göre, Minifikasyon, “… yorum, biçimlendirme, boşluklar ve yeni HTML, CSS ve JavaScript dosyaları gibi gereksiz karakterleri silme sürecidir. Kodun yürütülebilmesi için gerekli değil. ” Yalnızca bir kod bırakacak şekilde diğer tüm karakterleri ortadan kaldırarak dosya boyutunu azaltma. Ancak 66+ harici komut dosyası varsa, Minifies HTTP isteklerini en aza indirmeye yardımcı olmaz. Bunun için CSS ve JavaScript dosyalarınızı birleştirmeniz gerekir. Bir kez daha, Raelene şunları söyledi: Bu arada dosyaları birleştirmek, tıpkı göründüğü gibi. Örneğin, web sayfanız 5 harici CSS dosyası ve 5 harici JavaScript dosyası içeriyorsa, CSS ve JavaScript’i bir ayrı dosyada birleştirmek her biri 10 değil, sadece 2 istek üretecektir. Anlıyor musunuz? Eminim umarım. Dosyaları birleştirme HTTP isteklerini azaltır. Minifikasyon ise dosya boyutunu azaltır. İkisini birleştirin ve aynı taşla iki kuşu öldürürsünüz. Eklenti var mı? Evet, elbette! Bilgi ve İndir Demo
Dosyalarınızı birleştirmek ve daraltmak için çok sayıda WordPress eklentisi vardır. İyi bir örnek WP roket eklentisidir. Bu temel olarak dosyaları çeşitli tıklamalarda birleştirmek ve azaltmak için özellikler sunan en iyi önbellek eklentilerinden biridir. Bir başka popüler seçenek (ve ücretsiz) otomatiktimize eklentisidir. Bu arada, bunu yaparken, harici CSS dosyalarının ve JS komut dosyalarının sayısını azaltın mı? Örneğin, burada addan bahsetmiyoruz, gerçekten üçüncü taraf bir yorum platformuna ihtiyacınız var mı? Doğrudan bir radyo eklentisine mi ihtiyacınız var? Ne dediğim önemli değil, ihtiyacınız olmayan tüm komut dosyalarını ve harici dosyaları kaldırın. Adım 4: CSS ve JavaScript Dosya Oluşturma Engellemesini Ayarlayın Bazı durumlarda dosyaları birleştirmek, özellikle dosyalar ve sıklıkla değişen üçüncü taraf komut dosyaları için bir seçenek olmayabilir. Bu gibi durumlarda, bu varlıkların yüklenmesini erteleyebilirsiniz. HTTP/2, dosya yüklemesini eşzamanlı olarak destekler, bu da tüm dosyaların aynı anda yüklendiği anlamına gelir. Bir nedenden dolayı meydana gelen eşzamansız yüklemeniz yoksa (belki HTTP/2 kullanmazsınız veya komut dosyası eşzamansız değilse), bu dosyalar web sitenizi önemli ölçüde yavaşlatabilir. Web sayfanızın yukarıdan aşağıya yüklendiğini unutmayın. Sayfanızın üst kısmındaki oluşturmayı engelleyen CSS ve JS’niz varsa, tarayıcı dosya tamamen yüklenene kadar yüklemeyi durdurur. Böylece, kullanıcılar bisiklet yükleninceye kadar boş sayfaları görecek ve bu da zaman gerektirir. Nasıl? Tüm oluşturma engelleme komut dosyalarını web sayfanızın yukarıdan altına taşıyın. Ama burada dikkatli olun;
Tüm komut dosyalarını aşağı hareket ettirmenize gerek yok. Bunu söylüyorum çünkü sayfanızın gerçekten ilginç bir deneyim sağlamak için CSS ve JS’ye ihtiyacı olabilir. Bazı CSS veya JavaScript dosyalarını ertelerseniz, kullanıcınız sayfa tamamen yüklenene kadar çarpık web sayfası sürümünüzü görebilir, bu da tam olarak elde etmek istediğiniz şeyin tam tersidir. Bu nedenle, yalnızca sayfayı yüklemek için gerekli olmayan komut dosyalarını geciktirir. Bu şekilde, kullanıcınız sayfanızı yüklemek için uzun süre beklemez. Neden? Niye? Çünkü mesajınızı göndermek için daha az HTTP isteğine ihtiyacınız olacak. Bu, HTTP’nin isteğini azaltmaz (çünkü tüm komut dosyaları ve dosyalar sonunda yüklenecektir), ancak sayfanızı oluşturmak için gereken HTTP isteklerinin sayısını azaltır. Bu, görüntüler için yavaş yüklemeye çok benzer; Görüntü yalnızca görünüm alanında yüklenir, geri kalan (ve en önemli kısım) sayfalar yüklendiğinde değil. Bu arada, CSS’yi düzeltmek &
Render’ı engelleyen JS, bir web sayfası oluşturmanız gerekmeyen dosyaları ve komut dosyalarını ortaya çıkarabilir. Örneğin, bazı JS komut dosyalarının harici sosyal paylaşımını paylaşması uzun sürerse, onu erteleyebilirsiniz. Ayrıca, onu ortadan kaldırabilir ve temanıza sosyal paylaşım oluşturabilirsiniz. HTTP isteklerini ortadan kaldıracak ve aynı işlevi korurken sitenizi hızlandıracaksınız. Temanızdaki kodlama özelliğinin çoğu yeni başlayanlar için zor bir şey olduğunu anlıyorum, bu yüzden kullanıcılara veya gelişmiş WP geliştiricilerine sorun. Alternatif olarak, oluşturmayı engelleyen komut dosyasını geliştirmek için WP roket eklentisini kullanabilirsiniz, ancak dikkatli olun. Belgelerini okuyun, çünkü her şeyi bozarsanız, web sitenize kolayca zarar verebilirsiniz. Ücretsiz bir seçenek var mı? Tabii ki! WordPress ile çalışıyoruz, hatırlıyor musunuz? Diğer eklentilerin yanı sıra JavaScript Async kullanabilirsiniz. Adım 5: Önbellek kullanın ve
CDN Önbellek ve CDN’nin HTTP isteğinizi azaltabileceğini biliyor muydunuz? Bu ilk başta bir gerçek gibi görünmüyor, ancak perde arkasında neler olduğunu düşündüğünüzde, karınız için önbellek ve CDN’yi kullanabilirsiniz. Önbellekleme, kullanıcıların bir sonraki ziyarette dosya indirmemesi için tarayıcıda statik dosyaları depolamayı içerir. Bir önbellek eklentiniz olduğunu ve kullanıcılar ilk ziyaretlerinde önbellek içeriğinizi indirdiğini varsayalım. Bir sonraki ziyarette, siteniz sunucuya bir istekte bulunmayacaktır. Bunun yerine, bu, tarayıcıdan kaynak önbelleğini sunacak, HTTP isteklerini azaltacak ve sitenizin hızını artıracaktır. CDN (veya CD ontent d luvery -obli), dünya çapında yerleştirilen bir sunucu ağıdır. CDN ayrıca önbellekleme kullanır, ancak daha hızlı bir hız için, CDN sağlayıcısı, ziyaretçilere en yakın sunucudan önbellek olan içerik sunar. Kısa mesafe, içeriği daha hızlı göndermek anlamına gelir ve önbellekleme, web sitenizin aynı içeriği merkezi sunucudan tekrar indirmeniz gerekmediği anlamına gelir. Sizin için mantıklı mı? Bilgi ve İndir Demo
Ve en iyisi bir dizi ücretsiz CDN seçeneği vardır (veya en azından ücretsiz bir deneme, böylece farkı gerçekten görebilirsiniz). WPExplorer’da CloudFlare kullanıyor ve şiddetle tavsiye ediyoruz, ancak sizin için en uygun olduğunu düşündüğünüz CDN’yi seçin. Bonus: HTTP/2’nin desteklendiğinden emin olun, HTTP isteklerini azaltmak için her şeyi yapabileceğinizden emin olun, ancak web ana bilgisayarınız sefaletinizin nedeni olabilir. Şaşırma; Sorun ve düşünün, kim – bu gün ve yaşta – HTTP/2 dışında bir şey kim kullanıyor? HTTP/2’nin ne olduğunu bile bilemeyebilirsiniz. Yeni başlayanlar için HTTP/2, diğerlerinin yanı sıra BM Sync dosyası yüklemesini destekler. HTTP 1.0’ın başka faydaları var, ancak başka bir gün için bir ders. HTTP 1.0 veya daha düşük kullanıyorsanız, çok sayıda HTTP isteği göreceksiniz. Hızlı yargılamayın; HTTP 1.0 ve daha uzun bir PHP sürümü kullanan bir web barındırma sağlayıcısı gördüm. Evet, HTTP/2 ve PHP 7’nin faydalarıyla bile. Bluff bile yapmıyorum; Bazı eklentileri işe yaramadığında müşterileri bana geldi ve sinir bozucuydu! Ama gerçekten, neden? Bazı web barındırma sağlayıcılarının PHP 5.6’nın artık kullanılmaması ve güvenlik açığı olması nedeniyle rahatsız olmaması başka bir şeydir. Ve eğer HTTP/2’yi desteklemezlerse, bu sizin için gerçekten bir kırılma anlaşmasıdır.
