Apakah Anda ingin mengoptimalkan pengiriman CSS WordPress Anda?
File CSS mengontrol format visual dan gaya situs WordPress Anda. Tetapi jika kode CSS Anda tidak terkirim secara optimal, maka itu bisa memperlambat situs web Anda.
Pada artikel ini, kami akan menunjukkan kepada Anda dua metode mudah untuk mengoptimalkan pengiriman CSS WordPress Anda.
Bagaimana Pengiriman CSS WordPress Mempengaruhi Kinerja WordPress
file CSS digunakan untuk menentukan tampilan visual situs WordPress Anda. Tema WordPress Anda berisi file stylesheet CSS, dan beberapa plugin Anda mungkin juga menggunakan stylesheet CSS.
CSS diperlukan untuk situs web modern, tetapi file CSS mungkin memperlambat kinerja situs Anda kecepatan dan kinerja tergantung pada bagaimana mereka diatur.
Bahkan sedikit keterlambatan dalam kecepatan situs menciptakan pengalaman pengguna yang buruk dan dapat memengaruhi peringkat pencarian dan konversi, menghasilkan lebih sedikit lalu lintas dan penjualan.
Salah satu cara file CSS dapat memperlambat situs web Anda adalah jika file tersebut perlu dimuat sebelum halaman dapat ditampilkan. Itu berarti pengunjung Anda akan melihat halaman kosong sampai file CSS dimuat. Ini dikenal sebagai CSS pemblokiran render.
Alasan umum lainnya file CSS dapat memperlambat situs web Anda adalah ketika mereka berisi lebih banyak kode daripada yang diperlukan untuk menampilkan bagian yang terlihat dari halaman saat ini. Kode tambahan itu berarti mereka akan membutuhkan waktu lebih lama untuk dimuat.
Kabar baiknya adalah, Anda dapat meningkatkan situs WordPresskinerja dengan mengoptimalkan cara kode CSS dikirimkan.
Itu dilakukan dengan mengidentifikasi kode CSS minimum yang diperlukan untuk menampilkan bagian pertama dari halaman web saat ini. Ini dikenal sebagai CSS penting.
Kode penting ini kemudian ditambahkan sebaris ke HTML halaman, bukan di stylesheet terpisah, sehingga kode dapat dirender tanpa perlu memuat file CSS terlebih dahulu.
Sisa CSS kemudian dapat dimuat setelah pengunjung Anda dapat melihat konten halaman. Ini dikenal sebagai ‘pemuatan yang ditangguhkan’.
Dalam tutorial ini, kami akan menunjukkan kepada Anda dua metode untuk mengoptimalkan pengiriman CSS WordPress, dan Anda dapat memilih salah satu yang paling sesuai untuk Anda.
Metode 1: Mengoptimalkan Pengiriman CSS WordPress dengan WP Rocket
WP Roket yang terbaik Plugin caching WordPress di pasar. Ini menawarkan cara paling sederhana untuk mengoptimalkan pengiriman CSS WordPress Anda. Bahkan, semudah mencentang kotak.
WP Rocket adalah plugin premium, tetapi bagian terbaiknya adalah semua fitur termasuk dalam paket terendahnya.
Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan WP Roket pengaya. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara menginstal plugin WordPress.
Setelah diaktifkan, Anda perlu menavigasi ke Pengaturan » WP Rocket halaman dan beralih ke tab ‘Pengoptimalan File’.
Selanjutnya, Anda perlu menggulir ke bawah ke bagian file CSS. Sesampai di sana, Anda perlu mencentang kotak di sebelah opsi ‘Optimalkan pengiriman CSS’.
Fitur ini akan secara cerdas mengidentifikasi CSS penting yang diperlukan untuk memformat bagian halaman web yang dilihat pengunjung Anda terlebih dahulu. Halaman Anda akan dimuat lebih cepat, dan sisa CSS akan dimuat setelah pengunjung Anda dapat melihat isinya.
Yang perlu Anda lakukan sekarang adalah mengklik tombol Simpan Perubahan dan tunggu WP Rocket untuk menghasilkan file CSS yang diperlukan untuk semua posting dan halaman Anda.
Itu juga akan secara otomatis bersihkan cache untuk situs web Anda, sehingga pengunjung Anda akan melihat versi situs baru yang dioptimalkan, bukan versi yang tidak dioptimalkan yang disimpan dalam cache.
Ada banyak cara lain agar WP Rocket dapat membantu Anda meningkatkan kinerja situs web Anda. Untuk mempelajari lebih lanjut, lihat panduan kami di cara menginstal dan mengatur WP Rocket dengan benar di WordPress.
Metode 2: Mengoptimalkan Pengiriman CSS WordPress dengan Autoptimize
Optimalkan otomatis adalah plugin gratis yang dirancang untuk meningkatkan pengiriman CSS situs web Anda dan file JS.
Meskipun Autoptimize adalah plugin gratis, fiturnya tidak sebanyak WP Rocket dan membutuhkan lebih banyak waktu untuk menyiapkannya.
Misalnya, tidak dapat secara otomatis mengidentifikasi CSS penting seperti yang dapat dilakukan WP Rocket. Sebaliknya, Autoptimize memerlukan bantuan layanan pihak ketiga premium yang merupakan biaya tambahan dan membutuhkan waktu ekstra untuk mengkonfigurasi.
Namun, ini bisa menjadi pilihan yang baik jika Anda memiliki anggaran yang ketat dan tidak memerlukan semua fitur lain dari WP Rocket untuk mempercepat situs Anda.
Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan Optimalkan otomatis pengaya. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara menginstal plugin WordPress.
Setelah aktivasi, Anda perlu mengunjungi Pengaturan » Optimalkan otomatis halaman untuk mengonfigurasi pengaturan plugin. Sesampai di sana, Anda perlu menggulir ke bawah ke bagian Opsi CSS dan centang kotak Optimalkan Kode CSS di bagian atas.
Setelah Anda melakukannya, Anda perlu memastikan bahwa opsi ‘Aggregate CSS-files’ tidak dicentang dan kemudian centang ‘Eliminate render-blocking CSS’.
Anda sekarang dapat mengklik tombol ‘Simpan Perubahan dan Kosongkan Cache’ untuk menyimpan pengaturan Anda.
Tetapi plugin tidak akan berfungsi dengan baik sampai Anda mendaftar untuk akun CSS Kritis. Ini adalah layanan berlangganan premium yang akan memberikan Autoptimize kode CSS penting yang dibutuhkan untuk mengoptimalkan pengiriman CSS WordPress Anda.
Untuk melakukannya, navigasikan ke tab Critical CSS di pengaturan Autoptimize. Di sini Anda akan menemukan informasi yang Anda butuhkan untuk mendaftar dengan CSS Kritis. Anda dapat memulai dengan mengklik link sign up di paragraf ketiga.
Setelah Anda menerima kunci API CSS Penting, gulir ke bawah ke bagian Kunci API sehingga Anda dapat menempelkannya ke dalam kotak teks ‘Kunci API Anda’. Setelah itu, pastikan Anda mengklik tombol Simpan Perubahan.
Autoptimize sekarang memiliki semua informasi yang dibutuhkan untuk menambahkan inline CSS penting dan menunda pemuatan stylesheet hingga halaman telah dirender. Akibatnya, situs web Anda akan memuat lebih cepat.
Kami harap tutorial ini membantu Anda mempelajari cara mengoptimalkan pengiriman CSS WordPress.
Anda mungkin juga ingin melihat panduan utama kami di berapa biaya sebenarnya untuk membangun situs web WordPress, dan perbandingan kami tentang hosting WordPress terkelola terbaik perusahaan.
Jika Anda menyukai artikel ini, silakan berlangganan kami Saluran Youtube untuk tutorial video WordPress. Anda juga dapat menemukan kami di Indonesia dan Facebook.
.
