WordPress için Sayfa Hızı Optimizasyonuna Yönelik En İyi Kılavuz

Bu kılavuzu izleyerek, bir WordPress sitesini büyük ölçüde hızlandırmak için tüm teknikleri öğreneceksiniz. WordPress'te harika bir sayfa yükleme süresine sahip olmanın işinize yarar sağlamasının en önemli nedenleri şunlardır: Kullanıcılar web sitenizi terk etmeyecek, orada daha fazla zaman ve para harcayacaklar ve arama motorları web sitenizi arama sonuçlarında daha iyi sıralayacaktır. Hazır?

giriş

İnternet kullanıcılarının sayfa yükleme süreleri konusunda fazla sabrı yoktur. Bir bağlantıya tıklıyoruz veya URL'yi giriyoruz ve bir, iki, üç saniye bekliyoruz ve hepsi bu. Google istatistikleri, kullanıcıların %50'sinin bir mobil sitenin 2 saniye içinde yüklenmesini beklediğini ve 3 saniyeden uzun yükleniyorsa, kullanıcıların %53'ünün sayfayı terk etme olasılığının yüksek olduğunu belirtiyor. Bir mobil cihazda bir ana sayfanın ortalama yükleme süresinin 19 saniye olduğunu (3G ağında) düşünürsek, bu çok kısa bir süre. Bilgisayarlarda yükleme süreleri daha hızlıdır ve ortalama yükleme süresi 5 saniyedir, ancak bu hala çok uzun.

Masaüstü web sitesi kıyaslamalarını referans almak artık bir bahane değil. Bugün web sitelerinin çoğu için trafiğin çoğu mobil cihazlardan geliyor. Bu yazıda, WordPress siteleri için sayfa hızı optimizasyonu için en güncel teknikleri tam olarak inceleyeceğiz. Bu kılavuzu izleyerek, WordPress sitesini hızlandırabilecek, mobil ve masaüstü yükleme sürelerini önemli ölçüde azaltabilecek ve bu nedenle siteyi çok daha kullanıcı dostu hale getirebileceksiniz.

Bir WordPress siteniz yoksa kılavuzu henüz kapatmayın. Bu adım adım kılavuzda açıklanan hız optimizasyon tekniklerinin çoğu, her tür web sitesine uygulanabilir.

İster çevrimiçi bir e-ticaret mağazası olsun, ister çevrimiçi/çevrimdışı hizmetler satıyor olun, siteniz para kazanma düşünülerek oluşturulduysa, potansiyel müşterileri kaçırmak asla iyi bir şey değildir. Temelde masaya para bırakıyorsun. Sayfa hızınızı artırmanın kazançlarınız üzerinde olumlu bir etkisi olmalıdır. Eğlenceli gerçek: Obama bağış toplama kampanyası, site optimizasyonu ile bağış dönüşümünü %14 artırdı ve sayfa yükleme süresini 5 saniyeden 2 saniyeye düşürdü.

Web sitesi sahipleri veya geliştiricileri olarak ziyaretçilerimizin en iyi deneyimi yaşamasını istiyoruz. Harika işlevselliğe sahip harika görünümlü siteler oluşturuyoruz, ancak genellikle hızlı bir web sitesinin önemini unutuyoruz. Hızlı bir web sitesi ziyaretçilerimizle güven oluşturur, bir ziyaretçinin sayfamızda daha uzun süre kalma şansını artırır ve bu nedenle daha fazla harcama yapabilirler. Öte yandan, web sitemiz yavaşsa, ziyaretçiler pes edebilir ve aynı derecede harika teklifimizle harika web sitemizi bile görmezler.

Yukarıdaki nedenler yeterince ikna edici değilse, bir tane daha var. Google ve diğer arama motorları (SE), yavaş bir web sitesine sahip olmanın arama motorunuzun sıralamasını aşağı çekeceğini ve daha az ziyaretçiyle karşı karşıya kalacağını açıkladı. Bu nedenle, hızlı bir web sitesine sahip olmak, Google'ın sizi daha çok seveceği anlamına gelir ve bu, SE sıralamanızı büyük ölçüde lehinize değiştirebilir.

Elbette, yükleme süreleri, örneğin ziyaretçinin internet hızı, ziyaretçinin konumu ve web sitemizin ne kadar "ağır" veya şişkin olduğu gibi birkaç nedenden dolayı değişiklik gösterir. Ziyaretçinin internet hızıyla ilgili yapabileceğimiz bir şey yok, ancak diğer yönleri halledebilir ve herkes için deneyimi iyileştirebiliriz. Bu kılavuzda, WordPress web sitemizi hızlı ve yalın hale getirmek için hız için nasıl optimize edeceğimize bakacağız, hadi başlayalım!

İçindekiler

• Vakıflar
  • WordPress Barındırma
    • Paylaşılan Evsahipliği
    • Yönetilen Barındırma
    • VPS veya Özel Sunucular
  • WordPress Teması
  • WordPress Eklentileri
• WordPress Sayfa Hızı Optimizasyon Adımları
  • Sayfa Hızı Araçları
    • Google PageSpeed ​​Insights
    • GTMetrix
    • Pingdom Web Sitesi Hız Testi
    • Web Sayfası Testi
  • Görüntü Optimizasyonu
    • Görüntü Optimizasyonu için Mini Kılavuz
    • Google PageSpeed ​​İçin Optimize Edilmiş Görseller
    • Diğer Görüntü İyileştirmeleri
    • Vaka Çalışması İyileştirmeleri
  • Tarayıcı Önbelleğe Alma
  • Kaynak Sıkıştırma (Gzip veya Deflate)
  • Gereksiz JS veya CSS dosyalarını kaldırın
  • Ekranın üst kısmındaki içerikte oluşturmayı engelleyen JavaScript ve CSS
  • Sunucu Tarafı Önbelleğe Alma
    • WP Rocket (sunucu tarafı önbelleğe alma eklentisi)
  • İçerik Dağıtım Ağı
    • bulut parlaması
• Nihai sonuçlar
• Çözüm

Vakıflar

Web sitenizi olabildiğince hızlı hale getirmek için, onu iyi temeller üzerine inşa etmeliyiz. Tıpkı bir ev inşa etmek gibi, onu da bataklık üzerine inşa etmek istemezsiniz ve başlangıçta sorun yaşarsınız. Sağlam temeller üzerine inşa etmek istiyorsunuz, bu yüzden uzun süre sorunsuz bir şekilde dayanacak. Kontrol edilecek üç ana şey şunlardır:

• barındırma
• WordPress teması
• WordPress eklentileri

WordPress Barındırma

Hosting, WordPress web sitenizin temelidir ve bu nedenle, halihazırda bir hostinginiz olsa bile göz ardı edilmemesi gereken çok önemli bir bileşendir. Daha iyi bir barındırma sağlayıcısına geçmek, WordPress yükleme sürenizi birkaç saniyeye kadar hızlandıracaktır.

Doğru web barındırıcısını seçmek önemlidir ve kararınızı barındırma fiyatına dayandırmamalısınız. Genellikle, düşük fiyatlarla düşük performans elde edersiniz ve bundan kaçınmak istediğimiz şey budur. Mevcut barındırma seçeneklerine bakalım ve farklılıkların neler olduğunu açıklayalım.

Paylaşılan Evsahipliği

Ucuz olduğu için bu en yaygın barındırma çözümüdür. Ama dediğimiz gibi düşük fiyatlar ile düşük performans alırsınız. Paylaşılan bir barındırmada, tek bir fiziksel sunucuda binlerce hesap vardır, bu da sunucu kaynaklarının bu barındırma hesapları tarafından oluşturulan tüm web siteleri arasında paylaşıldığı anlamına gelir.

Büyük bir pizza hayal edin (hmmm ?…), paylaşılan bir barındırmadaki her web sitesi çok küçük bir parça alır. Ancak sitenizin çok sayıda ziyaretçisi olduğu için daha fazla pizzaya ihtiyacı var! Hala aç ama pizza kalmadı :( çünkü diğer web siteleri de aç…

Sadece küçük bir dilim pizza almak yeterince kötü değilse, potansiyel güvenlik riskleri muhtemelen paylaşılan barındırma durumunu daha da kötüleştirecektir. Paylaşılan bir barındırmadaki virüslü bir web sitesi, tüm sunucu için hız ve performans sorunlarına neden olabilir ve WordPress sitenizi de tehlikeye atabilir.

Paylaşımlı barındırmalardaki sunucu yapılandırması çok sınırlıdır ve onu istediğiniz gibi yapılandırmak için çok fazla nefes alma alanınız yoktur. Sunucu belirli, genellikle çok genel ayarlara göre önceden yapılandırılmıştır ve WordPress'i sorunsuz çalıştırmalıdır. Daha sonra, bir eklentinin düzgün çalışması gerekeceğinden, bellek yetersizliği veya kısıtlı bir PHP ayarı biçiminde sorunlar ortaya çıkar.

Herhangi bir işletme web sitesi için paylaşımlı barındırmayı gerçekten tavsiye edemem, ancak zorunda kalırsam, çok düşük trafikli siteler için en uygun olduğunu söylemeliyim.

Yönetilen Barındırma

Bu, paylaşılan barındırmadan büyük bir yükseltmedir, çünkü web siteniz daha büyük bir pizza parçası alır (tam bir pizza dilimi, evet!), ancak maliyeti daha fazladır.

Yönetilen barındırmadaki sunucular daha az doldurulur ve bu, siteniz için daha fazla sunucu kaynağı anlamına gelir. Bu sunucular genellikle WordPress'i olabildiğince sorunsuz çalıştırmak için optimize edilmiştir, daha fazla belleğe, işlem gücüne ve yerinde bir önbelleğe alma sistemine sahiptir.

Bu yönetilen barındırma sunucularının donanım ve yazılım kurulumu ve yapılandırması, barındırma şirketi tarafından yapılır (dolayısıyla "yönetilen" kelimesi). Yedeklemeler, yük dengeleyiciler, olağanüstü durum kurtarma ve güvenlik kontrolleri/önlemeleri gibi diğer hizmetler de barındırma şirketinin teklifine bağlı olarak yönetilen barındırmanın bir parçası olabilir.

Düşük ila orta trafikli web siteleri için yönetilen WordPress barındırma önerilir.

VPS veya Özel Sunucular

Pizza benzetmesine sadık kalırsak, VPS (Sanal Özel Sunucu) ile birkaç pizza dilimi alırsınız, ancak tüm pizzayı değil ve özel sunucularla tüm pizzayı alırsınız.

Bu, adanmış sunucularla, tüm kaynaklarıyla ve VPS ile tüm sunucunun kontrolüne sahip olduğunuz anlamına gelir, fiziksel sunucu makinesini başkalarıyla paylaşmaya devam ettiğiniz için sunucunun bir kısmını alırsınız. WordPress için sayfa hızı optimizasyonu söz konusu olduğunda, WordPress'inizi VPS veya özel sunucuda kurarken sunucu tarafı sınırlaması yoktur. Web siteniz için tam olarak ne kadar kaynak bulunduğunu bilirsiniz ve onu beğeninize göre yapılandırabilirsiniz. Standart barındırma sağlayıcıları onları desteklemeden önce en son özellikleri uygulayabilirsiniz (bu, sunucu yazılımı teknolojisinin yıllarca gerisinde kalabilir).

Bu seçeneklerin her ikisi de daha fazla kontrol ve kaynak sunar, ancak aynı zamanda daha yüksek fiyatlara sahiptir ve uzun vadede bunları kurmak ve sürdürmek için daha fazla beceri gerektirir. VPS/Adanmış sunucular da yönetilebilir, bu nedenle birini kullanmak için bir sunucu gurusu olmanıza gerek yoktur. Yüksek trafik hacmine sahip web siteleri için uygundurlar.

Hangi barındırmayı seçeceğinizden emin değilseniz, gerekirse ölçeklenebilmesi (sunucudan daha fazla kaynak ayırabilmesi) gereken yönetilen WordPress barındırma seçeneğini öneririm.

Şimdiye kadar her iyi barındırma hizmetinin sunduğu ücretsiz bir web sitesi optimizasyonu, PHP sürümünü 7.x'e yükseltmektir. WordPress siteniz PHP'nin 7'den düşük, örneğin 5.6 veya daha eski sürümünde çalışıyorsa, lütfen barındırma desteğinizle iletişime geçin ve siteyi en son kararlı sürüme güncellemelerini isteyin. Yeni bir barındırma arıyorsanız, PHP sürüm 7.x'e sahip olup olmadıklarını desteklerini sorabilirsiniz. Hepsi kesin bir “evet” ile yanıt vermeli, ancak PHP 7.x kullanma seçenekleri yoksa, onlardan uzak durmanızı tavsiye ederim. PHP 7, eski sürümlerle karşılaştırıldığında, hız ve performans söz konusu olduğunda büyük bir gelişmedir ve buna geçiş yapmak çok kolaydır, bu nedenle bundan yararlanın.

İyi bir barındırma seçimi, sizi yolda çok fazla acıdan kurtaracaktır ve bir sorunla karşılaşırsanız, iyi bir müşteri desteği size yardımcı olabilir, bu yüzden iyi destek sunan bir ev sahibi seçmeyi de aklımda tutarım. . Kullanabileceğiniz hızlı bir numara: onlara satın alma öncesi bir soru sorun ve yanıt sürelerini, tutumlarını ve profesyonellik düzeylerini izleyin.

WordPress Teması

Sitemiz için bir WordPress teması seçerken, her zaman temanın tasarımıyla başlarız ve sorun değil. Öncelikle beğendiğimiz birkaç temayı seçmeliyiz çünkü sitemizin harika olmasını istiyoruz ve harika bir tasarım bir ziyaretçinin gördüğü ilk şey. İkinci şey muhtemelen temanın işlevselliğidir. Tema veya önerilen tema eklentileri istediğimiz işlevselliği sunuyor mu? Eğer öyleyse, harika! Biz işin içindeyiz! Neredeyse her zaman unuttuğumuz şey, temanın ne kadar hızlı yüklendiğini kontrol etmektir.

Tema demo sayfasının yükleme süresini test edebiliriz ve temanın hız için optimize edilip edilmediğini hızlıca görebiliriz. Aşağıdaki bölümde hangi sayfa hızı araçlarının kullanılacağını ve nasıl kullanılacağını kontrol edeceğiz, ancak şimdilik, satın almadan önce bu ekstra tema doğrulama adımını size bildirmek istiyorum. Tabii ki, demo sayfasının yüklenme süresi muhtemelen iyileştirilebilir, bu nedenle mükemmel bir puan alamazsanız endişelenmeyin, çok az içeriğe sahip olması dışında hiçbir WordPress teması %100 mükemmel bir puan alamaz. demo sayfasında. Genel bir kural olarak, kırmızı rakamlarda olmayan temaları aramalısınız (sayfa hızı araçlarında 50 veya daha düşük puan).

Tema tasarımı ve işlevsellik ile tema hızı arasında iyi bir denge vardır. Örneğin, biraz metin içeren boş bir WordPress teması çok hızlı yüklenir, ancak çok sayıda işlevselliğe sahip (çoğuna ihtiyacınız olmayabilir) ve çok sayıda multimedya içeriğine sahip şişirilmiş bir tema çok daha yavaş yüklenir. İyi ve performanslı bir WordPress teması seçerken bu tatlı noktaya ulaşmak hedeftir.

WordPress Eklentileri

Çok fazla ortaya çıktığını gördüğüm bir soru: “Kaç eklenti çok fazla?”. Sorun, WordPress eklentilerinin sayısında değil, kod kalitesinde ve eklentinin sistem üzerindeki etkisindedir. 50'den fazla aktif eklentiye sahip olabilirsiniz, eklentilerin her biri küçük bir özel işlevsellikle (iyi kodla) ilgilenir ve site sorunsuz çalışır. Öte yandan, 5 aktif eklentiniz olabilir ve bunlardan biri sisteminizi tıkayarak WordPress'inizi yavaşlatıyor olabilir.

Her bir eklentinin kodunu gözden geçirmek iyi bir fikirdir, ancak “kimsenin buna vakti yok” , ayrıca bunu yapmak için iyi bir programlama bilgisine ihtiyacınız olacaktır. Bu yola girerseniz, dikkat etmeniz gereken şeyler birçok harici kaynağı sıkıştıran, çok sayıda HTTP isteği yapan, gereksiz (optimize edilmemiş) veritabanı sorguları yapan vb. (temelde WordPress web sitesini yavaşlatacak herhangi bir şey) eklentilerdir. arkasında uygun bir sebep olmadan).

Önereceğim şey, ihtiyacınız olduğunu düşündüğünüz her eklentiyi kurup etkinleştirmemenizdir.

Öncelikle bir düşünün, sitenizin bu ek işlevselliğe gerçekten ihtiyacı var mı? Örneğin, bir düğme kısa koduna ihtiyacınız varsa, tema belgelerinize bakın, belki temanın bunun için bir kısa kodu vardır ve yalnızca tek bir düğme kısa kodunu kullanmak için tüm bir kısa kod paketi eklentisini yüklemeniz ve etkinleştirmeniz gerekmez. Bu önemsiz bir örnek, ancak yeni eklentileri kurmadan ve etkinleştirmeden önce düşünmenizi istiyorum. Doğrulanmamış her eklenti sitenizi ağırlaştırabilir ve dolayısıyla daha yavaş hale getirebilir, ayrıca eklentinin kötü kodlanması veya bakımının yapılmaması durumunda güvenlik ihlaline yol açabilir.

Son olarak, eklentiyi seçerken yararlanabileceğiniz harika bir şey, büyük bir WordPress küresel paylaşımı ve dolayısıyla büyük bir topluluktur. Kodlama bilgisi eksikliği nedeniyle, çok sayıda etkin yükleme, iyi bir ortalama derecelendirme puanı ve olumlu incelemeler içeren popüler eklentilere bağlı kalmak iyi bir kuraldır. Diğer WordPress kullanıcıları seçiminizi çok daha kolay hale getirecek!

WordPress Sayfa Hızı Optimizasyon Adımları

Optimizasyona başlamadan önce birkaç şeyden bahsetmek istiyorum.

İlk olarak, WordPress sitenizin bir yedeğini oluşturmalısınız, işte bunu bir WordPress eklentisi ile nasıl yapacağınıza dair bir kılavuz. Eşeği sağlam kazığa bağlamak!

İkinci olarak rehberimizde kullanacağımız sayfa hızı araçlarında 100/100 puan beklememeniz konusunda sizi uyarırım. 100/100 puanının peşinden gitmek iyi bir fikir değil, hatta bazı sitelerde mümkün değil. Her şey sitenizin ne tür içerik gösterdiğine bağlıdır. Bir sitede yalnızca biraz metin ve resim varsa, o zaman kesinlikle mükemmel bir puan tamamen mümkündür. Ancak, çok sayıda multimedya içeriği ve google maps vb. gibi diğer 3. taraf uygulama entegrasyonları olan uzun bir sayfanız varsa, o zaman 100 puan gözünüz üzerinde değildir ve bunun peşinden gitmemelisiniz.

100/100'e gitmek neden iyi bir fikir değil? Sayfa hızı araçlarının talimatlarını izler ve her şeyi söyledikleri gibi optimize ederseniz, siteniz düzgün çalışmayabilir. Engelleyen tüm JS veya CSS dosyalarını altbilgiye taşırsanız, CSS yanıp sönmesi görünür (ilk önce stili belirlenmemiş içerik görünür ve CSS yüklendiğinde site yerine "flaşlanır"), aynısı JS kodunda da olur , bu, JS kodu yüklendikten sonra herhangi bir DOM öğesini değiştirir.

Talimatları körü körüne takip ederseniz ve yalnızca mükemmel puanı almak için daha iyi bir yükleme süresi için WordPress sitenizi optimize etmeye devam ederseniz sitenizi bozabilirsiniz. Mükemmel sayfa hızı puanı, yalnızca bir sayıdır ve ziyaretçileriniz bozuk bir siteyle sonuçlanırsa aslında önemli değildir. Sayfa hızı ve kullanıcı deneyimi arasındaki dengeyi aramalıyız.

WordPress sayfa hızı optimizasyonunun gösterimi için paylaşılan barındırma hesabımı ve tıbbi WordPress temamızı (tema önerilen eklentilerle) kullanacağız. Evet, evet, temelde paylaşılan bir barındırma kullanmamamı söylediğimi biliyorum, ancak neler yapabileceğini ve sınırlamalarının neler olduğunu göreceğiz, ayrıca bu yalnızca bir sayfa hızı optimizasyonu testidir, gerçek bir iş WordPress web sitesi değil

WordPress'in en son sürümünü, MedicPress temasını, önerilen tüm eklentileri yükledim ve demo içeriğini içe aktardım. Bu, test sitesi için başlangıç ​​noktamızdır.

Sayfa Hızı Araçları

Sayfa hızı optimizasyonu zor olabilir, ancak çok şükür hayatımızı kolaylaştıran ve web sitemizin hızını artırmak için bize ne yapmamız gerektiğini öneren çevrimiçi araçlar var.

WordPress'inizi hız için optimize etmenin ilk kuralı şudur: her zaman ölçün!

Aşağıdaki bölümde inceleyeceğimiz araçları (veya en az birini) her optimizasyon adımından sonra çalıştırın ve iyileştirmeleri takip edin. Bu şekilde, hangi görevlerin en büyük iyileştirmeleri sağladığını bileceksiniz. Ayrıca gerçek ortalama yükleme süresini görmek için testleri birden çok kez çalıştırmalısınız.

Barındırma sunucusunun bulunduğu yere bağlı olarak sayfalar farklı yüklenir. Örneğin, sunucunuz Kuzey Amerika'da bulunuyorsa ve ziyaretçi Avrupa'dan ise, sayfa onun için Kanadalı bir ziyaretçiye göre daha yavaş yüklenir. Bu sorun bir CDN (İçerik Dağıtım Ağı) ile çözülebilir, ancak buna makalenin ilerleyen bölümlerinde bakacağız. Şimdilik, bu sorunun tüm dünyadaki ziyaretçiler için ve ayrıca sayfa hızı optimizasyon araçları için mevcut olduğunu belirtmek istedim. Bazı araçlar, testi farklı konumlardan gerçekleştirmenize de olanak tanır, böylece bunun yükleme süresini nasıl etkilediğini görebilirsiniz.

İnceleyeceğimiz sayfa hızı araçları şunlardır:

• Google PageSpeed ​​Insights
• GTmetrik
• Pingdom Web Sitesi Hız Testi
• Web Sayfası Testi

Başka araçlar da var, ancak bunlar en popülerleri ve biz onlara bağlı kalacağız.

Google PageSpeed ​​Insights

Bu aracın başlığından da görebileceğiniz gibi, bu bir Google ürünüdür. Skorun (masaüstü ve mobil cihazlara bölünmüş) ve sayfa yükleme sürenizi iyileştirmek için ne yapmanız gerektiğine ilişkin faydalı talimatların yanında, Google'ın bir web sitesinde görmekten hoşlandığı şeyler hakkında da bir sonuca varabiliriz. Arama motoru sonuçlarında iyi sıralamak için bir web sitesinde hangi şeylerin optimize edilmesini ister.

Optimize edilmemiş resimleriniz veya kaynak dosyalarınız (JS veya CSS) varsa, optimize edilmiş benzerleriyle sunucunuzda değiştirebileceğiniz bir zip dosyası oluşturur. Oldukça temiz, değil mi? Resim ve kod optimizasyonuna daha sonra bakacağız, sadece Google PageSpeed'in bu konuda size yardımcı olabileceğini bilin.

Google PageSpeed ​​Insights, diğer araçlar gibi çok fazla ayrıntılı bilgiye sahip değildir, ancak sayfa hızı optimizasyonunun tüm önemli yönlerini kapsayan iyi bir başlangıç ​​noktasıdır. Sitenizi en çok geliştirecek adımları listeler.

Bu aracı test sitemizin URL'siyle çalıştırdım ve masaüstü için 71 ve mobil için 67 puan aldım, bu nedenle iyileştirme için yer var. Olası optimizasyon önerileri listesi şunları içerir:

• Sıkıştırmayı etkinleştir (kaynakları gzip veya deflate ile sıkıştırma),
• görüntüleri optimize et,
• sunucu yanıt süresini azaltmak,
• ekranın üst kısmındaki içerikte oluşturmayı engelleyen JavaScript ve CSS'yi ortadan kaldırın,
• JavaScript'i küçültün.

GTmetrik

Bu araç, hangi şeylerin optimize edilip hangilerinin optimize edilmediği hakkında size daha ayrıntılı bilgi verir. Her optimizasyon ayrıntısı listelenir ve 0-100 arası bir ölçekte derecelendirilir. Liste önem sırasına göre sıralanmıştır, bu nedenle görevleri yukarıdan aşağıya doğru takip ederseniz ve %100 puanı olmayanları optimize ederseniz, WordPress sitesini olabildiğince çabuk hızlandırmak için iyi bir yolda olacaksınız.

GTmetrix, PageSpeed ​​ve YSlow test araçlarını kullanarak sayfanız için puanlar oluşturur ve iyileştirilmesi gereken görevleri görüntüler. Bu aracın güzel bir özelliği de, sitenizin nasıl yüklendiğini grafiksel olarak gösteren ve darboğazları daha hızlı tespit edebileceğiniz Şelale raporudur. Aşağıdaki resimde yavaş paylaşımlı hostingimin ilk bilgilerle yanıt vermesinin 1.13 saniye sürdüğünü görebilirsiniz. Bu çok uzun, ama bunu iyileştirebileceğiz.

Ayrıca sayfanızı dünyanın 7 farklı noktasından test edebilirsiniz, bu hem güzel hem de test edilmesi gereken önemli bir şey, yazının ilerleyen kısımlarında göreceğimiz gibi.

Test sitemizde GTmetrix aracını (konum: Vancouver, Kanada) çalıştırdım ve PageSpeed ​​puanı 77 ve YSlow puanı 71 aldım. Bu araçla, şu yararlı bilgileri de alıyoruz:

• Tam yükleme süresi: 3.1s,
• Toplam sayfa boyutu: 803KB
• İstekler: 54

İlgili birçok bilgiyi tek bir yerde bulabildiğiniz için en çok GTmetrix aracını seviyorum. Bu kılavuzda optimizasyon ilerlememizi ölçmek için esas olarak GTmetrix aracını kullanacağız.

Pingdom Web Sitesi Hız Testi

Pingdom, optimizasyon bilgilerini biraz farklı gösteren başka bir araçtır. GTmetrix aracındakiyle aynı temel özet verileri alırsınız (YSlow puanı olmadan). Pingdom ile 4 farklı lokasyonda sayfa hızını test etme seçeneğiniz var. Sonuçların tümü her konum için farklıdır, bu da sunucu konumunun önemli olduğunu gösterir, ancak bunu da iyileştirebileceğiz (makalenin ilerleyen bölümlerinde CDN ile). Pingdom testleri daha hızlı tamamlandığından, mevcut 4 konumdaki sayfa yükleme sürelerini test etmek için Pingdom aracını kullanacağız.

Pingdom ayrıca içerik boyutu veya istek sayısı gibi içerik türüne veya etki alanına göre filtrelenmiş bazı ilginç tabloları da görüntüler ve ayrıca bir şelale raporuna sahiptir.

Web Sayfası Testi

WebPageTest aracı, önceki araçlardan daha fazla yapılandırma seçeneğine sahiptir. Aralarından seçim yapabileceğiniz daha fazla konuma sahiptir, bir internet hızı seçilebilir, birkaç tarayıcı seçeneğini etkinleştirebilir/devre dışı bırakabilir ve belirli cihazları test edebilirsiniz.

Her çalıştırma için ayrıntılı bir şelale raporu görüntüleyen iyi bir araçtır (varsayılan olarak 3 çalıştırma yapar, ancak bunu ayarlardan değiştirebilirsiniz) ve bu hız optimizasyon faktörlerinin her biri için A'dan F'ye bir derece görüntüler:

• İlk bayt zamanı (yanıt zamanı),
• canlı tutma etkin,
• sıkıştırma transferi (gzip),
• görüntüleri sıkıştırmak,
• statik içeriği önbelleğe alma,
• CDN'nin etkin kullanımı.

Birçok yararlı bilgi bulabileceğiniz tüm sonuç sekmelerini kontrol ederek ayrıntılara gidebilirsiniz. Ayrıntılı bir rapora ihtiyacım olsaydı veya sitelerinde bulunan bir konumu test etmem gerekirse bu aracı kullanırdım, aksi takdirde GTmetrix'in daha özlü bilgilere sahip olduğunu düşünüyorum.

Bu aracı test sitemiz için çalıştırdım. Sonuçları aşağıdaki ekran görüntüsünde görebilirsiniz:

Daha popüler sayfa hızı araçlarına baktık ve ilk sayfa hızı testlerini yaptık, böylece nihayet WordPress sitemizi optimize etmeye başlamaya hazırız. Referans olarak, hız optimizasyonu ilerlememizi ölçmek için kullanacağımız sayfa hızı araçlarından alınan başlangıç ​​noktası sonuçları şunlardır:

• Google PageSpeed ​​Insights
  • Mobil: 67
  • Masaüstü: 71
• GTmetrik
  • Sayfa Hızı: 77
  • YSyavaş: 71

Görüntü Optimizasyonu

Bu muhtemelen site performansının en çok göz ardı edilen yönüdür ve aynı zamanda site hızınızda en büyük iyileştirmeyi sağlayabilir. Resmi WordPress sitenize yüklemeden önce optimize etmeyi hiç düşünmüyorsanız, bu WordPress yükleme süresi optimizasyonunuz için harika bir ilk adımdır.

Web sitenizde küçük bir yerde kullanılan büyük, optimize edilmemiş görseller yüklemek büyük bir "hayır hayır"dır. Örnek: Sitenizde 600 x 400 pikselden büyük olmayacak bir resim alanınız var ve 1920 x 1080 piksellik (hatta daha büyük!) bir resim yüklüyorsunuz. Şimdi bu hatayı birkaç kez tekrarlarsanız siteniz çok yavaşlar.

Yapılacak ilk şey, görüntüyü uygun boyuta yeniden boyutlandırmaktır. Örneğimizde, görüntü yuvası asla 600 x 400 pikselden büyük olmayacak, bu nedenle görüntüyü bu boyuta yeniden boyutlandırmalıyız.

"Bu kadar, iş bitti, değil mi?" Hayır. Görüntüyü daha da geliştirebiliriz. Görüntüyü kalitesini kaybetmeden optimize eden (sıkıştıran) birçok araç vardır (gözümüz bu araçlarla kalite kaybını tespit edemez). Bu aynı zamanda görüntü dosyasının boyutunu da önemli ölçüde azaltacak ve daha hızlı yüklenmesini sağlayacaktır.

Görüntü sıkıştırma, manuel olarak veya WordPress eklentileri ile yapılabilir. İş arkadaşım Marko, görüntü optimizasyonu için olağanüstü bir kılavuz yazdı, bu nedenle makalesinden elde edilen bilgileri kullanacağız ve görüntülerinizi optimize etmek için kullanabileceğiniz teknikleri hızla gözden geçireceğiz.

Görüntü Optimizasyonu için Mini Kılavuz

Doğru görüntü biçimini seçin – çevrimiçi kullanım için en popüler görüntü biçimleri JPEG ve PNG'dir. Doğru görüntü biçimini seçerek görüntü dosyası boyutundan çok tasarruf edebilirsiniz (Marko makalesinde %45 tasarruf sağladı). Kullanmalısın:

• Fotoğraflar, gradyanlı görüntüler ve milyonlarca renkli görüntüler için .jpg formatı.
• Sınırlı renklere (logolar) ve saydamlığa sahip görüntülere yönelik .png biçimi.

Resimlerinizi yeniden boyutlandırın – Yukarıda bahsettiğim gibi, resimleri WordPress sitenize yüklemeden önce her zaman yeniden boyutlandırmalısınız. İlk olarak, görseli kullanacağınız alanın ne kadar büyük olduğunu kontrol edin ve buna göre yeniden boyutlandırın. GIMP veya Photoshop gibi bir görüntü işleme programı ile görüntüleri yeniden boyutlandırabilirsiniz.

Resimlerinizi sıkıştırın – Bu, çevrimiçi bir resim sıkıştırma aracı veya bir WordPress eklentisi ile yapılabilir:

Çevrimiçi sıkıştırma aracı : Marko, Optimizilla çevrimiçi aracını önerir. Resimlerinizi Optimizilla uygulamasına yükleyin ve işlem tamamlandıktan sonra optimize edilmiş resimleri indirin, ardından WordPress sitenize yüklemeniz gerekir. Bu biraz sıkıcı geliyor, bu yüzden elbette bu işlemi basitleştirebilecek bir WordPress eklentisi var.

WP görüntü sıkıştırma eklentisi : Marko yine en popüler görüntü sıkıştırma eklentilerini test etti ve kazananı açıkladı: ShortPixel Image Optimizer. Eklentiyi yükledikten sonra, eklentiyi kullanmak için bir API anahtarı istemeniz gerekecek (çok basit bir işlem). Eklentinin varsayılan ayarları harikadır, bu nedenle herhangi bir şey ayarlamanıza gerek yoktur, Medya -> Bulk ShortPixel'e gidin ve “Optimize Etmeyi Başlat” düğmesine tıklayın. Yeni yüklenen herhangi bir resim de optimize edilecektir. Not: Bu eklentinin ücretsiz sürümü ayda yalnızca 100 görüntü optimizasyonuna izin verir, daha fazlasına ihtiyacınız varsa ücretli planlarına geçmeniz gerekir. Müşterilerimizin piyasadaki en iyi araçlara erişmesini istiyoruz, bu nedenle ShortPixel ile ortaklık kurduk ve şimdi ProteusClub üyelerimiz de ShortPixel WordPress eklentisi ile kullanmak üzere 1.000 krediye ücretsiz sahip oluyor.

Son olarak, WordPress'te görüntü optimizasyonu ile ilgili makalenin tamamını okumanızı yeterince tavsiye edemem.

Google PageSpeed ​​İçin Optimize Edilmiş Görseller

Bu, WordPress sitenizdeki mevcut resimlerinizi nasıl optimize edeceğinize dair alternatif bir yoldur. Yukarıdaki, Görsel Optimizasyonu için Mini Kılavuz bölümündeki adımları izlediyseniz, muhtemelen görselleri zaten optimize etmişsinizdir ve bu nedenle Google PageSpeed'de sizin için herhangi bir görsel olmayacaktır. Aferin! Bu bölümü yine de bilgi amaçlı okuyabilirsiniz.

Google PageSpeed ​​aracının tanıtımında, Google'ın sitenizde kullanabileceğiniz optimize edilmiş dosyalar içeren bir zip dosyası oluşturduğundan bahsetmiştim. Zip dosyasını bu linke tıklayarak indirebilirsiniz:

Bu zip dosyasında, optimize edilmiş görüntülerin bulunduğu image adlı bir klasörünüz var. Bunları FTP veya barındırma dosya yükleyiciniz aracılığıyla yükleyebilirsiniz. Doğru yükleme klasörlerindeki resimleri değiştirin/üzerine yazın (…/wp-content/uploads/…). Bundan sonra, WordPress sitenizde bu resimlerin daha küçük versiyonlarını (küçük resimleri) de oluşturmalısınız. Bunu Küçük Resimleri Yeniden Oluştur eklentisi ile yapabilirsiniz.

Diğer Görüntü İyileştirmeleri

Bu bölümde, bazı ekstra performansı sıkıştırmak için yararlanabileceğimiz, resimlerle ilgili bazı iyileştirmelere bakacağız.

Tembel Yükleme Resimleri

Tembel Yükleme, görüntülerin eşzamansız olarak yüklendiği görüntüleri yüklemek için bir tekniktir. Ekranın üst kısmında olmayan resimler sayfa yüklenirken yüklenmez (bunlar daha sonra veya yalnızca ihtiyaç duyulduklarında yüklenirler). Bu, sayfanın üst kısmında görünen resimlerin yüklendiği, diğer resimlerin (görülmeyen) ise sayfa yüklendikten sonra veya kullanıcılar sayfayı aşağı kaydırdıkça (istek üzerine) yüklendiği anlamına gelir. Çok sayıda resim içeren uzun bir sayfanız varsa, bu teknikle çok fazla ilk sayfa yükleme süresinden tasarruf edebilirsiniz.

Tembel yükleme, bazı özel kodlarla veya bir WP eklentisi ile uygulanabilir. Daha sonra WP Rocket önbelleğe alma eklentisini kullanacağız ve tembel yükleme özelliği de var.

Görüntü Bağlantısı

Hotlink nedir? Başka bir sunucuda barındırılan bir resmi görüntülüyor. Örneğin, çok popüler bir gönderi varsa ve o gönderide güzel bir imajınız var. Bir ziyaretçi (hırsız), resim kaynak URL'sini kopyalayabilir ve kendi sitesinde kullanabilir. Bu, görüntünün sunucunuzdan isteneceği ve sunulacağı anlamına gelir. Hırsızı 100 ile çarparsanız, sunucunuzun yanıt vermesi gereken ve sunucunuzu yavaşlatabilecek binlerce harici isteğiniz olur.

Bu doğrudan bir sayfa hızı optimizasyonu değil, bir sunucu optimizasyonudur. Hotlink sorununu .htaccess dosyasındaki bazı kodlarla çözebilirsiniz. Bir adım daha ileri gidebilirsin (biraz kötü olabilirsin) ve çalınan görüntüyü başka bir görüntüyle değiştirebilirsin, belki o kadar da hoş olmayan bir görüntü :). Bu, .htaccess dosyasında da yapılabilir. Sunucunuzda .htaccess dosyanızı açın ve bu kodu ona ekleyin. Web siteniz.com'u alan adınızla, google.com'u resimlerinize erişmesine izin vermek istediğiniz başka herhangi bir alanla değiştirin ve http://replacing-stolen-image-url-goes-here.jpg ile değiştirin çalınan resimler için görüntülemek istediğiniz resim URL'si ile.

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ http://replacing-stolen-image-url-goes-here.jpg [NC,R,L]

Çalınan görüntüyü kendi özel görüntünüzle değiştirmek istemiyorsanız bu kodu kullanın. Bu, resmi web sitelerinde devre dışı bırakacaktır:

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Vaka Çalışması İyileştirmeleri

Görselleri optimize ettikten sonra test sitemizle şimdiye kadar kaydettiğimiz ilerlemeye bir göz atalım. Bildiğiniz gibi, test sitemiz olarak kullandığımız medikal temamız için demo verilerini içe aktardım. Bu demo görüntüler doğru dosya biçimlerini kullanıyordu ve zaten doğru boyutlandırılmışlardı, bu yüzden bu iki adımı atlayabildim. Yeni bir resim yükleyecek olsaydım, onları atlamazdım!

Bu yüzden ShortPixel eklentisini kurdum ve toplu optimize ediciyi çalıştırdım. Eklenti, ortalama %38'lik bir görüntü optimizasyonu bildirdi. Bu harika!

PageSpeed ​​Insights aracını çalıştırdım ve Google bazı resimlerin daha da sıkıştırılabileceğine dikkat çekti, bu yüzden kendi tavsiyeme uydum, Google'ın benim için hazırladığı resimleri kullandım ve FTP aracılığıyla sunucuma yükledim.

Görüntüler sıralandıktan sonra sayfa hızı araçları sonuçları şöyleydi:

• Google PageSpeed ​​Insights
  • Mobil: 72
  • Masaüstü: 77
• GTmetrik
  • Sayfa Hızı: 81
  • YSyavaş: 71

Demo verilerinde kullanılan görseller zaten oldukça optimize edildiğinden büyük bir gelişme değil, ancak yine de hedefimize bir adım daha yaklaştık. Sitenizde optimize edilmemiş görseller varsa, bu görsel optimizasyon adımı size puanlarda büyük bir artış sağlayacak ve sayfa yükleme süresini azaltacaktır.

Tarayıcı Önbelleğe Alma

Bir kullanıcı tarayıcı aracılığıyla sitenizi ziyaret ettiğinde, siteyi ziyaretçiye gösterebilmek için tüm kaynakları (HTML, resimler, JS, CSS,…) sunucunuzdan indirmesi gerekir. Aynı kullanıcı sitenizdeki başka bir sayfayı ziyaret ettiğinde, CSS ve JS dosyaları genellikle aynı kalır, ancak uygun bir sunucu yapılandırmanız yoksa tarayıcı bunları sunucunuzdan tekrar indirebilir.

Proper caching headers and expiration dates should be set on your server, to allow static resources (JS, CSS and other files) to be stored in the browser's cache. This greatly improves the performance for returning visitors or for visitors who look at more than one page on your site.

Usually, the hosting servers have that already configured. If the page speed optimization tools report that you are missing the “Leverage browser caching” optimization or something like that, then it's best to contact your hosting company and let them know that you want to set-up browser caching for your site. They will be able to sort that out for you or at least point you to the right direction on how to do that yourself.

If you want to do things yourself, then you have to know that these browser caching settings vary, depending on the server type your hosting company is using. A good starting point for Apache servers is the .htaccess file of the HTML5 Boilerplate project (check out the “Expires headers” section). An nginx configuration is available as well.

My shared hosting account has browser caching already configured, so there is nothing for us to do on our test site.

Resource Compression (Gzip or Deflate)

Files sent from your server (HTML, JS, CSS, …) to your visitors can be compressed, so that they can be transferred faster, which improves your page speed. This can be done by enabling Gzip or Deflate compression on your server.

You can contact your hosting support and ask them, if they can enable resource compression for your site or you can configure it yourself, but be sure you know which server type your hosting is using. We can again look at the HTML5 Boilerplate project for some tips, they have default server configs for each of the major server types. For example, my hosting is using Apache server, so I found this compression config. I've copied the content of this config, I've located the .htaccess file for my WordPress site via the FTP (it's in the root of your WP installation) and I copied it at the end of the file.

I've re-run the page speed tools, after I've enabled the resource compression for my WordPress site and here are the results:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrik
  • PageSpeed: 96
  • YSlow: 82

As you can see, we've improved our scores by a fair amount and all we did, was enable the resource compression, which did not take a lot of time. By compressing resources, we change the total page size from 803KB to 476KB, which is awesome! We made another step towards an optimized site, so let's continue.

Remove unneeded JS or CSS files

If you are using plugins, which include JS or CSS files on all your pages and you actually are not using the plugin features on those pages, then it's best to remove them. This can be done with custom code in your child theme, but I would recommend that you use a plugin for that. It's much easier!

The plugin that will help us do that is WP Asset CleanUp. After you install and activate this plugin, go and edit your home page. Home pages are usually the “heavier” pages, so we will look at it for our example, but you can do that for other pages as well.

Under the page content editor, you will see a section called WP Asset CleanUp . This section will list all CSS and JS files that are included on your front page. Now, your job is to find out, which of these files are not needed on your WordPress front page.

For example, in our test site, we are using the Contact Form 7 plugin, but we are only using the contact form on our “Contact Us” page, so we can safely remove (unload) its CSS and JS files from our home page. I can do the same with WooCommerce assets, since we are not using them on our home page as well. You should look at each asset in the list and check, if you can unload it. Watch out for the files with the red exclamation icon, you should probably never unload these, since they are core WordPress files and they are needed for the site to work properly. This is how my home page Assets CleanUp settings looks like:

I was able to safely remove 11 assets, which will save 11 resource requests when a page loads and that will improve the page speed.

Re-run of page speed test tools showed, that Google PageSpeed Insights score did not change (because it also did not list this as a recommended optimization), but the GTmetrix score did improve:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrik
  • PageSpeed: 97
  • YSlow: 86

Our site also loads faster, it now needs 2.7 seconds to load the whole site (in the beginning it took 3.1 seconds). We are improving the WordPress site speed slowly but surely. Bear in mind, I'm using one of our WordPress themes for the test, which are built from the ground up to be performing out of the box. If you're using some other WordPress theme, where the author didn't put any efforts to optimize it for speed, your improved loading speed results will most probably be much greater at this point.

With removing unneeded JS and CSS files from our home page, we improved our scores, load time, number of request and the total page size as well. Aferin!

Render-blocking JavaScript and CSS in above-the-fold content

One of the optimizations that Google PageSpeed Insights suggests is also: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. This is a tricky one. Remember when I said, that it's not good to chase a perfect score in the page speed tools? This is one of the reasons for that.

If we look at our example, the Google tool suggests that the Page Builder front-flex.css should be deferred or loaded asynchronously. We are using the Page Builder by SiteOrigin plugin for building content in our pages. So, if this file is responsible for making our layout of the page look good, then I might not respect Google suggestion and simply ignore it.

“But why would you disrespect Google? How dare you!” Well, this is only a tool and it gives you suggestions on what to do, but it does not know, if implementing some of these changes will break your site or ruin good user experience (UX) for your visitors. For example, if the tools had suggested that we load the style.css file with all the theme styles asynchronously, then it would have created the FOUC: Flash of unstyled content:

This is a bad UX, so I would ignore the suggestion from the tool and keep a good UX instead of improving our score. After all, Google is also using other factors it can gather from your website to rank it in the search results and user experience is one of them. When optimizing the website for speed, don't follow the recommendations blindly and forget about all the other aspects and goals your WordPress website has.

If the files that the tool suggests to be loaded asynchronously are valid candidates and they don't break anything, then of course we can implement that change. The best way is to just try to asynchronously load each suggested file and see, if the page still loads ok. Don't forget to reload the page without browser cache, so that a fresh copy of the page loads. You can do that by hard refreshing your site.

We will look at how to load files asynchronously in the WP Rocket plugin section below. There are other standalone plugins that offer this functionality, but since the WP Rocket has it build in, we don't need to pollute our WP installation with more plugins.

Server Side Caching

We've already talked about browser cache, but now we also have to take care of the server side cache. To understand server side caching we have to know the basics of how WordPress works, so let's look at that first.

When a visitor opens a WordPress page, the following things happen (basic explanation):

1. Server receives a page request.
2. WordPress PHP code begins to execute.
3. WordPress access the database to get the information it needs to build the requested page.
4. WordPress produces the HTML.
5. Server responds with the HTML for the browser to display it to the visitor.

These 5 steps have to be repeated for each page view, for each visitor. That's a lot of repetitive work for content that stays the same for each visitor (if your site is displaying mostly static content, which majority of websites is).

Server side caching eliminates pretty much all the server's hard work. It removes the need for repeating steps 2,3 and 4. So, when we enable server side caching, the process of a page request looks like this:

1. Server receives a page request.
2. Server retrieves the page HTML from the cache (if a cached version is available).
3. Server responds with the HTML for the browser to display it to the visitor.

As you can see, the hard work of running the WordPress code and accessing the database is bypassed, which means that the page loading time should be much faster.

If we look at the Google PageSpeed Insights tool suggestions, we will spot the “Reduce server response time” task. The tool says that our server responded in 0.98 seconds, which is not good. The slow shared hosting I'm using is definitely to blame for some chunk of that 1 second response time, but we'll be able to shorten it with server side caching.

Each page cache is usually saved with an expiration time of 24 hours, but that setting can be changed. This means that instead of thousands of page requests running the whole WordPress HTML building process, it will only be run once a day, to generate that cached page and the server will serve that cached page to other visitors. So, not only the page will be quicker, but the server will also have to do less work.

If you are updating a page in WordPress and an old cached version of the page is still available on your server, then you would have to clear that cache manually (usually with the click of a button) or some tools would do that for you automatically.

Some hosting companies already have a server side caching in place for their users, but this feature is usually available for managed WordPress hosting packages. So, before you follow instructions below, on how to setup server side caching, you should make sure that your server is not doing that for you already.

We will look at how to setup the WP Rocket plugin to enable server side caching and other features that it has (like lazy loading images, loading assets asynchronously, minification of JS and CSS files and much more). WP Rocket is a premium (paid) plugin, but I believe it's worth the investment. If you don't agree with me, that's fine WP Super Cache is a good free alternative, but it does not have the same extra features as WP Rocket and it's a little bit more cumbersome to setup.

WP Rocket (server side caching plugin)

As soon as we install and activate the WP Rocket plugin it will have some basic features enabled out of the box:

• Caching of all the pages for quick viewing.
• Decrease bandwidth usage with our GZIP compression.
• Management of the headers (expires, etags…).

The WP Rocket plugin default settings are a good starting point.

I've run the page speed tools a couple of times, so that they picked up the cached version of the site and these are the new results:

• Google page speed insights
  • Mobile: 91
  • Desktop: 97
• GTmetrik
  • PageSpeed: 97
  • YSlow: 87

The Google PageSpeed Insights tool no longer displays the “Reduce server response time” optimization suggestion, because we reduced it from 1 second to 121ms, that's a 88% improvement in server response time, just by activating the WP Rocket plugin! With this improvement, our fully loaded time is now 1.9 seconds, but we are not stopping here

WP Rocket eklentisinin sunduğu ayarlara bakalım. WP Rocket, üst WP yönetici menü çubuğunuzda güzel bir kısayol menüsüne sahiptir. Buradan ayarlar sayfasına erişebilir, önbelleği temizleyebilir ve bu eklentiyle ilgili diğer faydalı bilgilere erişebilirsiniz.

Devam etmeden ve farklı WP Rocket ayarlarını denemeden önce, yaptığınız her değişiklikten sonra sitenizi gizli/özel bir tarayıcı sekmesinde doğrulamanız gerektiğini belirtmek isterim. WordPress sitenize giriş yaptıysanız, sitenin önbelleğe alınmış sürümünü görmezsiniz. Gizli tarayıcı sekmesinde oturum açmazsınız ve sitenin önbelleğe alınmış bir sürümünü alırsınız, böylece çalışıp çalışmadığını kontrol edebilirsiniz.

Ayrıca, kullandığınız temaya veya eklentilere bağlı olarak, her WP Rocket ayarını etkinleştirmenin WordPress hızınızda farklı sonuçları ve hatta olumsuz etkileri olabileceğini bilin, bu nedenle yalnızca tüm WP Rocket ayarlarını etkinleştirmek doğru yol değildir. Farkı görmek için her ayarı denemeli ve sayfa hızı araçlarıyla ölçmelisiniz. Göreceğiniz gibi bazı teknikler sayfa hızımızı artırmaz, bu nedenle onları kullanmayacağız.

Önbelleği Temizle

WP Rocket eklentisini aktif ettiğiniz anda sunucu tarafı önbelleğe alma çalışmaya başlayacak, o halde gelin nasıl temizleyebileceğimize bakalım. WP Rocket kısayol menüsündeki “Önbelleği temizle” menü öğesine tıklarsanız, önbelleği manuel olarak temizleyebilirsiniz. Eklenti ayrıca, özelleştirici ayarlarını güncellediğinizde, widget'ları, kategorileri değiştirdiğinizde/güncellediğinizde... ve bir sayfayı güncellediğinizde önbelleği kısmen temizlediğinizde otomatik olarak önbelleği temizlemeyle ilgilenir. Otomatik önbellek temizlemenin ne zaman gerçekleşeceği hakkında daha fazla bilgi için lütfen bu WP Roket sorusuna bakın.

Önbelleğin, WP Roket ayarlarının “Temel” sekmesinde ayarlanabilen bir ömrü vardır. Bunu 1 gün olarak ayarlamanızı öneririm.

Önbelleği önceden yükle

WP Rocket'in güzel bir özelliği, ana sayfanızın ve bağlantı verdiği sayfaların önbelleğini önceden yükleyen “Ön yükleme önbelleği”dir, böylece kullanıcılarınız her zaman sayfanın önbelleğe alınmış bir sürümünü alır. Sayfa hızı araçlarını çalıştırmadan önce bu özelliği kullanabilirdim ve önbelleğe alınmış sürüm sonuçlarını almak için araçları birden çok kez çalıştırmam gerekmezdi.

Önyükleme önbelleği ayarlarına, "Önyükleme" sekmesi altındaki ayarlar sayfasından erişilebilir. “Bot'u önceden yükle” seçeneğini arayın, orada bir manuel ve otomatik seçenek bulacaksınız. Otomatik bot seçeneğini etkinleştirirseniz, her sayfa güncellediğinizde veya oluşturduğunuzda veya önbelleğin süresi dolduğunda ön yükleme önbelleği çalışır. Bu seçenek sunucunuzun performansını etkileyebilir, bu nedenle etkinleştirirseniz performans günlüklerine göz atın. Güncelleme yapıyorsanız ve çok sayıda gönderi/sayfa oluşturuyorsanız ve paylaşılan bir barındırma hizmetiniz varsa, bu seçeneği etkinleştirmemenizi tavsiye ederim. Bunun yerine sadece manuel bot seçeneğini etkinleştirmelisiniz; bu, “Önbelleği Önyükle” başlıklı başka bir WP Rocket kısayol menü öğesi oluşturacak ve önbelleği yalnızca üzerine tıkladığınızda (yazıları ve sayfaları düzenlemeyi bitirdikten sonra) önceden yükleyecektir.

"Ön yükleme" ayarları sekmesinde, bir site haritasından önbelleği önceden yüklemek için ayarları da bulacaksınız, böylece bir site haritası tanımlayabilirsiniz ve bu sayfalar için önbelleği önceden yüklemek için site haritasındaki URL'leri kullanır.

tembelYük

Tembel yükleme resimlerini bu makalenin resim optimizasyonu bölümünde zaten açıkladım, ancak artık WP Rocket'i yüklediğimize göre, bu özelliği gerçekten etkinleştirebiliriz. WP Rocket ayarlarının “Temel” sekmesine gidin ve görüntüler için LazyLoad'u etkinleştirin ve herhangi bir video veya iframe kullanıyorsanız, bunu da etkinleştirebilirsiniz.

Bu özelliği etkinleştirdikten sonra her zaman sitenizi kontrol etmeli ve resimlerin nasıl yüklendiğini görmelisiniz. LazyLoad, site düzeninizi bozabilir veya resimlerin nasıl yüklendiğini beğenmeyebilirsiniz (içerik atlama), bu nedenle her zaman sayfalarınızı kontrol edin. Bu özellik, ekranın alt kısmında çok sayıda görüntü olduğunda gerçekten kullanışlıdır ve orijinal sayfa yüklemesinde görüntü isteklerinin sayısını azaltmanıza yardımcı olur. Test sitemizde ekranın alt kısmında yalnızca 5 resim var, bu nedenle 5 resim isteği kaydettik ve sayfa yükleme süremiz şimdi 1,7 saniyeye düştü, sayfa hızı araçlarının puanları aynı kaldı. Bu, araçların önermediği belirli görevlerle sayfa hızınızı artırabileceğinizin iyi bir göstergesidir.

Dosyaları Küçült

Hala geliştirebileceğimiz GTMetrix önerilerinden bazıları HTML, CSS ve JS dosyalarını küçültmek. WordPress temamız ve önerilen eklentilerin çoğu zaten JS/CSS dosyaları için küçültülmüş sürümler kullandığından ve sunucumuzda Gzip etkinleştirildiğinden, bu WP Roket optimizasyonu test sitemiz için önemli bir iyileştirme getirmeyecektir, ancak durumunuz olabilir farklı. WP Roket ayarlarında “Statik Dosyalar” sekmesine gidin ve Dosyaları küçült seçeneği altındaki 3 seçeneğin tümünü işaretleyin. Ayarları kaydedin ve web sitenizi gizli/özel bir sekmede kontrol edin, böylece bu seçeneklerin sitenize getirebileceği sorunları arayabilirsiniz. Test WordPress sitemde, CSS küçültme, sayfa oluşturucu flexbox css dosyası sıralamasını bozdu, bu yüzden CSS küçültme dosyası seçeneğini devre dışı bırakmak zorunda kaldım. HTML ve JS seçenekleri iyi çalıştı.

WP Rocket desteğine sorunun ne olabileceğini sordum ve sitemde bu sorunu ayıklamak için yeterince iyilerdi. Sorun, paylaşılan barındırmada kullanılan Vernik önbelleğinden kaynaklanıyordu. Barındırma sunucumdaki Vernik yapılandırmasını değiştirmeyi önerdiler . Barındırma desteğimle iletişime geçtim ve şüphelendiğim gibi, paylaşılan barındırmamdaki Varnish yapılandırmasını değiştiremiyorum, ancak VPS barındırma paketine yükseltirsem bunu yapabilirim. Gördüğünüz gibi, paylaşılan bir barındırma kullanmak iyi bir fikir değil

CSS veya JS küçültmeyle ilgili bazı sorunlarınız varsa, sorunlara neden olan dosya URL'sini hariç tutulan JS veya CSS dosyaları kutusuna ekleyebilirsiniz. Sorunlardan sorumlu dosyayı bulmak zor olabilir, ancak genellikle hangi işlevselliğin bozulduğunu ve bu işlevsellikten hangi eklentinin sorumlu olduğunu bilirsiniz, bu nedenle sayfa kaynak kodunuzu kontrol eder ve bu eklentinin içerdiği dosyaları inceleyebilirsiniz. Eklentinin birden fazla JS veya CSS dosyası varsa, bunları hariç tutulanlar listesine eklemeyi deneyebilir ve sorunun çözülüp çözülmediğini görebilirsiniz.

JS ve CSS dosyalarını birleştirin

GTmetrix aracındaki YSlow sekmesi bize “Daha az HTTP isteği yapın” diyor. WordPress'imizin 9 harici JS betiği kullandığını ve bunları 1'de birleştirmeye çalışmamız gerektiğini ve sayfanın 4 harici CSS dosyası kullandığını ve bunları da 1 dosyada birleştirmeye çalışmamız gerektiğini söylüyor. Hatırlarsanız, bu makalenin Gereksiz JS veya CSS dosyalarını kaldır bölümünde zaten gereksiz JS ve CSS dosyalarını kaldırmıştık.

Tüm JS ve CSS dosyalarını tek bir dosyada birleştirmek iyi bir fikir değildir, çünkü tarayıcılar 6 küçük dosyayı paralel olarak 1-2 büyük dosyadan daha hızlı indirebilir. Diğer bir neden ise, bazı dosyaların HTML belgelerinin başında ve diğerlerinin belgenin sonunda yer almasıdır, bu yüzden onları en az 2 dosyaya bölmeniz gerekir.

Dosyaları WP Rocket ile birleştirmek için eklenti ayarlarında “Statik dosyalar” sekmesine gidin ve Dosyaları birleştir altındaki seçenekleri etkinleştirin. Her zaman olduğu gibi, herhangi bir sorun olup olmadığını kontrol etmek için sitenizi gizli/özel bir tarayıcı sekmesinde doğrulayın.

Örneğimizde, WP Rocket, yukarıda bahsedilen paylaşılan barındırma Varnish yapılandırma sorunu nedeniyle yine sorunlar yaşadı, bu yüzden JS birleştirme dosyaları seçeneğini devre dışı bırakmak zorunda kaldım.

Yine, CSS veya JS birleştirme ile ilgili bazı sorunlarınız varsa, yukarıdaki küçültme adımında olduğu gibi, sorunlara neden olan dosya url'sini hariç tutulan JS veya CSS dosyaları kutusuna ekleyebilirsiniz.

Statik kaynaklardan sorgu dizelerini kaldırın

GTMetrix, bazı proxy sunucuları kaynakları sorgu dizeleriyle önbelleğe almadığından, sorgu dizelerini statik kaynaklardan kaldırmamızı önerir.

Statik bir kaynaktaki (genellikle JS veya CSS dosyası) sorgu dizeleri, söz konusu dosyanın sürümünü işaretleyen bir URL özelliğidir. Şuna benzer: ?ver=2.5.8 ve URL'nin sonuna eklenir: http://domain.com/css/front-flex.css?ver=2.5.8

Bu sorgu dizilerini WP Rocket ile kolayca kaldırabiliriz. Eklenti ayarlarının "Statik dosyalar" sekmesine gidin ve Sorgu dizelerini kaldır seçeneğini etkinleştirin.

Bu seçeneği etkinleştirdikten sonra GTmetrix PageSpeed ​​puanımız 98 olarak değişti ancak sayfa yükleme süresi değişmedi.

Oluşturmayı engelleyen CSS/JS

Geriye kalan tek Google PageSpeed ​​Insights aracı önerisi, "Ekranın üst kısmındaki içerikte oluşturmayı engelleyen JavaScript ve CSS'yi ortadan kaldırın". Bu, ekranın üst kısmındaki içerikte sayfanın yüklenmesini engelleyen bazı JS veya CSS dosyalarının olduğu anlamına gelir. Aracın bizden yapmamızı istediği şey, bu engelleme kaynaklarını ertelemek veya eşzamansız olarak yüklemektir.

Bir kez daha WP Rocket eklentisi kurtarmaya geliyor. "Statik dosyalar" sekmesine gidin ve Oluşturmayı engelleyen CSS/JS seçeneklerini arayın. Orada bu sorunu çözebilecek JS ve CSS seçeneklerini etkinleştirebilirsiniz. JS seçeneğini etkinleştirdiğinizde, Güvenli mod (önerilen) seçeneği görünecektir. Bu güvenli mod, jQuery kitaplığını (WP varsayılan kuyruğa alınmış kitaplık) sayfanın başına yükleyerek onu bir engelleme dosyası olarak bırakır, ancak sayfada satır içi jQuery kodu olan sayfaları bozmaz. JQuery hala kafada yüklü olduğundan, PageSpeed ​​aracı hala oluşturmayı engelleyen bir JS dosyamız olduğundan şikayet ediyor.

Bu nedenle, test sitemiz için güvenli modu devre dışı bırakırsam, Google PageSpeed ​​aracı bize mobilde 100 ve masaüstünde 100 olmak üzere mükemmel bir puan verir. Harika, değil mi? Pek sayılmaz! Web sitemiz hala düzgün çalışıyor, ancak web sitesinin nasıl yüklendiğine bir bakalım:

Stilsiz içeriğin flaşı (FOUC), WP Roket ayarlarında (oluşturmayı engelleyen CSS/JS seçeneğinin hemen altında) Kritik yol CSS seçeneği kullanılarak düzeltilebilir. Teori, sayfanın ekranın üst kısmındaki kısım için gerekli olan CSS kodunu ekleyebileceğinizdir, böylece biçimlendirilmemiş metnin bu flash efekti sayfa yüklendiğinde görünmeyecektir. Bu göründüğünden daha zor. Bu kritik CSS'yi sizin için oluşturması gereken araçlar var, ancak onlarla pek başarılı olamadım.

Kritik yol CSS kodunu oluşturmak için:

1. Sitenizde WP Rocket eklentisini devre dışı bırakın.
2. Kritik Yol CSS Oluşturucu aracına gidin.
3. Site URL'nizi girin ve çalıştırın.
4. Kritik yol CSS kodunu kopyalayın.
5. WP Rocket eklentisini etkinleştirin.
6. WP Roket ayarlarında CSS kodunu “Kritik yol CSS” kutusuna yapıştırın.
7. Kritik CSS kodunda göreli URL yolları olup olmadığını kontrol edin ve bunları mutlak yollarla değiştirin.

WordPress test sitemizin yüklenmesi şu şekilde görünür:

Daha iyi, ama yine de sevmiyorum. Evet, 100/100 Google PageSpeed ​​puanı harika, ancak toplam yükleme süresi daha yavaş ve ayrıca bu oluşturmayı engelleyen CSS/JS seçeneğini etkinleştirdiğimiz için 2 isteğimiz daha var. Benim için asıl sorun hala sayfa yüklemesinin kullanıcı deneyimi, bu yüzden bu WP Roket seçeneğini devre dışı bıraktım.

WP Rocket, sitenizi hızlandırmak için tüm özelliklere sahip olduğundan kesinlikle her WordPress web sitesi sahibinin kullanması gereken bir eklentidir. Sadece eklentiyi etkinleştirmek size büyük bir destek sağlayacaktır. Her tema ve eklenti, karışıma kendi sorunlarını getirebileceğinden, diğer özellikler her web sitesi için test edilmelidir.

Optimizasyon adımlarımızın neredeyse sonuna geldik. Geriye kalan tek şey, web sitemizin varlıkları için bir CDN kullanmaktır.

İçerik Dağıtım Ağı (CDN)

Bu yazıda birkaç kez bahsetmiştim, sayfa yükleme süreleri sunucunun konumuna ve ziyaretçinin konumuna bağlı olarak farklılık gösterir. Örneğin, test için kullandığımız paylaşımlı barındırma sunucum Austin, Texas (ABD)'de bulunuyor ve bu makalenin Pingdom sayfa hızı aracı bölümünün başında 4 konumu test ettik. Sonuçlar burada:

• Dallas, Teksas (ABD) = 1,65 sn
• San Jose, Kaliforniya (ABD) = 2,53 sn
• Stockholm, İsveç (AB) = 3,06 sn
• Melbourne (AUS) = 5,38 sn

Bu makalede bahsedilen tüm adımlarla siteyi optimize ettiğimize göre, yükleme sürelerimiz:

• Dallas, Teksas (ABD) = 0,63s
• San Jose, Kaliforniya (ABD) = 0.76s
• Stockholm, İsveç (AB) = 1,21 sn
• Melbourne (AUS) = 2,24 sn

Bu süreleri, sitemizi bir CDN kullanacak şekilde kurduğumuzda WordPress yükleme süremizi karşılaştırmak için kullanacağız.

Bu zamanların çok farklı olduğunu görebiliriz; bunun nedeni, verilerin sunucu konumumuzdan Avustralyalı ziyaretçiye, Dallas'taki bir ziyaretçiye göre daha uzun bir yol kat etmesi gerektiğidir. CDN'nin bu yükleme sürelerini azaltmamıza yardımcı olacağı yer burasıdır.

CDN, coğrafi olarak dağıtılmış sunucu proxy'leri ve veri merkezleri ağıdır. Birincil amaçları, site içeriğinizi ziyaretçiye en yakın sunucudan ziyaretçilerinize dağıtmaktır. Bu, web sitenizin statik içeriğinin (resimler, JS, CSS, …) dünyaya yayılmış sunucuları tarafından sunulacağı ve sitenizin herkes için daha hızlı yüklenmesini sağlayacağı anlamına gelir.

Bir WordPress CDN'sinin kullanılması, aşağıdakiler de dahil olmak üzere çok sayıda avantaja sahiptir:

• Azalan gecikme, yani mesafenin seyahat etmesi gereken zaman ve/veya gecikme.
• Tarayıcının sunucudan ilk veri baytını almadan önce ne kadar beklemesi gerektiğinin bir ölçüsü olan ilk bayta (TTFB) kadar geçen süreyi azaltır.
• Daha hızlı sayfa yükleme süreleri ve barındırma (başlangıç) sunucunuzda daha az zorlama için önbellekten içerik sunar.
• Çoğullama, paralellik, sunucu gönderme ve HPACK sıkıştırmasından yararlanmak için güvenli bağlantılar üzerinden HTTP/2'yi kullanır.
• Daha küçük HTML, stil sayfaları ve JavaScript dosyaları sağlamak için verileri GZIP veya Brotli ile sıkıştırır.

Bugünlerde CDN'ler, özellikle güvenlik departmanında bir dizi başka özellik sunuyor. Genellikle DDoS koruması, bot algılama/önleme vb. sunarlar.

Cloudflare adlı daha popüler CDN'lerden birine bakacağız. Küresel CDN'lerinin kullanımını içeren ücretsiz bir paket sunuyorlar ve ihtiyacımız olan da bu.

bulut parlaması

Önce cloudflare.com'a gidin ve yeni bir ücretsiz hesap için kaydolun. Bir hesap oluşturduktan sonra, statik içeriğinize (varlıklarınıza) hizmet etmesi için web sitenizi Cloudflare üzerinde kurmanız gerekecektir.

Yeni Cloudflare hesabınıza giriş yaptığınızda, DNS kayıtlarını otomatik olarak almak için web sitenizi (alan adınızı) eklemeniz istenecektir.

Etki alanınızı girin ve “Taramaya Başla”ya tıklayın. Bir alt etki alanı ( speed.gregorcapuder.com ) kullanmama rağmen, yalnızca kök etki alanını girmem gerekiyordu: gregorcapuder.com . Tarama bölümünün tamamlanması yaklaşık bir dakika sürdü ve bu arada neler olup bittiğini açıklayan kısa bir video izleyebilirsiniz. Tarama işlemi tamamlandıktan sonra “Devam” butonuna tıklayabilirsiniz.

Bir sonraki adımda, Cloudflare'ın alanımız için bulabileceği tüm DNS kayıtlarını göreceksiniz. Burada eksik olabilecek kayıtları eklemeniz gerekiyor, bu nedenle listeyi gözden geçirin ve eksik bir şey olup olmadığını kontrol edin. Örneğimizde hız alt alanı eksikti, ben de listeye ekledim. Ad girişine "speed" (alt etki alanımın adı) yazdım, IPv4 adresine ana etki alanım (gregorcapuder.com) ile aynı IP adresini girdim ve ardından "Kayıt Ekle" ye tıkladım. Aşağıdaki ekran görüntüsünde görebileceğiniz gibi, ana etki alanım ve hız alt etki alanı için Cloudflare'ı etkinleştirdim (bulutun arkasında bir ok bulunan turuncu bir bulutla işaretlenmiştir). Bu, bu iki web sitesinde trafiğin Cloudflare tarafından yönetileceği ve korunacağı anlamına gelir.

DNS kayıtlarıyla işiniz bittiğinde, “Ücretsiz Web Sitesi” planını seçip devam ettiğiniz bir sonraki adıma geçebilirsiniz.

Web siteniz için Cloudflare'ı etkinleştirmenin son adımı, alan adı kayıt sitenizin kontrol paneline (alan adınızı satın aldığınız yer) giriş yapmak ve alan adınızın ad sunucularını değiştirmektir. Yeni ad sunucularının yürürlüğe girmesinin 48 saate kadar sürebileceği belirtiliyor, ancak benim durumumda 1 saat içinde güncellendi. Bu arada web sitesi kesintisi olmayacak, bu yüzden endişelenmeyin.

Siteniz için ad sunucuları güncellendiğinde, Cloudflare web sitenizin durumunun “etkin” olarak değiştiğini göreceksiniz.

Panodaki tüm Cloudflare ayarlarını varsayılan olarak bıraktım, değiştirdiğim tek şey güvenlik seviyesiydi. Güvenlik Duvarı sekmesine gidin ve “Güvenlik Düzeyi”ni Düşük olarak ayarlayın. Bunun nedeni, ziyaretçilerimin yanlış bir saldırgan algılamasıyla ilgili bir "meydan okuma sayfası" almalarını istemem.

Artık Cloudflare tarafını kurduğumuza göre, WP Rocket eklentimizde Cloudflare ayarlarını da etkinleştirmeliyiz.

WordPress yönetici kontrol panelinize giriş yapın ve WP Rocket eklenti ayarlarına gidin. “CDN” sekmesine gidin, Cloudflare ayarlarını göster sekmesini etkinleştirin ve ayarları kaydedin. Bu, WP Rocket ayarlarında yeni bir “Cloudflare” sekmesi gösterecek ve onu açmalısınız. Orada Cloudflare hesabı e-postasını, etki alanını girmelisiniz ve ayrıca Cloudflare global API anahtarını kopyalayıp yapıştırmalısınız. Global API anahtarını almak için Cloudflare panosuna (genel bakış sekmesi) gidin ve "API anahtarınızı alın" bağlantısını tıklayın. Bu yeni sayfada bir “API anahtarı” bölümü göreceksiniz ve “Global API Anahtarı” satırı için “API anahtarını görüntüle” butonuna tıklamalısınız. Global API anahtarını WP Rocket ayarlarına yapıştırdıktan sonra, WP Rocket'te “Optimal settings” seçeneğini etkinleştirmenizi de öneririm. Ayarları kaydedin ve ardından her şeyin yolunda gittiğini doğrulamak için “Cloudflare önbelleğini temizle” düğmesine tıklayın.

Artık CDN yapılandırıldığına göre, farklı konumlardan yükleme sürelerini tekrar test edebilir ve iyileştirmeleri görebiliriz (Pingdom testleri).

• Dallas, Teksas (ABD) = 0,54s
• San Jose, Kaliforniya (ABD) = 0.70s
• Stockholm, İsveç (AB) = 0,91s
• Melbourne (AUS) = 1,16 sn

Beklendiği gibi, en çok Avrupa ve Avustralya yükleme süreleri iyileşti. Ve tüm yükleme sürelerimiz yaklaşık 1 saniye veya daha düşük. Bu harika bir yükleme süresi!

Sitenizi test ederken, tek bir konum için sayfa hızı aracını yalnızca bir kez çalıştırarak test etmeyin. Birkaç kez test etmeniz gerekiyor. Aracı belirli bir konum için ilk çalıştırdığınızda, önbelleğe alınan dosyaların önce en yakın Cloudflare sunucusunda depolanması gerekir, sonraki her test size önbelleğe alınmış sürümün gerçek yükleme süresini göstermelidir. Sayfanızın belirli bir konumdan ne kadar hızlı yükleneceğine dair iyi bir ortalama elde etmek için 3-5 kez test etmenizi öneririm.

Nihai sonuçlar

Son sayfa hızı aracı puanlarımız:

• Google PageSpeed ​​bilgileri
  • Mobil: 91
  • Masaüstü: 97

• GTmetrik
  • Sayfa Hızı: 98
  • YSyavaş: 91

İşte ekran görüntüleri:

GTmetrix verilerini optimizasyonumuzdan önce ve sonra karşılaştıralım:

Web sitesi performansımızı her yönden geliştirdik. Web sitesi daha hızlı yüklenir, siteyi kullanıcıya görüntülemek için daha az istek alır, daha az bant genişliği alır ve dünyanın her yerinden ziyaretçiler için daha hızlı yüklenir. Aynı zamanda, web sitemizin tüm işlevselliğini ve stilini başlangıçta olduğu gibi tuttuk. Mükemmel!

Son olarak, tamamladığımız her bir optimizasyon adımı için sonuçların güzel bir görsel temsilini hazırladık:

Çözüm

Bu nihai WordPress sayfa hızı optimizasyon kılavuzunda, web sitenizin performansını büyük ölçüde artırmak için atabileceğiniz daha önemli adımlara baktık. Bu makaledeki tavsiyelere uymak sitenizi yalın ve hızlı hale getirecek, bu da sayfa yükleme sürenizi ve dolayısıyla kullanıcı deneyimini iyileştirecektir. Bu iyileştirmeler ayrıca daha fazla para getirebilir ve sunucu maliyetlerinden biraz tasarruf etmenize yardımcı olabilir, bu nedenle herkes için bir kazan-kazan!

Bu makaleyi, hızın her şey olmadığını, bir web sitesi bulmacasının başka bir parçası olduğunu söyleyerek bitirmek istiyorum. İnsanlar, potansiyel müşteriler için web siteleri oluşturuyoruz, bu yüzden bunu her zaman aklınızda bulundurun. İçerik, multimedya, tasarım, kullanıcı deneyimi ve sayfa hızı arasında iyi bir denge bulun. Sayfa hızı ve sayfa hızı aracı puanları konusunda takıntılı olmayın. Ziyaretçilerinizin deneyimini iyileştirdiğiniz sürece hedefinize ulaşılacaktır.

Sayfa yükleme süresinde önemli bir gelişme sağlayabileceğini düşündüğünüz herhangi bir web sitesi optimizasyon adımını kaçırdım mı? Aşağıdaki yorumlarda bana bildirin!

Makalemizi faydalı bulduysanız ve adımlarını izlediyseniz, lütfen aşağıdaki yorumlarda ne tür iyileştirmeler yaptığınızı bana bildirin.