Breeze v1.2 Yayınlandı: Bu Büyük Güncellemenin Getirdiği Yeni Özelliklere Bir Bakış

Cloudways, Önemli Web Verileri uyumluluğunuzu iyileştirmeye ve nihayetinde web siteleriniz için daha iyi bir PageSpeed ​​Insights puanı sağlamaya odaklanan Breeze v1.2'yi yayınladı.

Hâlâ duymadıysanız, Google bu ay yeni sayfa deneyimi güncellemesini kullanıma sunacak. Kısa süre önce, sitenizin performansını ve güncellemeye karşı diğer sayfa deneyimi faktörlerini ölçmenize yardımcı olmak için ücretsiz bir Google Sayfa Deneyimi Denetleyicisi başlattık. Aslında, 2021'in başından bu yana, ürünümüzü geliştirmeye ve Google'da en iyi sayfa deneyimini sunan güncellemeleri kullanıma sunmaya yoğun bir şekilde odaklandık.

Breeze'i en son sürüme güncellemeden önce, tüm WordPress sitenizi yedeklemeniz veya yeni sürümü bir hazırlama ortamında test etmeniz şiddetle tavsiye edilir. Yeni sürümlerin diğer eklentilerle uyumsuzluğu bazen sorunlara ve rastgele hatalara neden olabilir, bu nedenle hazır bir yedeğiniz varsa WordPress sitenizi hızla geri yükleyebilirsiniz.

Breeze v1.2'deki Yenilikler Nelerdir?

Şimdi Breeze'in 1.2 sürümünde getirdiği heyecan verici yeni özelliklere kısaca bir göz atalım.

Kaynaklar Arası Güvenli Bağlantılar

SEO uygulamalarına aşina iseniz, “noopener noreferrer” niteliklerinin önemini anlayacaksınız. Bu sefer Breeze, hedef değeri “_blank” olan bağlantılara otomatik olarak “noopener noreferrer” niteliği ekleyecek yeni bir özellikle geliyor.

Not: Düzenleyici noopener noreferrer'ı otomatik olarak eklediğinden, bunları WordPress düzenleyicisine eklemeyin; bağlantıları tema dosyalarınıza ekleyin. Bağlantıları ekledikten sonra wp-admin'e dönün ve Breeze ayarlarını kaydedin veya önbelleği temizleyin.

– Breeze'de Çapraz Kökenli Güvenli Bağlantılar

Bazı Kullanım Durumları

1. _blank hedef değer ve rel özniteliği yoksa, özellik doğrudan rel=“ noopener noreferrer ” ekleyecektir .
2. _boş ama rel özelliği, sadece daha sonra noreferrer eklenecektir noopener değeri içerir. Örneğin, bağlantı yalnızca noopener özniteliğini içerir: noreferrer Bu özellik, noreferrer niteliğini de ekler: <a href =”https://example.com” target ="_blank” rel=”noopener noreferrer _boş ancak nispi noreferrer değerini içerir, daha sonra noopener de eklenecektir.
3. _blank hedef değer ve rel hem noopener noreferrer içeriyor, herhangi bir değişiklik olmayacak.
4. href # bağlantı (ID) içerir, yoksayılır, bu da değişiklik olmadığı anlamına gelir.

Giriş kodu:

– Tema Düzenleyicide Kod Girin

Kodun çıktısı:

– Kodun Çıktısı

Yazı Tipi Yükleme Sırasında Görünür Kalıyor

Bir siteyi ziyaret ettiğinizde yazı tipleri yüklenir ve yükleme süresi boyunca metin görünmez. Kullanıcı deneyimini geliştirmek için, yazı tipiniz indirilirken (yazı tipi yükleme süresi) metin içeriğinizi (yedek yazı tipi) görüntüleyen bir teknik kullanmalısınız. Breeze artık bunu yapmanıza yardımcı olacak yeni bir özelliğe sahip.

Bu özellik, CSS küçültmeyi kontrol ettiğinizde görünür olacak ve yalnızca CSS küçültme ve CSS Grubu seçenekleri için çalışıyor. Font-display:swap niteliğini CSS sınıflarına eklemek için içeriği değiştirmemiz gerekiyor.

- Breeze'de küçültme

Bu özelliği test etmek için, görünüm sayfası kaynağındaki .css dosyalarını kontrol edebilir ve @font-face için arama yapabilirsiniz. Font-display özelliği eklenecektir. Bu yazı tipi-yüz tanımında zaten bir yazı tipi gösterimi niteliği varsa, hiçbir şey değişmeyecektir.

– CSS'de Yazı Tipi Görüntüleme

Tembel Yükleme Resimleri

Tembel yükleme, tüm sayfanın resimlerini bir kerede yüklemek yerine, ekranda yalnızca görünen resimleri yükleyen bir hız optimizasyon tekniğidir. Bu, yükleme sürelerini ve kullanıcı deneyimini önemli ölçüde iyileştirebilir.

Breeze'nin yeni sürümü, Gelişmiş Seçenekler'de Lazy Load Images özelliğini sunuyor. Bu seçeneği etkinleştirirseniz, görüntüler yer tutucu olarak sahte saydam görüntülerle değiştirilir ve görüntüleme zamanı geldiğinde orijinal görüntü yüklenir.

– Esintide Tembel Yükleme Görüntüleri

Kod, çözünürlüğe bağlı olarak doğru görüntü boyutunu görüntülemek için kullanılan veri boyutlarını ve veri kaynağı kümesi niteliklerini tanır. Aşağıdaki nitelikler orijinal niteliklerin yerini alır:

veri esintisi = kaynak

data-brsrcset= data-srcset

data-brsizes= data-bedenleri

Tembel yükleme resimlerinin çalışıp çalışmadığını kontrol etmek istiyorsanız, “CTRL + Shift+ I” → Ağ → img'yi seçin → tüm sayfanızı aşağı kaydırın.

– Tarayıcınızda Tembel Yüklemeyi Kontrol Edin

Bağlantıları Önceden Yükle

Önyükleme bağlantıları, site performansınızı hızlandırmak ve sayfa hızı sonuçlarını iyileştirmek için Gelişmiş Seçenekler menüsüne eklediğimiz yeni bir özelliktir. Farenizi bir bağlantının üzerine getirdiğinizde, bu özellik bir önbellek oluşturacak ve o bağlantıyı tekrar açtığınızda veya tekrar ziyaret ettiğinizde sayfa daha hızlı yüklenecektir.

Arka uçta seçenek etkinleştirildiğinde, ön uçta diğer kitaplıklara bağımlı olmayan bir JavaScript dosyası yüklenir.

Bir kullanıcı bir bağlantının üzerinde 150 ms'den fazla kaldığında, o bağlantı için bir ön getirme etkinleştirilir ve sayfa önbelleği oluşturulur. Böylece kullanıcı bağlantıya tıkladığında, sayfa içeriği anında görüntülemeye hazır hale gelir.

– Bağlantıları Breeze'de önceden yükleyin

Bu özellik, üzerine gelindiğinde sonraki sayfanın tamamını önbelleğe almaz. Bunun yerine, site hızında küçük bir artış sağlama isteğini önbelleğe alır.

Not: Varsayılan olarak, bağlantı üzerine gelme gecikme süresi 150 ms'ye ayarlanmıştır. Bu URL'leri Asla Önbelleğe Alma'ya dahil edilen URL'ler , ön yükleme yüklemesinin dışında tutulacaktır.

Web Yazı Tiplerinizi Önceden Yükleyin

Web Yazı Tiplerinizi Önceden Yükleyin özelliği Gelişmiş Seçenekler'de mevcuttur ve kullanımı kolaydır. Tek yapmanız gereken yerel yazı tipi URL'sini veya yalnızca yazı tiplerini yükleyen CSS dosyasını (URL) sağlamaktır. Çoğu zaman, web yazı tipleri web sitenizin hızını yavaşlatır ve gecikmelere neden olur, bu nedenle bu sorunu çözmenize yardımcı olacak daha iyi bir çözüm seçmeniz önerilir.

Bu güncellemeyle, site performansınızı iyileştirmenize ve önceden yüklenen anahtar istekleri sorununu ortadan kaldırmanıza yardımcı olacak Web Yazı Tiplerinizi Önceden Yükleyin özelliğini getiriyoruz.

– Web Yazı Tiplerinizi Breeze'de Önceden Yükleyin

Bu özellik, belirli yazı tiplerini (sahaya eklenen) sonunda yazı tiplerini yüklemek yerine erken yükler, böylece daha iyi site performansı ve iyi Web Vital puanları elde edebilirsiniz.

JS Satır İçi Komut Dosyalarını Geciktirme

Gecikme JS Satır İçi Komut Dosyaları , Gelişmiş Seçeneklerde bulunan yeni bir özelliktir. Bu, sonunda satır içi JS'nizi yüklemek için tasarlanmıştır, böylece kullanıcınız ve site hızı test cihazınız yükleme süresi görmez.

Bunun arkasındaki konsept, web sitenizle etkileşim kurduğunuzda (aşağı kaydırma, imleci hareket ettirme vb.) satır içi js betiğinizin görüneceği tembel yüklemedir. Bu, site performansınızı ve Web Vital puanlarınızı iyileştirmek için harika bir tekniktir.

– Breeze'de JS Satır İçi Komut Dosyalarını Geciktirme

Burada, Google Ads gibi satır içi js komut dosyanız için anahtar anahtar kelimeyi sağlamanız gerekir ve sonunda belirli bir komut dosyası otomatik olarak yüklenir.

Özet!

Cloudways ekibi, Breeze'i önbellek eklentiniz yapmak için 24 saat çalışıyor. Bu, sayfa hızı deneyiminizi ve Web Vital puanlarınızı iyileştirmenize yardımcı olacak altı yeni heyecan verici özellik sunan ilk büyük sürümdür.

Google, bu ay Sayfa Deneyimi güncellemesini kullanıma sunduğunda, umarım, web siteniz yeni güncellemeden yararlanmaya hazır olacaktır.

Breeze v1.2 hakkında herhangi bir sorunuz veya geri bildiriminiz varsa, yorum bölümünde bize bildirin.