Mendapatkan performa sebaik mungkin adalah impian setiap 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 (terutama file CSS dan JS) dapat membahayakan situs web Anda jika Anda bukan seorang pengembang karena dapat menimbulkan konflik.

WP Speed of Light adalah solusi terbaik untuk meningkatkan performa situs WordPress Anda karena memiliki banyak opsi untuk mempercepat pemuatan situs dengan dasbor yang sangat ramah pengguna, dan ya, salah satu opsi tersebut adalah pengelompokan dan minifikasi sumber daya. Penyertaan/pengecualian file tunggal dari proses pengelompokan dan minifikasi merupakan kunci untuk optimasi khusus tanpa konflik.

Kita akan menggunakan contoh situs WordPress untuk postingan blog ini dan kita akan mempelajari cara melakukannya sehingga proses konfigurasi semuanya akan lebih mudah.

Cara melakukan minifikasi JavaScript dan CSS WordPress

Mari kita pelajari cara melakukan minifikasi JavaScript dan CSS WordPress, tetapi pertama-tama, kita perlu mengetahui apa arti minifikasi. “Minifikasi mengacu pada proses penghapusan data yang tidak perlu atau berlebihan tanpa memengaruhi cara sumber daya diproses oleh browser - misalnya komentar dan pemformatan kode, penghapusan kode yang tidak digunakan, penggunaan nama variabel dan fungsi yang lebih pendek, dan sebagainya”.

Sekarang yang akan kita lakukan adalah uji kecepatan pada halaman kita untuk melihat perubahannya. Untuk contoh ini, kita menggunakan situs dengan WooCommerce dan beberapa produk, jadi pada saat pertama kali dimuat akan sedikit lambat.

Ya, 2,79 detik untuk memuat halaman, tidak buruk tetapi bisa lebih baik. Mari kita minimalkan JS dan CSS dan lihat perbedaannya. Buka WP Speed of light > SpeedUp > Group & Minify , Anda akan dapat melihat menu dengan semua opsi untuk meminimalkan. Versi gratis plugin ini menyertakan opsi pengelompokan dan minimalkan, tetapi pengecualian file visual hanya tersedia di versi Addon PRO.

Opsi add-on PRO adalah: Kecualikan skrip inline (Kecualikan skrip inline dari minifikasi), pindahkan skrip ke footer (memungkinkan Anda mempercepat situs Anda dengan memindahkan semua skrip yang telah diminifikasi ke footer), Kelompokkan font dan Google Fonts (Kelompokkan font lokal dan Google Fonts dalam satu file agar dapat disajikan lebih cepat) dan Pengecualian file tingkat lanjut.
 
Anda memiliki opsi untuk meminifikasi, seperti yang Anda lihat, JS, CSS, dan juga HTML sekarang, cukup aktifkan opsi ini, klik simpan, dan semua sumber daya Anda akan langsung diminifikasi. Mungkin ada beberapa masalah karena ini adalah konfigurasi tingkat lanjut, tetapi semuanya dapat diperbaiki dengan mengecualikan beberapa kode dan file (dengan add-on pro).

Sekarang semua pekerjaan pengembang yang biasanya memakan waktu berjam-jam dapat diselesaikan hanya dalam beberapa detik.

Langkah selanjutnya, optimasi CSS dan JS untuk WordPress

Dengan plugin ini, WordPress dapat mengoptimalkan CSS dan JS hanya dengan mengaktifkan opsi grup di dasbor. Buka WP Speed of Light > SpeedUp > Group & Minify , Anda akan melihat dasbor dengan opsi untuk mengelompokkan CSS dan JS.

Opsi-opsi ini memungkinkan Anda untuk:

• Mengelompokkan JS: Mengelompokkan beberapa file Javascript ke dalam satu file akan meminimalkan jumlah permintaan HTTP
• Mengelompokkan CSS: Mengelompokkan beberapa file CSS ke dalam 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. Jadi, jika kita dapat mengurangi permintaan ini, waktu pemuatan akan berkurang.

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

Anda kemudian dapat mencantumkan semua file yang dimuat berdasarkan jenisnya; di contoh ini, saya hanya mengklik daftar file JS.

Sekarang setelah kita berada di pengaturan ini, aktifkan saja opsi grup (Grup CSS dan Grup JS) dan klik simpan. Perlu diingat 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? Optimasi lain? Ya! Anda dapat mengoptimalkan ketebalan font dan caranya semudah mengaktifkan opsi di pengaturan, cukup buka WP Speed of Light > SpeedUp > Group & Minify > Group fonts and Google Fonts option.
Opsi Group fonts and Google fonts memungkinkan Anda untuk mengelompokkannya dalam satu file agar dapat disajikan lebih cepat, ini sangat berguna karena sebagian besar tema dan layout WordPress hadir dengan 2 font atau lebih secara default dengan semua variasi (reguler, tebal, miring...).

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

Setelah kita mengaktifkan semua opsi untuk memperkecil ukuran dan mengelompokkan sumber daya, kita seharusnya melihat perbedaan dalam waktu pemuatan situs kita. Mari kita periksa kecepatannya.

Sungguh perbedaan yang besar, dari 2,8 menjadi 0,56 detik! Seperti yang kami sampaikan di awal postingan ini, kami bisa meningkatkan waktu pemuatannya ;)

Cara menggunakan pengecualian minifikasi file

Proses minifikasi dapat menyebabkan masalah di situs Anda, terutama terjadi ketika Anda mengelompokkan file-file tertentu yang mengandung kesalahan sintaks atau kesalahan variabel, nama kelas yang serupa. Oleh karena itu, dengan opsi "pengecualian minifikasi file", Anda dapat mengecualikan file dari proses minifikasi dan pengelompokan. Buka WP Speed of Light > SpeedUp > Group & Minify , Anda akan melihat pengecualian file tingkat lanjut .

Untuk menggunakan pengecualian file tingkat lanjut, Anda harus menjalankan pemindaian terlebih dahulu, mengaktifkan opsi tersebut, dan mengklik Jalankan Pemindaian.

 Untuk dapat menampilkan daftar skrip yang dimuat di situs web Anda, WP Speed of Light perlu memindai folder Anda untuk menampilkannya. Biasanya semua skrip tersebut terdapat di folder /wp-content yang mengelompokkan semua plugin dan tema Anda. Pilih folder tersebut (setidaknya) dan klik “Pindai Sekarang”.

Aplikasi akan menjalankan pemindaian, dan terakhir, klik "lihat hasil" setelah pemindaian selesai.

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

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