Halaman ini diterjemahkan oleh Cloud Translation API.

Praktik terbaik untuk aplikasi web yang lebih cepat dengan HTML5

Paul Irish

Pengantar

Sebagian besar HTML5 bertujuan untuk memberikan dukungan browser native untuk komponen dan teknik yang telah kita capai melalui library JavaScript sejauh ini. Penggunaan fitur ini, jika ada, dapat memberikan pengalaman yang jauh lebih cepat bagi pengguna Anda. Dalam tutorial ini, saya tidak akan merangkum riset performa yang sangat baik yang telah Anda lihat di situs Performa Luar Biasa Yahoo atau dokumen Kecepatan Halaman Google dan situs Mari kita buat web lebih cepat. Sebagai gantinya, saya akan berfokus pada cara menggunakan HTML5 dan CSS3 saat ini untuk membuat aplikasi web Anda lebih responsif.

Tips 1: Gunakan penyimpanan web sebagai pengganti cookie

Meskipun telah digunakan untuk melacak data pengguna unik selama bertahun-tahun, cookie memiliki kelemahan serius. Kekurangan terbesarnya adalah semua data cookie Anda ditambahkan ke setiap header permintaan HTTP. Hal ini dapat menimbulkan dampak yang dapat diukur pada waktu respons, terutama selama XHR. Jadi, praktik terbaiknya adalah mengurangi ukuran cookie. Di HTML5, kita dapat melakukannya dengan lebih baik: menggunakan sessionStorage dan localStorage sebagai pengganti cookie.

Kedua objek penyimpanan web ini dapat digunakan untuk mempertahankan data pengguna di sisi klien selama durasi sesi atau tanpa batas waktu. Data mereka juga tidak ditransfer ke server melalui setiap permintaan HTTP. Mereka memiliki API yang akan membuat Anda senang untuk menghapus cookie. Berikut adalah kedua API tersebut, yang menggunakan cookie sebagai penggantian.

// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {

  // easy object property API
  localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';

} else {

  // without sessionStorage we'll have to use a far-future cookie
  //   with document.cookie's awkward API :(
  var date = new Date();
  date.setTime(date.getTime()+(365*24*60*60*1000));
  var expires = date.toGMTString();
  var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
                  ' expires='+expires+'; path=/';
  document.cookie = cookiestr;
}

Tips 2: Gunakan Transisi CSS, bukan animasi JavaScript

Transisi CSS memberi Anda transisi visual yang menarik antara dua status. Sebagian besar properti gaya dapat ditransisikan, seperti memanipulasi bayangan teks, posisi, latar belakang, atau warna. Anda dapat menggunakan transisi ke status pseudo-pemilih seperti :hover atau dari formulir HTML5, :invalid, dan :valid (contoh dengan status validasi formulir). Namun, fungsi ini jauh lebih canggih dan dapat dipicu saat Anda menambahkan class ke elemen.

div.box {
  left: 40px;
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }

Dengan menambahkan tombol untuk beralih class totheleft dan totheright, Anda dapat memindahkan kotak. Bandingkan jumlah kode ini dengan library animasi JavaScript. Jelas, jumlah byte yang dikirim ke browser jauh lebih sedikit saat menggunakan animasi berbasis CSS. Selain itu, dengan akselerasi tingkat GPU, transisi visual ini akan berjalan selancar mungkin.

Tips 3: Gunakan database sisi klien, bukan roundtrip server

Web SQL Database dan IndexedDB memperkenalkan database ke sisi klien. Daripada pola umum memposting data ke server melalui XMLHttpRequest atau pengiriman formulir, Anda dapat memanfaatkan database sisi klien ini. Mengurangi permintaan HTTP adalah target utama semua engineer performa, sehingga menggunakan ini sebagai datastore dapat menghemat banyak perjalanan melalui XHR atau postingan formulir kembali ke server. localStorage dan sessionStorage dapat digunakan dalam beberapa kasus, seperti merekam progres pengiriman formulir, dan terbukti jauh lebih cepat daripada API database sisi klien. Misalnya, jika Anda memiliki komponen petak data atau kotak masuk dengan ratusan pesan, menyimpan data secara lokal dalam database akan menghemat perjalanan bolak-balik HTTP saat pengguna ingin menelusuri, memfilter, atau mengurutkan. Daftar teman atau pelengkapan otomatis input teks dapat difilter pada setiap penekanan tombol, sehingga memberikan pengalaman pengguna yang jauh lebih responsif.

Tips 4: Peningkatan JavaScript memberikan keunggulan performa yang cukup besar

Banyak metode tambahan yang ditambahkan ke prototipe Array di JavaScript 1.6. Fitur ini sekarang tersedia di sebagian besar browser, kecuali IE. Contoh:

// Give me a new array of all values multiplied by 10.
[5, 6, 7, 8, 900].map(function(value) { return value * 10; });
// [50, 60, 70, 80, 9000]

// Create links to specs and drop them into #links.
['html5', 'css3', 'webgl'].forEach(function(value) {
  var linksList = document.querySelector('#links');
  var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
  linksList.innerHTML +=  newLink;
});


// Return a new array of all mathematical constants under 2.
[3.14, 2.718, 1.618].filter(function(number) {
  return number < 2;
});
// [1.618]


// You can also use these extras on other collections like nodeLists.
[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
  localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});

Dalam sebagian besar kasus, penggunaan metode native ini menghasilkan kecepatan yang jauh lebih cepat daripada loop for biasa seperti: for (var i = 0, len = arr.length; i < len; i++). Penguraian JSON native (melalui JSON.parse()) menggantikan file json2.js yang telah kita sertakan selama beberapa waktu. JSON native jauh lebih cepat dan lebih aman daripada menggunakan skrip eksternal dan sudah ada di IE8, Opera 10.50, Firefox 3.5, Safari 4.0.3, dan Chrome. String.trim native adalah contoh bagus lainnya yang tidak hanya lebih cepat daripada JS panjang, tetapi juga berpotensi lebih benar. Tidak satu pun dari penambahan JavaScript ini yang secara teknis merupakan HTML5, tetapi termasuk dalam cakupan teknologi yang baru-baru ini tersedia.

Tips 5: Gunakan manifes cache untuk situs aktif, bukan hanya aplikasi offline

Dua tahun lalu, Wordpress menggunakan Google Gears untuk menambahkan fitur yang disebut Wordpress Turbo. Pada dasarnya, cache ini menyimpan banyak resource yang digunakan di panel admin secara lokal, sehingga mempercepat akses file ke resource tersebut. Kita dapat mereplikasi perilaku tersebut dengan applicationCache HTML5 dan cache.manifest. Cache aplikasi memiliki sedikit keunggulan dibandingkan dengan menetapkan header Expires; karena Anda membuat file deklaratif yang menunjukkan resource statis yang dapat di-cache, browser dapat mengoptimalkannya secara signifikan, bahkan mungkin melakukan pra-caching sebelum Anda menggunakannya. Pertimbangkan struktur dasar situs Anda sebagai template. Anda memiliki data yang dapat berubah, tetapi HTML di sekitarnya biasanya tetap cukup konsisten. Dengan cache aplikasi, Anda dapat memperlakukan HTML sebagai serangkaian template murni, meng-cache markup melalui cache.manifest, lalu mengirimkan JSON melalui jaringan untuk mengupdate konten. Model ini sangat mirip dengan yang dilakukan aplikasi berita native iPhone atau Android.

Tips 6: Aktifkan akselerasi hardware untuk meningkatkan pengalaman visual

Di browser terkemuka, banyak operasi visual yang dapat memanfaatkan akselerasi tingkat GPU, yang dapat membuat operasi visual yang sangat dinamis menjadi jauh lebih lancar. Akselerasi hardware telah diumumkan untuk Firefox Minefield dan IE9, serta Safari menambahkan akselerasi tingkat hardware di versi 5. (Fitur ini sudah hadir di Mobile Safari jauh lebih awal.) Chromium baru saja menambahkan transformasi 3D dan akselerasi hardware untuk Windows, dengan dua platform lainnya akan segera hadir.

Akselerasi GPU hanya aktif dalam serangkaian kondisi yang cukup terbatas, tetapi transformasi 3D dan opasitas animasi adalah cara paling umum untuk mengaktifkan tombol. Cara yang agak tidak sopan tetapi tidak mengganggu untuk mengaktifkannya adalah:

.hwaccel {  -webkit-transform: translateZ(0); }

Namun, tidak ada jaminan. :) Dengan akselerasi hardware yang didukung dan diaktifkan, terjemahan, rotasi, penskalaan, dan opasitas animasi pasti akan lebih lancar dengan komposisi GPU. Fungsi ini akan memiliki manfaat karena ditangani langsung di GPU dan tidak memerlukan penggambaran ulang konten lapisan. Namun, properti apa pun yang memengaruhi tata letak halaman akan tetap relatif lambat.

Tips 7: Untuk operasi yang berat CPU, Web Worker memberikan

Web Worker memiliki dua manfaat signifikan: 1) Cepat. 2) Saat tugas Anda sedang berjalan, browser tetap responsif. Lihat Slide Presentasi HTML5 untuk Pekerja yang sedang beroperasi. Beberapa kemungkinan situasi saat Anda dapat menggunakan Web Worker:

Pemformatan teks dokumen panjang
Penyorotan sintaks
Pemrosesan gambar
Sintesis gambar
Memproses array besar

Tips 8: Atribut dan jenis input Formulir HTML5

HTML5 memperkenalkan kumpulan jenis input baru, yang mengupgrade kumpulan text, password, dan file untuk menyertakan search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, dan color. Dukungan browser untuk hal ini bervariasi, dengan Opera menerapkan sebagian besar saat ini. Dengan deteksi fitur, Anda dapat menentukan apakah browser memiliki dukungan native (dan akan menawarkan UI seperti pemilih tanggal atau pemilih warna) dan jika tidak, Anda dapat terus menggunakan widget JS untuk menyelesaikan tugas umum ini. Selain jenis, beberapa fitur berguna telah ditambahkan ke kolom input normal. Input placeholder menawarkan teks default yang dihapus saat Anda mengkliknya dan autofocus memfokuskan kursor pada pemuatan halaman sehingga Anda dapat langsung berinteraksi dengan kolom tersebut. Validasi input adalah hal lain yang muncul dengan HTML5. Menambahkan atribut required berarti browser tidak akan mengizinkan pengiriman formulir hingga kolom tersebut diisi. Selain itu, atribut pattern memungkinkan Anda menentukan ekspresi reguler kustom untuk input yang akan diuji; dengan nilai yang tidak valid akan memblokir pengiriman formulir. Sintaksis deklaratif ini merupakan upgrade besar tidak hanya dalam keterbacaan sumber, tetapi juga pengurangan JavaScript yang signifikan. Sekali lagi, Anda dapat menggunakan deteksi fitur untuk menayangkan solusi penggantian jika tidak ada dukungan native untuk fitur tersebut. Dengan menggunakan widget native di sini, Anda tidak perlu mengirim javascript dan css berat yang diperlukan untuk menampilkan widget ini, sehingga mempercepat pemuatan halaman dan kemungkinan meningkatkan responsivitas widget. Untuk mencoba beberapa peningkatan input ini, lihat Slide presentasi HTML5.

Tips 9: Gunakan efek CSS3, bukan meminta sprite gambar yang berat

CSS3 menghadirkan banyak kemungkinan gaya baru yang menggantikan penggunaan gambar untuk merepresentasikan desain visual secara akurat. Mengganti gambar 2k dengan CSS 100 byte adalah pencapaian besar, belum lagi Anda telah menghapus permintaan HTTP lainnya. Beberapa properti yang perlu Anda pelajari adalah:

Gradien linear dan radial
Border-radius untuk sudut membulat
Box-shadow untuk bayangan dan cahaya
RGBA untuk opasitas alfa
Transformasi untuk rotasi
Topeng CSS

Misalnya, Anda dapat membuat tombol yang sangat rapi melalui gradien dan mereplikasi banyak efek lainnya tanpa gambar. Dukungan browser untuk sebagian besar fitur ini sangat solid, dan Anda dapat menggunakan library seperti Modernizr untuk menangkap browser yang tidak mendukung fitur tersebut guna menggunakan gambar dalam kasus penggantian.

Tips 10: WebSocket untuk pengiriman yang lebih cepat dengan bandwidth yang lebih sedikit daripada XHR

WebSockets dirancang sebagai respons terhadap meningkatnya popularitas Comet. Memang ada keuntungan menggunakan WebSocket sekarang, bukan model Comet over XHR.

WebSocket memiliki framing yang sangat ringan, sehingga bandwidth yang digunakannya sering kali lebih ringan daripada XHR. Beberapa laporan menunjukkan pengurangan sebesar 35% pada byte yang dikirim melalui kabel. Selain itu, dalam volume yang lebih tinggi, perbedaan performa dalam hal pengiriman pesan akan lebih terlihat; XHR telah dicatat dalam pengujian ini dengan memiliki waktu gabungan 3.500% lebih lama daripada WebSocket. Terakhir, Ericsson Labs mempertimbangkan performa WebSockets dan menemukan bahwa waktu ping melalui HTTP 3-5 kali lebih besar daripada melalui WebSockets karena persyaratan pemrosesan yang lebih substansial. Mereka menyimpulkan bahwa protokol WebSocket jelas lebih cocok untuk aplikasi real-time.

Referensi Tambahan

Untuk rekomendasi pengukuran dan performa, Anda harus menggunakan ekstensi Firefox Page Speed dan YSlow. Selain itu, Speed Tracer untuk Chrome dan DynaTrace Ajax untuk IE memberikan tingkat logging analisis yang lebih mendetail.

Praktik terbaik untuk aplikasi web yang lebih cepat dengan HTML5 Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.