Loncat ke Konten Utama

Cara mengompres file CSS, HTML dan Javascript Anda

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 701.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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 Pengembang Google. Ini memungkinkan Anda untuk mengecilkan JavaScript Anda dengan pengoptimalan berguna lainnya. Anda dapat menggunakan kode javascript Anda dengan memasukkan url untuk 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:

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.

css style divi.jpg

pergi ke minifycode.com dan klik pada tab CSS minifier. Kemudian tempel kode CSS di kotak input dan klik tombolnya Minimalkan CSS.

minification css.jpg

Setelah kode kecil yang baru dibuat, salin.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

salin code.jpg terkompresi

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)

optimalkan wp.png secara otomatis
Autoptimize mungkin adalah plugin WordPress minify yang paling populer. Ini populer karena mudah digunakan dan dikemas dengan fitur-fitur canggih. Itu dapat memaketkan (menggabungkan skrip), meminimalkan, dan menyimpan kode Anda ke cache. Sebagai bonus, Anda memiliki opsi tambahan untuk mengoptimalkan Google Fonts, 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

autoptimize.jpg

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.

optimasi css.jpg

Anda juga dapat mengklik tombol Tampilkan pengaturan lanjutan di bagian atas halaman untuk lebih menyesuaikan pengoptimalan kode Anda.

opsi css advanced.jpg

Kurang lebih itu! Cukup sederhana dan kuat.

W3 Total Cache (GRATIS)

v3 total cache.png
W3 Jumlah Cache adalah plugin caching yang bagus yang menawarkan kemampuan untuk meminimalkan file HTML, JS dan CSS Anda.

parameter umum w3 total cache.jpg

Cache Tercepat WP (GRATIS)

wp cache.png tercepat
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 pengaturan, Anda akan menemukan opsi untuk menggabungkan dan mengurangi file HTML dan CSS. Meskipun minifying JavaScript hanya tersedia di versi pro.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

wp cache settings.png lebih cepat

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 plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web 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. Menggunakan plugin WordPress ini, Anda akan memungkinkan Google untuk mengurangi PageRank situs Anda jika memiliki banyak halaman kesalahan 404.

Temukan juga Cara memperbaiki kesalahan 413 di WordPress

Plugin WordPress ini tidak hanya mengarahkan tetapi juga dapat menjadi solusi yang cocok untuk meningkatkan peringkat situs web Anda dalam 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 Plugin 5 WordPress untuk membersihkan database 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 berfungsi dengan instalasi multisite WordPress dan memungkinkan Anda untuk menautkan terjemahan. Plugin ini hadir dengan 174 bahasa yang dibangun ke dalam pengelola bahasa, dan mendukung dan tidak terbatas jumlah situs web, sehingga Anda dapat membuat dan menautkan terjemahan sebanyak yang Anda inginkan.

Itu bagus untuk SEO karena itu akan memungkinkan Anda untuk menjaga bahasa Anda pada posting dan halaman terpisah, dan jika Anda pernah memutuskan untuk menggunakan terjemahan yang berbeda dari plugin 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.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Temukan Cara menambahkan cuplikan kode menggunakan Gutenberg di WordPress

Multilingual Press adalah opsi gratis yang hebat untuk menambahkan terjemahan ke situs WordPress Anda via 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.

Kesimpulan

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
2 saham
saham2
menciak
Register