WebmasterWordpress

W3 Total Cache Minify Ayarları

Bu yazımda, W3 Total Cache Minify ayarlarını ayrıntılı olarak açıklayacak ve hangi durumlarda kullanmanız gerektiğinden bahsedeceğim. Minify modülünün çok dikkatli bir şekilde kurgulanması gerektiğini belirtmem gerekiyor. Çünkü bu; sitenizdeki HTML, CSS ve JS dosyalarının yapısını bozabilir. Ama korkmayın, Minify özelliğini kapattığınızda düzeliyor her şey. Şimdi adım adım ilerleyelim.

Minify Nedir?

“Minify”ın kelime anlamı “küçültme”dir. Bu modülde her bir HTML, CSS ve JS dosya türü, tek bir link üzerinden çağrılır. Örneğin sayfanızda 5 farklı js dosyası bulunuyorsa, bu dosyalar tek bir link(js dosyası) altında birleştirilir, gereksiz alanlar silinir ve neredeyse %70’lere kadar küçültülür. Bu yapıldığında ise, sitedeki sorgular azalır ve sunucu yanıt süresi kısalırken dosyaların yüklenme süresi de düşer. Bu nedenle W3 Total Cache Minify Ayarları ile web sitenizi nasıl hızlandıracağınızı adım adım açıkladım.

W3TC Minify Özelliği Hangi Durumlarda Kullanılmalıdır?

Bu özelliği, yukarıda belirttiğim dosya türlerinde optimizasyon gereksinimi olması durumunda kullanmanız gerekiyor. İyi güzel de optimizasyona ihtiyacı olduğunu nasıl anlayacağız? Bunun için Gtmetrix’i kullanacağız. Eğer bize, JS ve CSS kaynaklarını küçültmemiz öneriliyorsa ihtiyacımız var demektir. %90’ın üzerinde bir puanımız varsa dosyalarımız zaten küçültülmüştür. Küçültülmüş bir dosyayı bir daha küçültmeye kalkarsanız ortalık karışır, ekranda ne idüğü belirsiz karakterlerle karşılaşırsınız. Ne yazık ki W3TC Minfy özeliiği, bir js ve css dosyasının küçültülmüş olup olmadığını algılayamıyor. Bu karakterlerle karşılaşırsanız, minify özelliğini devre dışı bırakmanız gerekir.

Gtmetrix - Sıkıştırılmış JS ve CSS Dosyası Örneği

Yukarıdaki örnekte gördüğümüz gibi, CSS ve JS dosyalarımız zaten sıkıştırılmış durumda. %99’luk bir puan aldığımız için W3TC minify özelliğini kullanmaya gerek durmuyoruz.

Gtmetrix - Optimize Edilmemiş JS ve CSS

Bu örnekte de optimize edilmemiş halini görebiliriz. Bu arada Mega’cılara uyuz olduğum için bu örneği verdim. Mega Holdings(Easy Builder) ile oluşturulmuş rezil bir site! Her neyse, burada gördüğümüz oranlar sitenin Minify özelliğine acil bir şekilde ihtiyacı olduğunu gösteriyor bize. O halde başlayalım.

Minify Özelliğini Kullanırken Dikkat Edilecek Adımlar

  1. Her bir özelliği açtığımızda, bir sonraki ayara geçmeden önce “Save Settings&Purge Caches” butonuna tıklayıp sitemizde bir bozulma var mı diye bakmamız gerekiyor. Eğer bozulma varsa o özelliği kapatıp tekrar aynı butona tıklıyoruz ve bir sonraki işleme geçiyoruz(bozulma yoksa da geçiyoruz:) )
    W3TC Save Settings&Purge Caches
  2. Site patladı diye panik yapmıyoruz. Özelliği kapattıktan sonra site kendine gelecektir.
  3. Sitede sorun olması durumunda ziyaretçilerinizin etkilenmemesi için WP Maintenance Mode eklentisini kurarak, ziyaretçilerinize sitede bakım olduğunu belirten bir sayfa göstermenizi öneririm.
  4. Sorun olacağını fazla zannetmiyorum ancak, veritabanı ve dosyalarınızın yedeklerini alabilirsiniz.

Genel Ayarlar

W3TC Minify Genel Ayarları

Rewrite URL structure: Seçili olarak kalmalı. CSS ve JS kaynaklarının nasıl getirileceğiyle alakalı bir mevzu. Ben de tam bilmiyorum zaten.

Disable minify for logged in users: Bu ayar seçilmemelidir. Seçilirse, kullanıcı girişi yapmış kullanıcılar için minify özelliği kapanmış oluyor. Bu, kullanıcı girişi yapmış ve yapmamış ziyaretçiler için farklı CSS ve JS kaynaklarının getirilmesine yol açar. Giriş yapmış kullanıcılar içi minify özelliğini kapatmak için bir nedenimiz yok, ayrıca CPU yükünü artıracağından önerilen bir durum değildir.

Minify error notification: Burada “Admin Notofication” seçili olmalıdır. Önbellek oluşturulurken hata oluşması durumunda, Admin rolüne sahip kullanıcıya bilirim gönderilir.

HTML &XML

 

W3TC Minify - HTML &XML Ayarları

Buradaki ayarlar oldukça basittir. Temel olarak, farklı bir dosyada çağrılmayan satır içi CSS ve JS dosyalarını küçültülerek, HTML’deki gereksiz karakterler silinir. Yukarıdaki gibi; HTM minify etkin olmalı, Inline CSS Minification(satır içi CSS küçültmesi), Inline JS minification(satır içi JS küçültmesi) ve Line break removal(satır sonu kaldırma) ayarları seçili olmalı. Don’t minify feeds seçeneği ise seçmek için bir nedenimiz yok.

Ignored comment stems: Kaldırılmasını istemediğiniz HTML yorumları burada yer almalıdır. Yorumun içinde geçen bir terimi buraya girmeniz yeterlidir. O terimin geçtiği yorum alanı silinmeyecektir.

JS Ayarları (Otomatik Mod)

Eğer “Genel Ayarlar”daki minify modunu otomatik olarak seçtiyseniz aşağıdaki gibi bir JS ayar kısmı çıkacaktır.

W3TC Minify - JS Ayarları (Otomatik Mod)

Bu kısımdaki ayarlarda, JS dosyalarının nasıl küçültüleceğini belirleyeceğiz. Otomatik modu seçtiğimiz için, buradaki seçtiğimiz tüm ayarlar, tüm JS dosyalarına uygulanacak genel kurallar olacak.

JS minify settings: “Minify” seçeneğini seçerseniz, JS dosyalarını hem küçültür hem de tek bir dosyada bir araya getirmiş olursunuz. Ancak bu seçeneği seçtikten sonra sitede problem çıkıyorsa “Combine Only” seçeneğini deneyin. Bu seçenekte ise JS dosyalarını sıkıştırmadan tek bir dosyada birleştirirsiniz.

Preserved comment removal(yorum kaldırma) ve Line break removal (satır sonu kaldırma) işlemleri önerilmez. Çünkü bu seçenekler sık sık JS hatası almanıza ve site işlevselliğinin bozulmasına neden olmaktadır. Ayrıca “Combine Only” seçeneğini işaretlersiniz bu özellikler çalışmaz.

Embed Type: Burada JS dosyalarının nasıl yükleneceği ile ilgili bir kaç seçenek sunuyor. Eğer “Default(blocking)” çalışmazsa diğer seçeneklerin her birini ayrı ayrı deneyebilirsiniz.

HTTP/2 push: Bu özellik, küçültülmüş JS dosyalarının, hızlıca yüklenmesini sağlıyor. Ancak kullanıldığında bir sorun yaratıyor mu veya nasıl bir etkisi oluyor tam bilmediğimden bu kısmı atlıyorum. Siz deneyebilir, hatta denedikten sonra bana yazarsanız burayı güncelleyebilirim.

JS Ayarları (Manuel Mod)

Eğer otomatik mod sitenizde sorunlara neden oluyorsa manuel mod’u deneyerek her bir JS dosyasının her birin için farklı ayarlar seçebilir ve sadece bazı dosyaları küçültmeyi deneyebilirsiniz. Belirli bir altyapınız bulunmuyorsa manuel modu denemek doğru olmayacaktır. Çünkü manuel modu kullanmak için bir JS dosyasının küçültmeye ihtiyacı olup olmadığı, bir JS dosyasının çalışması için öncesinde başka bir dosyanın yüklenmesinin gerekip gerekmeyeceği gibi bilgilere sahip olmanız gerekiyor.

Manuel Modu seçtiğinizde Minify sayfasının üstündeki “Help” butonuna tıklayın.

w3tc-minify-manuel-hep-button

Ardından aşağıdaki gibi pop-up çıkacak. Burada her gib JavaScript dosyasına nasıl bir işlem yapılacağını seçebilirsiniz. “Verify URL” butonuna tıkladığınızda ilgili JS dosyasını inceleyebilirsiniz. Hangi JS dosyasının önce getirlmesi gerektiğine bağlı olacak sürükle-bırak yöntemiyle öncelik atayabilirsiniz. Hangi JS dosyasının HTML’in neresinde(head-body) bulunması gerektiğini seçebilirsiniz. Son olarak, hangi JS dosyasının hangi sayfa yapısında küçültüleceğini belirtebilirsiniz.

W3TC Minify - Manuel Mode Ayarları

En optimal ayarın, JS dosyalarının <body> içinde olması ve Non-Blocking… kullanılması olduğunu belirtmiş(WPMUDEV). Ancak uyarmış, bu yapı sitenizin işlevselliğini bozabilir. Deneme yanılma yöntemiyle denemekte yarar olduğunu düşünüyorum.

Minify CSS

W3TC CSS Minify-Combine Ayarları
W3TC CSS Minify-Combine Ayarları

Bu kısımda CSS dosyalarının küçültülmesi için çeşitli ayarlar yapacağız.

CSS minify settings:

Enable seçildiğinde CSS dosyaları hem minify edilir hem de birleştirilir.

Combine only seçildiğinde minify edilmez, sadece birleştirilir.

Preserved comment removal seçildiğinde CSS dosyası içindeki yorumları kaldırır.

Line break removal seçildiğinde ise satır sonu kodları kaldırılır.

Buradaki ayarların optimum hali için “Combine Only” dışındaki diğer 3 seçeneğin seçili olduğundan emin olun.

@import handling: Bu ise tüm CSS doslyarını tek bir CSS dosyası içine aktarır. Bu ayarda en uygun olanı”Process”dir. Bu ayarı seçmeden önce “Combine Only” dışındaki diğer 3 seçeneğin seçili olduğundan emin olun mutlaka. Aksi halde doğru çalışmayabilir.

HTTP/2 push: Bu özellik, küçültülmüş CSS dosyalarının, hızlıca yüklenmesini sağlıyor. Ancak kullanıldığında bir sorun yaratıyor mu veya nasıl bir etkisi oluyor tam bilmediğimden bu kısmı atlıyorum. Siz deneyebilir, hatta denedikten sonra bana yazarsanız burayı güncelleyebilirim.

Eğer Manuel Mod’u seçmişseniz aşağıdaki özellik de görünecektir.

CSS file management: Burada temanızdaki CSS doslyarını eklemeniz gerekiyor. URL’i ekledikten sonra “Verify URI” butonuna tıklayıp hata olmadığına emin olalım. Butona tıkladığınızda CSS dosyası açılıyorsa sorun yok demektir.

W3TC Minify Help Wizard
W3TC Minify Help Wizard

Ardından sayfanın en üstündeki “Help” butonuna tıklıyoruz. JS dosyalarının altında stil dosyaları bulunur. Buradan hangi CSS doyasının önce işleme alınması istiyorsanız yukarıdan aşağıya doğru sıralamasını yapmalısınız.

CSS Öncelikleri
CSS Öncelikleri

Gelişmiş Ayarlar

W3TC Minify Gelişmiş Ayarları
W3TC Minify Gelişmiş Ayarları

Update external files every: Harici dosyaların kaç saniyede bir güncelleneceğini bu seçenek ile ayarlıyorum. Bendeki ayar 86400 saniye, yani 1 saat 45 dakikada bir güncelleniyor. Bu ayarı olduğu şekilde bırakabiliriz. Sadece çok sık değişen harici dosyalarınız bulunuyorsa düşürün derim.

Garbage collection interval: Süresi dolan önbellek verisinin hangi sıklıkla kaldırılacağını seçiyoruz burada. Yine 84400 gibi bir değer ideal. Çok sık güncellenen ve yoğun bir siteniz varsa bu değeri düşürebilirsiniz.

Never minify the following pages: Burada ise hangi sayfalarda veya URL yolunda Minify ayarını hariç tutacağınız belirtiyoruz. Örneğin ben AMP sayfalarını hariç tutmuşum.

Never minify the following JS files: Hangi JS dosyalarının minify edilmeyeceğini burada belirtiyoruz. Örnek vermek gerekirse, halihazırda minify edilmiş js dosyalarını buraya ekleyerek hataların önüne geçebilirsiniz.

Never minify the following CSS files: Burada da hangi CSS dosyalarının minify edilmeyeceğini belirliyoruz.

Rejected user agents: Belirli kullanıcı gruplarına veya botlara minify edilmiş web sayfasını göstermek istemiyorsanız buraya girebilirsiniz.

Bu yazımda W3 Total Cache Minify ayarlarından bahsettim. Umarım yeterince açıklayıcı ve anlaşılır olmuştur. Eğer anlamadığınız veya anlatamadığım bir konu varsa lütfe yorum atın.

Arif Onur Hangişi

İnternet tutkunu ve sorunlara çözüm arayan bir blog yazarıyım. Ayrıca dijital reklamcılık alanında profesyonel çözümler sunuyorum. Ayrıntılı bilgi için Hakkımda sayfasını ziyaret edebilirsiniz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Reklam Engelleyici Tespit Edildi

İçeriği görebilmen için reklam engelleyicisini arifhangisi.com için devre dışı bırakmalısın.