WordPress Sitenizi Hızlandırın !

Daha Hızlı Bir Web Sitesi için 5 Adım

WordPress sayfa açılışlarınızı hızlandırmak ister misiniz? Dave Rupert, WordPress sayfa açılış hızını 1 saniyenin altına indirdiği yöntemleri açıklamış. Makaledeki bilgiler Matt‘in (WordPress Geliştiricisi) dahi ilgisini çekmiş ki, yazıda onun da yorumunu görebilirsiniz.

WPDestek okurları için bu makalenin tamamını Türkçe’ye çevirdim.

WordPress Performansınızı Arttırın

Haziran ayında, Kyle Simpson ile bir röportaj yaptım. Web performansı ve Google’ın “Web’i Daha Hızlı Yapma” planı hakkında konuştuk. Bu plandan sonra Google, internet sitelerinin sayfa açılış hızlarını ödüllendireceğini bildirdi. Ve Webmaster Araçları’ndaki bölmede 1.4 saniyeyi işaretledi.

Beni şaşkınlıkla birlikte bir çeşit korku sardı. Çünkü, çok çaba göstermemize rağmen, 3-5 saniyeyi bulan sayfa açılış hızlarını iyi, 7 saniyeye ulaşan sayfa hızlarını ise kabul edilebilir bulurdum. The ATX Web Show röportajının kaydından sonra buradaki istatistiklerimin işe yaramaz olduğunu fark ettim ve sitemin hızını %500 arttırdım.

Bu sonuçlardan sonra tek düşündüğüm şey Web Optimizasyonu oldu. Şimdi webi milisaniyelerde görüntülüyordum. Eğer siz de benim gibiyseniz ve optimizasyona gerekli önemi vermediyseniz, belki de bu fikri yeniden değerlendirmelisiniz. Ve bu yanlızca sizin sorununuz değil, aslında kullanıcıların zamanını %80 oranında önyüz(frontend) çalıyor. Burada hedefi sadece birkaç kilobyte’lık tasarruf olarak düşünmeyin, hedef herşeyin olabilecek en düşük boyutlarda olduğundan emin olmak. Dosya boyutlarını azaltmak, istekleri azaltmak ve önbelleği etkinleştirmek.

Bu dökümanda CDN’ler ve benzeri ücretli yöntemleri kullanmadan YSlow ve Page Speed puanlarını arttıran yöntemleri adım adım anlattım. Pek çok site size sadece önbellek (cache) eklentisi kurmanızı söyler. Tabi ki bu eklentiyi kuracaksınız (5. Adım’a bakın), fakat optimizasyonları yaptıktan sonra. Aksi takdirde bu bir halta yaramaz, bu hastalığa çare olmaz, bir domuza ruj sürmeye benzer veya her neyle örneklendirmek isterseniz onu kullanın.

Doğru Araçları Yükleyin

Adım 1: CSS Dosyanızı Küçültün & Optimize Edin

Bu sadece 3 adımdan oluşan bir işlem ve burada sitemizin ağırlık fazlasını kesip atacağız. Burada sizin %10′luk bir değişim söz konusu. Eğer size çok yavaş gelmeyecekse, satır satır ilerleyin ve bolca tekrar edin.

CSS Dosyanızı Küçültün

Page Speed’i açın ve “Analyze Performance”a tıklayın. “Minify CSS” başlıklı sekmeyi bulun. Burada sayfanızın çağırdığı her CSS dosyasının optimize edilmiş versiyonlarına ait indirme linklerini görebilirsiniz. Temanızın CSS’lerini bunlarla değiştirin.

Ne yazık ki WordPress’te, bir çok blogun kullandığı eklentiler içerisinde yapımcılarının imzalarını bulunduran eklentiler, optimize edilmiş dosyalara bile yapımcısının imzasını yerleştirebiliyor. Kullandığınız bazı eklentilerin CSS dosyanızı düzenlemesi mümkün. Yalnızca mükemmel bir dünyada WordPress eklentileri optimize kodlarla birlikte gelir.

Bu belki tavsiye edilmez, fakat ben eklentileri düzenleyerek içlerindeki CSS ve Javascript’e ekstra kodlar ekleyen bölümleri çıkarıyorum. Bunu her eklenti güncellemesinde tekrarlamak gerekiyor.

Öğrenme Noktası: Gereğini Aşmayın. Verimli CSS Seçicileri Kullanın.

Ben her zaman en iyi olanın en belirgin seçicileri kullanarak yazılan CSS’in iyi olduğunu önerirdim, ama bu yanlışmış. Bunun adı “aşırıya kaçmak” oluyor ve ayıklama işlemi için tarayıcıyı daha fazla çalıştırıyor. Hız oyununda kazananlar benzersiz sınıf ve benzersiz elemanlar olacaktır.

#header nav ul li a { ... }
  /* kötü. 5 seçici bu iş için çok fazla. */
 
  ul.commentlist { ... }
  /* kötü. yapışık fazlalık. */

#header a { ... }
  /* daha iyi. daha dolaysız. gerçekten iyi. */
 
  .commentlist { ... }
  /* daha iyi. sadece sınıf seçici fazla spesifik olabilir. daha fazla çevik.*/

Ben bunu üstü kapalı özetledim, ama Chris Coyier CSS-Tricks’deki CSS’i Verimli Kılmak yazısında harika anlatmış.

Küçültülmüş CSS Sonuçları

Benim düşüncem, insanların okuyabileceğim şekilde CSS yapmamın daha iyi olacağı yönünde, ama bu ekstra 180 KB ekliyor. Siz bir sonraki adıma geçip kullanılmayan sınıfları çıkarabilirsiniz, ama ben şahsen bazı jenerik sınıfların bulundurulmasını tercih ederim (tablolar gibi).

Adım 2: Optimize Görseller

Görselleriniz çok şişman. Photoshop’un “Save for Web” özelliği çok güzel optimizasyonlar sunuyor, ama burada fazlalıklar var. Resimleriniz atılması gereken gereksiz, kocaman meta verilerine sahip. Bunu düzeltmek çok kolay olmayabilir. Burada resimlerinizi optimize edecek bazı araçlar var.

Page Speed resimlerinizdeki fazlalıkları atıp size optimize hallerini sunar.
Kayıt edin ve sitenize yükleyin(upload edin).

YSlow > Tools > All Smush.it – bu sayfanızdaki tüm resimleri bir defada küçültür ve klasör yapısını bozmaz. Bu inanılmaz derece pratik.

ImageOptim (Mac için) çevrimdışı çalışan ve belirlediğiniz klasördeki resimleri optimize eden harika bir araç.
Resimlerinizi internete upload etmeden önce bunu uygulayın, daha sonra upload edin.

Bazen sadece 400 B kazancınız olur ve “Buradaki amaç nedir?” diye düşünebilirsiniz. Yüzdelere odaklanın. Eğer resminiz %9 oranında küçülmüşse, bu kullanıcılarınızın resminizi %9 daha hızlı göreceği anlamına gelir. Matematik!

Resimlerinizi Orantılı Şekilde Boyutlandırın

Bu iyi bir başlangıç. 400×400 px boyutlarınızdaki görseli sayfanızda 200×200 px olarak kullanıyorsanız onu 200×200 px olarak boyutlandırın. Büyük resimlerin indirilmesi ve tarayıcı tarafından boyutlandırılması uzun sürer.

Resim Boyutlarını Belirtin

Resim boyutunu belirtme hakkında çok büyük bir taahhüt bulunmasa da, Page Speed resimlerinizin boy ve en oranlarını belirtmenizi öneriyor, böylelikle tarayıcının bunu ayırt etmesine gerek kalmıyor. Bunu etiketinize ekleyin. Görevi tamamlamanız toplamda 2 dakika sürer.

Sprite’la Beni

Sprite’ları kullanın. Biraz zamanınızı harcayın, ileride bunu kazanırsınız. Bu tonlarca HTTP isteğini önler ve hatta sitenizi çok daha hızlandırır. Google performans gurusu Steve Souders, sizin içinSpriteMe adında bir araç yaptı. Bookmarklet’i tarayıcınıza ekleyin ve anasayfanızdayken buna tıklayın, sonra bırakın işini yapsın. O size sprite edilmiş resimlerinizi ve stil dosyanız için gerekli CSS kodlarını paketleyip verir. Gereken yetenek: Matematik.

Küçültülmüş Resim Sonuçları

Resimlerimin optimizasyonlarından sonra ki kazançlarım burada. Kazançlardaki doğru orantıyı görebilirsiniz. %17′lik KB kazancının sonucu %23′lük hız artışı.

Javascriptleri Küçültün ve Optimize Edin

Tıpkı CSS’te olduğu gibi, Page Speed ile sayfanızdaki JS’lerin küçültülmüş hallerini indirebilirsiniz. Küçültülmüş hallerini alıp sitenizdekilerle değiştirin. Bu size %10′luk bir değişim sağlar. Yine kullanmış olduğunuz eklentiler JS’lere ekstra satırlar ekliyorsa, bu eklentileri düzenleyerek bunu engelleyin.

Tek JS Kütüphanesi ile Hepsine Hükmedin

Eğer JQuery, Mootools ve Prototype kütüphanelerini birlikte kullanıyorsanız, birşeyleri yanlış yapıyorsunuzdur. Bu kütüphaneler birbirlerinin aynısı olan pek çok fonksiyon taşırlar ve siz bunları kullandığınızda basit anlamıyla kendinizi tekrar etmiş gibi olursunuz, bant genişliğini çöpe atmış olursunuz. Kullanmış olduğunuz eklentileri iyi bir göz atın. Hangi eklentinin hangi kütüphaneyi kullandığını bulun ve tek bir kütüphaneye odaklanıp onu kullanın (JQuery). Seçtiğiniz kütüphaneyi kullanan alternatif eklentiler kullanın.

JS Küçültme Sonuçları

Sizin sonuçlarınız değişik olabilir. Eğer birden çok JS kütüphanesini elediyseniz, yüzlerce KB tasarruf ettiğinizi görebilirsiniz.

Adım 4: .htaccess ile Apache’nin GZIP Özelliğini & Tarayıcı Önbelleğini Etkinleştirin

Bu işi iyice öğrenmek uzun zamanımı aldı. Bu uygulama için yeterince cahildim, google’layıp birkaç iyi kaynak buldum. Eğer Apache üzerinden yayın yapıyorsanız (muhtemelen öyledir), aşağıdakileri .htaccess dosyanıza WordPress’e ait kodlardan hemen sonra ekleyin. Eğer bu işlemin ne yaptığını anlayamadıysanız, sorun değil. Sırasıyla şunları yapıyor:

1. Gzip ve mod_deflate mime türlerini algılıyor.
2. Mime türü için mod_expires’ı algılayıp bitiş(expire) süresini ayarlıyor.
3. Mime türü için mod_headers’ı algılayıp, Tarayıcı Önbelleği limitlerini ayarlıyor.

 
 
# Enable GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</ifmodule>
 
# Expires Headers - 2678400s = 31 days
<ifmodule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 7200 seconds"
  ExpiresByType image/gif "access plus 2678400 seconds"
  ExpiresByType image/jpeg "access plus 2678400 seconds"
  ExpiresByType image/png "access plus 2678400 seconds"
  ExpiresByType text/css "access plus 518400 seconds"
  ExpiresByType text/javascript "access plus 2678400 seconds"
  ExpiresByType application/x-javascript "access plus 2678400 seconds"
</ifmodule>
 
# Cache Headers
<ifmodule mod_headers.c>
  # Cache specified files for 31 days
  <filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
  Header set Cache-Control "max-age=2678400, public"
  </filesmatch>
  # Cache HTML files for a couple hours
  <filesmatch "\.(html|htm)$">
  Header set Cache-Control "max-age=7200, private, must-revalidate"
  </filesmatch>
  # Cache PDFs for a day
  <filesmatch "\.(pdf)$">
  Header set Cache-Control "max-age=86400, public"
  </filesmatch>
  # Cache Javascripts for 31 days
  <filesmatch "\.(js)$">
  Header set Cache-Control "max-age=2678400, private"
  </filesmatch>
</ifmodule>

webperformant.htaccess

GZIP ve Tarayıcı Önbelleği Sonuçları

Artık tarayıcılar sitenize ait dosyaları saklayıp, gerektiğinde yükleyecekler. Bir sonraki sayfada tarayıcı görselleri yeniden indirmeye gerek duymayacak, mesela arkaplan resimleri gibi. Tabi bu görseller tarayıcı önbelleğinde bulunduğu sürece. Performans araçları için bir not, bazı sayfalarda sayfa boyutu 0 KB olarak görünebilir. Bu sayfanın açılması için gerekenler tarayıcı önbelleğinden karşılanmıştır.

Adım 5: Performans için WordPress Eklentileri

WordPress’in web performansı için son adımda buradaki bazı eklentileri yüklemek gerekiyor. Yazının başında da söylediğim gibi, yarım yamalak berbat kodları düzeltmediğiniz sürece bu eklentilerin sitenizi hızlandırmasını beklemek yanlış. Sitenizin sağlam kemiklere ihtiyacı var. Ve okurlarınız bunu hak ediyor.

WP Minify
WP Minify, JS ve CSS dosyalarınızı optimize edip birleştirren mükemmel bir eklenti. Bende Javascript dosyalarını birleştirdiğinde bir problemle karşılaştım fakat, hiçbir eklenti betikleri mükemmel birleştirip sonunda çalışır halde sunamaz. Yine de deneyin. Eğer JS’lerinizi başarıyla sıkıştırıp tek dosya haline getirebilirseniz sizi alkışlayacağım.

WP Super Cache
Şimdi sayfanız optimize edildi, sayfa yüklenme hızınıza baktığınızda göreceğiniz ilk mavi nokta muhtemelen HTML’iniz olacaktır. Bunun sebebi gidip-dönüşler:

Önbelleklemeyi etkinleştirdiğimizde veritabanına uğramak gerekmiyor:

DAHA HIZLI! Aslında bu işlem daha karmaşık fakat basit anlatımıyla bu şekilde gerçekleşiyor.

Bu işlem için WP SUPER CACHE‘i muhteşem buluyorum ve şiddetle öneriyorum. Kurulumu sırasında başınızı ağrıtacak geçici klasör oluşturma, bazı klasörler yazma izni verme, wp-config.php dosyasına satır ekleme ve .htaccess dosyasını düzenleme gibi işlemler olabilir. %30 oranla WordPress kurulumunuzda beyaz ekran görebilirsiniz fakat bu sizi korkutmasın. Sadece yönergeleri izleyin ve adım adım kurulumu gerçekleştirin. Sonuçta ziyaretçileriniz HTML’inize sadece milisaniyeler içinde ulaşabilecek.

Sonuç Olarak

Sizin sonuçlarınız değişebilir, ama ziyaretçilerinize çok daha iyi bir web deneyimi yaşatacağınıza söz veriyorum. Bana bir bakın, 4 saat google’ladım, engellerle karşılaştım ve blog notları yazdım. Sizin sadece 1 saatinizi alacak.

Kaynak: wpdestek

Web Performant WordPress  by Dave Rupert