WordPress sunduğu esneklik ve kolay çözümler sayesinde giderek daha fazla yaygınlaşıyor. Bugün dünya genelindeki Web sitelerinin %30’dan fazlası WordPress içerik yönetim sistemi kullanıyor. Açık kaynak kodlu bu yazılımın daha iyi bir yükleme hızı sağlaması için Google mühendisleri başta olmak üzere WordPress geliştiricileri ve tema üreticileri ortak akıl yürüyorlar. Bu yazımızda WordPress sitenizin daha iyi bir yükleme hızı sunabilmesi için yapmanız gereken iyileştirmeleri derledik. Gelin hep birlikte WordPress sitenizi uçuşa geçirelim!
WordPress ve Sayfa Yükleme Hızı
Günümüzde WordPress kurumsal şirketlerin bile kullanmaya başladığı oldukça yaygın bir yönetim platformu hale geldi. WordPress yönetmesi kolay, esnek, hızlı ve popüler bir arayüz ile ister bireysel ister kurumsal kullanıcılar için seçenekleri bol bir kontrol yapısı sunuyor. Açık kaynaklı olması sayesinde de üçüncü parti katılımı ve katkısı oldukça üst düzeyde olan bu platform herkesin kullanabileceği kolaylıkta. Bazı sorunları çözmek veya yeni özellikler eklemek için uzman görüşü almanız gerekebilir ancak bunun dışındaki genel kullanımında, karşılaştığınız sorunları kendi başınıza halledebilirsiniz.
Sayfa yükleme hızı konusunda da tek başınıza yapabilecekleriniz var. Yeni bir site üzerinde çalışıyorsanız veya mevcut sitenizi hızlandırmak istiyorsanız, aşağıdaki önerilere göz atmanızı tavsiye ederiz.
Sunucu ve kodlama konusundaki seçimleriniz sayfa yükleme hızını doğrudan etkileyebilir, WordPress’te ne kadar optimizasyon yaparsanız yapın, düşük hıza sahip bir sunucu çabalarınızı sonuçsuz bırakabilir. Bu sebeple biz optimizasyon ipuçlarımıza WordPress ile devam edeceğiz. ilk başlamanız gereken yerin tema olduğunu söyleyebiliriz. Oldukça geniş kapsamlı, ücretsiz ve ücretli binlerce WordPress teması bulmanız mümkün. Temalar özelleştirilebilir olduğu için hepsi temelde aynıdır dersek yanlış olmaz ancak bir tema diğerinden çok farklı fonksiyonlara sahip olabilir. Fakat ilk olarak seçtiğiniz temanın mobil ziyaretçilere esnek bir mobil site sunabileceğinden emin olmanızı tavsiye ederiz. Yani esnek (responsive) bir mobil site, kullanıcı deneyimini iyileştirmekle birlikte sayfa yükleme hızını da doğrudan etkileyebilir.
Temanın sahip olduğu fonksiyonlar ne kadar fazlaysa, yükleme hızını o kadar olumsuz etkilemesi söz konusu olabilir. Aynı şekilde tema haricindeki WordPress eklentileri de sayfa yükleme hızını olumsuz etkileyen faktörlerdendir. Ancak WordPress ile oluşturulmuş bir Web sitesinde eklentilerden bahsetmemek mümkün değildir. Özellikle WordPress bazında ele aldığımızda eklentiler hayat kurtarıcı rollere bürünebilirler. Bu konuda verebileceğimiz yegane ipucu, kullanıcılarınızın en çok hangi sayfalarınızı ziyaret ettiğini tespit edip optimizasyona o sayfalardan başlamanızdır. Bazı eklentiler söz konusu sayfalarda kullanıcıların ihtiyaç duymayacağı fonksiyonlara sahip olabilir, bu durumda o eklentileri kullanıcıların sık ziyaret ettiği sayfalardan kaldırmayı deneyebilirsiniz.
Web Siteniz Ne Kadar Hızlı Yükleniyor?
Bu sorunun cevabı çok görecelidir. Kullanılan teknoloji, ağ, cihaz, konum, sunucu, kodlama gibi birçok faktör yükleme hızını etkileyebilecek elementler haline gelebilir. Google Chrome, Lighthouse, Speed Test Insights gibi araçlarla yapacağınız testler sırasında bu koşulları kısmen de olsa belirleme şansınız var.
Örnek olarak yukarıda da görebileceğiniz gibi Google Chrome geliştirici seçeneklerinde (F12 veya sağ tıklayıp – incele seçerek giriş yapabilirsiniz) “Network” bölümünde yer alan “online” seçeneği altında bağlantı seçimi yapabilir ve sayfayı yeniden yükledikten sonra istatistiklere göz atabilirsiniz.
Yukarıda örnek olarak yaptığımız testte “Slow 3G” bağlantısını taklit ederek sitemizin ve kaynakların yüklenmesini inceledik. Biz kendi Web sitemizde WP Engine kullanıyoruz ve sunucu hızından oldukça memnunuz. Hem WordPress için çok uygun hem de fonksiyonel ve kullanımı kolay bir konfigürasyon sunuyor.
Hepsinden önemlisi, sormak istediğimiz bir soru var: Bugün hangimiz yüklemesi 10 saniye süren bir web sitesine tahammül edecek durumdayız? Yapılan pek çok analize göre web sitenizin açılma hızı sadece 1 saniye artış gösterirse, bu ortalama %70 civarında bir geliştirme demektir.
Özellikle WordPress kullanıcıları için, birkaç düzenlemeyle site hızını artırmak mümkün. Bu yazımızda aşağıdaki konulardan bahsedeceğiz:
-Sitenizi yavaşlatan eklentileri (Plugin) nasıl tespit edebiliriz?
-Sitenizin altyapısını temiz tutmak için neler yapabilirsiniz?
-Sitenizde bulunan HTML sayfalarını, imajları, JavaScript kodlarını ve CSS dosyalarını sıkıştırılmış halde tutmak için neler yapmak gerekir?
-Tarayıcı önbelleklemesini doğru bir şekilde nasıl ayarlayabilirsiniz?
Tabi ki bu düzenlemelerin sonuç vermesi için ilk dikkat etmemiz gereken şey, sitemizi hızlı ve iyi bir hosting şirketine teslim etmemiz gerektiğidir. İkinci olarak, iyi bir tema seçmemiz gerekiyor. Ne yazık ki, tüm WordPress temaları eşit hıza ve fonksiyonelliğe sahip değiller. Örneğin, WordPress’in varsayılan teması “Genesis”, diğer temalardan en az 0.5 saniye daha hızlı yükleniyor. Temaların ne kadar hızlı olup olmadığını görmek için, tema düzenlemesi yaptıktan sonra Google Page Speed Insights aracıyla test yapmanızı tavsiye ederiz.
Bu düzenlemeler yapıldıktan sonra, bir sitenin hızlı olmasını sağlayan en önemli faktörlerden biri de, “CDN ağı” denen, sitedeki içerikleri farklı bir sunucuda barındırmanızı sağlayan ağa sahip olmaktır. Peki bu ne işe yarar?
Günümüzde Web Tarayıcıları (Google Chrome, Firefox, Opera, Safari, Internet Explorer vs.) eğer sitenizdeki içerik tek bir sunucuda toplanmışsa, hepsini bir defada okumaya çalışacak ve bu da yavaşlığa sebep olacaktır. Eğer CDN sunucusu kullanırsanız, tarayıcı, içeriği paralel olarak okuma şansına sahip olacak ve hem site içeriğini hem de yüksek boyutlu içeriği aynı anda derleyerek kullanıcıya daha hızlı ulaştıracaktır. Yapılan testler, CDN sunucusu kullanmanın, ortalama %55 civarında hızlanma sağladığını göstermektedir.
İlk üç madde, sunucu tarafında yapacağımız ana düzenlemelerden ibaretti. Şimdi, WordPress içerisinde nasıl düzenlemeler yapabileceğimizi görelim:
1: Sitenizi Yavaşlatan Eklentileri (plugin) Tespit Etmek:
P3 Profiler isimli eklenti, sitenizde çalışmakta olan eklentileri, temaları vb. tarayarak, hızlarını ölçmekte ve hangi eklentinin sitenizi ne kadar yavaşlattığını göstermektedir. Örnek olarak, yaptığım testten birkaç ekran görüntüsü paylaşmak istiyorum:
Gördüğünüz gibi, SEO Ultimate adlı eklenti, örnekte siteyi yavaşlatan eklentilerin başında geliyor. Peki bu durumda ne yapabilirsiniz? Site hızınızı bu büyüklükte etkilemeyecek başka bir eklenti bulmaya çalışabilirsiniz.
2: Sitenizi Sıkıştırın:
Web sayfalarının boyutu, normalde düşündüğümüzden çok daha büyüktür. Örneğin, 65 kb büyüklüğünde bir dosya çok gözümüze batmayabilir. Ancak bir araya gelen birçok dosyanın ortaya çıkardığı tablo, ciddi şekilde kaygı verici olabilir. Gzip, sitenizdeki dosyaları sıkıştırmanız için kullanılabilecek en uygun araçtır. Az önce örneğini verdiğimiz küçük web sitesini test ettiğimizde, aşağıdaki gibi şaşırtıcı bir sonuçla karşılaşırız:
(Gzip testini https://checkgzipcompression.com/ adresinden yapabilirsiniz)
3: Görselleri Sıkıştırın:
İmajlar, bir sitenin yavaş olmasına sebep olan en büyük etkenlerden biridir. WordPress için, WP-Smush isimli eklenti, bu soruna çare olabilecek en iyi eklentilerden biridir. Eğer Photoshop ya da Gimp gibi profosyonel araçları kullanmak konusunda bilginiz yoksa, WP-Smush size ilaç gibi gelecektir.
4: Tarayıcı Önbelleklemesini Aktif Hale Getirin:
“Tarayıcı önbelleklemesi” tek başına size bir anlam ifade etmeyebilir ve kavram kafanızı karıştırabilir. Tarayıcılar, bir kullanıcı bir web sayfasını ziyaret ettiğinde, sayfadaki öğeleri belleklerine alırlar. Bu sayede, kullanıcı sayfaya tekrar gelirse, yükleme hızı daha da yüksek olacaktır. WP Super Cache isimli eklenti, bu konuda size yardımcı olabilecek faydalı bir eklentidir.
5: Altyapıyı Temiz Tutun:
“Database” dediğimizde, orta ve alt düzeydeki site yöneticileri terlemeye başlarlar. Ancak WordPress, bu açıdan işinizi ciddi şekilde kolaylaştırıyor. WP-Optimize isimli eklenti, sitenizdeki dosyaları ve çöpleri düzenli olarak temizliyor, sıkışmalara ve şişmelere aman vermiyor.
6: JavaScript ve CSS Dosyalarını Küçültün:
Bir sitenin yavaşlamasına sebep olan diğer önemli etkenler ise, JavaScript kodları ve CSS Stil dosyalarıdır. JavaScript, küçültülebilir kodlardan meydana gelmektedir. Ayrıca bu kodlar, tarayıcının sayfayı görüntüleme aşamasındaki isteklerini sonsuz döngüye sokabileceği için, bazı öğelerin yüklenememesine sebep olabilirler. Bu açıdan JavaScript kodlarının düzeltilmesi ve küçültülmesi çok sağlıklı olacaktır.
CSS Stil dosyaları, sayfanızın nasıl görüneceğini, çerçevelerin, butonların, yazıların nerede ve nasıl duracağını belirler. Bir sitenin sade veya şaşalı görünmesini istiyorsak, CSS’ye başvururuz. Basit siteler bile, CSS fonksiyonları nedeniyle yavaşlayabilirler. Bu açıdan, CSS stil dosyalarının sıkıştırılması sağlıklıdır. Hem JavaScript, hem de CSS kodlarını küçültmek ve düzenlemek için, “Better WordPress Minify” isimli eklentiyi kullanabilirsiniz.
7: PingBack ve TrackBack Özelliğini Kapatın:
PingBack ve TrackBack özellikleri, diğer WordPress siteleri sayfanıza link verdiğinde çalışan bir tür uyarı sistemidir. Link takibi için AHrefs veya MajesticSEO gibi harici araçları kullanmak daha sağlıklı olacaktır. Bu özelliği kapatmak için, WordPress yönetici panelindeyken “Ayarlar – Tartışma” (ya da, Settings – Discussion) bölümüne gidebilirsiniz.
8: Görsel Çözünürlüğünü ve Karakter Setinizi Standart Hale Getirin:
Bir kullanıcı sitenize geldiğinde, sitenizde birden fazla karakter seti kullanıyorsanız veya görsellerinizin çözünürlükleri farklı farklıysa, tarayıcınız hepsinin yüklenmesi için ayrı ayrı çalışacaktır. Bu da, sayfanızın yükleme hızına negatif etki edecektir.
Sayfanıza yükleyeceğiniz görsellerin hepsinin, standart çözünürlüklere sahip olmasına dikkat edin. Sitenizde bulunan yazılı içeriğin hepsinin, aynı yazı tipine (font) sahip olduğundan emin olun.
9: CSS Dosyalarını HTML Kodunun En Üstüne, JavaScript Dosyalarını da HTML Kodunun En Altına Yerleştirin:
Tarayıcılar, CSS stil dosyasını taramadan önce sitenizi tarayıp yükleyemezler. Bu sebeple, CSS dosyalarının en başta taranması gerekir. Tarayıcı, kodları yukarıdan aşağıya doğru taradığı için, CSS dosyalarının en üstte, HTML kodlarının başlangıcına yakın olması gerekir.
JavaScript kodları ise, 6. Maddede bahsettiğimiz gibi, sayfa yüklemesinin ortasındayken tarayıcıyı sonsuz döngüye sokup yüklemenin yarım kalmasına sebep olabilirler. Bu durumun yaşanmaması için, JavaScript kodlarını HTML kodlarının bittiği bölümün yakınlarına yerleştirin.
10: CSS Dosyalarınızda Sprite Özelliğini Kullanın:
CSS Stil dosyaları, bir araya gelmiş görsel fonksiyonalite dosyalarıdır. Sitemizde gördüğümüz bazı butonlar, arka plan görselleri, çerçeveler, kenar çubukları vs, CSS paketi içerisinde yer alır. CSS paketlerinin de belli bir boyutu vardır ve bu öğeler de küçültülebilirler.
Küçültme işlemi, CSS paketleri içerisindeki öğelerin, daha küçük ve daha hafif öğelerle değiştirilmesiyle gerçekleşir. Değiştirilen dosyalara, “CSS Sprite” adı verilir. SpriteMe kodunu kullanarak, bu düzenlemeyi yapabilirsiniz.
11: “Keep Alive” Özelliğini Kullanın:
HTTP Keep Alive özelliği, Tarayıcının, site sunucusundaki erişime açık olan tüm dosyaları izin istemeden yüklemesini sağlar. Böylece kullanıcı siteyi ziyaret ettiğinde, bant genişliği hakkı verilerek kullanılır.
12: PHP Kodlarını HTML Kodlarıyla Değiştirin:
PHP, web sitesi yapmak için harika bir kod sistemine sahip. Ancak sunucu kaynaklarını yüksek düzeyde kullandığı için, hız problemlerine yol açma ihtimali çok yüksektir. Sitenizin hızlı açılması için, mümkün olabildiğince PHP kodlarını HTML kodlarıyla değiştirin veya PHP’yi minimum düzeyde kullanmaya çalışın.
SONUÇ:
Web kullanıcılarının %47’si, sayfanızın 2 saniyenin altında açılmasını bekliyor. 2006 yılında Amazon.com’da yapılan bir araştırmaya göre, 100 mili saniyelik artış, site cirosunda %1 oranında artış sağlamış. Teknoloji ve internet çağında, hız her şey demek. Eğer Web siteniz yavaşsa, çağın gerisinde kalmış kabul ediliyorsunuz.
hocam ben değeri 14 den 70 kadar cıkardım ama heralde 100 yapmak imkansız bunun için hiç bir özelliği olmayan sıradan bir tema gerekli galiba
Kesinlikle öyle 🙂 14’ten 70’e getirmek gayet iyi bir gelişme bu arada. 100 olmasa bile 80 üstü iyi bir skor diyebiliriz.
bu 9.maddeyi hangi dosya içersinden yapıyoruz bir türlü yapamıyorum
Kemal Bey merhabalar,
CSS için detaylı bilgiyi Inline CSS, Javascript için de Inline JavaScript dökümanlarını inceleyerek bulabilirsiniz.
9. maddeyi otomatik yapan bir eklenti var mı?
Bildiğimiz kadarıyla böyle bir eklenti yok =)
En önemli denilen detayların hepsine yer verilmiş. Site hızının önemi inkar edilemez derecede büyük iken bu paylaşımda verilenleri uygulamak ise kesinlikle geri dönüşü olacak bir süreç.
mrb kardesim normalde yorum yapmam ama makalen cok işime yaradı sitemap da bile hata almaya başlamışdım bot tarayamıyor yavaş diye 80 kadar cıkardım tskler
elinize sağlık..
Gerçekten wordpress kullanıcılarının işine yarayacak dolu dolu bir makale olmuş elinize sağlık
Sitemi bu makaleniz sayesinde yuzde 91 oranlarına çıkarmış durumdayız. Elinize sağlık tüm bilgiler için.
küçük farklar meydana geldi elinize sağlık css veya js denen illetlerden anlasaydım daha farklı beklenti görürdüm malesef hazıra talipçileriz biz mobilyacıyız ne anlarız bundan 🙂
Yine paylaşımı yapılacak içeriklerle karşımızdasınız hocam. Uzun zamandır merak ettiğim bu konu için de size ayrı teşekkürlerimi sunarım..
Merhabalar hocam. Web işinde yeniyim sorumu maruz görün. Ben çok eklenti olsun istemiyorum bu eklentileri kurup sizin dediğiniz gibi çalıştırıp daha sonra bu eklentileri silsem ne olur?
Bazı eklentileri kullanacağınız zaman aktif hale getirererek idare etmeyi deneyebilirsiniz, ancak bazı eklentiler var ki, onların sürekli aktif olmasında fayda var.
Güzel bir bilgilendirme olmuş. Paylaşım için teşekkürler. Sitenizi takipteyim.
Makalenizi okudum neredeyse 10 maddeyi de hakkıyla yerine getirdim şuan google page speed’de 90’a yükseldim. Çok teşekkürler emeğinize.
P3 Profiler programını çalıştırdığımda Eklenti Yüklenme Zamanı 1.067 sn diyor eklenti sayısı 18. Cloudflare,Limit Login Attempts,Wordpress Seo eklentileri başı çekiyor acaba siteyi hızlandırmak için ne yapabilirim. Totalde 3.32 saniye gösteriyor.
Teşekkür ediyorum. Cidden güzel bir yazı olmuş. Okuyup uygulayınca emeği anladım. Başarılarınızın devamını dilerim
Çok teşekkür ederim hocam sağolun.
Merhaba hocam bir türlü 9, madde ve css sıkıştırması yapamadım yardımcı olur musunuz.
Hocam benim sitemin hızı gzip testinde 60 falan çıkıyordu şuan 73.5. Çok teşekkürler, sitemi sıkıştırdım sayfa kaynağını görüntüle diyince herşey iç içe oluyor ama sayfa eski halinde. Sayfa kaynağında herşeyin iç içe olmasının SEO’ya bir zararı var mı?
Gerçekten yazdıklarınızı uygulayıp sonuç aldım. Emeğinize sağlık.
Merhabalar… İnternette araştırıp göre bildiğim en güzel açıklamali seo diye bilirim hepsini yapamadım maalesef pek anlamadığım için yapa bildiklerimi yaklaşık 6-7 işlemi yaptım şuanda yüzde 84 çıktı çok teşekkür ederim Allah razı olsun.
bunları nasıl aktıf edecegımızı gosteren bı vıdeo ceksenız daha ıyı olmazmı
Sponsoru siz olacaksanız neden olmasın 🙂
Merhabalar;
Öncelikle yazı için teşekkürler, tamamını okudum.
Tam olarak konu ile ilgili olmasa da AMP kullanılabilir hız ve SEO için.
Ayrıca sizin bahsettiğiniz gibi sunucu firmasının kaliteli olmasının yanında lokasyonun da hedef kitlemizin bulunduğu yere yakın olması gerektiğini düşünüyorum.
Kanımca; en çok yapılan hatalardan birisi de optimizasyon için kullanılabilecek eklentilerin büyük bölümünü kullanmaktır. Tabiri caizse ne
Her ne kadar optimizasyon yapılmış gibi gözükse de bu kod ve sorgu kalabalığı da sitenin açılış hızını negatif etkileyecektir.
Aklıma bu görsel geldi 🙂 https://www.keepbusy.net/pics/pic-dump-93-19.jpg
Hepimize bol SEO’lu günler..
Merhaba,
WordPress hız optimizasyonu için güzel bir yazı olmuş emeğine sağlık..
Söylediklerinizin çoğunu yaptıktan sonra google page testinde masaüstü sürüm 96 ya kadar çıkmayı başardı. Çok teşekkürler bunun için . Fakat mobil sürüm 28 ‘i geçemedi onu nasıl yapmam gerekiyor. ?
çok teşekür ederim muazzam bir anlatım emeğinize saplık
Güzel bir bilgilendirme olmuş. Paylaşım için teşekkürler. Sitenizi takipteyim.
Site hızım mobilde 9 masaüstünde 36 değerini veriyordu. Bu değerden bu kadar hızlı kurtulmak ve yükselişe geçmek sevindirdi. yazınız için teşekkürler.
çok güzel yorum tesekkürler
Araştırdığım bir konuydu. Teşekkürler Stradiji 🙂
7: PingBack ve TrackBack Özelliğini Kapatın:
bu olayı bilmiyordum. Varsayılan olarak aktif geliyormuş. Devre dışı bıraktım teşekkürler.
Emre hoca her zamanki gibi konuyu tüm yönleriyle ele almış ve kaliteli bir içerik çıkmış ortaya. MaşaAllah. Tebrikler. Biz faydalandık çoğu insanında faydalanacağını tahmin ediyorum. Benzer yazıları bekliyoruz.