Cloudways membuat beberapa perubahan besar pada Breeze, jadi tutorial hari ini adalah tentang cara menyiapkan Cloudways Breeze . Plugin ini menjadi lebih baik, dan sekarang memiliki penundaan JavaScript, kontrol detak jantung, font preload, dan prefetch. Ini hanya memiliki peringkat bintang 3,8/5, tapi saya harap mereka terus menambahkan fitur baru dan membuat aplikasi lebih stabil.
Sebagian besar pengaturan Breeze mirip dengan apa yang akan Anda temukan di plugin cache lain seperti WP Rocket dan FlyingPress, jadi menyiapkan Breeze dan menguji TTFB serta waktu muat hanya akan memakan waktu beberapa menit. Cloudways juga memiliki tutorial Breeze, tetapi tidak menambah banyak hal yang sudah ada di plugin. Cukup instal plugin dan ikuti tutorialnya untuk lebih memahaminya.
Opsi Dasar
Nyalakan Sistem Cache karena, tentu saja, Anda ingin plugin cache Anda mendukung caching.
Setel Purge Cache After ke 1440. Ini adalah seumur hidup cache, yang disetel ke satu hari. Anda dapat mengubah angka ini jika CPU Anda sering digunakan atau jika Anda jarang memposting konten.
Buat Situs Web Luar Biasa
Dengan Elementor pembuat halaman gratis terbaik
Mulai sekarangAktifkan Kompresi Gzip untuk mengecilkan ukuran HTML, CSS, dan JS dengan mengompresi konten.
Tetap aktifkan Cache Browser agar browser dapat menyimpan file tertentu dengan menambahkan header yang kedaluwarsa.
Pertahankan opsi Lazy Load Images. Di mana pengaturan untuk memuat lambat iframe dan menggunakan fitur pemuatan malas dari browser itu sendiri. Saya pribadi akan menggunakan Cloudflare Enterprise untuk pengoptimalan gambar (bukan Breeze), yang disertakan dengan Mirage + Polish. Breeze tidak memiliki opsi untuk menjaga agar gambar tidak dimuat dengan lambat menjadi gambar yang dimuat dengan lambat di latar belakang, atau untuk mengganti iframe YouTube dengan gambar pratinjau. Juga tidak ada cara untuk melakukan pramuat gambar, menambahkan dimensi gambar yang hilang, menggunakan WebP, atau mengubah ukuran gambar untuk seluler. Gunakan Jaringan Pengiriman Konten (CDN) atau plugin pengoptimalan gambar sebagai gantinya.
Tetap aktifkan Tautan Aman Lintas Asal agar dapat menambahkan "noopener noreferrer" ke tautan eksternal. Ini meningkatkan keamanan dengan memblokir akses ke situs web tempat tautan berada (noopener) atau dengan menyembunyikan informasi rujukan (noreferrer). Ini seharusnya tidak merusak SEO atau tautan afiliasi Anda.
Matikan Pengguna yang Masuk Cache. Sebagian besar situs tidak perlu meng-cache pengguna yang masuk kecuali Anda menjalankan situs keanggotaan atau yang serupa, dalam hal ini Anda akan memilih peran.
Pengoptimalan File
Anda harus menguji setelan ini untuk melihat apakah setelan tersebut merusak situs Anda atau menjadikannya lebih penting di web. Jika pengaturan minifikasi merusak situs Anda, lebih baik menemukan file yang rusak di kode sumber Anda dan menjaganya agar tidak diminimalkan sehingga file Anda yang lain bisa.
Pengaturan HTML
Pertahankan opsi HTML minify ON sehingga dapat mengurangi ukuran file HTML dengan memancarkan spasi dan komentar.
Pengaturan CSS
Opsi CSS Minify harus diaktifkan agar plugin dapat menghapus spasi dan komentar dari file CSS untuk membuatnya lebih kecil.
Font juga harus tetap terlihat saat memuat. Anda dapat memperbaiki rekomendasi PSI untuk memastikan teks tetap terlihat saat font web dimuat dengan menambahkan font-display: swap ke CSS font Anda. Ini memberi tahu komputer Anda untuk memuat font fallback saat font normal Anda dimuat. Ini menghentikan FOIT (flash teks tak terlihat) tetapi menyebabkan FOUC (flash teks yang tidak dapat dibaca) (flash konten tanpa gaya). Itu pilihan, jadi cobalah keduanya.
Aktifkan opsi Sertakan CSS Sebaris, yang juga akan memperkecil CSS sebaris (CSS terletak di file HTML Anda, bukan CSS eksternal). Terkadang dapat merusak situs Anda, jadi berhati-hatilah saat Anda menguji setelan ini.
Matikan Combine CSS karena, menurut WP Johnny, hanya situs dengan file CSS/JS kecil yang boleh menggabungkannya, sedangkan situs yang lebih besar tidak boleh. Periksa ukuran CSS dan JS Anda di bagan Air Terjun GTmetrix.
Gunakan opsi Kecualikan CSS. Mungkin ada beberapa file yang menyebabkan masalah. Temukan file-file itu di kode sumber Anda dan tambahkan ke daftar agar tidak diperkecil atau digabungkan.
Pengaturan JS
Saat Anda mengaktifkan JS Minify, ini akan mengecilkan ukuran file JS dengan menghilangkan spasi dan komentar.
Akhiri Combine JS. Itu ide yang sama dengan menyatukan CSS dan JavaScript. Sekali lagi, periksa bagan Air Terjun GTmetrix Anda dan hanya gabungkan jika ukuran file JavaScript Anda sangat kecil.
Jangan matikan Sertakan Inline JS. Itu ide yang sama dengan memasukkan inline CSS, tetapi untuk file JS.
Kecualikan JS digunakan dengan cara yang sama seperti Kecualikan CSS. Jika pengaturan JS menyebabkan masalah, temukan file yang menyebabkannya dan hapus.
Saat Pindahkan File JS ke Footer, banyak tema dan plugin sudah memuat file JavaScript di footer. Namun, jika Anda memiliki file JS yang tidak dimuat di footer tetapi dimuat di header, Anda dapat menambahkannya di sini (file yang diperkecil tidak didukung). Itu dapat dengan mudah merusak situs Anda, jadi berhati-hatilah.
Pilih yang ini. File JS Dengan Pemuatan Ditangguhkan hanya jika penangguhan JavaScript dapat memperbaiki item PSI sumber daya pemblokiran render. Ini adalah tempat yang bagus untuk mulai mempelajari file JavaScript mana yang harus Anda tunda. Tetapi file JavaScript apa pun yang tidak diperlukan untuk memuat halaman harus ditunda hingga nanti. Coba Autoptimize jika Anda tidak ingin menambahkan file JavaScript ke Breeze secara manual.
Pertahankan Delay JS Inline Scripts Aktif karena menunda JavaScript sebaris hingga pengguna berinteraksi dengannya. Lihat daftar file JS yang biasa saya gunakan untuk menunda (Anda akan memasukkan kata kunci, bukan file lengkap). Banyak JS pihak ketiga, seperti AdSense, Analytics, Facebook Pixel, dan komentar, dimuat di paro bawah.
Pramuat
Pramuat Webfont - Di bawah "permintaan kunci pramuat", PSI mungkin memberi tahu Anda font mana yang harus dimuat sebelumnya, tetapi sebagai aturan umum, Anda hanya boleh memuat font yang ada di file CSS atau memuat paro atas. Itu juga dapat digunakan untuk memuat file CSS terlebih dahulu, tetapi jika Anda melakukannya, hati-hati dan uji hasilnya.
Pramuat Tautan - Jangan matikan ini. Saat pengguna menggerakkan mouse ke atas tautan, halaman itu akan dimuat di latar belakang. Ketika pengguna mengklik link tersebut, halaman tersebut akan terlihat seperti dimuat segera. Tetapi jika banyak pengunjung Anda mengarahkan banyak tautan, ini dapat membuat CPU Anda bekerja lebih keras.
Prefetch of DNS Request - Lihat laporan PSI untuk "Reduce the impact of third-party code." Salin URL semua domain pihak ketiga yang dimuat di situs web Anda dan tempel di sini. Anda harus menggunakan preconnect untuk Google Fonts + CDN URLs. Ini membantu browser memprediksi dan memuat domain pihak ketiga sedikit lebih cepat, tetapi mungkin tidak akan membuat web menjadi lebih baik secara keseluruhan.
Opsi Lanjutan
Sebagian besar waktu, Never Cache URL digunakan untuk menyimpan URL dari cache (terutama untuk situs WooCommerce atau sejenisnya). Jika Anda mengecualikannya di sini, Cloudways mengatakan Anda juga harus mengecualikannya dari Varnish dengan masuk ke Application Settings > Varnish Settings > Add New Exclusion.
Cache Query Strings untuk menyimpan URL string dalam cache. Secara default, Breeze tidak menyimpan string kueri (URL yang terlihat seperti ini:?model=mercedes) di cache-nya. Jika Anda perlu menyimpannya di cache, tambahkan di sini.
Nyalakan "Nonaktifkan Emoji", yang menghapus file JS kecil (jika Anda ingin menggunakan emoji, cukup gunakan Unicode).
API Detak Jantung
Jangan matikan Kontrol Detak Jantung. Jika Anda melihat analitik Cloudways Anda (di bawah Application > Monitoring), Anda mungkin menemukan bahwa admin-ajax mendapatkan terlalu banyak permintaan. Jika Anda menonaktifkan atau membatasi Heartbeat API, permintaan dan penggunaan CPU ini akan turun. Meskipun lebih baik untuk mematikannya sepenuhnya, pastikan Anda baik-baik saja dengan mematikan notifikasi plugin waktu nyata, melihat ketika pengguna lain mengedit posting dan fitur API Detak Jantung lainnya.
Matikan Front-end Detak Jantung, karena sebagian besar situs tidak memerlukannya di sini.
Mengenai Heartbeat Post Editor, otomatis tersimpan setiap 5 menit. Jika Anda ingin penyimpanan otomatis, Anda dapat menetapkan batas di sini.
Juga, matikan Detak Jantung di backend, karena Anda tidak perlu menggunakannya di sana.
Opsi Basis Data
Terlepas dari pembersihan pasca-revisi, saya akan melakukan yang lainnya. Memiliki opsi untuk menyimpan sejumlah revisi posting (5, misalnya, sehingga Anda memiliki cadangan) dan pembersihan basis data terjadwal secara teratur akan sangat membantu. WP-Optimize, seperti plugin cache lainnya, harus diinstal sesekali untuk melakukan pembersihan database Anda secara lebih menyeluruh. Dengan cara ini, Anda dapat menentukan plugin atau modul mana yang menyebabkan beban yang paling tidak perlu pada database dan menghapus tabel yang tersisa yang mungkin tertinggal. Baik Breeze maupun add-on cache lainnya tidak melakukan ini.
CDN
Aktifkan aktivasi CDN hanya jika Anda tidak menggunakan layanan CDN Cloudflare. Seperti Gijo Varghese, saya mengandalkan Cloudflare dan BunnyCDN (lihat postingan Facebooknya di bawah). Abaikan langkah ini jika Anda tidak menggunakan jaringan pengiriman konten (CDN) yang memerlukan URL CDN.
Jika jaringan pengiriman konten (CDN) Anda menggunakan CNAME khusus, masukkan di sini. Anda dapat menambah jumlah aset yang disajikan dengan menambahkan URL CDN ke plugin cache selain menggunakan plugin BunnyCDN.
Saat menyajikan materi dari CDN, direktori defaultnya adalah wp-includes dan wp-content, tetapi Anda dapat menambahkan lebih banyak dengan menentukan direktori mana yang perlu Anda sajikan.
Simpan ini apa adanya; biasanya, Anda ingin semua file statis disediakan oleh CDN.
Jangan matikan ini jika Anda ingin menggunakan URL jalur relatif (URL lengkap situs web Anda).
Pernis
Saat dinyalakan, "Auto Purge Varnish" akan membersihkan pernis tanpa terlihat (Cloudways mengatakan untuk mengaktifkannya).
Server Varnish menunjukkan alamat IP server Varnish Anda, yang ditambahkan secara otomatis.
Jika Anda telah membuat perubahan pada desain atau aspek lain dari situs dan belum melihatnya, coba bersihkan Varnish Cache.
Pikiran Akhir
Cloudways bagus, dan saya menggunakan Vultr High Frequency untuk beberapa saat sebelum beralih ke Breeze (setelah pindah dari SiteGround). Saya pikir Cloudways bisa menjadi tuan rumah yang lebih menarik jika lebih banyak perhatian diberikan pada plugin Breeze.
