Meminimalkan JavaScript dan CSS Anda
Alasan kebanyakan CSS dan JavaScript tidak diperkecil adalah karena memungkinkan manusia untuk membaca dan menulis kode. Perangkat Anda, bagaimanapun, tidak peduli tentang keterbacaan manusia. Dari perspektif mesin, CSS dan JavaScript yang tidak diperkecil membuat file lebih besar dari yang dibutuhkan.
Mengoptimalkan CSS dan JavaScript untuk browser melibatkan lebih dari sekadar penghapusan karakter baris baru, spasi putih, pemendekkan nama variabel, menggabungkan duplikat CSS, dll. Semuanya sangat sederhana dan melibatkan satu tujuan: lebih sedikit karakter dan akibatnya, ukuran file lebih kecil dan memuat halaman web lebih cepat.
Jadi "minifying" JavaScript dan CSS pada akhirnya mengarah ke kecepatan pemuatan halaman yang lebih cepat. Apakah itu berarti kita harus memeriksa semua kode kita dan memotongnya sendiri? Tidak.
Berikut adalah daftar populer alat CSS dan JS yang melakukan "minifying" untuk Anda:
Untuk memperkecil HTML, coba HTML Minifier
Untuk memperkecil CSS, coba cssnano dan csso.
Untuk memperkecil JavaScript, coba UglifyJS. Closure Compiler juga sangat efektif. Anda dapat membuat proses pembuatan yang menggunakan alat-alat ini untuk memperkecil dan mengganti nama file pengembangan dan menyimpannya ke direktori produksi.
Atau, PageSpeed Module, terintegrasi dengan server web Apache atau Nginx untuk secara otomatis mengoptimalkan situs Anda, termasuk minifikasi sumber daya.
Cara mempercepat load CSS web
Jenis dan Pertanyaan Media
Saat memasukkan gaya Anda, atribut media bisa sangat membantu. Dengan menandainya sebagai "cetak" browser tidak perlu menunggu sampai dimuat.
<link href="styles.css" media="print" rel="stylesheet" />
Kueri Media memungkinkan Anda memuat CSS tergantung pada ukuran viewport dan dalam usia yang semakin mobile, sangat disarankan Anda menggunakannya. Berdasarkan permintaan Anda, browser Anda memutuskan apakah harus memuat CSS atau tidak.
Kirim dan Sertakan CSS sedini mungkin
Karena browser harus menunggu semua CSS dimuat, penting untuk menyediakannya secepat mungkin. Cara yang sangat sederhana untuk memastikan browser menerima CSS sedini mungkin adalah dengan memasukkannya di bagian KEPALA dokumen HTML Anda. Dengan cara ini, browser akan mulai memuat CSS sesegera mungkin.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Cara mempercepat load JavaScript
Seperti halnya CSS, peramban akan berhenti membuat halaman sampai ia memuat dan mem-parsing skrip Java yang ditemukannya. Saat dimuat dan diuraikan browser Anda akan terus membuat halaman web.
Muat Skrip Java di Bawah
<script src="myjs.js"></script>
</body>
Selalu sertakan sumber daya JavaScript di bagian paling bawah dokumen HTML Anda sebelum tag tubuh penutup.
Termasuk Skrip dengan ´async´
Gunakan atribut "async" sehingga browser tahu JavaScripts mana yang tidak boleh memblokir proses rendering.
Untuk pertanyaan silahkan tulis di kolom komentar. Terima kasih
0 comments:
Post a Comment