WordPress Optimizasyon Kontrol Listesi

WordPress optimizasyonu, web sitenizi olabildiğince hızlı çalıştırma, kullanıcı deneyiminizi geliştirme, sunucu maliyetlerini düşürme sanatıdır ve SEO avantajlarına sahiptir.

Birçok araştırma, ziyaretçilerin bir web sitesinin yüklenmesini beklemek istemediğini ve yüklenmesi çok uzun sürerse web sitenizden atlamaya eğilimli olduklarını göstermektedir.

Bir web mağazanız varsa ve dönüşüm oranlarınızı artırmak istiyorsanız, hızlı yüklenen bir web sitesi sizin için özellikle önemlidir.

Amazon'daki testler de benzer sonuçlar ortaya çıkardı: Amazon.com'un yükleme süresindeki her 100 ms'lik artış, satışları %1 oranında azalttı (Kohavi ve Longbotham 2007)

Kaynak: https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

Web sitenizin yüklenme hızı da Google'daki sıralamanız için son derece önemlidir ve web sitesi optimizasyonunu SEO stratejinizin bir parçası haline getirir.

Ancak web sitem çok hızlı yükleniyor!

Elbette öyle. En azından senin için. Ancak uzun zamandır ilk kez web sitenizi ziyaret etmeyi denediniz mi?

Web sitenizde gezinirken, çoğu tarayıcınızda önbelleğe alınır. İlk kez deneyim yaşamak istiyorsanız, önbelleğinizi temizleyin veya tamamen farklı bir tarayıcı kullanın.

WordPress web sitenizin hızını artırabilecek pek çok şey var, hadi başlayalım.

Komut dosyalarını küçültme

WordPress web siteleri HTML, CSS, JavaScript ve görüntülerin birleşimidir. Önce HTML kodu yüklenir ve daha sonra CSS stil sayfalarının diğer dosyaları, JavaScript dosyaları ve resimler hakkında bilgi içerir.

Her dosya sırayla yüklenir. Bir tarayıcının normalde 2-4 "boru" sınırı vardır, yani tarayıcı, dosyaların barındırıldığı sunucudan aynı anda yalnızca 2-4 dosya yükleyecektir.

WordPress web sitenizin HTML kodunu incelerseniz, birçok farklı .css ve .js dosyası göreceksiniz. Bunların her biri genellikle farklı eklentilerden gelir ve her biri karışıma .js veya .css dosyaları ekler.

Bazı durumlarda eklenti JavaScript veya CSS stillerini doğrudan HTML'ye bile enjekte eder Çoğu WordPress eklentisi geliştiricisi veya tema yazarı bunu yapmayacak kadar zekidir.

Bu sadece normal bir WordPress web sitesinden bir örnektir. HTML kodunun diğer birkaç dosyaya bağlantıları vardır. Bu basit örnekte 4 JavaScript dosyası birer birer yüklenir.

<script type=”text/javascript” src=”https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2″></script >

WordPress, eklenti ve tema yazarlarının gerekli JavaScript ve CSS dosyalarını gömmesine izin veren dahili işlevlere sahiptir.

wp_enqueue_script() ve wp_enqueue_style(). İşlevlerin adları ne yaptıklarına dair sağlam bir ipucu verir. Eklenti ve tema yazarları, gerekli dosyaları gömmek için bunlardan herhangi birini kullanarak, dosyalarını diğer tüm eklentiler ve hatta WordPress'in kendisi ile birlikte sıraya koyar.

Diğer kitaplıkların herhangi bir bağımlılığının işlevlerini öğretmek de mümkündür, genellikle bir JavaScript içerme dosyası önce yüklenecek jQuery'ye bağlıdır.

Genellikle bir küçültme eklentisi bulup yüklerim, etkinleştirir ve ardından sitede herhangi bir şeyin bozulup bozulmadığına bakarım. Oradan tam olarak neyin başarısız olduğunu ve düzeltmek için birkaç ayarı değiştirmem gerekirse tam olarak belirlemeye gidiyorum.

Küçültücü eklentiler, başkalarıyla birlikte yüklendiğinde düzgün bir şekilde oynatılmayan belirli dosyalar için veya dosyaların yüklendiği yeri değiştirmek için, belgenin üstbilgisinde veya altbilgisinde dışlama ayarlarına sahip olma eğilimindedir.

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

Not: Kod örneğinde, temanın url'sini bir değişkende saklıyorum ve ardından bunu wp_enqueue_script işlevine ayrıştırıyorum. Bu, gereken PHP ve/veya veritabanı çağrılarının sayısını azaltarak hızı artırır.

Aşırı yükleme hızları arayışında, mutlak url yolunu sabit kodlamayı seçebilirdim, ancak bu, temayı yalnızca tek bir alanla sınırlar ve kodu başka bir sitede yeniden kullanmayı zorlaştırırdı.

Bir küçültme eklentisi yükledikten sonra, JavaScript ve CSS stil sayfaları artık daha az HTTP çağrısına katılıyor.

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

Bu, 4 dosyayı tarayıcınız için tek bir "dosya"/istekte birleştirir.

22 .css dosyasının yanı sıra 15 .js dosyasının yüklendiği WordPress tabanlı web sitelerine rastladım. Hepsi ön sayfada. Harici dosyaların miktarını azaltabilirseniz, hızdaki değişiklik şaşırtıcı olabilir.

Komut dosyalarının küçültülmesi büyük hız iyileştirmelerine sahip olma eğiliminde olsa da, aynı zamanda kurulumda en çok sorun yaratan tekniklerden biridir.

header.php'yi optimize edin

Temanızdaki header.php, WordPress web sitenizdeki her sayfada çağrılır. Bu dosya genellikle optimize edilebilecek birçok öğeye sahiptir.

Klasik bir örnek, harici dosyaları dahil etmek için temanın url'sini döndürmek için genellikle başlıkta birkaç kez çağrılan bloginfo('template_directory')'dir.

Daha verimli bir yöntem, url için tek bir istekte bulunmak ve ardından onu bir değişken olarak saklamaktır.

$template_directory = get_bloginfo('template_directory'); 

Tema dizininin url'si artık $template_directory değişkeninde saklanmaktadır.

Header.php verimliliğinin nasıl artırılacağına dair daha fazla örnek, WordPress header.php Optimizasyon İpuçları blog yazısında okunabilir.

Eklenti sayısını azaltmak

WordPress optimizasyonunun bir diğer önemli kısmı, etkinleştirilmiş eklentilerin sayısını mümkün olduğunca düşük tutmaktır. Pek çok kullanıcı için farklı eklentileri test etmek ve denemek gerçekten de WordPress'in faydalarından biridir.

Ancak, çok sayıda eklentinin etkin olması, WordPress web sitenizin hızını azaltabilir. Pek çok eklentinin tek bir işlevi vardır ve bu işlev, function.php'nize koyduğunuz bir kod parçasıyla da aynı şekilde kolayca işlenebilir.

Çoğu durumda yalnızca tek bir işleve ihtiyacınız olabilir, ancak kullandığınız eklentinin hiçbir zaman kullanmadığınız başka seçenekleri de vardır.

Sitenizdeki her eklentiyi analiz edin ve onlara ihtiyacınız olduğundan emin olun. Bunlara ihtiyacınız yoksa veya işlevler function.php koduyla değiştirilebilirse, eklentileri devre dışı bırakın ve silin.

Görselleri kullanmayın – CSS3 kullanın

Web sitelerinin tasarımı, kullanıcı arayüzünün oluşturulmasına yardımcı olmak için resimler kullanır.

CSS'nin ve özellikle CSS3'ün tanıtılmasından sonra, web arayüzleri için kullanılan birçok efekt, CSS ve HTML kodu kullanılarak taklit edilebilir.

[kutu]Not: Bu efektlerin çoğu, tüm tarayıcılarda, özellikle eski Internet Explorer'da uyumlu değildir (evet, her zaman herhangi bir web geliştiricisi için sorunlu çocuk). Web sitenizin hızını optimize etmek istiyorsanız, CSS efektlerini kullanmak hızlı ve hızlı bir çözüm olabilir, ancak müşterinin ana kitlesi eski tarayıcılar kullanıyorsa iyi bir seçim değildir.[/box]

B2C'yi (işletmeden tüketiciye) hedefleyen bir müşteri için çalışıyorsanız, Google Analytics'lerini kontrol etmeli veya onlara ne tür müşterilere sahip olduklarını (veya hedeflemek istediklerini) sormalısınız. Müşteri kitlesi genellikle eski tarayıcılar kullanıyorsa, bu, CSS3 efektlerini kullanıp kullanamayacağınızı etkileyebilir.

Elegantthemes.com kısa kod eklentisinin yeni bir sürümünü çıkardığında, CSS3 efektleri ve birden fazla görüntüyü tek bir hareketli grafik içine yerleştirmesi nedeniyle müşterilerimin yükleme süresi üzerinde büyük bir etkisi oldu.

Eskiden 90 görüntü içeren kısa kodlar/görüntüler klasörü, artık toplam boyutu 140 kb'den 15 kb'ye indiren tek bir PNG hareketli grafiğine sahip!
(Bu, boyutta yaklaşık %90'lık bir azalmadır.)

Sprite'lara ait resimler

Mevcut bir temanın hareketli grafiği optimizasyonu biraz zaman alabilir, ancak web siteniz için büyük bir hız iyileştirmesi de sağlayabilir.

Hareketli grafik, genellikle .PNG biçiminde, görsel tasarımınızın/düzeninizin çeşitli öğelerini içeren tek bir görüntüdür. Her bir grafik öğesini ayrı ayrı yüklemek yerine, tüm görüntüler mümkün olduğunca bir veya birkaç hareketli grafikte birleştirilir.

Bu teknik, yalnızca tasarımı düzenlemek için kullanılan görseller için kullanılmalıdır, tek tek yayınlanmış görseller, küçük resimler vb. için kullanılmamalıdır. Bir hareketli grafiğin içine koymaya çalışmanız gereken görseller, web sitenizin her sayfasında kullanılan görsellerdir.

Her bir resmi (farklı bir http isteği) yüklemek yerine, tüm resimler tek bir dosyada gruplanır ve her resmi görüntüleyen CSS, arka planı hareketli grafikte gerekli olan yere itmek için değiştirilir.

SpriteMe.org, sprite oluşturmak için mükemmel bir kaynaktır. En iyi yöntem önceden plan yapmak ve önce sprite'larınızı oluşturmaktır, ancak mevcut bir web sitesini düzeltmeniz gerekiyorsa, spriteme.org sitesinde süreci çok kolaylaştıran bir yer işareti bulunur.

Bir hareketli grafikle birlikte CSS stilleri örneği:

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

Her css stili aynı dosyaya başvurur, ancak arka plan konumu farklıdır ve görüntünün farklı bölümlerini gösterir.

Dağıt – CDN kullanın

Tema dosyalarınızı ve WordPress öğelerinizi barındırmak için bir CDN (İçerik Dağıtım Ağı) kullanmanın iki ana avantajı vardır.

Dosyalarınız farklı bir etki alanında olduğundan daha hızlı yüklenir. 2-4 eşzamanlı dosya indirme tarayıcı sınırı, her etki alanı içindir.

Bu nedenle, dosyalarınız farklı bir etki alanında barındırılıyorsa, bir tarayıcı bu dosyaları kendi kendine yükleyecektir, aslında web sitenizin daha hızlı yüklenmesini sağlarken etki alanınız ve ana makineniz üzerindeki yük stresini azaltır.

Diğer bir faydası ise, büyük bir CDN kullanıyorsanız, dünya çapında dağıtılmış sunuculara sahip olmalarıdır, bu sunucular daha sonra ziyaretçinizin nereden geldiğini tespit eder ve ardından onlara ağlarındaki en yakın sunucudan dosyalarınızı sunar.

Web siteniz için doğru sunucu

Web sitesini barındıran sunucunun hedef kitleye yakın olması gerekir. Bu nedenle, bir web sitesi Alman pazarını hedefliyorsa, Almanya'da veya en azından Orta Avrupa'da bir barındırma şirketi olan bir sunucu bulmak en iyisidir.

Bunun, bulundukları yere çok daha yakın bir sunucudan yüklenen ziyaretçileriniz için büyük bir etkisi vardır ve web sitenizde gezinmeyi çok daha hızlı hale getirir.

Bu, yalnızca sitenin daha hızlı yüklenmesi nedeniyle değil, aynı zamanda web sitesinin Alman izleyiciler için önemine katkıda bulunduğu ve dolayısıyla daha yüksek bir sıralamaya sahip olması gerektiği için de bir SEO etkisine sahiptir.

SEO açısından gerçek etkisi tartışılabilir ancak web sitenizin performansını artırmaya çalışıyorsanız, dikkate değer.

Bu, SEO'lar için iyi bilinir, ancak bir site kurulduktan sonra, tamamen SEO nedenleriyle başka bir sunucuya taşındığını görmek nadirdir. Yine de bir sonraki projeniz için akılda tutmaya değer.

404 hatalarını düzeltin

Zaten 404 - bulunamadı sayfalarınız olmadığından emin olmak için web sitenizi düzenli olarak kontrol ediyor olmalısınız. Web sitenizdeki kötü bağlantıları azaltmak, sunucu yükünü azaltabilir ve daha iyi bir kullanıcı deneyimi sunacaktır. Yalnızca bağlantılar ve sayfalar kaybolmakla kalmaz, bazen bir yazım hatası veya başka bir tür hata, web sitenizde bulunmayan içeriğin ortaya çıkmasına neden olabilir.

İpucu: Bulunamayan sayfaları otomatik olarak 301 yönlendirmesi için bu kod parçasına göz atın.

[kutu]
Bu sayfa henüz bitmedi ve WordPress optimizasyonunun tüm ayrıntılarını kapsamamaktadır – henüz. Amaç, WordPress sitenizden en iyi şekilde yararlanmak için ipuçları ve püf noktaları kaynağı oluşturmaktır.

Bir geliştirici değilseniz, hilelerden bazılarını veya çoğunu uygulamak zor olacaktır, ancak bunların her biri WordPress sitenizin daha hızlı çalışmasını sağlayacaktır.
[/kutu]

kontrol listesi

Bu kontrol listesidir, lütfen her web sitesinin ve projenin farklı olduğunu unutmayın. Tüm adımlar tüm web sitelerinde kullanılamaz.