Beberapa hal yang dapat dilakukan dari sisi optimasi HTML untuk mempercepat loading time website adalah sebagai berikut:
1. Perkecil ukuran file dan lakukan kompresi
- buang kode-kode duplikat dan tidak perlu seperti kode-kode yang di ‘comment out’ baik secara php maupun html
- lakukan styling hanya di CSS dan hindari styling langsung pada html
- kompresi file html dengan gzip, sebenarnya ini lebih dilakukan di server (penyedia web hosting) untuk melakukan kompresi, karena dengan aktifnya kompresi gzip, otomatis meringankan beban server.
- image dapat diperkecil ukurannya dengan software-software khusus, dengan photoshop misalnya, ada pilihan untuk ‘save for web’
- penulisan dimensi image pada HTML dapat mempercepat loading browser, dengan catatan: gambar yang di load memiliki dimensi yang sama. jika tidak, itu sama saja memerintahkan browser untuk men’scale’ image lagi dan itu adalah load browser yang kurang perlu
2. Kurangi HTTP requests
- setiap request yang dilakukan, menambah load time pada server, masalahnya ada requests yang bisa dilakukan secara bersamaan (CSS) dan ada yang harus menunggu satu request selesai dulu baru request selanjutnya dapat dijalankan (JS). Jika rasanya web page loading agak lama, bisa jadi terlalu banyak HTTP request di tag < HEAD > html.
- jika bisa, JS ditempatkan di bagian footer saja
- gabung file-file serupa: webpage yang me-load beberapa file CSS dan JS akan lebih lambat dari pada yang me-load hanya 1 file CSS dan JS.
- gunakan ‘image sprite’ : satu file gambar untuk bermacam kebutuhan/class CSS. Tinggal gunakan property css ‘background-position’ untuk mengatur letak background sehingga cukup menampilkan bagian gambar yang diinginkan. Lebih lanjut tentang penggunaan image sprite untuk mempercepat loading time website disini.
3. Cache file-file yang biasa digunakan
- prinsip dasar cache adalah: jika ada halaman yang di load pertama kali, cache menyimpan informasi tersebut, sehingga jika ada yang me-request halaman yang sama, cukup mengambil dari cache dan tidak usah melakukan request lagi ke server.
- ada banyak plugin ‘cache’ untuk wordpress, tapi jika ingin melakukan cache manual, bermainlah di .htaccess (http://httpd.apache.org/docs/2.2/mod/mod_expires.html)
contoh: tambahkan kode berikut di .htaccess untuk meng-cache CSS dan Javascript kamu
[html]
ExpiresByType text/css “access plus 1 year”
ExpiresByType application/javascript “access plus 1 year”
[/html]
Oke, baru segini nih yang saya tahu. Mohon masukkan jika ada tambahan 🙂 Terima kasih sudah baca, semoga bermanfaat dan selamat berbagi, supaya kita semua bisa!
Berikut adalah masih tips mempercepat loading time website tetapi dengan pendekatan CSS