En iyi Autoptimize ayarlarına dalmadan önce, Autoptimize’ın harika bir optimizasyon eklentisi olmasının üç nedenini hızlıca gözden geçirelim.
- Autoptimize ücretsiz sürümü WordPress sitenizi optimize etmek için tam bir özellik kümesi vardır.
- Autoptimize kesinlikle bir optimizasyon eklentisidir ve herhangi bir HTML sayfası önbelleğe alma işlemi yapmaz. Bu, tüm web barındırıcılarıyla uyumlu olduğu anlamına gelir özel sayfa önbelleğe alma yapılandırmalarına sahip olanlar bile .
- Autoptimize, WordPress deposunda 1 milyondan fazla aktif yüklemeye sahiptir ve yeni özellikler ve hata düzeltmeleriyle sürekli olarak güncellenir.
JS, CSS ve HTML Ayarlarını Otomatik Optimize Edin
HTML, CSS ve JavaScript, Autoptimize’ın ekmek ve tereyağıdır. Diğer optimizasyon eklentilerinde olduğu gibi, Autoptimize’ın kapsamlı özellik setine ve ayarlarına dalmak göz korkutucu bir görev olabilir. İşleri kolaylaştırmak için, sitenizin performansını iyileştirmek için en iyi Otomatik Optimizasyon ayarlarını derledik.
JavaScript Seçenekleri
Autoptimize’da JavaScript optimizasyonu.
JavaScript Kodunu Optimize Edin
Bu seçeneği etkinleştirmenizi öneririz. “JavaScript kodunu optimize et” etkinleştirildiğinde, Autoptimize JavaScript dosyalarınızı küçültecektir.
JS Dosyalarını Birleştirme
Autoptimize’ın “JS dosyalarını birleştir” seçeneği, tüm JavaScript dosyalarınızı tek bir dosyada birleştirir. Geçmişte, JS ve CSS dosyalarını birleştirmek, WordPress optimizasyonunda önemli bir adımdı. Paralel indirmeleri ve çoğullamayı destekleyen modern HTTP / 2 sunucuları kullanıyoruz – bu, HTTP / 2’nin aynı anda birden fazla dosyanın indirilmesine izin verdiği için dosyaları birleştirmenin artık eskisi kadar önemli olmadığı anlamına geliyor . Bununla birlikte, CSS ve JS dosyalarının bir araya getirilmesi, belirli WordPress site türleri için hız artışına neden olacaktır, bu nedenle bu seçenek etkinleştirilip devre dışı bırakılarak sayfa hızınızı test etmenizi öneririz .
Ayrıca Satır İçi JS’yi Topla
“Ayrıca satır içi JS’yi bir araya getir” seçeneği, HTML’nizdeki satır içi JS’yi çıkarır ve bunu Autoptimize’ın optimize edilmiş JS dosyasıyla birleştirir. Bu seçenek Autoptimize’ın önbellek boyutunda hızlı bir artışa neden olabileceğinden, etkinleştirmek için belirli bir nedeniniz yoksa bu seçeneği devre dışı bırakmanızı öneririz.
JavaScript’i içeri zorla
Çoğu durumda, JavaScript dosyalarını sitenizin HTML <head>öğesine yüklenmeye zorlamanızı önermiyoruz . JS’yi erken yüklemeye zorlamak , sayfa hızınızı yavaşlatabilecek oluşturmayı engelleyen öğelere neden olabilir. <head>Öğeye yüklenmesi gereken JavaScript dosyalarınız varsa , bu komut dosyalarını Autoptimize’dan hariç tutmanızı öneririz.
Komut Dosyalarını Autoptimize’dan Hariç Tut
Bu seçenek, belirli dizinleri ve JavaScript dosyalarını toplamanın dışında tutmanıza olanak tanır. Varsayılan olarak, Autoptimize aşağıdaki komut dosyalarını hariç tutar.
- wp-includes / js / dist /
- wp-includes / js / tinymce /
- js / jquery / jquery.js
Hariç tutulacak bir komut dosyası eklemenin yalnızca varsayılan olarak toplamayı etkilediğini unutmayın. Hariç tutulan JavaScript dosyaları, “Çeşitli Seçenekler” altında “Hariç tutulan CSS ve JS dosyalarını küçült” işareti kaldırılmadıkça yine de küçültülür.
Try-Catch Wrapping Ekle
“Try-Catch Wrapping ekle” seçeneğini etkinleştirmek JavaScript kodunuzu deneme-yakalama bloklarına saracaktır. Bu seçenek, JS küçültme ve toplamadan kaynaklanan sorunların giderilmesi için kullanışlıdır .
CSS Seçenekleri
CSS optimizasyonunu otomatik optimize edin.
CSS Kodunu Optimize Edin
Bu seçeneği etkinleştirmenizi öneririz. “CSS kodunu optimize et” etkinleştirildiğinde, Autoptimize CSS dosyalarınızı küçültecektir.
CSS Dosyalarını Toplayın
Autoptimize’ın “CSS dosyalarını birleştirme” seçeneği, tüm CSS dosyalarınızı tek bir dosyada birleştirir. Daha önce bahsettiğimiz gibi, bu özellik HTTP / 2’yi destekleyen sitelere fayda sağlamayabilir. Sayfa hızı üzerinde olumlu bir etkisi olup olmadığını belirlemek için bu seçeneği sitenizde A / B testini öneririz.
Ayrıca Satır İçi CSS’yi Topla
Bu seçenek, satır içi CSS’yi Autoptimize’ın CSS dosyasına taşır. Satır içi CSS’yi tarayıcıda önbelleğe alınabilir bir CSS dosyasına taşımak sayfa boyutunu azaltabilir, ancak çoğu durumda bu seçeneği devre dışı bırakmanızı öneririz.
Veri Oluştur: Görüntüler için URI’ler
Bu seçenek etkinleştirildiğinde, Autoptimize küçük arka plan görüntülerini base64 olarak kodlar ve bunları CSS’ye gömür. Sayfa hızınız üzerindeki etkisini ölçmek için bu seçeneği test etmenizi öneririz. Görüntüleri base64 formatına kodlamak HTTP isteklerinin sayısını azaltırken , base64 temsil dosyaları tipik olarak ikili eşdeğerlerinden% 20-30 daha büyüktür.
Satır İçi ve Defer CSS
Kritik CSS’yi satır içine almak, bazı siteler için önemli bir hız artışı sağlayabilir. Buradaki fikir, “ekranın üst kısmındaki” öğeler için gerekli olan satır içi stillerdir. Uygulamada, satır içi CSS genellikle yapısal öğeler, genel yazı tipi aileleri ve boyutları ve gezinme stili gibi öğeleri hedefler.
Bu temel unsurları satır içine alarak, daha büyük tam CSS dosyası, sayfanın görünümünü etkilemeden daha sonra yüklenebilir. Kritik stilleri manuel olarak çıkarmak mümkün olsa da , stilleri başlangıç noktası olarak oluşturmak için bunun gibi bir araç kullanmanızı öneririz .
Kritik CSS oluşturun.
Kritik CSS’yi oluşturduktan sonra, kopyalayıp Autoptimize ayarlarına yapıştırın.
Autoptimize’da CSS’yi satır içi yapın ve erteleyin.
Sonraki adım, sitenizin ön uç deneyimini test etmektir. Bazı tuhaf biçimlendirilmemiş içerik (FOUC) yanıp sönmeleri fark ederseniz , büyük olasılıkla bu stil uygulanmamış öğeleri tanımlamanız ve karşılık gelen stilleri satır içi için Autoptimize’a eklemeniz gerekecektir.
Autoptimize, WordPress sayfalarınız için otomatik olarak kritik CSS oluşturan bir “güçlendirme” sunar. Deneyimlerimize göre, bu özellik kritik CSS’yi oluşturmak için harici API çağrılarını kullandığından sitenizi zaman zaman yavaşlatabilir. Bu nedenle, ilk kritik CSS üretimi, harici bir sunucunun yanıt verme hızına bağlıdır. Çoğu durumda, herhangi bir harici API çağrısı gerektirmeyen yukarıda bahsedilen yöntem daha temiz bir çözümdür.
Tüm CSS’yi satır içi
Çoğu site için, sayfa boyutunu önemli ölçüde artırabileceğinden tüm CSS’yi satır içine almanızı önermiyoruz. Ayrıca, tüm CSS’yi satır içine almak, web tarayıcısının CSS’yi önbelleğe almasını imkansız hale getirir.
CSS’yi Autoptimize’dan hariç tut
Varsayılan olarak, Autoptimize aşağıdaki dizinleri ve CSS dosyalarını toplamanın dışında bırakır. Autoptimize’ın CSS dosyalarınızdan herhangi birini toplamasını önlemek istiyorsanız, bunları bu listeye ekleyebilirsiniz. JavaScript dışlamasına benzer şekilde, bu özelliğin varsayılan davranışı CSS dosyalarının küçültülmesini engellemez – yalnızca toplanır.
- wp-content / cache /
- wp-content / uploads /
- admin-bar.min.css
- dashicons.min.css
HTML Seçenekleri
Autoptimize’ın HTML optimizasyonu, boşlukları kaldırarak sayfalarınızın boyutunu azaltmanıza yardımcı olabilir.
Autoptimize’da HTML optimizasyonu.
HTML Kodunu Optimize Edin
HTML’nizdeki gereksiz beyaz boşlukları kaldırarak sayfa boyutunu küçülttüğü için “HTML’yi optimize et” kodunu etkinleştirmenizi öneririz. Bu özellik çoğu siteyle uyumlu olsa da, boşlukları kaldırmak bazı sitelerde hatalara neden olabilir. Bu nedenle, bir üretim ortamında kullanmadan önce HTML kod optimizasyonunu iyice test etmenizi öneririz.
HTML Yorumlarını Sakla
Optimize edilmiş sayfalarınız için HTML yorumlarını saklamak istiyorsanız bu özelliği etkinleştirin.
CDN Seçenekleri
Statik varlıkları hızlandırmak için CDN URL’sini Autoptimize’a eklemeniz gerekir. Cloudflare gibi CDN özelliklerine sahip bir proxy hizmeti kullanıyorsanız , Autoptimize’ın CDN seçeneklerinde hiçbir şey yapılandırmanıza gerek yoktur.
Autoptimize’da CDN ayarlarını yapılandırın.
Önbellek Bilgileri
Autoptimize’ın “önbellek bilgisi”, önbellek klasörünün konumu ve izinlerinin yanı sıra önbelleğe alınan stillerin ve komut dosyalarının toplam boyutu gibi önemli bilgileri görüntüler. “Yazabilir miyiz?” Seçeneğinin yanında “Hayır” görürseniz, klasör izinlerini düzeltmek için barındırıcınızla birlikte çalışmanız gerekir.
Önbellek bilgilerini otomatik optimize edin.
Çeşitli Seçenekler
Autoptimize’ın birkaç çeşitli optimizasyon ayarı vardır. Optimize edilmiş CSS ve JS dosyalarını sitenize yüklemek için sorun yaşıyorsanız, aşağıdaki ayarlardan bazılarını yeniden yapılandırmanız gerekebilir.
Autoptimize’da çeşitli optimizasyonlar.
Toplu Komut Dosyalarını / CSS’yi Statik Dosyalar Olarak Kaydet
Toplanan dosyaları yerel olarak statik dosyalar olarak kaydetmek için bu seçeneği etkinleştirmenizi öneririz. Sunucunuz dosya sıkıştırması ve süresinin dolması için yapılandırılmamışsa, bunu devre dışı bırakmanız gerekebilir.
Hariç Tutulan CSS ve JS Dosyalarını Küçültün
Tüm CSS ve JS dosyalarının küçültülmesini sağlamak için bu seçeneği etkinleştirmenizi öneririz. Ancak, hariç tuttuğunuz CSS ve JS dosyalarınızın bazılarında küçültmeyle ilgili bazı sorunlar fark ederseniz, devam edip bu seçeneği devre dışı bırakabilirsiniz.
Ayrıca Giriş Yapan Düzenleyiciler / Yöneticiler için Optimize Edin
Varlıkların oturum açmış düzenleyiciler ve yöneticiler için optimize edilmesini sağlamak üzere bunu etkinleştirmenizi öneririz. Otomatik optimize ayarlarını oturum açmış bir kullanıcı olarak test ediyorsanız bu önemlidir.
Otomatik Optimize Etmede Görüntü Optimizasyonu
Autoptimize, görüntüleri optimize etmek için ShortPixel ile yerleşik bir entegrasyona sahiptir . Autoptimize entegrasyonu, bir görüntü kalitesi ayarına ek olarak , görüntülerinizin WEBP sürümlerini oluşturmanıza ve sunmanıza da olanak tanır .
Kinsta kullanıcıları için, Autoptimize’daki görüntü optimizasyonu özelliğini kullanmanızı önermiyoruz. Bunun yerine, doğrudan ShortPixel veya Imagify’dan tam özellikli eklentileri kullanmanızı öneririz . Eksiksiz eklentiyle, <picture>Kinsta’da WEBP desteği için gerekli olan, etiketi kullanmak için görüntüleri yeniden yazmak dahil optimizasyon ayarları üzerinde daha ayrıntılı kontrole sahip olacaksınız.
Autoptimize ile görüntüleri geç yükleme.
Autoptimize ayrıca görüntüler için geç yükleme işlevi içerir. Görüntü ağırlıklı sayfalarda sayfa hızını artırmak için bu özelliği etkinleştirmenizi öneririz. Geç yükleme etkinleştirildiğinde, Otomatik İyileştirme, belirli görüntü sınıflarını ve dosya adlarını geç yüklemeden hariç tutmanıza izin verir.
Dışlama ayarı, logolar, sosyal simgeler ve tembel yüklenmemesi gereken diğer önemli görüntü öğeleri gibi görüntüler için kullanışlıdır.
Otomatik Optimizasyonda Ekstra Optimizasyonlar
Autoptimize’da ekstra optimizasyonlar.
Google Yazı Tipleri
Autoptimize, Google Yazı Tiplerini optimize etmek için birkaç farklı seçeneğe sahiptir . Sizin için en iyi seçenek, sitenizin Google Yazı Tiplerini nasıl kullandığına bağlı olacaktır.
- Olduğu gibi bırakın.
- Google Yazı Tiplerini kaldırın.
- Başta birleştirin ve bağlayın.
- Kafada birleştirin ve önyükleyin.
- Yazı tiplerini webfont.js ile eşzamansız olarak birleştirin ve yükleyin.
“Olduğu gibi bırak” seçeneğini kullanmanızı önermiyoruz çünkü hız avantajı sağlamıyor.
Google Yazı Tipleri sitenizde kritik bir gereklilik değilse, bunları kaldırmak ve bunun yerine bir sistem yazı tipi yığını kullanmak, sayfa hızınız üzerinde büyük bir olumlu etki yaratabilir.
Google Yazı Tiplerini sitenizde tutmak istiyorsanız, siteniz için hangisinin en iyi sonucu verdiğini bulmak için son üç seçeneği test etmenizi öneririz.
Emojileri Kaldır
Bu Otomatik Optimize Et seçeneği, WordPress çekirdek emojileriyle ilgili CSS ve JavaScript’i kaldırır. Sayfa boyutunuzu küçültmenize yardımcı olabileceği için bu seçeneği etkinleştirmenizi öneririz. Ayrıca, çoğu ana işletim sistemi, emojiyi içeren yazı tipi yığınlarıyla birlikte gelir. Tabii ki, WordPress sitenizde emojileri devre dışı bırakmanın başka yolları da var .
Statik Kaynaklardan Sorgu Dizelerini Kaldır
Eğer isterseniz Statik kaynaklardan sorgu dizelerini (örn? Ver =) kaldırmak , bu seçeneği etkinleştirebilirsiniz. Sorgu dizelerinin kaldırılması yükleme süresini etkilemeyecektir, ancak sitenizin GTmetrix , Google Pagespeed ve diğer performans testi hizmetlerindeki puanını iyileştirmeye yardımcı olabilir .
3. Taraf Etki Alanlarına önceden bağlanın
Preconnect yönergesi, tarayıcınızın tam bir HTTP isteği gönderilmeden önce DNS aramalarını ve SSL el sıkışma görüşmelerini işlemek için belirli etki alanlarına bağlanmasına izin verir .
Örneğin, sitenizde sunulan bir logo resmi https://site.furkansaglam.cdn.com/logo.pngvarsa, HTML öğenizde <head> HTTP isteği yapılmadan önce Autoptimize’a öğedeki ilk DNS ve SSL bağlantılarını işlemek için bir ön bağlantı yönergesi eklemesi talimatını verebilirsiniz <body>.
Önceden bağlanacağınız önemli harici alanları bulmak için tarayıcınızın geliştirici araçlarını veya denetçisini kullanabilirsiniz. Aşağıdaki örnek sayfada, aşağıdaki alan adlarına harici istekler var.
https://cdn.brianli.comhttps://www.google-analytics.comhttps://www.googletagmanager.com
Bu üç alan, Autoptimize’ın ön bağlantı listesine eklenebilir.
Geliştirici araçlarıyla harici varlıkları bulun.
Performans nedenlerinden ötürü, Autoptimize’ın ön bağlantı listesine altıdan fazla etki alanı eklememenizi öneririz çünkü çok fazla etki alanı için ön bağlantı yönergeleri belirtmek, performansın düşmesine neden olabilir.
Belirli İstekleri Önceden Yükleyin
Ön yükleme yönergeleri, web tarayıcınıza bir varlığı mümkün olan en kısa sürede indirmesi talimatını verir. Bu yönerge, sayfa yükleme işleminin çok erken aşamalarında ihtiyaç duyulan varlıkları indirmek için kullanışlıdır. Pratikte, ön yükleme genellikle özel yazı tiplerinin yükleme sürelerini sayfanın CSS’sinde istenmeden önce yükleyerek hızlandırmak için kullanılır.
Varsa hangi varlıkların WordPress sitenize önceden yükleneceği konusunda bir geliştiriciye danışmanızı öneririz. Performansla ilgili diğer birçok ince ayarlarda olduğu gibi, çok fazla varlığı önceden yüklemek sitenizin daha yavaş yüklenmesine neden olabilir.
asynchronous JavaScript Dosyaları
Autoptimize’in “asynchronous JavaScript dosyaları” özelliği, asyncHTML bayrağı aracılığıyla eşzamansız olarak yüklenecek belirli harici JavaScript dosyalarını belirtmenize olanak tanır . JS dosyalarını eşzamansız olarak yüklemek sayfa hızını artırabilir, ancak hiçbir site işlevselliğinin etkilenmediğinden emin olmak için yeterli testler yapmanızı öneririz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook’ta da bulabilirsiniz
Bir Yanıt
Web sitem icin kullandım Semrush Puanını yüzde 3 arttırdı teşekkür ederim.