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

Cara mengelompokkan dan mengecilkan sumber daya di WordPress

file-grup-dan-perkecil

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 kami lakukan untuk itu, tetapi itu bisa sangat sulit. Kelompokkan semua sumber daya Anda (terutama file css dan js) dapat mengekspos situs web Anda jika Anda bukan pengembang karena dapat menimbulkan konflik.

WP Speed of Light adalah solusi terbaik untuk menjalankan situs wordpress Anda karena memiliki banyak opsi untuk membuat situs Anda dimuat dengan cepat dengan dasbor yang sangat ramah dan ya, salah satu opsi ini adalah mengelompokkan dan mengecilkan sumber daya. Penyertaan/pengecualian file tunggal dari grup dan proses minifikasi adalah kunci untuk pengoptimalan khusus tanpa konflik.

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

 

Bagaimana melakukan minifikasi WordPress JS dan CSS

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

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 jadi pertama kali akan memuat sedikit lambat.

 

sebelum tes

 

Ya, 2,79 detik untuk memuat halaman, lumayan tapi bisa lebih baik, mari kita perkecil js dan CSS dan lihat perbedaannya, buka WP Speed of light > SpeedUp > Group & Minify , Anda akan dapat untuk melihat menu dengan semua opsi untuk diperkecil. Versi gratis plugin memang menyertakan opsi grup dan minify tetapi pengecualian file visual hanya tersedia dalam versi PRO Addon.

 

grup-dan-perkecil-dasbor

 

Opsi addon PRO adalah: Kecualikan skrip sebaris (Kecualikan skrip sebaris dari minifikasi), pindahkan skrip ke footer (ini memungkinkan Anda untuk mempercepat situs Anda dengan memindahkan semua skrip yang diperkecil ke footer), Font grup dan Google Font (Grup font lokal dan font Google dalam satu file untuk dilayani lebih cepat) dan Pengecualian file lanjutan.
 
Anda memiliki opsi untuk mengecilkan, seperti yang Anda lihat, JS, CSS, dan juga HTML sekarang cukup aktifkan opsi ini, klik simpan dan semua sumber daya Anda akan segera diperkecil, itu bisa bermasalah karena ini adalah konfigurasi lanjutan tetapi semuanya dapat diperbaiki dengan pengecualian beberapa kode dan file (dengan addon pro).

 

perkecil-sumber daya

 

 

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

 

Langkah selanjutnya, WordPress mengoptimalkan CSS dan JS

Dengan plugin ini kami akan membiarkan wordpress mengoptimalkan CSS dan js hanya dengan mengaktifkan opsi grup di dasbor, buka WP Speed of Light > SpeedUp > Group & Minify , 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
  • Group 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 membuka halaman lain di situs yang sama sehingga jika kita dapat mengurangi permintaan ini, waktu buka akan berkurang.

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

 

daftar-skrip-chrome

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

Sekarang kita 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 serius dan optimalkan bobot font

Apa? optimasi lainnya? Ya! Anda akan dapat mengoptimalkan bobot font dan itu akan semudah mengaktifkan opsi pada pengaturan, cukup buka WP Speed of Light > SpeedUp > Group & Minify > Group fonts and Google Fonts option.
Font grup dan opsi font Google akan memungkinkan Anda untuk mengelompokkannya dalam satu file untuk dilayani lebih cepat, ini cukup berguna karena sebagian besar tema dan tata letak WordPress datang dengan 2 atau font secara default dengan semua penolakan (reguler, tebal, miring ...)

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 akan melihat perbedaan dalam waktu buka situs kita, Mari kita periksa kecepatannya.

 

tes-setelah

 

Sungguh perbedaan, Dari 2,8 menjadi 0,56 detik! Seperti yang kami katakan di awal posting ini, kami dapat membuat waktu buka lebih baik;)

 

Cara menggunakan pengecualian minifikasi file

Minifikasi dapat menyebabkan masalah di situs Anda, terutama terjadi ketika Anda mengelompokkan file tertentu yang mengandung kesalahan dalam kesalahan sintaks atau variabel serupa, nama kelas. Itu sebabnya dengan opsi "pengecualian minifikasi file", Anda akan dapat mengecualikan file dari proses minifikasi dan grup, buka WP Speed of Light > SpeedUp > Group & Minify , Anda akan dapat melihat Pengecualian file lanjutan .

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

 

kelompok-sumber-konflik-waspada


 Untuk dapat membuat daftar skrip yang dimuat di situs web Anda, WP Speed of Light perlu memindai folder Anda untuk mencantumkannya. Biasanya semuanya ada di folder /wp-content Anda yang mengelompokkan semua plugin dan tema Anda. Pilih folder itu (setidaknya) dan klik "Scan Now"

 

pilih-folder-untuk-pindai

 

Ini akan menjalankan pemindaian, akhirnya, klik pada tampilan hasil ketika pemindaian selesai.

 

dipindai

 

Daftar file yang diklasifikasikan berdasarkan jenis (Semua, JS, CSS, Font) harus 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 pengalih ON/OFF .

 

mengecualikan-file

 

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

5
Tetap Terinformasi

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

Pos terkait

 

Komentar

Belum ada komentar. Jadilah yang pertama mengirimkan komentar
Sudah terdaftar? Masuk disini
Kamis, 02 Mei 2024

Gambar Captcha