Lewati ke konten utama
6 menit waktu membaca (1143 kata)

Cara mengelompokkan dan meminimalkan sumber daya di WordPress

file-group-and-minify

Memiliki kinerja yang lebih baik adalah impian semua orang yang mengelola situs web, mengelompokkan dan meminimalkan sumber daya di WordPress adalah salah satu hal terbaik yang dapat kita lakukan untuk itu tetapi bisa sangat sulit. Mengelompokkan semua sumber daya Anda (file css dan js terutama) dapat membuat situs web Anda rentan jika Anda bukan pengembang karena dapat menimbulkan konflik.

WP Speed of Light adalah solusi terbaik untuk meningkatkan kinerja situs WordPress Anda karena memiliki banyak pilihan untuk membuat situs Anda dimuat dengan cepat dengan dasbor yang sangat ramah dan ya, salah satu dari pilihan tersebut adalah menggabungkan dan mengecilkan sumber daya. Penyertaan/pengecualian file tunggal dari proses penggabungan dan pengecilan adalah kunci untuk optimalisasi kustom tanpa konflik.

Kami akan menggunakan contoh situs wordpress untuk posting blog ini dan kami akan belajar bagaimana melakukannya sehingga proses konfigurasi semuanya akan lebih mudah.

 

Cara melakukan minifikasi JS dan CSS WordPress

Mari kita pelajari cara melakukan minifikasi JS dan CSS WordPress tapi pertama-tama, kita perlu tahu apa yang dimaksud dengan minifikasi "Minifikasi merujuk pada proses penghapusan data yang tidak perlu atau redundan tanpa mempengaruhi bagaimana sumber daya diproses oleh browser - misalnya komentar kode dan format, menghapus kode yang tidak digunakan, menggunakan nama variabel dan fungsi yang lebih pendek, dan seterusnya".

Sekarang apa yang akan kita lakukan adalah tes kecepatan ke halaman kita untuk melihat perubahannya, untuk contoh ini, kita menggunakan situs dengan woocommerce dan beberapa produk sehingga pertama kali akan memuat sedikit lambat.

 

sebelum-uji

 

Ya, 2,79 detik untuk memuat halaman, tidak buruk tapi bisa lebih baik, mari kita minifikasi js dan CSS dan lihat perbedaannya, pergi ke WP Speed of light > Percepat > Kelompokkan & Minifikasi, Anda akan dapat melihat menu dengan semua opsi untuk minifikasi. Versi gratis plugin ini memang menyertakan opsi kelompok dan minifikasi tetapi pengecualian file visual hanya tersedia dalam versi Addon PRO.

 

dasbor-kelompok-dan-minifikasi

 

Opsi addon PRO adalah: Kecualikan skrip inline (Kecualikan skrip inline dari minifikasi), pindahkan skrip ke footer (memungkinkan Anda mempercepat situs dengan memindahkan semua skrip yang diminifikasi ke footer), Kelompokkan font dan Google Fonts (Kelompokkan font lokal dan font Google dalam satu file untuk disajikan lebih cepat) dan Pengecualian file lanjutan.
 
Anda memiliki opsi untuk minifikasi, seperti yang Anda lihat, JS, CSS, dan juga HTML sekarang aktifkan opsi ini, klik simpan dan semua sumber daya Anda akan diminifikasi segera, mungkin ada masalah karena ini adalah konfigurasi lanjutan tetapi semuanya dapat diperbaiki dengan pengecualian beberapa kode dan file (dengan addon pro).

 

sumber-minifikasi

 

 

Sekarang semua pekerjaan pengembang yang bisa memakan waktu berjam-jam dilakukan hanya dalam beberapa detik.

 

Langkah berikutnya, optimalkan CSS dan JS WordPress

Dengan plugin ini kami akan membiarkan wordpress mengoptimalkan CSS dan js hanya dengan mengaktifkan opsi grup di dasbor, buka WP Speed of Light > Percepat > Grup & Minifikasi, Anda akan dapat melihat dasbor dengan opsi untuk mengelompokkan CSS dan js.

Opsi ini memungkinkan Anda untuk:

  • Grup JS: Mengelompokkan beberapa file Javascript ke dalam satu file akan meminimalkan jumlah permintaan HTTP
  • Grup CSS: Mengelompokkan beberapa file CSS menjadi satu file akan meminimalkan jumlah permintaan HTTP.

Permintaan HTTP: ini adalah permintaan yang dibuat ke server setiap kali kita memilih sesuatu atau pergi ke halaman lain di situs yang sama sehingga jika kita dapat mengurangi permintaan ini, waktu muat akan berkurang.

Untuk memeriksa berapa banyak file, skrip yang dapat Anda kelompokkan di situs web Anda, cukup buka konsol browser (klik kanan > Periksa atau F12) dan buka panel jaringan.

 

daftar-skrip-chrome

Anda kemudian dapat membuat daftar semua file yang dimuat berdasarkan jenis, di sini dalam contoh ini saya telah mengklik daftar file JS saja.

Sekarang kita telah berada di pengaturan ini, cukup aktifkan opsi grup (Grup CSS dan Grup JS) dan klik simpan, ingatlah bahwa opsi ini harus digunakan dengan hati-hati dan Anda harus menguji halaman Anda karena dapat menyebabkan konflik.

 

Mari kita serius dan optimalkan ketebalan font

Apa? Optimalisasi lainnya? Ya! Anda akan dapat mengoptimalkan ketebalan font dan akan semudah mengaktifkan opsi pada pengaturan, cukup pergi ke WP Speed of Light > SpeedUp > Grup & Minifikasi > Grup font dan Google Fonts pilihan.

Cukup aktifkan opsi itu, klik simpan dan semua font akan dikelompokkan.

 

grup-font

 


Sekarang kita telah mengaktifkan semua opsi untuk mengecilkan dan mengelompokkan sumber daya, kita harus melihat perbedaan dalam waktu muat situs kita, Mari kita periksa kecepatannya.

 

test-setelah

 

Betapa perbedaannya, Dari 2,8 menjadi 0,56 detik! Seperti yang kami katakan di awal postingan ini, kami dapat membuat waktu muat lebih baik ;)

 

Cara menggunakan pengecualian minifikasi file

Minifikasi dapat menyebabkan masalah pada situs Anda, terutama terjadi ketika Anda mengelompokkan file tertentu yang berisi kesalahan sintaks atau nama variabel dan kelas yang serupa. Itulah sebabnya dengan opsi "pengecualian minifikasi file", Anda dapat mengecualikan file dari proses minifikasi dan pengelompokan, buka WP Speed of Light > Percepat > Kelompok & Minifikasi, Anda akan dapat melihat opsi Pengecualian file lanjutan.

Untuk menggunakan pengecualian file lanjutan, Anda harus menjalankan pemindaian terlebih dahulu, aktifkan opsi dan klik Jalankan Pemindaian.

 

peringatan-konflik-sumber-kelompok


  Untuk dapat membuat daftar skrip yang dimuat di situs web Anda, WP Speed of Light perlu memindai folder Anda untuk membuat daftar mereka. Mereka biasanya terkandung dalam folder /wp-content Anda yang mengelompokkan semua plugin dan tema Anda. Pilih folder itu (setidaknya) dan klik “Pindai Sekarang”

 

pilih-folder-untuk-dimindai

 

Ini akan menjalankan pemindaian, akhirnya, klik lihat hasil ketika pemindaian selesai.

 

dipindai

 

Daftar file yang diklasifikasikan berdasarkan jenis (Semua, JS, CSS, Font) akan ditampilkan di bawah. Jika Anda telah mengidentifikasi satu file yang menyebabkan masalah saat mengaktifkan pengelompokan file dan minifikasi, Anda dapat mengecualikannya dari sini dengan menggunakan sakelar ON/OFF.

 

kecualikan-file

 

Ini akan membantu Anda untuk mengecualikan file dan, dengan cara ini, dengan mudah menyelesaikan masalah apa pun yang mungkin ada saat meminifikasi sumber daya… Proses grup dan minifikasi masih memerlukan beberapa pekerjaan, terutama dalam pengujian, tapi itu pasti sepadan dengan usaha, dan Anda akan selalu dapat menguji cara kerjanya dengan menjalankan tes kecepatan langsung dari WP Speed of Light.
 
Maju dan coba WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light

Tetap Terinformasi

Ketika Anda berlangganan blog, kami akan mengirimkan email kepada Anda ketika ada pembaruan baru di situs sehingga Anda tidak akan melewatkannya.

Postingan Terkait

 

Komentar

Belum ada komentar. Jadilah yang pertama untuk mengirimkan komentar
Sudah Terdaftar? Masuk Di Sini
Senin, Maret 23, 2026

Gambar Captcha