Breeze v1.2 Dirilis: Melihat Fitur Baru yang Dibawa oleh Pembaruan Utama ini
Diterbitkan: 2021-05-11
Cloudways telah merilis Breeze v1.2 dengan fokus pada peningkatan kompatibilitas Core Web Vitals Anda dan pada akhirnya memberikan skor PageSpeed Insights yang lebih baik untuk situs web Anda.
Jika Anda masih belum mendengar, Google akan meluncurkan pembaruan pengalaman halaman baru bulan ini. Kami baru-baru ini meluncurkan Pemeriksa Pengalaman Laman Google gratis untuk membantu Anda mengukur kinerja situs Anda dan faktor pengalaman laman lainnya terhadap pembaruan. Faktanya, sejak awal tahun 2021, kami sangat berfokus pada peningkatan produk kami dan meluncurkan pembaruan yang memberikan pengalaman halaman Google terbaik.
Sebelum memperbarui Breeze ke versi terbaru, sangat disarankan untuk mencadangkan seluruh situs WordPress Anda atau menguji rilis baru di lingkungan staging. Ketidakcocokan rilis yang lebih baru dengan plugin lain terkadang dapat menyebabkan masalah dan kesalahan acak, jadi jika Anda memiliki cadangan yang siap, Anda dapat dengan cepat memulihkan situs WordPress Anda.
Apa yang Baru di Breeze v1.2?
Sekarang, mari kita lihat sekilas fitur-fitur baru yang menarik yang dihadirkan Breeze di versi 1.2.
Tautan Aman Lintas Asal
Jika Anda terbiasa dengan praktik SEO, Anda akan memahami pentingnya atribut "noopener noreferrer". Kali ini, Breeze hadir dengan fitur baru yang secara otomatis akan menambahkan atribut “noopener noreferrer” ke tautan yang memiliki nilai target “_blank”.
Catatan: Jangan menambahkannya di editor WordPress karena editor menambahkan noopener noreferrer secara otomatis; tambahkan tautan di file tema Anda. Setelah menambahkan tautan, kembali ke wp-admin dan simpan pengaturan Breeze atau Bersihkan cache.
– Tautan Aman Lintas Asal di Breeze
Beberapa Kasus Penggunaan
- _nilai target kosong dan tidak ada atribut rel , fitur akan langsung menambahkan rel=“ noopener noreferrer ”.
- _blank, tetapi atribut rel hanya berisi nilai noopener , maka noreferrer akan ditambahkan. Misalnya, tautan hanya berisi atribut noopener : noreferrer Fitur ini juga menambahkan atribut noreferrer: <a href =”https://example.com” target =”_blank” rel=”noopener noreferrer _blank, tetapi rel berisi nilai noreferrer , maka noopener juga akan ditambahkan.
- _blank nilai target dan rel berisi noopener noreferrer , tidak akan ada perubahan.
- href berisi # tautan (ID), itu akan diabaikan, yang berarti tidak ada perubahan.
Kode masukan:
– Masukkan Kode di Editor Tema
Keluaran kode:
– Keluaran Kode
Font Tetap Terlihat Selama Pemuatan
Font dimuat saat Anda mengunjungi situs, dan teks tidak terlihat selama waktu pemuatan. Untuk meningkatkan pengalaman pengguna, Anda harus menggunakan teknik yang menampilkan konten teks Anda (font fallback) saat font Anda diunduh (durasi pemuatan font). Breeze memiliki fitur baru sekarang yang akan membantu Anda melakukan itu.
Fitur ini akan terlihat ketika Anda memeriksa minifikasi CSS dan hanya berfungsi untuk opsi minifikasi CSS dan Grup CSS. Untuk menambahkan atribut font-display:swap ke kelas CSS, kita perlu memodifikasi kontennya.
– Minifikasi di Breeze
Untuk menguji fitur ini, Anda dapat memeriksa file .css di sumber halaman tampilan dan mencari @font-face . Atribut font-display akan ditambahkan. Jika definisi font-face itu sudah memiliki atribut font-display, maka tidak ada yang akan diubah.
– Tampilan Font di CSS
Memuat Gambar Malas
Lazy loading adalah teknik pengoptimalan kecepatan yang hanya memuat gambar yang terlihat di layar alih-alih memuat seluruh gambar halaman sekaligus. Ini dapat secara signifikan meningkatkan waktu muat dan pengalaman pengguna.
Rilis baru Breeze menawarkan fitur Lazy Load Images di Opsi Lanjutan . Jika Anda mengaktifkan opsi ini, gambar akan diganti dengan gambar transparan dummy sebagai placeholder, dan ketika saatnya ditampilkan, gambar asli akan dimuat.
– Memuat Gambar Malas di Breeze
Kode mengenali ukuran data dan atribut data-srcset yang digunakan untuk menampilkan ukuran gambar yang benar berdasarkan resolusi. Atribut berikut menggantikan atribut asli:
angin-data= src
data-brsrcset = data-srcset
data-brsizes = ukuran data
Jika Anda ingin memeriksa apakah gambar pemuatan lambat berfungsi atau tidak, tekan "CTRL + Shift + I" → Jaringan → pilih img → gulir ke bawah seluruh halaman Anda.
– Periksa Pemuatan Malas di Peramban Anda
Tautan Pramuat
Tautan pramuat adalah fitur baru lainnya yang kami tambahkan ke menu Opsi Lanjutan untuk mempercepat kinerja situs Anda dan meningkatkan hasil kecepatan halaman. Saat Anda mengarahkan mouse ke tautan, fitur ini akan membuat cache, dan halaman akan dimuat lebih cepat saat Anda membuka atau mengunjungi tautan itu lagi.
Saat opsi diaktifkan di back-end, file JavaScript dimuat di front-end, yang tidak bergantung pada pustaka lain.
Saat pengguna mengarahkan pada tautan selama lebih dari 150 md, prefetch diaktifkan untuk tautan tersebut, dan cache halaman akan dibuat. Jadi ketika pengguna mengklik tautan, halaman siap untuk menampilkan konten secara instan.
– Pramuat Tautan di Breeze
Fitur ini tidak men-cache seluruh halaman berikutnya saat mengarahkan kursor. Sebagai gantinya, itu menyimpan permintaan untuk memberikan sedikit peningkatan dalam kecepatan situs.
Catatan: Secara default, waktu tunda kursor link diatur ke 150 ms. URL yang disertakan dalam Never Cache URL ini akan dikecualikan dari pemuatan pramuat.
Pramuat Font Web Anda
Fitur Preload Your Web Fonts tersedia di Opsi Lanjutan dan mudah digunakan. Yang perlu Anda lakukan adalah menyediakan URL font lokal atau file CSS (URL) yang hanya memuat font . Sangat sering, font web memperlambat kecepatan situs web Anda dan menyebabkan penundaan, oleh karena itu disarankan untuk memilih solusi yang lebih baik yang akan membantu Anda mengatasi masalah ini.
Dengan pembaruan ini, kami menghadirkan fitur Pramuat Font Web Anda yang akan membantu Anda meningkatkan kinerja situs Anda dan menghapus masalah permintaan kunci pramuat.
– Pramuat Font Web Anda di Breeze
Fitur ini akan memuat font tertentu (ditambahkan di lapangan) lebih awal daripada memuat font di akhir, sehingga Anda dapat mengalami kinerja situs yang lebih baik dan skor Vital Web yang baik.
Tunda Script JS Inline
Delay JS Inline Scripts adalah fitur baru yang tersedia di Opsi Lanjutan. Ini dirancang untuk memuat JS sebaris Anda pada akhirnya, sehingga penguji kecepatan situs dan pengguna Anda tidak akan melihat waktu muat.
Konsep di balik ini adalah lazy loading, di mana skrip js inline Anda akan muncul saat Anda berinteraksi (scroll ke bawah, memindahkan kursor, dll.) dengan situs web Anda. Ini adalah teknik yang bagus untuk meningkatkan kinerja situs Anda dan skor Web Vital.
– Menunda Script JS Inline di Breeze
Di sini, Anda perlu memberikan kata kunci kunci untuk skrip js sebaris Anda seperti Google Ads, dan skrip tersebut akan secara otomatis memuat skrip tertentu di akhir.
Ringkasan!
Tim Cloudways bekerja sepanjang waktu untuk menjadikan Breeze sebagai plugin cache masuk Anda. Ini adalah rilis besar pertama yang menawarkan enam fitur baru yang menarik yang akan membantu Anda meningkatkan pengalaman kecepatan halaman dan skor Web Vital Anda.
Saat Google meluncurkan pembaruan Pengalaman Halamannya bulan ini, semoga situs web Anda siap memanfaatkan pembaruan baru.
Jika Anda memiliki pertanyaan atau umpan balik tentang Breeze v1.2, beri tahu kami di bagian komentar.