Technology

Tips Optimasi Script untuk Meningkatkan Kecepatan Website Anda

 

Loading...

Benar jika menyangkut kecepatan website, maka bandwidth dan routing internet user itu jauh di luar kendali kita. Namun ada juga variabel-variabel lain yang ikut mempengaruhi waktu respon sebuah website. Tim development jagoanstore.com telah menyusun sejumlah tips meningkatkan kecepatan website melalui perbaikan aspek internalnya. 10 tips meningkatkan kecepatan website telah diulas pada 10 Tips Optimasi Performa Website. Berikut adalah 12 poin lanjutannya:

Hapus double script

Sebuah survey menyebutkan 2 dari 10 website di US mengandung double script. Entah karena kelalaian, atau alasan lainnya, yang jelas dengan memasang Javascript dua kali di halaman anda dapat melambatkan waktu responnya. Sebab anda akan menciptakan HTTP request yang sia-sia. Cara mencegah Javascript yang sama dihitung berulang kali di PHP adalah dengan mulai mengimplementasikan function insertScript untuk menyisipkan Javascript anda:

<?php insertScript(“menu.js”) ?>

Minimalkan jumlah iframe

Keuntungan menggunakan <iframe> adalah iframe bisa berlaku sebagai security sandbox, bisa membantu mempercepat konten pihak ketiga yang lambat diakses seperti ads dan badges, dan iframe memungkinkan download script secara paralel. Namun keuntungan-keuntungan penggunaan iframe bukan berarti tanpa sisi negatif. Selain iframe tidak semantic, iframe juga bekerja dengan memblok page onload, dan bisa merugikan bahkan jika iframe tersebut kosong.

Flush buffer lebih awal

Ketika user melakukan request, server butuh sekitar 200 – 500ms untuk menyusun halaman HTML. Selama itu, browser jadi idle karena menunggu datangnya data. Agar browser tidak idle terlalu lama, anda bisa memanfaatkan function flush() yang terdapat pada PHP. Jika function ini ditaruh setelah bagian HEAD, function ini akan memungkinkan browser untuk men-download CSS dan Javascript pada bagian BODY ketika dia sedang idle.

… <!– css, js –> </head> <?php flush(); ?> <body> … <!– content –>

GZIP komponen

Kompres komponen-komponen anda untuk mengurangi beban yang harus ditransfer pada sebuah HTTP request. Anda bisa melakukan kompresi terhadap dokumen HTML anda, Javascript, dan stylesheet anda. Kompresi juga bisa dilakukan terhadap file teks seperti XML dan JSON. Salah satu metode kompresi paling efektif saat ini adalah GZIP. Anda bisa mengurangi beban respon sampai 70% dengan GZIP.

Jaga ukuran komponen tetap di bawah 25 KB

Batasan ini berkaitan dengan fakta bahwa iPhone tidak akan melakukan cache terhadap komponen yang lebih besar dari 25 KB. Maka jaga agar ukuran komponen-komponen anda tetap di bawah 25K.

Kemas komponen anda ke dalam multipart document

Cara kerjanya sama dengan download all attachment pada email. Browser anda akan mengambil beberapa komponen hanya dengan satu HTTP request. Meskipun ampuh, jika anda bermaksud menggunakan teknik ini maka anda harus periksa dulu apakah user-agent yang anda target sudah support dengan teknik ini. Sayangnya iPhone tidak.

Komponen post-load

Javascript jika dipakai sebagaimana mestinya bisa sangat efektif untuk meningkatkan user experience website anda. Namun sebelum memakai Javascript, pastikan dulu apakah halaman anda bisa bekerja meskipun tanpa Javascript. Baru kemudian anda bisa mulai menggunakan komponen Javascript yang sifatnya post-load seperti animasi drag-drop. Komponen yang sifatnya post-load akan diproses setelah initial rendering, sehingga tidak mengganggu proses loading halaman utama anda. Komponen post-load bisa anda buat dengan memanfaatkan tools seperti YUI Image Loader (http://developer.yahoo.com/yui/imageloader) & YUI Get Utility (http://developer.yahoo.com/yui/get/).

Komponen preload

Melalui komponen preload, anda bisa mengambil keuntungan dari waktu idle browser dengan request komponen yang nantinya akan anda butuhkan untuk menampilkan halaman website anda (misalnya CSS dan CSS sprite). Komponen preload akan disimpan di cache user sehingga halaman anda bisa ditampilkan dengan lebih cepat. Berikut beberapa tipe komponen preload:

  • Unconditional preload – Misalnya pada halaman google.com. Meskipun di halaman home tidak ditampilkan, gambar CSS sprite akan tetap di-download. Baru kemudian mulai diterapkan pada halaman hasil pencarian.
  • Conditional preload – Misalnya pada halaman search.yahoo.com. Anda bisa melihat bagaimana komponen tambahan di-request setelah anda mengetik pada box pencarian.

Kurangi jumlah elemen DOM

Untuk mengukur jumlah elemen DOM dari website anda, gunakan saja ekstensi Firebug yang bisa anda instal di Firefox anda. Jika anda mendapatkan angka yang besar (halaman yahoo.com di bawah 700 elemen DOM), artinya ada sesuatu yang bisa di-markup pada halaman anda. Misalnya apakah anda benar-benar membutuhkan nested table untuk layout anda? Apakah anda menggunakan terlampau banyak <div> untuk membereskan masalah layout padahal masih banyak cara yang lebih semantic? Alat yang bisa anda jadikan acuan untuk membereskan masalah layout adalah YUI CSS Utilities (http://developer.yahoo.com/yui/). Alat ini menyediakan berbagai fungsi misalnya grid.css, fonts.css dan reset.css yang bisa membantu menampilkan format basic website anda. Sehingga anda bisa mulai dari awal dan fokus pada pengembangan website anda.

Minimalkan akses DOM pada Javascript

Sayangnya elemen-elemen DOM sangat lambat jika diproses dengan Javascript. Makanya jika ingin memiliki halaman yang lebih responsif, Javascript anda harus bisa di-cache, atau hindari penggunaan Javascript untuk membereskan masalah layout anda.

Kembangkan event handler yang canggih

Jika terlalu banyak event handler yang dipasang di elemen – elemen DOM anda, maka halaman anda akan terasa tidak responsif. Hal ini dikarenakan event handler – event handler tersebut akan terlalu sering dieksekusi. Makanya, penting bagi programmer untuk memanfaatkan event delegation. Dengan demikian, misalnya jika anda punya 10 button di dalam div, anda bisa memasang hanya 1 event handler saja pada div anda, daripada 1 handler untuk setiap button.

Hindari <img src> kosong

Gambar dengan atribut src yang kosong seringkali dilalaikan programmer. Misalnya <img src=””> di HTML atau var img = new Image(); img.src = “”; di Javascript. Kedua bentuk tersebut mengakibatkan dampak yang sama. Yaitu memaksa browser membuat request yang tidak berarti ke server anda. Selain mengganggu server dengan mengirim jumlah besar trafik (terutama website dengan jutaan pageview perhari), tag <img src> kosong bisa mengacaukan siklus komputasi server anda dengan menciptakan halaman yang tidak akan pernah dilihat. Deskripsi tag <src> pada HTML5 terang-terangan menyebutkan:

The src attribute must be present, and must contain a valid URL referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted. If the base URI of the element is the same as the document’s address, then the src attribute’s value must not be the empty string.

Jadi, tag <img src> anda benar-benar tidak boleh kosong.

Mari belajar dari Amazon.com. Setiap paginya, Jeff Bezos (founder Amazon.com), rutin menggelar sesi coffee morning dengan tim IT untuk membandingkan kecepatan website mereka dengan kompetitor. Sebab dia sadar bahwa jika website merupakan senjata utama Amazon, maka kecepatan merupakan ujung tombaknya. Sepenting itulah kecepatan website sehingga anda pun tidak boleh serta merta mengabaikannya. [Taufik]

Loading...

2 komentar

  • 26 Februari 2018 - pukul 3:24

    Terimakasih gan, tipsnya sangat membantu dan akan sy coba terapkan.

  • 15 September 2018 - pukul 8:01

    Artikelnya langsung bisa dieksekusi gan.
    membantu bngt..
    terimakash gan

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *