WordPress Web Sitesi Performansını Geliştirmek için Gelişmiş İpuçları (Video ile)

Yayınlanan: 2021-02-26

Son güncelleme - 26 Temmuz 2021

Bir web sitesinin performansı, uzun bir doğrudan ve dolaylı faktör listesinden etkilenir. Görüntü boyutlarından önbelleğe alma ayarlarına kadar her faktör, temel kullanıcının deneyimine katkıda bulunur.

Bu faktörlerin her birinin etkisini analiz etmek zordur ve aralarında bir denge kurmak daha da zordur. Ancak şükür ki, WordPress web sitemizin perde arkasında gerçekte neler olup bittiğine dair varsayımları ortadan kaldırmak ve performansını artırmak için hedefe yönelik, etkili adımlar atmak için çevrimiçi araçları kullanabiliriz.

Bu makalede, WordPress web sitesi performansını iyileştirmek için izleyebileceğiniz çeşitli gelişmiş ipuçları hakkında bilgi edineceksiniz.

WordPress Web Sitesi Performansı için Araçlar

Bir web sitesi sahibi veya yöneticisi, WordPress web sitesinin performans denetimini yapmak istediğinde, en büyük zorluk, tüm sistemin nerede geride kaldığını tespit etmektir. Sonuçta, performans merceğiyle her bir eklentinin, temanın, WordPress ayarının ve kod parçasının üzerinden geçmek zaman alıcı ve etkisiz olabilir.

Ve neyi düzelteceğinizi bilmiyorsanız, nasıl düzelteceğinizi de bilmiyorsunuz.

Bu nedenle , web sitenizin performansı hakkında güvenilir ve faydalı veriler toplamak için Google'ın PageSpeed ​​Insights ve GTmetrix gibi çevrimiçi araçlarını kullanmayı düşünmelisiniz . İşte nasıl çalıştıkları:

  1. Yalnızca bir URL kullanan bu araçlar, bir web sitesinin performansına katkıda bulunan tüm faktörleri analiz eder ve bir puan veya not verir.
PageSpeed ​​Insights puanı
PageSpeed ​​Insights aracı, URL'yi analiz ettikten sonra bir puan belirler.
  1. Bu araçların her ikisi de WordPress web sitenizin performansını 3 ana açıdan (veya temel web hayati değerleri) test eder:
  • En Büyük İçerikli Boyama – bir görünüm alanında görünen en büyük görüntünün veya metin bloğunun oluşturma süresini bildirerek yükleme performansını ölçer. Bu ideal olarak ilk 2,5 saniye içinde gerçekleşmelidir.
  • İlk Giriş Gecikmesi – kullanıcının ilk etkileşimi ile tarayıcının ilk olay işleyici işlemesi arasındaki süreyi ölçerek etkileşimi ölçer. Bu metrik ideal olarak 100 milisaniyeden az olmalıdır.
  • Kümülatif Düzen Kayması – sayfanın ömrü boyunca meydana gelen beklenmedik düzen kaymalarını hesaba katarak görsel kararlılığı ölçer. Sayfanız 0,1'den düşük bir CLS puanı için çaba göstermelidir.
Wordpress web sitesi performansı için PageSpeed ​​Insights web hayati bilgileri
PageSpeed ​​Insights, temel web hayati bilgileri hakkında laboratuvar ve saha verileri sunar.
  1. Üç temel web hayati, çeşitli faktörlerden doğrudan ve dolaylı olarak etkilenir. Bu nedenle araç, web sitenizin performansını artırmak için odaklanabileceğiniz faktörleri de önerir.
PageSpeed ​​bilgileri raporu
Bu araçlar, web sitenizin iyileştirmeyi kullanabileceği belirli alanlara işaret eder.

Tabii ki, bu öneriler bir web sitesinden diğerine değişir. Ancak, bir web sitesinin performansı üzerinde yüksek etkisi olan, sık sık görünen birkaç faktörü her zaman fark edeceksiniz. Onlara bir göz atalım.

Anahtar İsteklerini Önceden Yükle

Ön yükleme, web sayfasını yüklemek için yakında gerekli olacak kaynaklar veya dosyalar hakkında web tarayıcılarına ipuçları veren bir sistemdir. Anahtar istekleri önceden yükleyerek, tarayıcı başka bir şey yaparken bu dosyalar ve kaynaklar aynı anda indirilir.

Bu, sayfa başlığındaki <link> öğelerine rel=”preload” özniteliği eklenerek yapılır. Ön* Parti Kaynak İpuçları gibi eklentiler, önemli isteklerin önceden yüklenmesini kolaylaştırır.

PageSpeed ​​Insights raporları sayfasında, "Anahtar isteklerini önceden yükle" önerisini genişletin. Ardından, bağlantıyı sağlanan kaynağa kopyalayın.

Ardından, WordPress kontrol panelinizde Parti Öncesi > İpuçları Ekle'ye gidin. Kopyalanan bağlantıyı URL alanına yapıştırın ve “Ön Yükle” seçeneğini etkinleştirin. Ardından, Kaynak İpucu Ekle'yi tıklayın.

Anahtar istekleri eklentisini önceden yükle
Parti Öncesi Kaynak İpuçları eklentisini kullanarak kaynak ipuçları ekleme.

PageSpeed ​​Insights raporunda görüntülenen tüm kaynaklar için işlemi tekrarlayın.

JavaScript ve CSS'yi Optimize Edin

JavaScript ve CSS, bir web sayfasının yapısının önemli bir bölümünü oluşturur. Bir web sayfasını oluşturmaları gerektiği kadar, onu yavaşlatmaya da katkıda bulunabilirler. Bu nedenle, kullanımlarını mümkün olduğunca optimize etmeniz önemlidir.

PageSpeed ​​Insights'ta genellikle aşağıdaki 4 JavaScript ve CSS optimizasyon önerisini görürsünüz:

  • Kullanılmayan JavaScript'i Kaldır – Ağ etkinliği tarafından tüketilen baytları azaltmak için kullanılmayan JavaScript'i kaldırın.
  • Kullanılmayan CSS'yi kaldırın – Ağ etkinliği tarafından tüketilen gereksiz baytları azaltmak için stil sayfalarından ölü kuralları kaldırın ve ekranın üst kısmındaki içerik için kullanılmayan CSS'nin yüklenmesini erteleyin.
  • JavaScript'i küçült – JavaScript dosyalarını küçültmek, yük boyutlarını ve komut dosyası ayrıştırma süresini azaltabilir.
  • CSS'yi küçült – CSS dosyalarını küçültmek, ağ yükü boyutlarını azaltabilir.
  • Oluşturmayı engelleyen kaynakları ortadan kaldırın - Kaynaklar, sayfanızın ilk boyasını engelliyor. Kritik JS/CSS'yi satır içi olarak teslim etmeyi ve kritik olmayan tüm JS/stillerini ertelemeyi düşünün.

Varlık Temizleme eklentisini kullanarak bu sorunları kolayca çözebilirsiniz. Kurduktan sonra Varlık Temizleme > CSS/JS Yöneticisi bölümüne gidin. Burada, belirli bir sayfadan veya tüm web sitesinden belirli CSS ve JavaScript dosyalarını kaldırmayı seçebilirsiniz. Eklenti, ayrı temalardan, eklentilerden, WordPress çekirdeğinden ve üçüncü taraf kaynaklardan gelen komut dosyalarını optimize etmenize olanak tanır.

Varlık Temizleme eklentisi
Varlık Temizleme eklentisi, JavaScript ve CSS'yi tamamen optimize etmenize olanak tanır.

"Ayarlar" bölümünde, CSS ve JavaScript'i küçültmek için daha fazla seçenek bulacaksınız. Ayrıca, oluşturmayı engelleyen kaynakları ortadan kaldırmaya yardımcı olan satır içi ve erteleme seçeneklerini etkinleştirmek için aşağı kaydırabilirsiniz.

İlk Sunucu Yanıt Süresini Azaltın

Kullanıcılar tarayıcılarında bir URL'ye gittiğinde, bu içeriği almak için tarayıcıdan bir ağ isteği gönderilir. Sunucunuz isteği alır ve sayfa içeriğini döndürür.

Bu aşamada, sunucunun istenen içeriğin tamamıyla bir sayfa döndürebilmesi için çok zaman alan işlevleri gerçekleştirmesi gerekebilir. Kullanıcıların sayfaların yüklenmesini beklerken harcadıkları zamanı azaltmanın bir yolu, sunucuyu bu işlemin mümkün olduğu kadar çabuk tamamlanmasını sağlayacak şekilde optimize etmektir.

PageSpeed ​​Insights şunları önerir:

  • Astra ve GeneratePress gibi optimize edilmiş temaları kullanma.
  • W3 Total Cache gibi optimize edilmiş eklentileri kullanma.
  • Sunucunuz yükseltiliyor.

Görüntü Optimizasyonu

Görüntüler, ortalama bir WordPress sayfasının sayfa ağırlığının yarısından fazlasına katkıda bulunur. Ayrıca, gönderilere ve sayfalara yayılan yüzlerce optimize edilmemiş görsel, web sitenizi gerçekten yavaşlatabilir.

Görüntülerin WordPress web sitenizin performansı üzerinde en az olumsuz etkiye sahip olduğundan emin olmak için boyutu, boyutları, sunum konumu ve biçimi gibi çeşitli görüntü özelliklerini değiştirebilirsiniz. Ayrıca, resmi yüklemeden önce bu değişikliklerden bazılarını yapabilir veya işlemi otomatikleştirmek için eklentileri kullanabilirsiniz.

Aşağıda listelenen görüntü optimizasyon tekniklerinden bazılarını kullanabilirsiniz:

  • Görüntü sıkıştırma – Kamera ayrıntıları ve meta veriler gibi gereksiz bilgileri kaldırarak kaliteyi etkilemeden dosya boyutunu küçültün.
  • Görüntülerin yeniden boyutlandırılması – Görüntü çözünürlüğünü web sayfasında gerekli olana kadar azaltın.
  • Görüntü CDN'si – Sunucu-kullanıcı boşluğunu kapatarak görüntüleri daha hızlı sunun.
  • Optimum görüntü biçimleri – Saydam arka plan, opaklık ve logolar ve simgeler için PNG'yi seçin. Diğer her şey için JPEG kullanın.

Daha fazla bilgi için konuyla ilgili derinlemesine görüntü optimizasyonu makalemizi okuyabilirsiniz.

Tarayıcı Önbelleğe Alma

Tarayıcı önbelleğe alma, sayfa başına istek sayısını azaltarak sunucu yükünün azaltılmasına yardımcı olabilir. Böylece resimler, CSS, JavaScript ve diğerleri gibi önbelleğe alınabilir kaynakların her seferinde indirilmesi gerekmez. WordPress web sitenizde tarayıcı önbelleğinden yararlanmak için W3 Total Cache gibi bir tarayıcı önbelleğe alma eklentisi kullanabilirsiniz .

Eklentiyi kurduktan sonra ayarlar sayfasına gidin. Burada, Tarayıcı Önbelleği seçeneğini etkinleştirmeniz gerekir. Ardından, kenar çubuğundan tarayıcı önbellek ayarlarına gidin. Ve sona erme başlığını, önbellek kontrol başlığını etkinleştirdiğinizden ve e-etiket seçeneklerini ayarladığınızdan emin olun.

Herhangi bir değişiklik yaptıysanız ayarları kaydedin.

W3 Toplam Önbellek tarayıcı önbelleğe alma
WordPress'te tarayıcı önbelleğinden yararlanmak için W3 Total Cache eklentisini kullanma.

Konu hakkında daha fazla bilgi edinmek için WordPress tarayıcı önbelleğe alma hakkındaki makalemize göz atın .

Çözüm

Bunların dışında, web sitenizin PageSpeed ​​Insights raporunda iyileştirmeler için başka birçok öneri olabilir. Ancak, bunları uygulama hakkında daha fazla bilgi edinmek için rapor sayfasındaki önerileri genişletebilirsiniz. Hala sorularınız varsa, aşağıdaki yorumlarda bize ulaşmaktan çekinmeyin.

Bir video versiyonunu tercih ederseniz, lütfen aşağıdaki videoyu izleyin:

Daha fazla okuma:

  • WooCommerce Web Sitenizi Bugün Hızlandırmak için 5 Basit Adım (Video ile)
  • Site Performansını Artırmak için En İyi Ücretsiz CDN Hizmetleri
  • 7 Kolay Adımda WordPress Web Sitesi Nasıl Kurulur
  • GTmetrix nasıl kullanılır?