Cara Mengecilkan HTML, CSS, dan JavaScript Menggunakan Plugin Autoptimize

Google dan Mesin Pencari lainnya memberi nilai pada situs web Anda jika dimuat dengan sangat cepat. Karena tidak ada pemirsa yang memiliki banyak pasien untuk menunggu lama untuk melihat konten Anda dan Anda hanya memiliki 1,5 detik untuk menarik perhatian mereka. Jika situs Anda membutuhkan waktu lama untuk dibuka, Anda biasanya kehilangan pemirsa. Jadi, ini penting untuk mempercepat situs web Anda. Ada beberapa cara untuk mengoptimalkan situs Anda. Tetapi salah satu bagian terpenting adalah mengecilkan HTML, CSS, dan JavaScript .

Jika Anda pernah melakukan tes Kecepatan di Google PageSpeed ​​atau GTmetrix, Anda mungkin melihat opsi itu.

Setiap situs web dimuat dengan banyak file berisi HTML, CSS, dan JavaScript. Dan sebagian besar file menyertakan banyak ruang, komentar, pembatas Blok, dll. Jadi, secara signifikan dibutuhkan waktu ekstra untuk memuat dengan benar.

Ini juga tergantung pada kualitas Tema. Misalnya, kualitas tema premium selalu lebih baik daripada tema Gratis. Tema premium dikodekan dengan baik dan dibangun oleh pengembang yang sangat terampil. Tetapi semua tema tidak sama dan memiliki jenis fungsi yang berbeda. Jadi, dengan mengecilkan file HTML, CSS, dan JavaScript tersebut, Anda dapat meningkatkan kecepatan situs secara strategis dan membuat pengunjung Anda senang.

Apa itu Minify dan Mengapa Bermanfaat?

Minifikasi adalah bahasa pemrograman yang menghapus semua karakter yang tidak perlu dari kode sumber tanpa mengubah fungsinya. Karakter yang tidak perlu ini biasanya berisi " karakter spasi putih, karakter baris baru , komentar , dan pembatas blok".

Mereka digunakan untuk menambah keterbacaan kode tetapi tidak diperlukan untuk mengeksekusinya. Dengan cara ini mengurangi jumlah kode yang harus ditransfer melalui web dan menghemat bandwidth Anda. Jadi dengan mengecilkan HTML, CSS, dan JavaScript , Anda dapat dengan mudah menghapus karakter yang tidak perlu itu dari situs Anda dan secara signifikan meningkatkan kecepatan situs Anda.

Cara Mengecilkan HTML, CSS, dan JavaScript

Ada dua cara Anda dapat mengecilkan HTML, CSS & JavaScript. Entah Anda dapat melakukannya dengan mengedit kode tema Anda atau Anda dapat menggunakan plugin WordPress, yang disebut Autoptimize . Pada artikel ini, kami akan menunjukkan kepada Anda kedua proses tentang Cara Mengecilkan HTML, CSS, dan JavaScript .

Untuk mengetahui file HTML, CSS, atau JavaScript yang tepat yang menyebabkan masalah, Anda perlu memeriksanya di alat uji kecepatan situs apa pun seperti alat Google PageSpeed ​​atau GTmetrix. Karena tidak semua file Anda berisi jenis karakter yang tidak perlu ini.

Setelah memeriksa hasil situs Anda, Anda akan mendapatkannya. Berikut adalah gambar di bawah situs saya yang mempertimbangkan untuk memperbaiki CSS dan JavaScript .

Ini tergantung pada kualitas tema Anda. Jadi, tidak perlu khawatir jika Anda melihat keduanya dikatakan Minify dan lebih baik mendapatkan tema Premium.

Ada beberapa alat online yang dapat digunakan untuk mengecilkan kode HTML, CSS, dan JavaScript.

Sebelum Anda membuat perubahan apa pun, buat cadangan file itu.

#1 Perkecil Kode:

Minify Code adalah alat Perkecil Semua dalam Satu. Itu dapat mengecilkan kode JavaScript, CSS, dan HTML Anda. Anda hanya perlu menyalin kode HTML atau CSS atau JavaScript dan menempelkannya di sini. Kemudian Klik Opsi Minify . Alat ini secara otomatis mengecilkan kode Anda. Setelah itu, salin kode Minified di file itu.

Anda juga dapat mengecilkan kode CSS dan JavaScript Anda seperti kode HTML dengan alat itu.

#2 Willpeavy:

Willpeavy adalah alat hebat lainnya untuk mengecilkan kode HTML . Alat ini bekerja dengan cara yang sama seperti kode minify. Ini Memperkecil HTML dan CSS atau JS apa pun yang disertakan dalam markup Anda. Untuk menggunakan alat ini, Anda hanya perlu menyalin kode Anda di sini dan klik Minify.

Perkecil Menggunakan Plugin Pengoptimalan Otomatis

Jika Anda tidak terbiasa dengan pengkodean seperti itu, lebih baik menggunakan plugin dan direkomendasikan untuk pemula. Jadi inilah plugin Autoptimize untuk pengguna WordPress .

Autoptimize menggabungkan semua skrip dan kode gaya dan membuatnya lebih kecil sehingga memuat dengan sangat cepat. Ini mengecilkan semua kode HTML, CSS & Javascript itu sendiri dan membuat halaman Anda sangat ringan. Dengan Minification, plugin ini menambahkan header yang kedaluwarsa dan memindahkan gaya ke kepala halaman dan dapat memindahkan skrip ke footer.

Optimalisasi Rekomendasikan Pengaturan

Anda dapat dengan mudah melakukan semua hal dari pengaturan plugin. Setelah mengaktifkan plugin ini, buka Pengaturan> Pengoptimalan Otomatis . Klik tombol "Tampilkan pengaturan lanjutan".

Di bagian HTML , centang "Optimalkan Kode HTML" dan "Simpan komentar HTML" untuk kinerja yang lebih cepat.

Di bagian JavaScript , aktifkan "Optimalkan Kode JavaScript". Anda juga dapat mengaktifkan "Paksa JavaScript di <head>" untuk memuat JS lebih awal dan mengurangi kemungkinan kesalahan JS. Jika JS Anda merusak skrip, maka Anda dapat mengaktifkan "Tambahkan pembungkus coba-tangkap".

Di bagian CSS , aktifkan "Optimalkan Kode CSS", "Juga agregat inline CSS". Anda juga dapat mengaktifkan "Inline and Defer CSS" jika Anda memiliki CSS yang diperkecil. Coba alat ini untuk mengecilkan CSS Anda dan tempel di kotak.

Masukkan URL CDN Anda di bidang "URL Basis CDN". Misalnya, '//cdn.example.com/'.

Dan terakhir, aktifkan "Simpan skrip/css agregat sebagai file statis". Tapi pastikan, server web Anda dapat menangani kompresi dan kadaluwarsa dengan benar.

Setelah Meminimalkan kode Anda, jangan lupa untuk memeriksa kembali kecepatan situs Anda. Kemudian bandingkan dengan hasil sebelumnya. Jika situs Anda mengalami masalah atau tidak ditampilkan dengan benar, Anda dapat mencoba mengosongkan Cache .

Kesimpulan

Memperkecil HTML, CSS, dan JS bermanfaat untuk situs Anda. Ini menghapus karakter kode Anda yang tidak perlu dan membuatnya lebih kecil yang ramah browser. Dengan cara ini Anda dapat meningkatkan kecepatan memuat situs Anda.

Jika tutorial ini membantu mengecilkan HTML, CSS, dan JavaScript, silakan bagikan artikel ini di Facebook, Twitter, Google+.

Artikel Terkait,

• Cara Memanfaatkan Caching Peramban di WordPress
• Cara Mengoptimalkan Database WordPress Menggunakan WP-Sweep
• 7 Pengoptimal Gambar Terbaik untuk WordPress 2017
• Cara Mudah Mengaktifkan Kompresi Gzip di WordPress untuk Memuat Lebih Cepat