Autoptimize ayarları nasıl yapılmaktadır detayları ile bilinmesi gerekmektedir. Fakat ayarlara bakmadan önce neden bu kadar tercih edilmekte olduğunu bilmek gerekmektedir. Autoptimize özellikleri arasında;
- Ücretsiz sürümleri bulunmaktadır. Bu sayede WordPress sitelerini optimize etmeye yarayan geniş özellik kümeleri yer almaktadır.
- Autoptimize optimizasyon eklentisi olarak bulunmaktadır. Ancak HTML sayfalarını ön belleklere alma işlemleri yapmamaktadır. Tüm web barındırıcılarıyla uyumlu olmaktadır. Özel sayfaları önbelleklere alma yapılandırmalarında da tercih edilmektedir.
- WordPress depolarında 1 milyondan daha çok aktif yüklemeler bulunmaktadır. Böylece yeni özellikler ve düzenlemeler sürekli güncellenmektedir.
Autoptimize konusunda gözlenen özellikler birçok avantajı beraberinde getirmektedir.
Yazı İçeriği
JS, CSS ve HTML Ayarlarını Otomatik Optimize Etmek
HTML, CSS ile JavaScript en kolay olan yöntem olmaktadır. Çünkü diğer eklentilerde olduğu gibi, Autoptimize kapsamlı özellik setiyle ayarlarına dalmak biraz zorlu görev olmaktadır. Bu yüzden işleri kolay hale getirmek için otomatik ayarlar tercih edilmektedir.
JavaScript Kodunu Aktif Etmek
javaScript kodunu aktif hale getirmek önerilmektedir. Etkin hale getirildiği zaman Autoptimize JavaScript dosyaları daha küçük bir hale gelmektedir.
JS Dosyalarını Birleştirmek
Autoptimize’de JS dosyalarını birleştirmek için yer alan seçenekle tüm dosyalar tek bir dosya haline gelmektedir. Önceden CSS ile JS dosyalarını bir hale getirmek en önemli adımlardan bir tanesi olmaktaydı. Paralel meydana gelen indirmeler ile çoğullamayı başarmak için http/2 sunucuları kullanılmaktadır. Böylece http/2 aynı süreç içerisinde birden fazla dosya indirmesini sağlamaktır. Fakat gelen güncellemeler ile artık eskisi kadar önemli olmamaktadır. Böylece CSS, JS dosyalarını bir araya getirmek WordPress site türlerinde hızlı artışa yardımcı olmaktadır. Bu yüzden söz konusu alan etkinleştirilmektedir. Ardından sayfa hızlarının test edilmesi önerilmektedir.
JavaScript İçeri Zorlanmaktadır
Autoptimize ayarları 2022 kısmında dosyalar siteden HTML<head> öğesi yüklenmeye zorlamamak gerekmektedir. Bu yüzden sayfa hızlarını yavaşlatmayı oluşturmak engelleyen ögelere neden olmaktadır. <head> öge yüklenmeleri için gerekli olan JavaScript dosyaları yer alırsa komut dosyalarının Autoptimize alanından uzak tutulması önerilmektedir.
Komut Dosyaları Autoptimize’den Uzak Tutulması Gerekmektedir
Autoptimize kullanımı sırasında komut dosyalarını uzak tutmak gerekmektedir. Çünkü belirli dizinler ile JavaScript dosyalarını toplamanın dışında tutmak önerilmektedir. Böylece varsayılanlarda Autoptimize belirli komut dosyalarını hariç tutmaktadır. Bu dosyalar;
- wp-includes / js / dist /
- wp-includes / js / tinymce /
- js / jquery / jquery.js
Hariç tutulması önerilmekte olan komut dosyalarını eklemek sadece varsayılan olarak etkiler sunmaktadır. Hariç tutulan JavaScript dosyaları çeşitli seçenekler yanı sıra hariç tutulan CSS ve JS dosyalarını küçült işareti kaldırmak gerekmektedir. Çünkü aksi halde yine de küçülmeye devam etmektedir.
Try-Catch Wrapping Eklemek
Try-Catch Wrapping eklemek seçeneklerini etkinleştirmek JavaScript kodlarını denemek ve yakalamak için gerekli bloklara sarılmaktadır. Çünkü bu seçenek küçülmek ya da toplamak için kaynaklanan sorunları gidermektedir. Böylece bu alanda kullanışlı olmaktadır.
CSS Türleri
CSS kodu optimize edilmektedir. Autoptimize sayesinde CSS dosyalarının küçülmesi sağlanmaktadır.
CSS Dosyaları Toplanmaktadır
Autoptimize sayesinde CSS dosyalarını birleştirmek gerekmektedir. Böylece gerekli CSS dosyaları tek bir dosyada bir araya gelmektedir. Hatta http/2’yi desteklemek sitelere her zaman fayda sağlayamamaktadır. Böylece sayfa üzerinde olumlu etkiler var mı belirlemek için A/B testi önerilmektedir.
Satır İçi CSS Toplamak Gerekmektedir
WordPress Autoptimize ayarları için bu seçenek öne çıkmaktadır. Böylece Autoptimize’nin CSS dosyalarına taşınması sağlanmaktadır. Bu durumlar dosya boyutlarını küçültmektedir. Fakat genel olarak devre dışı bırakmak önerilmektedir.
Verileri Oluşturmada Görüntüler İçin URI’ler
Söz konusu seçenekler etkinleşmekte olduğunda Autoptimize’deki küçük arka plan görüntüleri base64’le kodlanmaktadır. Böylece CSS’ye gömmektedir. Bu sayede sayfa hızları üzerindeki etkilerini ölçmekte bu özellikler önerilmektedir. Görüntüler base64 formatında kodlamak için http isteklerinin sayısını azaltmaktadır.
Satır İçi ve Defer CSS
Kritik düzeylerdeki CSS’nin satır içine alınması birçok adreste hız artışını sağlamaktadır. Aslında bu alandaki ana fikir ekranın üst kısmındaki ögelere gerekli olan satır içinin stilleri olmaktadır. Uygulama kapsamında satır içi CSS genel olarak yapısal ögeler olmaktadır. Böylece genel yazı tipi aileleri, boyutları ve gezinme stilleri tarzında ögeler hedeflenmektedir.
Temel unsurları satır içine almak, daha yüksek boyutlardaki CSS dosyaları sayfanın görünümlerini etkilememektedir. Hemen ardından yeniden yüklenmektedir. Böylece kritik stilleri manuel bir şekilde çıkarmak mümkün olmaktadır. Stiller başlangıç noktalarından oluşturmak adına bu tarz araçları kullanmak önerilmektedir.
Kritik düzeylerdeki CSS tercih etmek gerekmektedir. Hatta CSS oluşumlarının ardından kopyalamak ve Autoptimize ayarlarına yapıştırmak öncelik olmaktadır. Çünkü Autoptimize sırasında CSS satır içi yapmak ve ertelemek gerekmektedir. Hatta sitelerin ön uç deneyimlerini test etmektedir. Bu sayede tuhaf biçimlendirmemiş içerikte yanma ve sönmek fark edilmektedir. Böylece stil uygulanmamış ögeleri tanımlamak ve karşılık gelen stiller satır içi Autoptimize eklemede gerekli olmaktadır. Autoptimize WordPress sayfalarında otomatik olarak kritik düzeylerde gözlenmektedir.
Comments (2)
Hakan
çok ezbere yazılmış…
tpkmedya
Merhaba kullanıcı yazılan yazı sadece bilgi vermek amacıyla yazılmıştır. Tekrar kontrol edilip eksikleri gidereceğiz sizlere tekrar buradan ulaşacağız.