Apakah Anda ingin mengompres file CSS, HTML, dan javascript di WordPress?
Saat Anda memampatkan file CSS, HTML, dan Javascript situs web, Anda dapat menghemat waktu yang berharga pada kecepatan muat laman situs web Anda. Sekarang, kami tidak berbicara tentang memotong kecepatan pemuatan halaman Anda menjadi setengahnya atau apa pun, tetapi dalam hal kecepatan situs web Anda, sedikit pun penting.
Kecepatan pemuatan situs web Anda tidak hanya penting untuk pengunjung baru, tetapi juga untuk peringkat mesin pencari.
Istilah "mengecilkanDalam bahasa pemrograman menjelaskan proses menghilangkan karakter yang tidak perlu dari kode sumber. Karakter ini termasuk spasi, jeda baris, les commentaires dan memblokir pembatas yang berguna bagi kita manusia tetapi tidak berguna untuk mesin.
Kami mengecilkan file situs web yang berisi kode CSS, HTML, dan JavaScript sehingga browser web Anda dapat membacanya lebih cepat.
Baca juga artikel kami di 10 WordPress plugin untuk meningkatkan kecepatan blog Anda
Berikut adalah contoh minifikasi CSS.
CSS sebelum minifikasi
/ * Contoh file CSS ---------------------------------- * / .user-profile-card { margin: 0px; latar belakang: #33E43} .user-profil-description {border: 0; posisi: absolut; lebar: otomatis; margin-top: 20px; }
CSS setelah minifikasi
.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}
Jelas, ini hanyalah contoh kecil menggunakan cuplikan CSS, tetapi Anda dapat membayangkan berapa banyak ruang yang akan dihematnya saat menyusutkan ribuan baris kode.
Bagaimana cara menambah waktu yang dihabiskan di blog WordPress Anda? Cari tahu dengan membaca artikel ini.
Jadi jika Anda ingin melakukannya secara manual, secara teknis Anda bisa. Tetapi Anda akan mengalami risiko kesalahan yang tinggi dan membuang waktu berharga dalam hidup Anda secara tidak perlu!
Ikuti tips ini dan gunakan alat yang Anda inginkan.
Beberapa alat melakukan kompresi
Untungnya, Anda tidak perlu menjadi pengembang atau mengetahui salah satu bahasa pemrograman untuk mengurangi ukuran file situs web Anda. Minifikasi telah menjadi praktik umum di dunia desain web. Jadi, Anda tidak perlu heran mengetahui bahwa ada banyak alat yang bagus (dan gratis) di luar sana untuk melakukan pekerjaan itu untuk Anda.
Lihat juga kami Plugin 6 WordPress untuk memberikan kehidupan baru ke dalam artikel Anda
Berikut adalah daftar alat yang berguna untuk memulai. Karena banyak dari ini dapat meminimalkan beberapa jenis kode, saya telah memasukkan opsi jenis kode dalam tanda kurung.
-
- cssminifier.com et javascript-minifier.com (CSS dan JS) - Kedua minifier dari Andrew Chilton ini mudah digunakan. Anda hanya perlu menempelkan kode Anda, lalu klik tombolnya Mengecilkan untuk menampilkan kode yang dikompresi. Anda bahkan dapat mengunduh kode keluar sebagai file untuk kenyamanan.
- htmlcompressor.com (HTML, CSS, dan JS) - Alat kompresi / minifikasi online ini mendukung jenis kode HTML, CSS, dan JS. Ia bahkan mendukung berbagai kombinasi jenis kode seperti CSS + PHP dan JavaScript + PHP. Dan Anda bahkan dapat memeriksa kode terkompresi untuk kesalahan.
-
- csscompressor.net (Hanya CSS) - Kompresor CSS online ini cepat, mudah, dan gratis untuk digunakan.
-
- jscompress.com (Hanya JS) - Alat kompresi JavaScript ini memungkinkan Anda mengompresi kode JavaScript dengan salin dan tempel, tetapi Anda juga dapat mengunduh beberapa file JavaScript sekaligus. Ini sangat ideal untuk menggabungkan file JavaScript menjadi satu file untuk kecepatan pemuatan halaman yang lebih baik.
- Alat Dan - Alat Dan mengusulkan un minify CSS dan untuk meminimalkan JavaScript . Kedua alat memiliki antarmuka pengguna yang sangat bersih dan mudah digunakan. Mereka tidak menawarkan opsi lanjutan apa pun, tetapi bagus untuk tujuan minifikasi umum.
-
- refresh-sf.com (HTML, CSS, dan JS) - Kompresor ini akan mengurangi jenis kode JavaScript, CSS, dan HTML. Ini juga mencakup semua opsi kompresi untuk setiap jenis kode jika Anda membutuhkannya.
- Kompiler Penutupan (Hanya JS) - Closure Compiler adalah bagian dari penutupan Alat , seperangkat alat dari Google Developers. Ini memungkinkan Anda untuk mengecilkan JavaScript Anda bersama dengan pengoptimalan berguna lainnya. Anda dapat menggunakan kode Javascript Anda dengan memasukkan URL lokasi file js dan kemudian memilih bagaimana Anda ingin kode tersebut dioptimalkan dan diformat.
Misalnya, Anda memilih untuk mengoptimalkan kode Anda untuk menghapus hanya bagian yang kosong jika Anda mau. Setelah Anda mengklik tombol kompilasi, itu akan mengurangi kode (atau kompilasi) untuk Anda.
-
- minifycode.com (HTML, CSS dan JS) - Situs web ini menawarkan minifier untuk JavaScript , CSS et HTML dengan antarmuka pengguna yang sederhana dan bersih yang memampatkan kode Anda dengan satu klik. Itu juga menawarkan alat "mempercantik" untuk mendekompresi kode yang diperkecil agar lebih mudah dibaca (kebalikan dari minifikasi).
Jika Anda mencari alat offline untuk meminimalkan CSS atau JavaScript HTML Anda secara lokal, berikut adalah beberapa opsi:
- phpied.com/cssmin-js/ (Hanya CSS)
- yui.github.io/yuicompressor (JS dan CSS)
Cara mengurangi ukuran HTML, CSS, dan JavaScript Anda menggunakan alat online
Banyak alat online ini memiliki proses serupa yang melibatkan langkah-langkah berikut:
- Rekatkan kode sumber Anda atau unduh file kode sumber.
- Optimalkan pengaturan untuk output tertentu (jika opsi tersedia)
- Klik tombol untuk mengompres kode.
- Salin hasil kode minified atau unduh file kode minified.
Untuk contoh ini, saya akan menggunakan alat minify dari minifycode.com.
Lihat juga: Cara menambahkan kode CSS aman di WordPress dengan membaca tautan ini.
Pertama, cari file CSS (umumnya dikenal sebagai style.css) di file situs web Anda dan buka menggunakan editor halaman. Kemudian salin semua kode CSS ke clipboard Anda.
pergi ke minifycode.com dan klik pada tab CSS minifier. Kemudian tempel kode CSS di kotak input dan klik tombolnya Minimalkan CSS.
Setelah kode kecil yang baru dibuat, salin.
Kemudian kembali ke file CSS situs web Anda dan ganti kodenya dengan versi baru yang disederhanakan.
Itu saja!
Ulangi proses yang sama untuk juga mengurangi file JavaScript dan HTML situs web Anda.
Cara Meminimalkan HTML, CSS, dan JavaScript di WordPress Menggunakan Plugin
Cara termudah untuk meminimalkan HTML, CSS, dan JavaScript di WordPress adalah dengan menggunakan plugin. Ini memungkinkan Anda untuk secara otomatis mengoptimalkan file situs WordPress Anda untuk mengurangi waktu buka halaman hanya dengan beberapa klik tombol.
Ada banyak plugin yang akan menyelesaikan pekerjaan, tetapi saya akan menyebutkan beberapa contoh secara singkat.
Optimalkan (GRATIS)
Pengoptimalan otomatis mungkin adalah WordPress Plugin dari minify paling populer. Ini populer karena mudah digunakan dan dikemas dengan fitur-fitur canggih. Itu dapat menggabungkan (menggabungkan skrip), mengecilkan dan menyimpan kode Anda. Sebagai bonus, Anda memiliki opsi tambahan untuk mengoptimalkan Google Font, gambar, dll.
Untuk menggunakan Autoptimize, Anda dapat mengunduh, menginstal, dan mengaktifkan plug-in dari dasbor WordPress di bawah Plugin> Tambahkan baru.
Untuk informasi lebih lanjut, lihat panduan kami di: Cara menginstal plugin di WordPress
Setelah plugin diaktifkan, buka Pengaturan> Pengoptimalan otomatis. Kemudian, di bawah tab Parameter utama, centang kode yang ingin Anda optimalkan (HTML, CSS dan / atau JavaScript) dan klik E.simpan perubahan.
Anda juga dapat mengklik tombol Tampilkan pengaturan lanjutan di bagian atas halaman untuk lebih menyesuaikan pengoptimalan kode Anda.
Kurang lebih itu! Cukup sederhana dan kuat.
W3 Total Cache (GRATIS)
W3 Jumlah Cache adalah plugin caching yang bagus yang menawarkan kemampuan untuk meminimalkan file HTML, JS dan CSS Anda.
Cache Tercepat WP (GRATIS)
WP Cache Tercepat - Plugin ini WordPress caching sangat populer dengan ulasan tinggi. Ini melakukan berbagai optimasi kinerja, termasuk menggabungkan dan mengurangi HTML CSS dan kode JavaScript Anda untuk kinerja yang lebih baik.
Baca juga artikel kami di plugin 8 WordPress untuk menambahkan live chat di blog Anda
Setelah plugin terinstal, cukup klik pada tab WP Cache Tercepat di bilah sisi dasbor WordPress. Di bawah tab Settings, Anda akan menemukan opsi untuk menggabungkan dan mengurangi file HTML dan CSS. Meskipun minifying JavaScript hanya tersedia di versi pro.
Untuk meringkas
Jika Anda ingin membuat blog Anda lebih cepat dan memiliki kinerja yang lebih baik, Anda perlu mengurangi ukuran file HTML, CSS, dan JavaScript Anda. Dengan semua alat online yang tersedia, Anda dapat dengan mudah mengurangi kode situs web mana pun.
Plugin 9 WordPress untuk menyembunyikan konten Blog Anda untuk menemukan sepenuhnya
Bagi mereka yang menggunakan WordPress, Anda memiliki plugin yang kuat untuk meminimalkan file-file ini secara otomatis dengan beberapa klik.
Temukan juga beberapa plugin WordPress premium
Anda dapat menggunakan yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website Anda.
Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.
1. Halaman Kesalahan 404 Redirect ke Homepage atau Halaman Kustom
Berikut adalah salah satu cara terbaik untuk dengan mudah menambahkan halaman kesalahan 404 yang akan mengarahkan pengunjung ke halaman rumah atau halaman yang dipersonalisasi, setelah aktivasi plugin ini. WordPress premium.
Semua 404 halaman kesalahan akan dialihkan ke halaman rumah atau ke URL khusus. Dengan menggunakan ini WordPress Plugin, Anda akan mengizinkan Google untuk mengurangi pagerank situs web Anda jika memiliki banyak halaman error 404.
Temukan juga Cara memperbaiki kesalahan 413 di WordPress
Ce WordPress Plugin tidak sekedar melakukan redirection tetapi juga bisa menjadi solusi yang cocok untuk meningkatkan peringkat website Anda di hasil mesin pencari.
Download | Demo | Hébergement Web
2. Tembolok Borlabs
WordPress adalah platform yang ditenagai oleh database yang menghasilkan konten secara dinamis. Semakin banyak konten dan plugin yang Anda miliki, semakin banyak permintaan basis data dieksekusi. Ini dapat memperlambat kinerja situs web Anda, terutama ketika basis data Anda berada di server yang berbeda.
Plugin WordPress Borlabs Cache menyimpan konten yang dihasilkan secara dinamis sebagai file statis di memori server Anda. Ketika halaman diminta, file statis ini dimuat dan dikirim ke pengunjung, yang jauh lebih cepat dari permintaan basis data biasa. Tapi itu belum semuanya.
Lihat juga kami 5 plugin WordPress untuk membersihkan basis data situs web Anda
Halaman Anda mengandung banyak ruang putih yang tidak perlu atau komentar HTML, yang meningkatkan ukuran halaman secara keseluruhan. Cache Borlabs menghapus semuanya dan menggunakan GZIP untuk mengompres halaman Anda.
Temukan Cara menampilkan semua publikasi WordPress Anda pada satu halaman
Banyak plugin memiliki file JavaScript dan CSS mereka sendiri, yang menghasilkan lebih banyak permintaan di server Anda. Cache Borlabs menggabungkan semua file JavaScript dan CSS ini sehingga, dalam kasus terbaik, pengunjung Anda hanya perlu memuat satu file JavaScript dan satu file CSS.
Download | Demo | Hébergement Web
3. Tekan Multibahasa
Multilingual Press bekerja dengan instalasi multisite WordPress dan memungkinkan Anda menautkan terjemahan. Plugin ini hadir dengan 174 bahasa yang dibangun ke dalam pengelola bahasa, dan mendukung situs web tanpa batas, sehingga Anda dapat membuat dan menautkan terjemahan sebanyak yang Anda inginkan.
Ini bagus untuk SEO karena ini akan memungkinkan Anda untuk menyimpan bahasa Anda di postingan dan halaman terpisah, dan jika Anda memutuskan untuk menggunakan terjemahan plugin yang berbeda, konten Anda tetap utuh (bahkan setelah menonaktifkan atau menghapus plugin Multilingual Press). Selain itu, Anda bisa menambahkan widget terjemahan untuk beralih antar terjemahan dengan mudah.
Temukan Cara menambahkan cuplikan kode menggunakan Gutenberg di WordPress
Multilingual Press adalah opsi gratis yang bagus untuk menambahkan terjemahan ke situs WordPress Anda melalui multisite. Selain itu, jika Anda merasa membutuhkan lebih banyak opsi, Anda dapat memilih versi pro yang harganya $ 75.
Download | Demo | Hébergement Web
Sumber daya lain yang direkomendasikan
Kami juga mengundang Anda untuk berkonsultasi dengan sumber daya di bawah ini untuk melangkah lebih jauh dalam cengkeraman dan kontrol situs web dan blog Anda.
- Cara menambahkan keterangan ke gambar di Gutenberg
- 6 WordPress plugin untuk membumbui sidebars Anda
- 10 plugin WordPress untuk menambahkan pengelola unduhan
- Apa yang harus dipahami serangan DDoS di WordPress
Gunakan kompresi JS yang dapat digunakan https://www.jsonformatting.com/js-minify/