WordPress Sitenizi Hızlandırmak ve Optimizasyon

Eğer bir WordPress siteniz var ve paylaşımlı hosting kullanıyorsanız eminim site yavaşlığı veya yeterince hızlı olmaması ziyaretçilerinizden duyacağınız şikayetlerin başından gelir. Peki sitenizi hızlandırmak için neler yapmalısınız? Sitenizi optimize ederek ne gibi avantajlar sağlayabilirsiniz? Özellikle hız sorunu yaşayan arkadaşlar için, sitenizin neden yavaş açıldığını, sorunun ne olduğunu anlama ve gerekli çözümleri uygulama konusunda elimden geldiğince yol göstermeye çalışacağım.

Site Hızını Etkileyen Faktörler

Öncelikle site hızınızı etkileyebilecek faktörlerden şöyle bir bahsedelim. Öncelikle sitenizdeki sayfaların içerdiği veri miktarı ne kadar büyük ise yüklenmesi ve açılması o kadar uzun sürecektir. Sitenizdeki metinler ve css ve javascript kodları metin tabanlı olduğu için çok fazla yer kaplamazken genelde sayfa boyutlarının büyük kısmını resimler oluşturur. Bu nedenle sadece metinden oluşan sayfalar resimlerle dolu sayfalardan çok daha hızlı açılır. Ayrıca sitenizi oluşturan bileşen (css ve js dosyaları, resimler vb.) sayısıda önemli her bileşen için sunucunuza ayrı bir istek gönderilir ve bu istek sayısı arttıkça yanıtlanma süresi artabilir ve yavaşlığa sebep olur. Bu nedenle site içeriğimizin paha da ağır ama veri miktarı olarak az tutmamız gerekir, özellikle resimlerin boyutlarının küçük tutulması ve optimize edilmesi önemli bir etken.

İkinci bir etmen ise sayfanın sunucuda ve kullanıcı tarafında oluşma süresidir. Bir web sayfasını ziyaret ettiğinizde önce sunucu tarafında kodlar çalışır ve web sayfasıyla ilgili kodlar dinamik olarak oluşturulur, daha sonra kodlar ve resimler, css ve javascript dosyaları kullanılan tarayıcıya indirilir ve tarayıcı tarafından işlenerek görüntülenir. Her hangi bir sayfanın kötü kodlama veya bir hata yüzünden sunucu tarafında veya kullanıcı tarafında uzun sürede oluşması site hızını kötü etkileyecektir. W3 Total Cache, Super Cache , Quick Cache gibi önbellekleme eklentileri web sayfalarınızın bir kopyasını oluşturup sunucuda saklar (önbelleğe alır), bu sayede her bir ziyarette sayfalar yeni baştan oluşturularak zaman kaybedilmez önbellekteki hazır kopya direkt ziyaretçiye gönderilerek hız kazanılır.

Son olarak da hostinginizden kaynaklanan problemler olabilir, paylaşımlı hostinglerde bir sunucuda yüzlerce site birden çalışabilir, bunların bir kısmının saldırıya uğraması ve sunucunun sitelerden kaynaklanan yükü kaldıramaması gibi durumlarda siteniz yavaş çalışabilir ancak bu daha nadir rastlanan bir durumdur. Suçu hostinge atmadan önce sitenizi hızlandırmak ve optimize etmek adına gerekli adımları atmalısınız.

Site Hızınızı Ölçmek

Siteniz size göre hızlı çalışıyor olabilir ama aynı anda ziyaretçiler için yavaş açılması da rastlanabilecek şeylerden. Neyseki internette site hızınızı ölçen ve sitenizin analinizini yapan kullanışlı araçlar mevcut. Bunların başlıcaları şöyle;

Pingdom hız testi => http://tools.pingdom.com/fpt/

GTmetrix => http://gtmetrix.com/

Google PageSpeed Insights => https://developers.google.com/speed/pagespeed/insights/

Pingdom ve GTmetrix size test ettiğiniz sayfanın boyutunu ve toplamda kaç saniyede açıldığı bilgisini verir. Ayrıca Pingdom‘da Waterfall bölümünden GTmetrix‘de ise Timeline bölümünden site içeriğinizi oluşturan her bir bileşenin ne kadar sürede indirildiğini teker teker görebilirsiniz.  Google PageSpeed Insights ise sayfa içeriğinizi analiz edip hız için tavsiyelerde bulunuyor, benzer tavsiyeler Pingdom ve GTmetrix‘de de mevcut ancak bu tavsiyeler için Google PageSpeed Insights kullanmayı öneririm.

Kendi adıma Pingdom hız testini hangi bileşenin yüklenmesinin çok uzun sürdüğünü anlamakta Google PageSpeed Insights‘ı ise site içeriğinde neleri iyileştirmek gerektiğini anlamak için kullanıyorum.

Site Hızınızı Arttırmak

Öncelikle Pingdom hız testini kullanıp, sitenizi test edin. Test sonucunda Request başlığı altındaki sayı sayfanın oluşturulması için sunucuya kaç istek gönderildiğini Load time toplama yükleme süresini Page size da toplam sayfa boyutunu göstermektedir. Bu bilgileri ne kadar aşama kaydettiğinizi anlamak için bir kenara not edin.  Site hızını etkileyen faktörler bölümünde bunların ne gibi etkilerini kısaca anlatmıştım, özet geçmek gerekirse amacımız istek sayısını ve sayfa boyutunu minimuma indirmek olmalı. Bunu nasıl yapacağınızı anlatacağım.

Peki nereden başlamalısınız? Öncelikle WordPress sitenizde kullanmadığınız ve gereksiz bütün eklentileri silin. Ne kadar az eklenti kullanırsanız o kadar iyi :) Sayfalarınızda kullandığınız resim sayılarını da azaltmayı deneyin. Pingdom hız testinin Waterfall bölümünü kontrol edin ve yüklenmesi uzun süren nesneleri mümkün olduğu kadar kaldırın, eğer 100kb’dan büyük resimler varsa bunları küçültün.

Bunlar ilk bakışta alabileceğimiz basit önlemlerdi, bundan sonrası için Google PageSpeed Insights  ile sitenizi analiz ettirin, mobil ve masaüstü için siteniz 100 üzerinden puanlanacak. Biz masaüstü kısmıyla ilerleyeceğiz. Puanınızı bir kenara not etmeyi unutmayın ve puanınız düşük diye endişelenmeyin 100 puan almak hemen hemen imkansız :) Siteniz analiz edildiğine göre Google’ın her tavsiyesi için neler yapabileceğimize bakalım.

Resimleri Optimize Etmek

Resim dosyalarının içlerinde hangi fotoğraf makinesiyle ne zaman çekildikleri gibi bilgileri (EXIF verileri) içlerinde tutabileceğini hatta küçük bir önizleme bile bulundurabileceklerini biliyor muydunuz? Resimleri sitemize yüklemeden önce küçültmek bu nedenle yetmiyor, neyse ki resimlerin kalitesini bozmadan bu gereksiz verileri kaldırıp optimize eden WP Smush.it eklentisi var. Eklentiyi kurup Admin Panelinizin Altından Ortam -> Bulk Smush.it bölümüne girin ve Run all my images through Smush.it right now butonuna tıklayın. Sitenizdeki yazılara önceden eklediğiniz resimlerin hepsi tek tek optimize edilerek küçültülecek. Biraz zaman alıyor ancak buna değer.

Yazılarınıza eklemediğiniz resimleri manuel olarak optimize etmek için ise http://www.smushit.com/ysmush.it/ sitesini ziyaret edin, Uploader kısmından optimize etmek istediğiniz resmi Dosya Seç kısmından seçip Smush a tıklayın Result başlığı altından optimize edilmiş resmi indirebilirsiniz.

Resimlerinizi optimize etmenize rağmen listede görünmeye devam edebilir, bazı resimlerde Google’ın hedeflediği sıkıştırma oranını yakalayamıyorsunuz.

Resimlerinizle ilgili yapabileceğiniz başka bir şey ise Jetpack Eklentisi‘ni yükleyip Photon özelliğini aktive etmek. Jetpack Photon özelliği sayesinde yazılarınıza eklediğiniz resimler WordPress bulut sistemine kopyalanacak, ziyaretçiler resimleri WordPress bulut sistemi üzerinden daha hızlı bir şekilde görüntüleyecektir. Aynı zamanda hostinginize giden istek sayısı azalacağı için, sayfaların daha hızlı açılmasına katkıda bulunacaktır. Jetpack Photon özelliğinin önemli bir artısı da site trafiğinizin büyük bölümünü oluşturan resimlerin hostinginizdeki trafik kotasını doldurmayacak olması. Kendi adıma Photon özelliğini kullanarak resimlerin oluşturduğu trafiği büyük ölçüde azalttım, aylık trafik sınırı yüzünden bir üst pakete geçmeyi düşünürken şimdi rahatım :)

Sıkıştırmayı Etkinleştirmek

Web sunucunuz site içeriğini kullanıcıya gönderirken sıkıştırarak hız kazanmanızı sağlayabilir. Bu özelliği aktive etmek için sitenizin kök dizininde bulunan .htaccess dosyasının sonuna aşağıdaki kodu ekleyin.

# force deflate for mangled headers
# developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/


SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding



# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:

FilterDeclare COMPRESS
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/html
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/css
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/plain
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/x-component
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/javascript
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/json
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/rss+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/atom+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject
FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf
FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype
FilterChain COMPRESS
FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no



# Legacy versions of Apache
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml 
AddOutputFilterByType DEFLATE application/atom+xml
AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject 
AddOutputFilterByType DEFLATE application/x-font-ttf font/opentype

Böylelikle içeriğin sıkıştırılması otomatik olarak sağlanacak.

Tarayıcı Önbellekleme Özelliğinden Yararlanma

Tarayıcı Önbellekleme Özelliği nedir? diye sorduğunuzu duyuyor gibiyim. Internet Explorer, Chrome ve diğer bütün tarayıcılar bir sayfayı ziyaret ettiğinizde sayfada bulunan resimleri ve diğer css, javascript gibi dosyaları geçici olarak indirip bilgisayarınıza kaydeder (ön belleğe alır) ve aynı siteyi/sayfayı tekrar ziyaret ettiğinizde yine aynı dosyaları tekrar bilgisayarınıza indirip kaydetmek yerine hali hazırda bilgisayarınızda önbelleklenmiş olan kopyasını kullanabilir. Bu özelliği aktive etmek için Tarayıcı Önbellekleme Özelliğinden Yararlanma konulu yazımdan faydalanabilirsiniz.

Oluşturmayı Önleyen JavaScript ve CSS Kodları

Sitenizin başlık kısmında bulunan JavaScript ve CSS kodları tamamen yüklenmeden tarayıcı sitenin devamını işleyip görüntüleyemez. Bu sebeple Google Javascript ve CSS kodlarını sayfanın footer bölümünde async şekilde eklemeyi öneriyor. Bunu sağlamak için Async JS and CSS adlı eklentiyi kurup Ayarlar başlığı altından Async Settings e gelip bütün kutucukları işaretleyin. Eğer  bu işlemden sonra sayfanızdaki bazı bileşenler doğru çalışmaz ise Load Javascript asynchronously kutucuğundaki işareti kaldırın.

Sunucu Yanıt Süresini Kısaltma

Sunucu yanıt süresinin uzun olması kullandığınız hostingden kaynaklanıyor da olabilir ancak daha önce belirttiğim gibi sunucunuza giden istek sayısını azaltmak ve bir önbellekleme eklentisi kullanmak bu süreyi kısaltacaktır. Ben önbellekleme eklentisi olarak kullanımı oldukça basit fakat efektif olan Quick Cache eklentisini öneririm. Eklentiyi kurduktan sonra aktive etmek için Admin Panelinizden Quick Cache‘e gelin ve Enable/Disable başlığı altından Yes, Enable Quick Cache‘i seçin.

JavaScript, CSS ve HTML Küçültme

JavaScript, CSS ve HTML kodları içlerinde bulundurdukları boşluklar kaldırılarak sıkıştırılabilir. Bu amaçla Autoptimize eklentisini kurup eklenti ayarlarından  Optimize etme seçeneklerini aktive etmelisiniz. JavaScript’i optimize etmek sitenizdeki bazı fonksiyonların çalışmasını engelliyorsa bu özelliği kapatabilirsiniz.

Buraya kadar genel anlamda sitenizi hızlandırmak için yapabileceğiniz hemen hemen her şeyi ele aldım. Site hızınızı biraz daha olsun arttırmak için Use Google Libraries eklentisini yükleyebilirsiniz, böylelikle WordPress kurulumuyla gelen Jquery kütüphaneleri siteniz yerine direkt Google üzerinden kullanıcılara sunulacaktır. Google PageSpeed Insights‘daki puanınızı biraz daha arttırmak için ise Remove query strings from static resources eklentisi. Eklenti sitenize eklenen JavaScript kodlarının sonunda ki gereksiz versiyon parametrelerini kaldırıyor.

Umarım anlattıklarım sitenizin hızını arttırmak konusunda size yarar sağlamıştır. Son bir kez Pingdom ve Google PageSpeed Insights analizi yaparak nerelerden nerelere geldiğinizi ve sorularınızı yorumlar kısmından bana ulaştırabilirsiniz :) Böylelikle hangi işlemin ne kadar faydalı olduğunu ve sizin tavsiyelerinizi öğrenebiliriz.