Daha İyi Web Sitesi Performansı İçin Sayfa Hızınızı Nasıl Arttırabiliriz?

Sayfa hızını geliştirmek . Sitemize Katkıda bulunan enes, eklentilerden CDN’lere kadar her şeyi inceliyor ve bir sürü hokus-pokus olmadan sayfa hızınızı iyileştirmek için neler yapabileceğinizi gösteriyor.

Sayfa Hızını Arttırmak

Sayfa hızı artık mobil aramada bir sıralama faktörüdür . Bu, kullanıcı deneyimi üzerindeki etkisi nedeniyle, tüm arama motoru optimizasyon (SEO) çabalarınızın kritik öneme sahip bir bileşeni olduğu anlamına gelir.

Financial Times tarafından yapılan araştırmaya göre, 1 saniyelik daha yavaş bir sayfa okuyucu katılımında yüzde 5’lik bir azalmaya neden oluyor .

Google, ekranların yüklenmesi için 3 saniyeden daha uzun sürerse, mobil sitelere yapılan ziyaretlerin yarısından fazlası devre dışı bırakılır.

Alt satır basit: Sayfa hızı, ücretli veya organik arama, okuyucu etkileşimi, satış veya potansiyel satış hakkında konuştuğumuz performansta önemli bir rol oynar.

Neyse ki, sayfa hızını geliştirmek, biraz arcane ve gizemli karanlık bir sanat değildir. Özel bir iksir oluşturmaya, iblis çağırmaya ya da ruhunu satmana gerek yok. Belli teknolojiler konusunda iyi bir anlayışa sahip olmanız ve hepsini bir araya getirmek için bazı eski moda sıkı çalışmalara yatırım yapmanız gerekecek.

Bir taban çizgisi kurmak

İlk adım bir temel oluşturmaktır. Bunu yaparak, ölçülebilir bir hız ölçümü elde edebilir ve geliştirmek için yapmamız gereken işi belirleyebiliriz. Bunun için kullandığım araçlardan bazıları:

• WebPageTest.org.
• GTmetrix.com.
• Google PageSpeed ​​Insights.

Web sitelerinin nasıl çalıştığını anlama

Çoğu kişi – geliştiriciler olduğunu iddia edenlerin çoğu dahil olmak üzere – web sitelerinin gerçekten nasıl çalıştığına dair uygun bir anlayıştan yoksundur. Bu yüzden bugün çok şişkin ve verimsiz web siteleri görüyoruz.

İnternet geçmişinde herkesin sadece birkaç tıklamayla bir web sitesi oluşturabileceği ilginç bir noktadayız. Bu belirli avantajlarla birlikte gelirken, aynı zamanda yeni bir sorun dünyası oluşturuyor.

Şöyle düşünün: Birisi mimarlık hakkında hiçbir şey bilmiyorsa, ancak birkaç tıklama ile bir köprü için bir plan oluşturmayı sağlayan bir yazılım kullansaydı, bu köprünün üzerinden inşa edildikten sonra rahatça rahat hissediyor musunuz? Kesinlikle yapmazdım.

Çünkü kendi kişisel tercihlerimizden daha çok mimariye daha çok var. Belirli amaçlara hizmet etmek için gerekli belirli yapılar vardır. Çeşitli bileşenlerin yük taşıma kapasitesini belirlemek için kesin hesaplamalar vardır. Ve bir binanın güvenli ve yerel topluma uymasını sağlamak için kod ve imar yasaları vardır.

Web siteleriyle aynı şey.

Web sitenizin hızlı bir şekilde yüklenmesini sağlamak için, hipermetin işaretleme dilini (HTML), basamaklı stil sayfalarını (CSS) ve JavaScript’i en az düzeyde anlamanız gerekir. İdeal olarak, en azından bir hypertext preprocessor (PHP) ve WordPress’in iç çalışma bilgisine sahip olmalısınız. Bu elemanların iyi bir şekilde ele alınması, bir web sitesinin somun ve civatalarını kazmanıza ve yavaşlatan şeyleri düzeltmenize izin verecektir .

HTTP isteklerini en aza indirin

Bir zamanlar, bant genişliği bugün neyi sevdiğimizin küçük bir kesriydi, o zamanlar o zaman büyük görüntüleri bir dizi küçük resme ayırmak suretiyle telafi edecektik. Tek bir büyük resmin yüklenmesini beklemek yerine, ziyaretçiler resim yüklerini yığınlarda göreceklerdi.

Bugün, temel bir internet bağlantısından bile ulaşılabilen bant genişliği daha iyi. Bu tembel geliştiriciler ve sabırsız ziyaretçilere yol açtı.

Her bir hiper metin aktarım protokolü (HTTP) isteği, bir sayfanın yüklenmesi için gereken süreyi artırır . Genellikle önemli ölçüde. Aslında, bu etki çok daha dramatik olabilir; daha fazla HTTP isteğine sahip daha küçük bir web sayfasının, daha az HTTP isteği ile daha büyük bir web sayfasından tam olarak yüklenmesi daha uzun sürebilir.

Sayfalarımızın yaptığı HTTP isteklerinin sayısını nasıl azaltabiliriz? Bu, kollarımı topladığımız ve web sitemizin kaynak koduna girmeye başladığımız yer. Burada aradığımız şey, belirli HTTP isteklerini birleştirmek veya ortadan kaldırmak için fırsatlar.

CSS ve JavaScript dosyaları genellikle düşük asılı meyvelerdir, çünkü pek çok web sitesinin her ikisinden de bir tonu vardır. Bunu işlemek için üç seçenek vardır:

• Tüm CSS ve JavaScript dosyalarını tek bir CSS dosyası ve JavaScript dosyasına birleştirin.
• Arka uçta dokunulmamış gerçek CSS ve JavaScript dosyalarını bırakırken, bu işlevi ön uçta taklit eden bir eklenti yükleyin.
• Mümkün olduğunda, çağrıları CSS ve JavaScript dosyalarına tamamen silin.

Çoğu durumda, bu seçeneklerin bir kombinasyonunu kullanmanız gerekir. Bunun nedeni, web sitenizin WordPress üzerine kurulu olması, eklentilerin CSS ve JavaScript dosyalarını tek bir dosyada birleştirilmesi, bu eklentilerin bir veya daha fazlası güncellendiğinde sorunlara neden olabilir.

Genel olarak, öncelikle gerekli olmayan CSS ve JavaScript dosyalarını tespit edip bunları kaldırın. Bu aşamada yapabileceğiniz hız iyileştirmesi önemli olabilir çünkü birçok tema gereksiz bir çok dosya yükler. Bu, kullanmadığınız fontları, renk değişimleri için CSS dosyalarını ve kullanmadığınız işlevsellik için ayrı ayrı JavaScript dosyalarını içerebilir.

Daha sonra, bu web sitesinin tüm CSS ve JavaScript dosyalarının tek bir CSS dosyasına ve JavaScript dosyasına birleştirildiğinden emin olun.

Son olarak, tüm CSS ve JavaScript dosyalarını – tema için de eklentileri – sayfa yüklendiğinde tek bir dosyada birleştiren bir eklentiyi kullanınve gerçek dosyaları arka planda dokunulmadan bırakın.

Görüntü dosyaları tarafından oluşturulan HTTP isteklerini kırpmak için sprite kullanmayı öneririm . Bu, her görüntü için işe yaramaz, ancak bir web sitesinde sürekli olarak kullanılan görüntüleri etkili bir şekilde kullanır. Bu, logonuzu, sosyal medya simgelerini ve gezinme öğelerini içerebilir.

Buradaki fikir, tüm bu görüntüleri tek bir dosyaya koymanız ve daha sonra bu elemanın konteynerini tanımlamak ve görüntüyü o kapsayıcıya uygun bir şekilde konumlandırmak için CSS kullanmanızdır. Şimdi, bir düzine veya daha fazla bireysel HTTP isteği yerine, yalnızca bir tane yapabilirsiniz.

Aynı görüntülerin en az bir kısmını FontAwesome.com gibi bir web yazı tipiyle değiştirmeyi de düşünebilirsiniz; bu da size aynı veya daha küçük dosya boyutunda çok daha fazla esneklik sağlar.

Bu rotayı izlerseniz, gerekli dosyaları indirmeli ve uzaktan yerine yerel olarak barındırmalısınız. Harici dosyalara yapılan çağrılar, sayfa hızında dramatik ve zararlı bir etkiye sahip olabilir. Bir web sitesi bir dosyayı harici bir kaynaktan yüklediğinde, bir saniye veya daha büyük farklar gördüm.

Eklentilerde kolaya git

Eklentiler WordPress’i harika yapan şeylerden bazıları. Ayrıca, kötü programlanabilecekleri ve kötü performansa yol açabilecekleri için korkunç olabilecek bazı şeylerdir. Aynı zamanda, JQuery gibi zaten yüklü olanları bile birkaç CSS, JavaScript ve resim dosyası yüklerler.

Bu gerçek çok hızlı dağınık olabilir.

Her eklenti, ne kadar hafif olursa olsun, bir web sayfasına hizmet verdiğinde sunucunuza bir yükleme yerleştirir. 

Sorun şu: eklentileri eklemek genellikle küçük başlar ancak kontrol edilemeyen bir canavara dönüşür. Çünkü web tasarımcıları kendilerini web geliştiricileri olarak sunarken ihtiyaç duydukları işlevselliği nasıl programlayacaklarını bilmiyorlar . 

Bilgi Kaynağı:Bir ajansın “geliştiricilerini” kullanmak istediği bir projeye dahil oldum, bu da eklentileri takan bir adamdan başka bir şey değildi. Müşterinin istediği işlevselliği elde etmek için, “geliştirici” 46 eklentiyi kurdu! Tahmin edebileceğiniz gibi, web sitesi bir taramayı yavaşlattı ve “geliştirici” eklentileri nasıl programlayacağına ve güvendiğini bilmediğinden, yönetici alanında eklentiyi güncellememeye yönelik bir uyarı yazdı. 

PHP’yi ve JavaScript’i öğrenmek için zamana yatırım yapmayı veya bir web sitesini yavaşlatacak çok fazla şişirilmiş ekstralar olmadan ihtiyaç duyduğunuz işlevselliği oluşturabilen gerçek bir geliştiriciyi işe almayı öneririm.

İndirim web hosting hendek

Hepimiz para kazanmak istiyoruz, WP Engine gibi bir üst düzey web sunucusundan gelen bir hosting paketi ve bir alt uç web sunucusundan ayda bir $ 10 aylık hosting paketi arasında büyük bir fark var.Yani ucuz webe kaçarsanız sitenizde ölür..

Ucuz web hosting bir nedenden dolayı ucuzdur.

Pazarlıklı barındırma paketleri performans için oluşturulmaz, her sunucuya olabildiğince çok web sitelerini tıklarız ve hız için optimize etmezler. Sonuç olarak, web siteniz yavaşça açılacak.

Birçok müşteriyle bu konuşmayı yaptım ve çoğu zaman yanıtları “Eh, benim için hızlı bir şekilde yükleniyor cevabı aldım” Kime sitem yavaş açılıyor demez:)

İşte olan şey: gerçekten değil.

Çoğu insan kendi web sitesine karşı bilinçsiz bir önyargıya sahiptir, çünkü duygusal bir bağları vardır. Kusurlarını görmezden geliyorlar.

Ama bunun için sözümü tutmayın , bir web sitesinin gerçek hızını test etmek için kullanabileceğiniz birkaç araç var .

Birkaç yıl önce, müşterilerimin daha hızlı yükleme web sayfaları elde etmesine yardımcı olmak için web’i bir öncelik haline getirmeye başladım. Bir arkadaş özel WordPress hosting şirketlerinden birini tavsiye etti ve bunu denemeye karar verdim.

En iyi şekilde döşenmiştir. Bu noktaya kadar, her zaman pazarlık web hosting kullandım ve önbellek eklentileri kullanarak hız için optimize etmeye çalıştım. Ancak bir WordPress hosting şirketi, WordPress’i son derece yüksek hızlarda sunmak için çalışmaktadır ve yatırımlara değerdir. Önbelleğe alma ve diğer ince ayarlamalar öncesinde bile yüzde 40’lık bir hız artışı görüyordum.

Sağlam, yüksek kaliteli web hosting yatırım ve normalde yapacağınız hız için aynı ince ayar. Rakiplerinizin tümü olmasa bile, en çok dramatik bir iyileşme elde edersiniz.

Minification, önbelleğe alma ve CDN’den yararlanın

Önceki adımların hepsini geçtikten ve bu noktaya geldiğinizde, ince ayar yapmaya hazırsınız. Bir sonraki adımlarınız hala önemli gelişmeler sağlayabilir , ancak ilerledikçe biraz deneme yanılma beklemeniz gerekir.

Minification. Küçültme, gereksiz karakterleri CSS ve JavaScript dosyalarından sıyırma işlemidir. Bu beyaz boşluk, yorumlar ve sondaki noktalı virgül içerir. Buradaki amaç dosyaları daha küçük yapmaktır.

Bu zor olabilir çünkü sık sık bir web sitesini kırar, bu yüzden ne kadar agresif olabileceğinizi ve hangi dosyaları ekleyebileceğinizi görmek için denemeniz gerekir.

Dosyaları el ile işleyebilirsiniz, ancak dosyalarımın kolayca okunabilmesi için anında bunu yapan bir eklentiyi kullanmayı tercih ediyorum. Onları düzenlemek çok daha kolay. Web barındırıcınıza bağlı olarak, bu zaten sistemlerinde yerleşik olabilir.

Caching. Önbelleğe alma, sayfa hızını önemli ölçüde artırır, çünkü dinamik olarak oluşturulmuş HTML dosyalarını kaydeder ve bir sayfa her yüklendiğinde, WordPress’in tüm PHP betiklerini çalıştırmak yerine, her istek yapıldığında önbellekten (yani, önceden oluşturulmuş verileri yeniden kullanma) sunar.

Önbellekleme, küçültme gibi zor olabilir, çünkü bazı ayarlar web sitenizi bozabilir, bu yüzden burada da bazı deneme ve hatalarla karşılaşmayı bekleyebilirsiniz.

Burada iki seçeneğiniz var:

1. Hala pazarlıklı web barındırma kullanıyorsanız, W3 Total Cache, WP-Rocket.me veya WP Super Cache gibi bir eklenti kullanabilirsiniz.
2. WordPress için optimize edilmiş bir web barındırma kullanıyorsanız, muhtemelen sistemlerine önceden yüklenmiş olan önbelleğe sahipler.

İçerik dağıtım ağı . Bir içerik dağıtım ağı (CDN), dosyalarınızı (HTML, CSS, JavaScript, resimler, yazı tipleri vb.) Birden çok kopyasına, dünyanın her yerinden farklı sunucularda barındırır, böylece ziyaretçilerin doğrudan sunucunuzdan indirilmesi yerine, bunları sunucudan indirirsiniz. Onlara daha yakın olan Bu, daha hızlı indirme ile sonuçlanır.

Hem ücretsiz hem de ücretli seçenekler vardır ve ihtiyaçlarınız için sunduklarını değerlendirmeniz gerekir.

Ben katı HTML, CSS ve JS araçları artı editörleri, kod optimize ediciler ve daha fazlasını bulmak için HTML-CSS-JS.com ziyaret etmenizi öneririz.

Hız, başarınız için kritiktir

Sayfa hızını geliştirmek bazı mistik süreçler değildir, ancak SEO, kullanıcı deneyimi ve dönüşümler için çok önemlidir. Sayfa hızınızı nasıl artıracağınızı öğrenmek için zamana yatırım yapın veya size yardımcı olacak bir uzman işe alın. Bunu yapmak karınızı, sıralamanızı ve müşteri kazancınızı artırmanıza yardımcı olacaktır.