Cara mengelompokkan dan meminimalkan sumber daya di WordPress

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.

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 bisa memakan waktu berjam-jam dilakukan hanya dalam beberapa detik.

Langkah berikutnya, optimalkan CSS dan JS 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 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 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 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? 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 itu, klik simpan dan semua font akan dikelompokkan.

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.

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

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 lanjutan, Anda harus menjalankan pemindaian terlebih dahulu, aktifkan opsi dan klik 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”.

Ini akan menjalankan pemindaian, akhirnya, klik lihat hasil ketika 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