35 optimasi performa untuk situs WordPress Anda
Halaman yang dibangun dengan Canvas hanya memuat CSS dan JavaScript dari blok yang dirender, tidak lebih. Di atasnya ada 35 optimasi, masing-masing berupa sakelar yang bisa Anda kendalikan, dengan pengaturan default yang konservatif dan penjelasan sederhana tentang fungsinya.
Diperbarui
Pemuatan aset per blok
Kebanyakan tema mengirimkan satu stylesheet besar dan satu skrip besar, dan setiap halaman menanggung setiap fitur dalam tema. Canvas memetakan masing-masing dari 314 blok miliknya ke CSS dan JavaScript yang dibutuhkan blok tersebut, lalu memuat gabungan dari apa yang benar-benar dirender halaman.
- Halaman harga tidak pernah memuat skrip slider
- Halaman tanpa formulir tidak pernah memuat penangan formulir
- Editor memuat gaya blok dengan cara yang sama
- Tidak perlu dikonfigurasi, dan tidak ada cara untuk mematikannya secara tidak sengaja
Dinyatakan, bukan ditebak
Setiap blok mendeklarasikan asetnya sendiri. Peta aset berada di dalam blok, sehingga tidak ada daftar pusat yang bisa terlupa diperbarui oleh siapa pun.
Berfungsi dengan blok inti
Blok inti dan blok pihak ketiga mempertahankan perilaku pemuatannya sendiri. Canvas tidak mengambil alih aset mereka atau bersaing dengan WordPress untuk mengelolanya.
Templat juga dihitung
Header, footer, judul halaman, dan slider juga merupakan blok, sehingga halaman yang menggunakan header sederhana tidak memuat kode Mega Menu.
Tidak ada yang perlu dibeli
Pemuatan kondisional bukan fitur premium atau add-on. Begitulah cara pustaka bekerja di setiap paket dan saat lisensi kedaluwarsa.
35 optimasi, dikelompokkan menurut bagian yang disentuhnya
Tidak ada yang ajaib di sini dan tidak ada yang tersembunyi. Setiap item melakukan hal spesifik yang dapat diperiksa pada halaman yang dikirim WordPress.
Memuat 7
Hentikan CSS dan JavaScript yang menghambat render pertama, dan mulai memuat halaman berikutnya lebih awal.
- Muat stylesheet yang tidak kritis secara asinkron
- Tunda JavaScript non-kritis
- Tunda JavaScript hingga interaksi pertama
- Pramuat gambar terbesar di area atas halaman yang terlihat
- Pra-koneksi ke origin yang akan digunakan halaman ini
- DNS prefetch untuk host pihak ketiga
- Pemuatan spekulatif, agar halaman berikutnya sudah diambil sebelum diklik
Font 3
Teks tetap terbaca saat web font masih dimuat, dan font Google tidak perlu menjadi permintaan pihak ketiga sama sekali.
- Tambahkan font-display swap ke font web Anda
- Pramuat font yang dibutuhkan layar pertama
- Sajikan font Google dari server Anda sendiri
Media 6
Gambar adalah elemen paling berat di sebagian besar halaman dan paling mudah salah ditangani.
- Lazy load gambar di bawah lipatan
- Lazy load iframe dan embed
- Atur kualitas JPEG yang dihasilkan WordPress
- Batasi lebar maksimum gambar yang diunggah
- Kontrol set gambar responsif yang ditulis WordPress
- Atur ukuran gambar mana saja yang dibuat
Pembersihan 8
WordPress menghadirkan fitur yang membebani setiap situs, padahal jarang ada situs yang memakainya.
- Hapus query string dari resource statis
- Nonaktifkan skrip dan gaya emoji
- Nonaktifkan penemuan oEmbed dan skrip embed
- Nonaktifkan Dashicons di front end
- Nonaktifkan XML-RPC
- Nonaktifkan feed RSS
- Hapus jQuery Migrate
- Nonaktifkan pingback mandiri
Database 5
Sisi admin dari situs yang lambat: revisi, penyimpanan otomatis, dan heartbeat yang tidak pernah berhenti.
- Batasi jumlah revisi yang disimpan untuk setiap tulisan
- Atur interval simpan otomatis
- Batasi atau nonaktifkan heartbeat admin
- Bersihkan revisi, transien, dan spam dari basis data
- Batasi REST API hanya untuk pengguna yang sudah masuk
WooCommerce 5
Toko memuat skripnya di setiap halaman situs, termasuk halaman yang tidak menjual apa pun.
- Hapus JavaScript WooCommerce pada halaman tanpa keluaran toko
- Nonaktifkan pelacakan atribusi pesanan
- Hentikan polling skrip cart fragments di setiap halaman
- Jangan muat library pengukur kekuatan kata sandi di luar halaman akun
- Hapus pustaka Select2 bawaan di luar checkout
Penulisan ulang jaringan pengiriman konten 1
Arahkan stylesheet, skrip, gambar, dan font Anda ke jaringan pengiriman yang sudah Anda bayar dengan menulis ulang alamatnya saat halaman dirender. Canvas tidak menjual jaringan kepada Anda dan tidak meneruskan lalu lintas Anda melalui server kami.
Totalnya ada 35 sakelar, dan lima sakelar WooCommerce hanya muncul saat WooCommerce aktif. Selengkapnya tentang integrasi toko.
Setiap opsi berupa sakelar, dan nilai bawaannya konservatif
Canvas mengaktifkan hal-hal yang aman untuk situs web mana pun dan menyerahkan sisanya kepada Anda, dengan alasan yang tertulis di samping kontrol. Satu pengaturan yang biasanya tidak disarankan akan menyebutkannya di panel, tempat Anda berada saat memutuskan.
Fondasi SEO dan aksesibilitas
Halaman yang memuat cepat tetapi tidak bisa dibaca, dirayapi, atau dioperasikan dengan keyboard belum selesai. Semua ini ada di dalam tema itu sendiri, di setiap paket, tanpa ada yang dibatasi di balik peningkatan.
Metadata dari konten Anda
Judul, deskripsi, kartu sosial, URL kanonis, aturan robots, dan sitemap, semuanya diturunkan dari halaman saat ditampilkan. Tidak ada salinan kedua dari konten Anda yang perlu diperbarui.
16 tipe skema
Organization, WebSite, WebPage, Person, breadcrumbs, Product, Brand, Offer, Ulasan dan rating, alamat, koordinat geo, jam buka dan pencarian situs, ditampilkan jika berlaku.
Landmark semantik
Landmark header, navigasi, konten utama, dan footer, tautan lewati ke konten, judul yang mengikuti urutannya, serta fokus yang terlihat pada setiap elemen yang dapat dijangkau.
Menu keyboard
Menu, mega menu, panel samping, dan modal dapat dibuka, dipindahkan, dan ditutup lewat keyboard, serta geraknya mengikuti pengaturan pengurangan gerak milik pengunjung.
Aksesibilitas, keamanan, dan ekspor data tidak pernah menjadi fitur premium. Fitur-fitur ini tetap tersedia pada lisensi yang sudah kedaluwarsa, karena situs web yang tidak lagi dapat digunakan adalah masalah dukungan, bukan keputusan terkait lisensi.
Bagaimana kami memverifikasinya
Klaim tentang kecepatan dan aksesibilitas mudah dibuat dan mudah diperiksa. Kami memeriksa klaim kami sendiri, dan berikut caranya.
Halaman dibandingkan dengan desainnya di peramban sungguhan
Setiap halaman demo dirender di browser dan diukur terhadap desain asalnya: tinggi dokumen, lebar bagian, spasi yang dihitung, serta apa pun yang dikendalikan JavaScript, diukur setelah dijalankan, bukan saat pertama kali tampil.
Situs web ini diaudit pada tiga lebar layar
Setiap halaman di sini dijalankan melalui axe-core terhadap WCAG 2.1 A dan AA pada lebar 1440, 1024, dan 390 piksel, bersama pemeriksaan yang tidak dilakukan axe: satu h1, tingkat judul yang tidak pernah terlewat, keempat landmark, tautan lewati (skip link) yang berfungsi, tidak ada luapan horizontal, tidak ada teks di bawah 12 piksel, tautan yang terbaca sebagai teks, dan target sentuh minimal 24 piksel.
Kebutuhan Canvas untuk berjalan
WordPress
Canvas dibangun di atas editor blok, sehingga memerlukan WordPress dengan Penyunting Situs. Versi 7.1 atau yang lebih baru.
PHP
PHP 7.4 atau yang lebih baru. Rilis PHP terbaru adalah peningkatan kecepatan termurah yang bisa dilakukan sebagian besar situs.
Diuji hingga
Canvas diuji dengan WordPress 7.1, dan pembaruan menyusul setiap rilis WordPress.
Tentang performa
Termasuk yang paling sering ditanyakan kepada kami, itulah sebabnya tidak ada skor di halaman ini.
Apakah saya masih memerlukan plugin caching?
Mungkin, dan itu jawaban yang jujur. Canvas mengatur hal-hal yang biasanya diatur oleh tema dan WordPress: aset apa yang dimuat halaman, bagaimana font dan gambar berperilaku, dan seberapa banyak kerja database. Caching halaman, caching objek, dan pengiriman edge menjadi tanggung jawab hosting Anda atau plugin caching. Fungsinya berbeda, jadi menjalankan keduanya adalah penyiapan yang lazim.
Apakah mengaktifkan fitur ini akan merusak situs Anda?
Setiap sakelar dapat dibatalkan, dan sakelar yang paling mungkin bertentangan dengan plugin lain dimulai dalam keadaan nonaktif. Setiap sakelar menjelaskan fungsinya dan kapan sebaiknya dibiarkan, dan pengaturan yang benar-benar berisiko menyatakannya di panel. Aktifkan satu per satu dan muat ulang sisi depan situs setiap kali selesai.
Apakah saya harus mengonfigurasi pemuatan aset per blok?
Tidak, tidak ada yang perlu dicari dan diaktifkan. Begitulah cara kerja pustaka blok. Setiap blok mendeklarasikan CSS dan JavaScript yang dibutuhkannya, dan halaman memuat gabungan dari yang benar-benar dirender.
Apakah demo sudah dioptimalkan saat diterima?
Impor demo untuk seluruh situs akan menerapkan Opsi Tema milik demo tersebut, termasuk sakelar performanya, sehingga demo dimulai dari pengaturan yang dibuat dan diperiksa bersama. Anda dapat mengubah pengaturan tersebut setelahnya.
Mengapa halaman ini tidak menampilkan skor kecepatan?
Karena skor dari pengujian sintetis di perangkat keras kami tidak memberi tahu Anda apa pun tentang host, plugin, gambar, atau pengunjung Anda. Yang kami publikasikan adalah persis apa yang dilakukan setiap optimasi, sehingga Anda dapat mengaktifkannya dan mengukur situs Anda sendiri di infrastruktur Anda sendiri.
Situs web yang cepat tetapi tetap mudah Anda sunting
Setiap paket menyertakan pustaka blok yang sama, 35 optimasi yang sama, dan pemuatan aset bersyarat yang sama. Tidak ada tingkatan performa.