Cara Memperkecil Informasi CSS/JavaScript di WordPress (3 Strategi)

Apakah Anda ingin mengecilkan dokumen di halaman web WordPress Anda?

Memperkecil informasi CSS dan JavaScript WordPress Anda dapat membuatnya memuat lebih cepat dan mempercepat situs WordPress Anda.

Dalam manual ini, kami akan menunjukkan kepada Anda cara mengecilkan file CSS/JavaScript di WordPress untuk meningkatkan kinerja dan kecepatan.

Apa itu Minifikasi dan Kapan Anda Membutuhkannya?

Ungkapan 'minify' digunakan untuk menggambarkan sistem yang membuat ukuran file situs web Anda lebih kecil. Ini dilakukan dengan menghilangkan spasi, garis, dan orang yang tidak diinginkan dari kode sumber daya.

Berikut adalah contoh kode CSS standar:

human body 
margin:20px
padding:20px
colour:#333333
history:#f7f7f7

h1 
font-dimension:32px
coloration#222222
margin-base:10px

Setelah mengecilkan kode itu akan terlihat seperti ini:

entire bodymargin:20pxpadding:20pxcolor:#333history:#f7f7f7
h1font-dimension:32pxmargin-base:10px

Umumnya, disarankan untuk hanya mengecilkan dokumen yang dikirim ke browser pengguna. Ini menampilkan file HTML, CSS, dan JavaScript.

Anda juga dapat mengecilkan dokumen PHP, tetapi mengecilkannya tidak akan meningkatkan kecepatan pemuatan halaman untuk pelanggan Anda. Karena PHP adalah bahasa pemrograman sisi server, itu berarti ia beroperasi di server sebelum sesuatu dikirim ke browser internet pengunjung.

Keuntungan dari mengecilkan file data meningkatkan kecepatan WordPress dan kinerja keseluruhan, mengingat informasi yang ringkas lebih cepat dimuat.

Meskipun demikian, beberapa ahli berpikir bahwa peningkatan fungsionalitas cukup kecil untuk sebagian besar situs web dan tidak sebanding dengan kesulitannya. Minifikasi hanya menghilangkan beberapa kilobyte data di sebagian besar situs web WordPress. Anda dapat meminimalkan lebih banyak waktu buka situs dengan mengoptimalkan gambar untuk world-wide-web.

Jika Anda mencoba untuk mencapai peringkat 100/100 pada perangkat lunak Google Pagespeed atau GTMetrix, maka mengecilkan CSS dan JavaScript akan meningkatkan skor Anda.

Untuk itu, mari kita lihat sekilas cara mengecilkan CSS/JavaScript dengan mudah di halaman web WordPress Anda.

Kami akan memberikan lebih dari 3 pilihan berbeda yang dapat Anda pilih dari:

Siap? Mari kita mulai dengan proses usulan terbaik kita.

Proses 1. Perkecil CSS/JavaScript di WordPress Menggunakan WP Rocket

Teknik ini lebih mudah dan diusulkan untuk semua konsumen. Ini beroperasi terlepas dari hosting WordPress mana yang Anda gunakan.

Pertama, Anda perlu menginstal dan mengaktifkan plugin WP Rocket. Untuk spesifikasi tambahan, lihat buku panduan langkah demi langkah kami tentang cara menyiapkan plugin WordPress.

WP Rocket adalah plugin caching WordPress terbaik di pasaran. Ini memungkinkan Anda untuk dengan mudah memasukkan caching ke WordPress dan secara substansial meningkatkan kecepatan situs web dan momen memuat situs web.

Untuk informasi lebih lanjut, lihat tutorial kami tentang cara menginstal dan membuat WP Rocket di WordPress.

Setelah aktivasi, Anda ingin memeriksa Pengaturan »halaman web WP Rocket dan beralih ke tab 'Optimasi File'.

Dari sini, Anda perlu melihat solusi dokumen Minify CSS.

WP Rocket kemudian akan menampilkan peringatan bahwa ini dapat membagi poin di situs web Anda. Silakan dan cukup klik tombol 'Aktifkan Minify CSS'. Anda dapat terus-menerus menonaktifkan pilihan ini jika memicu masalah dengan situs web Anda.

Selanjutnya, Anda harus menggulir ke bawah ke bagian Dokumen JavaScript di bawah.

Di sini, cukup uji kotak di sebelah kemungkinan 'Minify JavaScript files'.

Sekali lagi, Anda akan melihat peringatan bahwa ini dapat memecahkan sesuatu di situs web Anda. Silakan dan cukup klik tombol 'Aktifkan Minify JavaScript'.

Tepat setelah itu, jangan pernah mengabaikan untuk mengklik tombol Pertahankan penyesuaian untuk menyimpan konfigurasi Anda.

WP Rocket sekarang akan mulai mengecilkan informasi CSS dan JavaScript Anda. Anda dapat mengosongkan cache dengan sangat baik di pengaturan plugin untuk memastikan bahwa itu mulai menggunakan CSS dan JavaScript yang diperkecil untuk pengunjung halaman web di masa mendatang.

Teknik 2. Perkecil CSS/JavaScript di WordPress Menggunakan SiteGround

Jika Anda menerapkan SiteGround sebagai penyedia layanan hosting web WordPress, Anda dapat mengecilkan file CSS yang berfungsi dengan SiteGround Optimizer.

SiteGround Optimizer adalah plugin pengoptimalan kinerja umum yang bekerja pada sistem mereka. Ini berkinerja baik dengan PHP Ultrafast mereka untuk memperkuat periode pemuatan situs Anda.

Cukup atur dan aktifkan plugin SiteGround Optimizer di situs WordPress Anda. Untuk detail tambahan, lihat panduan langkah demi langkah kami tentang cara memasukkan plugin WordPress.

Setelah itu, Anda perlu mengklik menu SG Optimizer di sidebar admin WordPress Anda.

Ini hanya akan membawa Anda ke pengaturan SG Optimizer.

Dari artikel ini Anda perlu mengklik tombol 'Go To Frontend' lebih sedikit daripada 'Other Optimizations'.

Pada monitor berikutnya, Anda perlu menukar sakelar yang akan datang ke solusi 'Perkecil file CSS'.

Yang akan datang, Anda harus menukar ke tab JavaScript dan menyalakan sakelar yang akan datang ke pilihan 'Minify JavaScript Files'.

Itu semuanya! Anda sekarang dapat mengosongkan cache WordPress dan melihat situs Anda untuk memuat versi dokumen CSS dan JS yang diperkecil.

Pendekatan 3. Perkecil CSS/JavaScript menggunakan Autoptimize

Metode ini diusulkan untuk konsumen yang tidak menggunakan SiteGround dan tidak bekerja dengan WP Rocket.

Awalnya, Anda perlu mengatur dan mengaktifkan plugin Autoptimize. Untuk keterangan tambahan, lihat panduan langkah demi langkah kami tentang cara menginstal plugin WordPress.

Saat aktivasi, Anda harus melihat Opsi » Optimalisasi halaman web untuk mengonfigurasi opsi plugin.

Dari artikel ini, awal Anda perlu memverifikasi opsi 'Optimalkan Kode JavaScript' di bawah Opsi JavaScript.

Setelah itu, Anda perlu menggulir ke bawah ke Pilihan CSS dan memeriksa kotak di sebelah opsi 'Optimalkan kode CSS'.

Jangan pernah mengabaikan untuk mengklik tombol Simpan Penyesuaian untuk menyimpan konfigurasi Anda.

Kemudian Anda cukup mengklik tombol Cache Kosong untuk mulai bekerja dengan file data yang diperkecil. Plugin ini juga dapat digunakan untuk menangani pemblokiran render JavaScript dan CSS di WordPress.

Kami harap postingan ini membantu Anda mengecilkan CSS dan JavaScript di halaman web WordPress Anda. Anda mungkin juga ingin melihat tutorial kami tentang mengoptimalkan vital bersih inti di WordPress dan mematuhi tutorial kinerja umum WordPress terbaik kami.

Jika Anda menyukai posting ini, pastikan untuk berlangganan Saluran YouTube kami untuk tutorial film WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.