Autoptimize Kurulumu ve Ayarları: CSS/JS Optimizasyonu

Autoptimize Kurulumu ile hız kazanmak neden bazen “oldu-bitti” değil?

Autoptimize çoğu sitede ilk kurulumdan sonra bile fark edilir hız kazanımı sağlar; ama asıl fark, ayarların siteye göre doğru dengelenmesiyle gelir. Çünkü WordPress’te performans problemleri tek bir noktadan çıkmaz: tema dosyaları, eklentilerin ürettiği CSS/JS, fontlar, görseller, üçüncü parti script’ler (analytics, reklam, canlı sohbet) ve hatta sayfa önbelleği katmanı bir araya gelince küçük hatalar büyür. Autoptimize burada “dosyaları optimize eder”, fakat yanlış kombinasyonlar da sayfanın tasarımını bozabilir, menüleri çalışmaz hâle getirebilir veya mobilde kaymalar (CLS) oluşturabilir.

Bu yazıda hedef, Autoptimize’ı “her kutuyu işaretle” mantığıyla değil; site türüne göre güvenli ayarlar, sık görülen çakışmalar ve gerçek hayatta işe yarayan test akışıyla kurmak. Sonuçta amaç sadece skor değil; kullanıcı tarafında hızlı açılan, stabil ve sorunsuz bir WordPress sitesi.

Autoptimize ne yapar, ne yapmaz?

Autoptimize’ın güçlü olduğu alan, ön uç (front-end) kaynaklarını düzenlemek ve hafifletmektir: HTML küçültme, CSS/JS sıkıştırma, bazı durumlarda birleştirme (aggregate), render-blocking etkisini azaltma için erteleme (defer) ve kritik CSS yaklaşımına zemin hazırlama gibi. Ayrıca font optimizasyonu, emoji gereksiz yüklerini kaldırma gibi “küçük ama etkili” dokunuşları vardır.

Şunu baştan netleştirmek önemli: Autoptimize tek başına “tam bir cache eklentisi” değildir. Sayfa önbelleği (page cache) başka bir katmandır; Autoptimize genelde bir cache eklentisiyle birlikte daha iyi sonuç verir. Autoptimize’ın kendi tarafında ise optimize edilmiş dosyaları bir cache klasöründe tutması normaldir; ancak bu cache yönetimi yanlış ayarlarla şişebilir.

Kurulum: 2 dakikada doğru başlangıç

Kurulum için eklentiyi WordPress.org üzerinden yükleyebilirsin: Autoptimize (WordPress.org)

• WordPress panelinde Eklentiler → Yeni Ekle bölümüne gir.
• Arama alanına “Autoptimize” yaz, eklentiyi kur ve etkinleştir.
• Ayarlar sayfasına Ayarlar → Autoptimize yolundan ulaş.

İlk kurulumda “her şeyi açayım” dürtüsü anlaşılır; ama en sağlıklısı, adım adım ilerlemek. Önce HTML optimizasyonu, sonra CSS, en son JS tarafı… Böylece bir sorun çıkarsa sebebini hızlı yakalarsın.

Temel ayarlar: JS, CSS ve HTML sekmesi (en kritik bölüm)

1) HTML optimizasyonu

Genelde güvenli başlangıç noktasıdır. “HTML’yi optimize et” (minify) seçeneği çoğu sitede sorun çıkarmaz. Buradaki amaç, HTML çıktısını küçültüp gereksiz boşlukları azaltmaktır.

• Öneri: HTML optimizasyonunu aç, siteyi kontrol et (özellikle header, footer ve formlar).
• İpucu: Bazı sayfa oluşturucuların (builder) nadiren inline script/inline CSS ile hassas çıktıları olabilir; sorun görürsen HTML ile ilgili seçenekleri geri alıp tek tek dene.

2) CSS optimizasyonu

CSS tarafında iki ana yaklaşım var: “sıkıştırma” ve “birleştirme (aggregate)”. HTTP/2/HTTP/3 kullanan modern sunucularda her zaman birleştirme şart değildir. Autoptimize da yeni kurulumlarda bu gerçeği dikkate alır; yine de bazı sitelerde birleştirme hâlâ fayda sağlayabilir.

• Optimize CSS Code: Genellikle açılabilir.
• Aggregate CSS-files: Her sitede açılmaz. Açarsan tasarım kırılması riskini test ederek yönet.
• Also aggregate inline CSS: Cache şişmesine ve sayfa bazlı farklı CSS üretimine yol açabilir; ihtiyaç yoksa kapalı tut.

Render-blocking şikâyetleri yaşıyorsan, CSS için “kritik CSS” yaklaşımı devreye girer. Autoptimize, kritik CSS’i inline edip geri kalan CSS’i ertelemek için seçenekler sunar. Burada tek hamlede “mükemmel ayar” aramak yerine, önce stabiliteyi koruyup sonra hız kazanımı kovalamak daha iyi sonuç verir.

3) JavaScript optimizasyonu

JS optimizasyonu en fazla hız kazandıran ama en fazla sorun çıkarabilen kısımdır. Menü açılırları, slider’lar, form validasyonları, ödeme adımları gibi etkileşimli bölümler JS’e bağlıdır.

• Optimize JavaScript Code: Çoğu sitede açılabilir.
• Aggregate JS-files: Test ederek aç. Modern protokollerde şart değil; bazı sitelerde faydalı olabilir.
• Force JavaScript in <head>: Genelde önerilmez; render-blocking riskini artırabilir.
• Defer: JS’i erteleme (defer) çoğu senaryoda daha güvenli bir performans hamlesidir.

Pratik yöntem: JS optimizasyonunu açtıktan sonra, önce ana sayfa + kategori + tekil yazı sayfasını test et. Ardından mobil menü, arama, sepet/ödeme (varsa), iletişim formu gibi “kritik tıklama alanlarını” tek tek dene. Bir şey bozulursa, genellikle çözüm “hariç tutma (exclude)” listesinden geçer.

4) Exclude (hariç tutma) mantığı: Sorun çözmenin anahtarı

Autoptimize’ın en güçlü yanı, sorun çıkaran dosyaları dışarıda bırakmana izin vermesidir. Örneğin bir eklentinin JS’i minify/aggregate sonrası bozuluyorsa o dosyayı hariç tutarsın. Mantık basit: “her şeyi optimize etmek” yerine, işi bozan parçayı optimize etmemek.

• Bir dosyayı hariç tutarken tam URL yerine çoğu zaman dosya adının bir kısmı yeterli olur (ör. plugins/eklentiadi/ gibi).
• Sorun inline JS kaynaklıysa, inline kod içinde geçen ayırt edici bir metni exclude alanına eklemek gerekebilir.

Images sekmesi: Görsel optimizasyonu ve lazy-load dengesi

Autoptimize görsel tarafında da seçenekler sunabilir (kurulumuna ve etkin özelliklere bağlı olarak). Burada kritik nokta, “LCP görseli” (genelde sayfanın üst kısmındaki büyük hero görsel) ile lazy-load’un çakışmamasıdır. Üstte görünen ana görseli tembel yüklemeye (lazy-load) almak bazen LCP’yi kötüleştirebilir.

• Lazy-load açacaksan ana görselin doğru yüklendiğini kontrol et (özellikle mobilde).
• Ürün görselleri/galeri gibi çok görselli sayfalarda lazy-load genelde faydalıdır.
• WebP/AVIF kullanıyorsan, temanın veya CDN’in bu formatları nasıl servis ettiğini kontrol et; çift optimizasyon bazı durumlarda gereksiz olabilir.

Extra sekmesi: Küçük ayarlar, büyük etki

Extra sekmesi çoğu sitede “ince ayar” bölümüdür. Burada amaç, gereksiz kaynakları temizlemek ve kritik bağlantıları hızlandırmaktır.

Google Fonts optimizasyonu

Google Fonts, performans puanlarında sık sık uyarı çıkarır. Autoptimize ile fontları optimize etmek ya da bazı senaryolarda fontları tamamen kaldırmak mümkün olabilir. Ancak font kaldırma, tasarımın görünümünü değiştirebilir.

• Önce font isteklerini azaltmayı dene (tek aile, az ağırlık).
• Ardından Autoptimize font optimizasyonunu devreye al.
• Tasarım değişiyorsa geri al ve fontları tema tarafında daha kontrollü yönet.

Emoji ve gereksiz WordPress yükleri

WordPress’in emoji script’leri küçük görünür ama her istek, her milisaniye değerli. Extra sekmesinde emoji gibi “çekirdekten gelen” küçük yükleri kapatmak çoğu sitede problemsizdir.

Remove WordPress block CSS (Gutenberg CSS)

Blok editörü yoğun kullanılmayan veya klasik editör/özel builder kullanan sitelerde Gutenberg’in bazı stil dosyalarını kaldırmak fayda sağlayabilir. Fakat bloklara dayalı sayfaların görünümü etkilenebilir.

• Bu seçeneği açtıktan sonra özellikle blok içeren sayfaları kontrol et (buton, tablo, galeri, kapak blokları).
• WooCommerce blokları kullanıyorsan ayrıca dikkat et.

Critical CSS: Render-blocking CSS problemini doğru ele almak

“Render-blocking CSS” uyarısı çoğu sitede çıkar. Burada hedef, sayfanın ilk görünen alanını (above the fold) hızlı çizdirecek minimum CSS’i inline yapmak, kalan CSS’i ise ertelemektir. Autoptimize kritik CSS tarafında manuel veya servis tabanlı (premium) yaklaşımlara kapı açar.

En pratik yaklaşım:

• Önce siteyi bozmadan CSS optimizasyonunu oturt.
• Sonra kritik CSS’i devreye al (önce ana sayfa gibi en kritik şablon).
• CLS artışı, “flash of unstyled content” gibi etkiler görürsen kritik CSS kapsamını gözden geçir.

Kritik CSS yanlış olursa sayfa “geç boyanır” ya da “bir an bozuk görünür, sonra düzelir” hissi oluşturur. Bu da kullanıcı deneyimini baltalar. Skor uğruna görünümü riske atmak yerine, adım adım ilerlemek daha sağlıklıdır.

Cache yönetimi: Autoptimize cache şişmesi ve güvenli temizlik

Autoptimize optimize ettiği dosyaları cache klasöründe tutar; bu normaldir. Ancak bazı ayarlar (özellikle inline CSS/JS’yi birleştirme) her sayfa için farklı dosya üretebilir ve cache hızla büyüyebilir.

• Cache büyüyorsa ilk şüpheli: “aggregate inline JS/CSS” seçenekleri.
• Çok sayıda sayfa tipi olan sitelerde (filtreli ürün listeleri, üyelik alanları) page bazlı varyasyonlar cache’i şişirebilir.

Temizleme tarafında ise dikkat: Autoptimize cache’ini temizlediğinde, sayfa cache’in (varsa) hâlâ eski Autoptimize dosyalarına referans veriyor olması sayfayı bozabilir. Bu yüzden cache temizliğini tek başına değil, katmanlı düşün:

• Önce Autoptimize cache’i temizle (Ayarlar → Autoptimize içinde “Save changes & clear cache” veya yönetim çubuğundan).
• Ardından sayfa cache’i/hosting cache/CDN cache varsa onları da temizle.
• Son olarak tarayıcıda “hard refresh” ile (Ctrl+F5) test et.

En sık yapılan hatalar (ve hızlı çözümleri)

1) Birden fazla minify/optimize eklentisini aynı anda çalıştırmak

Cache eklentilerinin bir kısmı zaten minify sunar. Autoptimize ile aynı işi iki farklı eklentiye yaptırınca çakışma ve bozulma riski artar. Çözüm: Tek bir katmanda minify/optimize yap, diğerinde kapat.

2) JS tarafında agresif ayarlarla başlamak

JS’te “aggregate + minify + inline script’leri de kat + head’e zorla” gibi agresif kombinasyonlar, özellikle e-ticarette checkout adımını bozabilir. Çözüm: Önce “optimize + defer” ile başla; gerekirse aggregate dene.

3) Exclude kullanmamak

Bir şey bozulduğunda eklentiyi kapatmak kolay gelir; ama çoğu zaman sorun tek bir dosyadadır. Çözüm: Bozulan özelliği bul, o dosyayı exclude et, kalan optimizasyondan faydalan.

4) CDN/Cloudflare ayarlarını hesaba katmamak

CDN kullanıyorsan bazı optimizasyonlar CDN tarafında zaten yapılıyor olabilir. Autoptimize ile CDN aynı işi yaparsa “çifte işlem” oluşabilir. Çözüm: CDN’in minify/rocket loader benzeri özelliklerini kontrol et, gerekirse bir tarafı kapatıp test et.

Eklenti ekosistemi: Autoptimize ile birlikte mantıklı kombinasyonlar

Autoptimize tek başına güçlüdür; ama bazı senaryolarda yanına doğru eklentiyi koymak işi kolaylaştırır. Burada amaç “eklentiyi şişirmek” değil, görevleri doğru ayırmak:

• Sayfa cache eklentisi: HTML cache katmanı sağlar (Autoptimize’ın yaptığıyla aynı değil).
• Görsel optimizasyon eklentisi: Toplu WebP/AVIF dönüşümü ve sıkıştırma işleri için.
• Database temizlik eklentisi: Otomatik yük (autoload) şişmesini ve gereksiz kayıtları kontrol etmek için.

Bir eklenti önerisi verirken tek kriter “popülerlik” olmamalı. Hosting’in kendi cache’i varsa, ayrıca cache eklentisi kurmak gerekmeyebilir. Bu yüzden Autoptimize ayarlarını yaparken önce bariz çakışmaları ortadan kaldırmak daha temiz bir yol olur.

Adım adım test akışı: Hangi sırayla açıp kontrol etmeli?

• 1) Autoptimize’ı etkinleştir, hiçbir agresif ayar yapmadan sadece HTML optimizasyonunu aç.
• 2) Siteyi gez: ana sayfa, kategori, tekil yazı, iletişim formu.
• 3) CSS optimize seçeneğini aç. Tasarımda kayma var mı bak.
• 4) Sorun yoksa JS optimize + mümkünse defer yaklaşımıyla ilerle.
• 5) Birleştirme (aggregate) gerekiyorsa CSS/JS için ayrı ayrı dene; tek hamlede ikisini birden açma.
• 6) Bir şey bozulursa: önce ilgili kısmı kapat, sonra exclude listesiyle nokta atışı düzelt.
• 7) Cache temizliği: Autoptimize + sayfa cache + CDN sırasıyla temizle ve tekrar test et.

Hızlı kontrol listesi: Autoptimize ayarların “mantıklı” mı?

• HTML optimize açık ve sayfada kırılma yok.
• CSS optimize açık; aggregate sadece gerçekten fayda sağlıyorsa açık.
• Inline CSS/JS aggregate seçenekleri, cache şişirmiyorsa ve ihtiyaç varsa açık.
• JS optimize açık; etkileşimli alanlar çalışıyor (menü, slider, form, sepet).
• Defer yaklaşımı düşünülmüş; “head’e zorla” gibi agresif ayarlar mecbur kalmadıkça kapalı.
• Google Fonts ve emoji gibi küçük optimizasyonlar kontrollü uygulanmış.
• Autoptimize cache temizliği sonrası sayfa cache/CDN cache de temizleniyor.
• Bozulan bir alan olursa eklentiyi kapatmak yerine önce exclude listesi deneniyor.

Autoptimize hangi ayarlar açılınca site bozulur?

En sık sorun çıkaran kombinasyon JS ve CSS tarafında “aggregate (birleştirme)” ve inline kodları da birleştirme seçenekleridir. Özellikle JS’te agresif ayarlar menü, slider, form ve ödeme adımlarını bozabilir; çözüm genelde ilgili dosyayı exclude etmektir.

HTTP/2 kullanıyorsam Autoptimize’ta dosya birleştirme gerekli mi?

Çoğu modern sitede sadece minify + defer yaklaşımı yeterli olabilir; dosya birleştirme her zaman şart değildir. Yine de bazı temalarda birleştirme fayda sağlayabilir; en doğrusu açıp kapatarak ölçüm ve görsel kontrol yapmaktır.

Autoptimize cache neden şişer, nasıl kontrol altında tutarım?

Inline CSS/JS’yi de birleştirmek ve sayfa bazlı değişken üreten script’ler cache’i büyütebilir. Cache şişiyorsa inline aggregate seçeneklerini kapatıp, değişken üreten kodları exclude ederek dosya üretimini stabilize etmek işe yarar.

Cache temizleyince sayfamın tasarımı bozuluyor, sebebi ne?

Autoptimize cache temizlendiğinde sayfa cache veya CDN hâlâ eski optimize dosyalara referans veriyorsa kırılma görülebilir. Autoptimize cache’ten sonra sayfa cache/hosting cache/CDN cache’i de temizleyip hard refresh ile test etmek gerekir.

Autoptimize ile cache eklentisi aynı anda kullanılabilir mi?

Evet, genelde en iyi sonuç bu şekilde alınır; çünkü görevleri farklıdır. Ancak cache eklentisinde minify özelliği açıksa Autoptimize ile çakışabilir; minify/optimize işi tek bir tarafta bırakılıp diğerinde kapatılmalıdır.