Sıfırdan sitenizde kullanacağınız tasarım, içerik yapısı ve gösterim seçeneklerine göre uygun içerik yönetim sisteminin hazırlandığı, sadece sizin sitenizin ihtiyaçlarına yönelik “front end”in yazıldığı gereksiz kalabalık kodlar, işlevsiz CSS ve JS dosyaları yer almayan bir siteyi herkes ister. Bu durumda zaten tarayıcıların serverdan daha az talepte bulunduğu bir site yapısı kurmuş olursunuz. Üstelik daha az olan bu taleplerle yüklenen her bir dosya da kendi içinde daha az kod barındırdığı için dosya başına yüklenen kilobyte boyutları da daha düşük olacaktır. Hepsi bir araya geldiğinde siteniz hafif yük yüksek hız ile iyi bir performans gösterecektir.
WordPress kadar özgür ve açık kaynak bir işletim sisteminin sağladığı avantajlar ise, tabiri caizse yüksek oranda istediğiniz gibi eğip bükme imkânı sağlıyor. WordPress o kadar fazla geliştiriciyle yayıncılara kolaylıklarla dolu bir dünya sunuyor ki yukarıda bahsedilen özel üretim mantığının çok dışında daha genel ihtiyaçlara odaklanıyor ve bu sayede dünyada en fazla kullanılan içerik yönetim sistemi olmayı başarıyor. Ne kadar sizin ihtiyacınıza uygun tema bulursanız o kadar optimize şekilde yolculuğa başlamış oluyorsunuz. Yine de kırpmanız gereken, sıkıştırmanız gereken, kompakt hale getirmeniz gereken şeyler her zaman oluyor. Şunu da belirtmekte fayda var, WordPress tabanlı size özgü tema geliştiren yazılımcılar da mevcut. Bununla birlikte hazır tema satın almanız durumunda yapılması gereken optimizasyonların neredeyse tamamını WordPress’te kod bilgisine gerek kalmadan halledebiliyorsunuz. Bu da kendi güzelliği zaten: Her yeni ihtiyacın, eğer yeterince beklenti varsa kendine yönelik eklentisini geliştirecek bir yazılımcı bulabilmesi. Hatta bu yazılımcıların da bu sayede para kazanabilmesi. Tabii ki sıfırdan size özel inşa edilen bir web sitesi gibi olmayabiliyor ama sitenizin çok hızlı şekilde yayına girebilecek duruma gelmesi, yazılım masraflarına çoğunlukla gerek duymamanız, geliştirmeleri eklentiler yardımı ile kendi kendinize yapabilmeniz çok büyük avantajlar. Diyelim ki WordPress sitenizi kurdunuz ya da hâlihazırda açık. Kodları, sitede yüklü görselleri, dosyaları hatta server ayarlarını optimize etmek ve sitenizi hızlandırmak istiyorsunuz. Gelelim size bu konuda yardımcı olabilecek eklentilere:
1. Hummingbird
Hummingbird görsel optimizasyonu dışındaki diğer site hızı optimizasyonlarını genel olarak karşılamak üzere hazırlanmış ve özellikle yeni nesil WordPress temalarında etkisini bizzat gördüğüm bir eklenti.
Soldaki ekran görüntüsünde de görebileceğiniz farklı özelliklere sahip. Sitenizdeki dosyalarınızı caching ile ön belleğe alarak, bir nevi hazırda tutarak her ziyarette dosyaların yüklenme sürecini tamamen sıfırdan başlatmanın önüne geçebiliyor.
Gzip ile kodlarınız üzerinde sıkıştırmalar yaparak boyutlarını küçültüyor.
Bir de web sitesi yönetimi konusunda tecrübeli, sitedeki hangi dosyanın hangi amaçla yüklendiğini bilen daha uzman seviyesindeki insanların kullanması diğerlerinin uzak durması gerektiği bir özelliği var ki benim favorimdir: Yüklenen her CSS ve JS dosyasının header’da mı footer’da mı yükleneceğine, hatta gereksiz olanların hiç yüklenmemesine karar verebileceğiniz Asset Optimization isimli güzel bir bölümü var. Bu sayede sayfalardaki en önemli elementlerin önce, diğerlerinin ise sonra yüklenmesini sağlayabiliyorsunuz. Hangi dosyaların öncelikli yükleneceği ve onlar yüklenirken hangi dosyaların sırasını bekleyeceğine dair optimizasyonlar site hızını ciddi şekilde etkilemektedir.
Merak edenler için Youtube’dan bir tutorial linkini de kolaylık olması için buraya bırakıyorum:
2. Smush
Smush Hummingbird ile aynı ekibin elinden çıkan, kardeş bir eklenti. Sadece görsel optimizasyonlarına odaklanmış bir eklenti. İkisi senkronize şekilde de çalışıyor birbirinden bağımsız olarak da. Yani illa ki ikisini de kullanmanıza gerek yok. Bazı özellikleri ise:
- Kayıpsız sıkıştırma. İddia ettiklerine göre görselin kalitesini etkilemeyen gereksiz verileri silerek byte olarak boyutunu küçültüyorlar. Ben bazı görsellerde yine de kalite kaybı gördüm ama çok büyük oranda başarılı sıkıştırma yaptıkları doğru.
- Lazy Load ile sayfanızda kullanıcının ilk anda görmediği görseller yüklenmiyor. Kullanıcı sayfada aşağı indikçe ya da linklere tıkladıkça görünen görseller yüklenmeye başlıyor. Bu da tüm görsellerin bir seferde yüklenmesi problemini ortadan kaldırdığı için hıza en çok etki eden optimizasyonlardan biri.
- Bulk Smush: Sitenizde yüklü görselleri toplu şekilde sıkıştırmanızı sağlıyor.
- Image Resizing: Sitedeki tüm görseller için bir maximum en boy boyutu belirlemenizi sağlıyor. Buna göre daha büyük görseller otomatik olarak optimize ediliyor. Böylece sitede kullanıcı karşısına daha küçük çıkan ama gereksiz yere büyük boyutta yüklenen görseller düzeltilmiş oluyor.
- 5 MB’tan küçük tüm dosyalar için bedava optimizasyon sağlıyor.
- PNG, JPEG and GIF gibi farklı formatlarda optimizasyon sağlıyor.
- Smush’ın pro paketini alırsanız hem daha fazla sıkıştırma sağlıyor hem de isteğe bağlı olarak kendi serverlarından yararlanabiliyorsunuz. Yani görseller sitenizin serverından değil Smush’ın bağlı bulunduğu serverlar üzerinden yükleniyor. Bu serverınız üzerindeki yükü hafifletmek için güzel bir seçenek.
- Eğer pro seçeneği satın alırsanız birkaç tarayıcının desteklediği ve her geçen zaman daha fazlasının desteklemeye başladığı WebP formatına tüm görsellerinizi çevirebilirsiniz.
3. Optimole
Gelelim özellikle “hiç bilmeyenler” için bir numaralı önerim olan eklentiye. Optimole de sadece görsel optimizasyonları yapan bir eklenti ama bunu yaparken o kadar basit bir arayüz ve otomatize bir çalışma sunuyor ki kafanız karışmayacaktır. Yapmanız gereken tek şey Optimole’den API key almak için bedava hesap oluşturmak (eklenti üzerinden linke tıklayıp oluşturuyorsunuz) ve arkanıza yaslanmak.
Optimole aylık 5000 ziyaretçiye kadar olan siteler için bedava bir paket sunuyor ve kendi serverları üzerinden görselleri yüklüyor. Bu çok güzel bir özellik. Bunun dışında farklı ziyaretçi sayısı büyüklüğüne göre farklı fiyatlandırmalara sahip. Smush için yukarıda bahsettiğim Lazy Load gibi pek çok temel özellik de yine Optimole’de var.
4. W3 Total Cache
W3 Total Cache yukarıda bahsettiğim bazı optimizasyonları sağlamakla birlikte caching konusunda daha yüksek bir performans sağlıyor çünkü öncelikli amacı bu. Hummingbird’deki asset optimizasyonu kısmında bahsettiğim dosyaların öncelikli yüklenmesi, en son yüklenmesi, asenkronizasyon gibi bazı optimizasyonları yapabilmenizi sağlıyor. Fakat bundan fazlası da var.
CDN servisleri ile entegre çalışıyor ve görsel optimizasyonları konusunda da bu nedenle yardımcı.
- JS ve CSS kodlarınızın sıkıştırılmasını sağlıyor.
- Sayfalarınızı ve postlarınızı önbellekleme ile Hummingbird’de bahsettiğim gibi hazır hâle getiriyor. Bunu yaparken elbette dosyaları sıkıştırıyor.
- CSS ve JS dosyalarının tamamı için caching sağlıyor.
- Kategoriler, etiketler, yorumlar ve hatta site içi arama sayfaları için de caching işlemini yapıyor. Yani bazı çok sık yapılan aramaları dahi önden hazır hale getirebilirsiniz.
- Lokal Disk, Redis, Memcached, APC, APCu, eAccelerator, XCache, and WinCache gibi birbirinden farklı caching metodlarını barındırıyor.
5. Litespeed Cache
Litespeed Cache, Litespeed server kullananlar için bir eklenti ve aslında W3 Total Cache için yukarıda anlattığım en önemli, temel özellikler Litespeed’de aynı şekilde var. Farklı olan W3 Total Cache bildiğim kadarıyla farklı serverlarda çalışırken Litespeed’in doğrudan server-yazılım olarak entegre bir hizmet sunması. Yani kendi serverına göre üretilmiş bir yazılımdan söz ediyoruz. Bu durum sizi kaygılandırmasın Litespeed epey geniş bir kitleye sahip, Türkiye’deki pek çok hosting firması hâlihazırda Litespeed ile uyumlu paketlere sahip, global şirketlerde de benzer durumun olduğunu söylemek mümkün.
Elbette hem W3 Total Cache hem de Litespeed’in pek çok detaylı özelliği var ama kafa karıştırmamak ve gereksiz uzatmamak adına bunlardan mümkün olduğunca temel olanlardan seçtiklerimi aşağıda bulabilirsiniz:
- Bedava QUIC.cloud CDN Cache
- Object Cache (Memcached/LSMCD/Redis)
- Görsel optimizasyonu (kalite kaybı olan ve olmayacak şekilde sıkıştırma oranı size kalıyor.)
- CSS, JavaScript, and HTML Sıkıştırma
- CSS/JS dosyalarını kombinleyerek daha az request ile çalıştırabilme
- Lazy load
- Asenkron CSS/JS yükleme
- Browser cache
- Veri tabanınızı temizleme ve optimize etme
- Automatically generate Critical CSS
- Responsive Image Placeholders
- Multiple CDN support
- OPcode Cache
- CSS/JS için HTTP/2 Push
- DNS Prefetch
- CDN hizmeti için Cloudflare kullanırsanız API entegrasyonu mevcut
- WebP görsel formatını destekliyor.
Bu arada Litespeed’in kendi benchmark raporlarındaki iddiasına göre farklı serverlarla performans karşılaştırmaları aşağıda yer alıyor:
Özet
Tabii ki yukarıda bahsettiğim optimizasyonları başarılı şekilde yapan binlerce eklenti var. Ben bu 5 eklentiyi özellikle sürekli güncellemeler ile güvenli ve daha iyi performans verecek şekilde tutulması açısından seçtim. Bununla birlikte özellikle ilk üç eklenti başarılı bir kullanıcı deneyimine sahip temiz arayüzleri ile benden geçer notlar aldı. Genellikle listelerimi başlangıç seviyesine uygun yazmaya gayret ettiğimden daha farklı hatta bazı açılardan daha iyi ancak sanki yeni kullanıcılara uçak kokpitindeymiş gibi hissettiren eklentileri liste dışında tutmaya gayret ettim.
Kurulumlarınızı yaptıktan sonra deneme yanılma yöntemiyle siteniz hızlandıkça motivasyonunuzun artacağına eminim. Optimole gibi oldukça otomatize eklentilerde pek vakit kaybetmeyeceksiniz fakat özellikle Hummingbird ve caching odaklı son iki eklentiyi iyice kurcalamanızı öneririm.
