Eklentileri Kullanarak WordPress Web Sitenizin Daha Hızlı Yüklenmesini Nasıl Sağlarsınız?

Okuyucuların dikkatini çekmek istiyorsanız, çok sayıda harika içeriğe sahip güzel bir web sitesine sahip olmak önemlidir. Ne yazık ki, sayfanız çok yavaş yüklenirse okuyucular içeriğinizi asla göremeyebilir. Niye ya? Dikkatlerini çekmek ve bir sonraki siteye geçmelerini engellemek için sadece birkaç saniyeniz var. Okuyucular, içeriğinizin yüklenmesini beklemek istemez. Ne kadar uzun süre beklerseniz, onları kaybetme olasılığınız o kadar artar.

Bu nedenle sayfa yükleme hızınızı optimize etmek son derece önemlidir. Hızınızı ölçmenize ve sorunları gidermenize yardımcı olacak birkaç iyi çevrimiçi araç vardır. En popüler araçlardan biri Google PageSpeed ​​Insights.

Sayfa Hızı Analizleri

Google PageSpeed ​​Insights, herhangi bir web sitesinin yükleme hızını test edecek, sorunları belirleyecek, öncelik sırasına koyacak ve bu sorunları çözmek için önerilerde bulunacak, kullanımı ücretsiz bir çevrimiçi araçtır.

Bu makale için, Divi from Elegant Themes'i temel bir blog olarak kullanan kendi sitemi kullanıyorum. Nelerin düzeltilmesi gerektiğini, aracın ne gibi önerilerde bulunduğunu ve bunları nasıl düzelttiğimi gösteriyorum. Skor, hem mobil hem de masaüstü için sonuç verir. Masaüstüne odaklanıyorum. Mobil sorunlardan bazıları yol boyunca çözülecek.

Bu sorunların çoğu eklentiler kullanılarak çözülecektir. Bir eklentiye karar verirken, yakın zamanda güncellenen ve iyi bir üne sahip eklentilere bağlı kalın. Birçok eklenti birden fazla sorunu çözecektir.

Dikkatli olun - bazı eklentiler, ikisi de aynı işi yapmaya çalıştıkları için diğerleriyle iyi oynamaz. Bunun istediğinden farklı bir etkisi olabilir. Bunları birincil sitenizde kullanmadan önce bir test sitesinde denemenizi öneririm. Sadece eklentilerin kendileri değil, eklenti kombinasyonları da. Eklentileri canlı sitenizde denemeden önce, yeni bir yedeğiniz olduğundan emin olun.

Benim puanım

Puanım korkunç bir 46 . Dikkat edilmesi gereken ilk şey, sonuçlarda üç farklı bölüm olmasıdır:

• Düzeltmeli (2 öğe)
• Sabitlemeyi düşünün (6 öğe)
• Başarılı (2 öğe)

Her bölüm, sorunların ne olduğunu gösterecek şekilde genişler ve bunların nasıl düzeltileceği konusunda tavsiyeler verir. İlk öğeyle başlamanın ve sırayla gitmenin en iyisi olduğunu buldum. Bunları sırayla çözmek, listedeki diğer sorunları da çözecektir.

Not - Yol boyunca birkaç başarısızlık bile yaşadım. Olası sorunlardan haberdar olabilmeniz için bunları ekledim.

Düzeltmeli

Derhal ilgilenilmesi gereken iki öğem var:

• Sıkıştırmayı etkinleştir
• Ekranın üst kısmındaki içerikte oluşturmayı engelleyen JavaScript ve CSS'yi ortadan kaldırın

Sıkıştırmayı etkinleştir

En önemli sorunum sıkıştırma kullanmıyorum. Dosya aktarım boyutumu %79 oranında azaltabileceğimi gösteriyor. Bu, gzip veya deflate kullanılarak yapılabilir.

WP Performans Puanı Arttırıcı

Bu ücretsiz eklenti gzip sıkıştırmasına sahiptir ve sorgu dizelerini kaldırarak, değişken: kabul-kodlama üstbilgisi ve set süresi doluyor önbelleğe alma ekleyerek CSS ve JavaScript sorunları gibi diğer birkaç sorunu çözecektir. 10.000'den fazla aktif yükleme ile 4.7/5 olduğu için seçtim. Sayfa yüklemeyi hızlandırmak ve sayfa puanı testlerini iyileştirmek için geliştirilmiştir.

Bu bana sunucu yanıt süresini azaltmak için bir mesajla 78 puan verdi . Bunun barındırma planımla çok ilgisi var. Web sitemi yeni bir barındırma planına taşıyarak bunu düzeltiyorum. Bu, bu makalenin kapsamı dışındadır.

Bununla ilgili harika bir şey, bir sonraki sayıdaki bazı önemli sorunları çözmesidir: Ekranın üst kısmındaki içerikte oluşturmayı engelleyen JavaScript ve CSS'yi kaldırın. Bu sorun şimdi Düzeltmeyi Düşünün'e taşındı. Ayrıca Kaldıraç Tarayıcı Önbelleğe Alma işlemini tamamen düzeltti. Site şimdi daha önce sadece 2'yi geçtiği yerde 4 kuralı geçiyor.

Sunucu Yanıt Süresini Azaltın

Bununla ilgili garip olan şey, sunucu yanıt süresinin .96'dan 1.4'e çıkması. Sunucu Yanıt Süresini Azalt artık Düzeltilmeli'deydi. Bu bir önbellek eklentisi gerektiriyordu.

W3 Toplam Önbellek

W3 Total Cache, web sitenizin sunucu performansını hızlandırmak için açık ara en popüler eklentidir. Neredeyse bir milyon aktif yüklemeye ve 4.4/5 puana sahip. Önbelleğe alma yoluyla sitenizi optimize eder. Farklı önbelleğe alma seçeneklerini ayrı ayrı seçebilirsiniz. Sayfa, veritabanı, nesne ve tarayıcıyı içerirler. Gelecekte sona erecek başlıkları ve varlık etiketlerini, beslemeleri ve arama sonuçlarını önbelleğe alacaktır. Ayrıca JS, CSS ve HTML'nizi küçültmek için özelliklere sahiptir. Tamamen yapılandırıldığında Google PageSpeed ​​puanınızı en az 10 kat hızlandıracaktır.

Tüm önbellekleme özellikleri açıkken denedim. Bu puanımı 86'ya çıkardı . İlk defa sitem artık yeşil renkte ve sahip olduğum tüm sorunlar Düzeltmeyi Düşünün altındaydı. Artık "sunucu hızlı yanıt verdi" yazan sunucu yanıt süresi de dahil olmak üzere 5 kuralı geçiyor.

Sabitlemeyi Düşünün

Testi ilk yaptığımda, bu bölümde nihayet ulaştığımdan daha fazla sorun vardı. Düzeltmeli alanındaki sorunları düzelttiğimde bu sorunların çoğu çözüldü.

Başlangıçta dahil olan sorunlar:

• Tarayıcı Önbelleğinden Yararlanın
• Sunucu Yanıt Süresi
• JavaScript'i küçült
• Görüntüleri Optimize Edin
• CSS'yi küçült
• HTML'yi küçült

İşte mevcut sorunlara bir bakış.

Katlama Üstü İçerikte Oluşturmayı Engelleyen Javascript ve Css'yi Ortadan Kaldırın

Ekranın üst kısmındaki JavaScript ve CSS, tarayıcıya çok fazla yük bindirerek sayfa yüklemesini yavaşlatabilir. Katlamanın üstündeki herhangi bir şeyin yüklenebilmesi için önce yüklenmeleri gerekir.

Düzeltmenin birkaç yolu vardır:

• Yüklemeyi ertele
• Eşzamansız olarak yükle
• Bunları doğrudan HTML'ye satır içi yapın

İşte bu sorunu çözmek için kullandığım eklentiler.

otomatik optimize et

Bu eklenti küçültür (tüm gereksiz biçimlendirmeleri kaldırır ve dosyanın boyutunu küçültür ve tarayıcıya yükler) ve JavaScript, CSS ve HTML'nizi sıkıştırır. Süresi dolan başlıklar ekler ve bunları önbelleğe alır. Stillerinizi sayfa başlığına ve komut dosyalarını alt bilgiye taşıyacaktır. Gelişmiş ayarları kullanarak özel ihtiyaçlarınıza göre ayarlayabilirsiniz.

Bu aynı zamanda listedeki JS ve CSS'yi küçültmek gibi birkaç sorunu da çözecektir.

İlk başta HTML, JS ve CSS için temel ayarları açtım. Bu benim puanımı 88'e çıkardı ve sorunları 3 CSS kaynağına indirdi. Biri eklentinin kendisi tarafından oluşturuldu ve diğer ikisi Google fontlarıdır. Artık 7 kural geçiyor. Minify CSS ve Minify HTML'yi çözdü.

Daha İyi WordPress Küçült

Bu eklentinin asıl amacı CSS ve JS'nizi küçültmektir, ancak aynı zamanda dosyalarınızı altbilgiye veya diğer konumlara taşımanıza izin veren harika bir özelliğe sahiptir (bu yüzden onu seçtim). Tarayıcılar, eklentiler ve temalarla uyumluluğu geliştirmek için bir kuyruğa alma sistemi kullanır.

Onu kurduğumda, temamla ilgili tüm düzen ayarları kaldırıldı ve tüm menülerim, resimlerim, bağlantılarım vb. ekranın en solunda belirdi. Neyse ki, onu kaldırdığımda biçimlendirme geri döndü. Ayarlanması gereken ayarlarda bir şey olmuş olabilir. Bunun iyi bir eklenti olduğundan eminim çünkü 60.000'den fazla aktif yüklemeye ve 4.4/5 puana sahiptir. Bunu yalnızca, bazı kurulumlar olmadan ihtiyacınız olan şekilde çalışmayabileceğine dair bir uyarı olarak ekledim.

Puanım 88 olduğu ve 3 sorunun ne olduğunu bildiğim için bir sonraki probleme geçmeye karar verdim.

Görüntüleri Optimize Edin

Görüntü boyutu, sayfa yükleme hızında büyük rol oynar. Bazen çok daha küçük bir görüntü boyutu ve web'de görüntülendiğinde çok fazla görsel farklılık olmadan daha düşük kalite kullanabilirsiniz. Bu, yalnızca yükleme süresini hızlandırmak ve daha az bant genişliği kullanmakla kalmaz, aynı zamanda yedekleme süresini de hızlandırır ve sunucunuzdaki depolama alanını azaltır.

EWWW Görüntü İyileştirici

Bu eklenti, resimlerinizi yüklerken otomatik olarak optimize edecek ve resimlerinizi en küçük boyutu üreten biçime dönüştürecektir. Ayrıca, önceden yüklemiş olduğunuz resimleri de optimize eder. Ayrıca PNG ve JPG görüntüleri için kayıplı azaltmalar uygulayabilirsiniz.

Onu kurduğumda, bulmamı ve kurmamı istediği birkaç dosya vardı. Bu eklentinin kurulu tüm dosyalarla harika çalışacağını düşünüyorum, ancak kutunun dışında çalışan bir tane bulmaya karar verdim.

WP Sıkıştır

Bu eklenti, kaliteyi düşürmeden görüntülerin dosya boyutunu küçültür. Bunu gizli bilgileri çıkararak yapar. Dosyalarınızı analiz edecek ve size kaç tane görüntünün sıkıştırılması gerektiğini söyleyecektir. Onları toplu olarak ezebilirsiniz.

Ücretsiz sürüm, 1 MB'ın üzerinde hiçbir şeyi ezmez ve bir seferde yalnızca 50'yi sıkıştırır. Bundan daha fazlası için, bir seferde kaç tane sınırlama olmaksızın 32 MB'a kadar görüntüleri sıkıştıracak WP Smush Pro'ya ihtiyacınız olacak. Gerekirse orijinallerin yedeğini alır. Fiyatlar aylık 19 dolardan başlıyor.

Ezilmesi gereken 114 resmim vardı. Bu resimlerin 8 tanesi 1 MB'ın üzerindeydi. Bunları elle düzeltmeye karar verdim. 98 resmi ezdi ve dosya boyutunu 4,79 MB (%8,82) azalttı.

Bu puanımı 90'a çıkardı . Google Insights, beğenmediği 5 resim belirledi ancak hiçbiri 1 MB'ı geçmedi. 0,7 KB ile 17 KB arasında değişmektedir.

Görüntüleri Elle Optimize Etme

Yeniden boyutlandırarak, kaliteyi düşürerek ve formatı değiştirerek görüntüleri elle optimize edebilirsiniz. Görüntüleri işlemek için en sevdiğim ve en çok kullandığım araçlardan biri Paint.NET. Dosya boyutunu küçültmek için birçok özelliğe sahip, Windows için ücretsiz bir resim ve fotoğraf düzenleme uygulamasıdır. Senin favorin ne?

JavaScript, CSS ve HTML'yi küçültün

Bunu düzelttiğimi sanıyordum…

Diğer sorunlar üzerinde çalışırken, küçültülecek tek mesajın JavaScript için olduğunu gördüm. Resimlerimi optimize ettiğimde, üç sorunun tümü geri döndü. Ne olduğunu anlamak için adımlarımı geri takip ettim.

Better WordPress Minify'ı deneyip ardından tekrar kapatarak, CSS ve HTML'yi küçültme mesajlarım geri geldi. Puanım 88'e düştü ve şimdi 5 geçme kuralına geri döndüm. W3 Total Cache'in küçültme özelliklerini açtım ve artık tüm küçültme sorunlarını geçti. Şimdi 88 puanım vardı ve 8 kuralı geçti. Ayrıca, ekranın üst kısmında altı dosya vardı. Bunlardan birkaçını çözdüğümü biliyordum, bu yüzden bir şeyleri değiştirmiş olmalıyım.

Bazı sorun giderme işlemleri yaptım ve daha önce Better WordPress Minify ile ilgili sorun yaşadığımda Autoptimize'ı kapattığımı öğrendim. Autoptimize'ı tekrar açtım, W3 Total Cache'den küçültmeyi kapattım ve önbelleği temizledim (çok önemli bir adım!). Artık 90 puanımı geri aldım ve site 8 kuralı geçti. Ekranın üst kısmında üç CSS dosyası ve görüntüleri optimize etmek için bir mesaj vardı.

Geçmiş deneyimlerime dayanarak bu dosyalar üzerinde zaman kaybetmemeye karar verdim. Google'ın her boyuttaki resimden nefret ettiğini düşünüyorum (ne kadar küçük olursa olsun, boyutu küçültmek için hala bir mesaj alıyorum) ve Sayfa Puanı 46'dan 90'a çıkmak kitabımda bir kazanç. Sen öndeyken durmanın zor yolunu öğrendim.

Son skor

Son puanım 90/100 idi. Bu puanı almak için kullandığım eklentiler:

• Otomatik optimize et (tüm özellikler açık)
• W3 Toplam Önbellek (yalnızca sayfa önbelleğe alma özellikleri açık)
• WP Performance Score Booster (tüm özellikler açık)
• WP Smush (ücretsiz sürüm)

Kayıt için, mobil puan 36'dan 78'e çıktı. Bunu düzeltmek için resimlerimi ve dosyalarımı mobil için optimize etmem gerekiyordu.

Son düşünceler

Ziyaretçileriniz, Google ve diğer arama motorları, yavaş yüklenen web sitelerinden nefret eder. Google PageSpeed ​​Insights'ı kullanarak sorunların tam olarak ne olduğunu öğrenebilir ve nasıl çözüleceğine dair ipuçları alabilirsiniz. Google'ın nefret ettiği yavaş bir siteden Google'ın sevdiği hızlı bir siteye geçmek için ihtiyacınız olan tek şey bir avuç ücretsiz eklenti. Sadece deneme yaparken dikkatli olun – bazı eklentiler diğerleriyle iyi oynamaz.

senden haber almak isterim Google PageSpeed ​​Insights'ı kullanarak WordPress web sitenizi optimize ettiniz mi? Deneyiminiz benimki gibi bir şey miydi? Sorunları çözmek için farklı eklentiler kullandınız mı? Yorumlarda deneyimlerinizi duymak isterim.