Bersiap Untuk HTTP2: Panduan Untuk Desainer dan Pengembang Web

Hypertext Transfer Protocol (HTTP) adalah protokol yang mengatur koneksi antara server Anda dan browser pengunjung situs web Anda. Untuk pertama kalinya sejak 1999, kami memiliki versi baru dari protokol ini , dan menjanjikan situs web yang jauh lebih cepat untuk semua orang.

Pada artikel ini, kita akan melihat dasar-dasar HTTP2 yang berlaku untuk desainer dan pengembang web. Saya akan menjelaskan beberapa fitur utama dari protokol baru , melihat kompatibilitas browser dan server, dan merinci hal-hal yang mungkin perlu Anda pikirkan saat kita melihat lebih banyak adopsi HTTP2.

Bacaan lebih lanjut tentang Smashing:

• Pramuat: Apa Manfaatnya?
• Semua yang Perlu Anda Ketahui Tentang AMP
• Meningkatkan Kinerja Majalah Smashing

Dengan membaca artikel ini, Anda akan mendapatkan gambaran umum tentang apa yang perlu dipertimbangkan untuk diubah dalam alur kerja Anda dalam jangka pendek dan panjang. Saya juga akan menyertakan banyak sumber jika Anda ingin menggali lebih jauh masalah yang diangkat. Tujuan saya adalah memberi Anda latar belakang yang cukup untuk dapat membuat keputusan yang baik saat Anda merencanakan perpindahan ke HTTP2.

Sejarah Singkat HTTP

HTTP adalah protokol lama, awalnya ditetapkan pada tahun 1991, dengan revisi besar terakhir — HTTP/1.1 — diterbitkan pada tahun 1999. Situs web pada tahun 1999 sangat berbeda dengan situs web yang kami kembangkan saat ini. Dalam http2 dijelaskan , Daniel Sternberg mencatat bahwa jumlah data yang sekarang diperlukan untuk memuat halaman beranda situs web rata-rata adalah 1,9 MB, dengan lebih dari 100 sumber daya individu diperlukan untuk menampilkan halaman — "sumber daya" berupa apa saja dari gambar atau font ke file JavaScript atau CSS.

HTTP/1.1 tidak bekerja dengan baik saat mengambil sejumlah besar sumber daya yang diperlukan untuk menampilkan situs web modern. Seperti yang akan kita lihat nanti di artikel ini, banyak praktik terbaik kinerja yang kita ketahui sebagai pengembang web berasal dari upaya kita mengatasi keterbatasan HTTP/1.1.

SPDY

Pada tahun 2009, dua insinyur di Google memposting tentang proyek penelitian yang sedang mereka kerjakan bernama SPDY. Proyek ini membahas beberapa masalah di HTTP/1.1. SPDY berangkat ke:

• mengizinkan permintaan bersamaan di satu koneksi TCP, yang dikenal sebagai multiplexing ;
• memungkinkan browser untuk memprioritaskan aset sehingga sumber daya penting untuk tampilan halaman dapat dikirim oleh server terlebih dahulu;
• kompres dan kurangi header HTTP;
• menerapkan server push , di mana server dapat mendorong sumber daya penting ke browser sebelum diminta.

Selain itu, SPDY memerlukan koneksi terenkripsi (HTTPS) antara browser dan server.

SPDY tidak menggantikan HTTP; alih-alih, ini adalah terowongan untuk protokol dan memodifikasi cara permintaan dan tanggapan HTTP yang ada dikirim. Ini membutuhkan dukungan dari server dan browser yang terhubung ke server itu. Dengan dukungan yang tersedia di NGINX dan paket yang tersedia dari Google untuk mengaktifkan dukungan di Apache, ada cukup banyak adopsi SPDY. Dukungan browser juga cukup bagus, dengan versi modern dari semua browser utama yang mendukungnya.

HTTP2

Kami telah melihat SPDY menikmati beberapa keberhasilan, mendapatkan adopsi dengan server dan browser. Namun, Anda mungkin juga telah melihat bahwa, meskipun Internet Explorer 11 didukung, browser Edge Microsoft telah menjatuhkannya. Apa yang sedang terjadi disini?

Dukungan untuk SPDY telah dihentikan di Edge karena Microsoft menerapkan dukungan untuk HTTP2, versi terbaru dari protokol HTTP. Sementara browser lain saat ini masih mempertahankan dukungan untuk SPDY, Chrome akan menghapus dukungan pada tahun 2016, dan browser lain kemungkinan akan mengikuti. Pada saat penulisan, Edge, Firefox, Chrome dan Opera mendukung SPDY dan HTTP2. Safari, termasuk di iOS, akan bergabung dengan grup itu akhir tahun ini dengan peluncuran Safari 9.

HTTP2 dibangun di atas keberhasilan SPDY, yang digunakan sebagai titik awal untuk protokol baru. Dengan demikian, sebagian besar tujuan SPDY terpenuhi di HTTP/2. Persyaratan untuk koneksi HTTPS telah dibatalkan. Yang mengatakan, semua vendor browser telah memutuskan untuk hanya mengimplementasikan HTTP2 untuk koneksi TLS (https). Jadi, meskipun Anda berpotensi menggunakan HTTP/2 dengan teks yang jelas dalam komunikasi server ke server, kasus penggunaan kami dalam menyajikan HTTP2 ke browser berarti Anda harus menjalankan situs di https sebelum Anda dapat berpikir untuk pindah ke HTTP2.

Spesifikasi HTTP2 diselesaikan pada Februari 2015; setahun kemudian, dukungan browser di browser modern sangat baik. Seperti halnya SPDY, HTTP2 membutuhkan dukungan baik di tingkat browser maupun server, dan implementasi web server sudah banyak. Anda dapat melacaknya di wiki HTTP/2. W3Techs juga memiliki posting dari Juli 2015 yang merinci tingkat adopsi. Adopsi protokol ini terjadi dengan cepat, mengingat relatif baru.

Apakah Kami Harus Mengubah Situs Web Kami?

HTTP/2 kompatibel dengan HTTP/1.1 , jadi dimungkinkan untuk mengabaikannya sepenuhnya dan semuanya akan terus berfungsi seperti sebelumnya. Perubahan protokol benar-benar transparan bagi pengguna. Banyak pembaca artikel ini telah menggunakan protokol selain HTTP/1.1 selama bertahun-tahun. Jika Anda memiliki akun Gmail dan menggunakan Chrome untuk mengaksesnya, Anda akan menggunakan SPDY dan kemudian HTTP/2 tanpa mengetahui apa pun tentangnya.

Namun, banyak hal yang Anda anggap sebagai praktik terbaik dapat merusak kinerja di bawah HTTP/2. Seiring waktu, karena lebih banyak server memperbarui untuk menggunakan HTTP/2 dan lebih banyak orang memiliki browser yang mendukung HTTP/2, situs web Anda, yang pada satu waktu dioptimalkan dengan baik menurut praktik terbaik, akan mulai tampak lebih lambat daripada situs web yang dioptimalkan untuk protokol baru.

Apa yang Perlu Kita Ubah Untuk Merangkul HTTP/2?

Di sisa artikel ini, kita akan melihat beberapa praktik terbaik umum yang akan menjadi anti-pola saat HTTP/2 diadopsi . Seperti yang telah kita lihat, transisi akan berjalan lambat untuk banyak situs web. Untuk pindah ke HTTP/2, perangkat lunak server Anda perlu diperbarui untuk mendukung protokol — yang mungkin mudah atau hampir tidak mungkin bergantung pada cara Anda dihosting.

Sebelum membuat perubahan pada situs web Anda khusus untuk HTTP/2, Anda juga perlu mempertimbangkan apakah pengunjung Anda cenderung memiliki browser yang mendukungnya. Pemilik situs web yang menarik banyak orang yang menggunakan browser terbaru akan dapat beralih lebih cepat daripada pemilik yang lognya menunjukkan mayoritas pengguna di browser lama. Untuk mencerminkan hal ini, saya juga akan memberi Anda beberapa saran tentang cara bekerja di masa transisi ini.

Lakukan Pindah ke TLS

Untuk banyak situs web, hal tersulit tentang pindah ke HTTP/2 mungkin bukan HTTP/2 sama sekali, melainkan persyaratan untuk menjalankan situs melalui koneksi yang aman. Jika Anda mengembangkan situs baru atau memperbarui situs lama, langkah pertama Anda adalah memastikan bahwa Anda meluncurkan atau pindah ke https sesegera mungkin. Ini penting tidak hanya untuk HTTP/2, Google menggunakan koneksi aman sebagai sinyal peringkat, dan browser mulai menandai situs web non-https sebagai 'tidak aman'. Di masa mendatang, Anda akan menemukan bahwa beberapa fitur HTML5 yang canggih, seperti geolokasi, tidak dapat digunakan tanpa koneksi yang aman.

Jika Anda memiliki situs yang saat ini hanya http maka saran saya adalah memprioritaskan pindah ke https terlebih dahulu dan kemudian memutuskan strategi HTTP/2 Anda.

Mengubah Beberapa File Gambar Menjadi Sprite

Di HTTP 1.1, mengambil satu gambar besar jauh lebih efisien untuk browser daripada membuat banyak permintaan untuk yang kecil. Ini karena beberapa permintaan mengantri di belakang satu sama lain. Untuk mengatasinya, kami disarankan untuk mengubah ikon kecil kami menjadi file sprite.

Sprite yang dihasilkan dikembalikan dengan satu permintaan HTTP, mencegah masalah beberapa permintaan yang diantrekan. Namun, meskipun pengunjung berada di halaman yang hanya menampilkan salah satu ikon tersebut, mereka masih harus mengunduh file yang jauh lebih besar daripada yang diperlukan untuk melihat satu gambar itu.

Dengan kemampuan multiplexing HTTP/2 , antrian sumber daya ini tidak lagi menjadi masalah. Melayani gambar kecil secara individual akan lebih baik dalam banyak kasus; Anda hanya perlu melayani apa yang diperlukan untuk halaman tempat pengunjung berada. Membuat sprite masih diperlukan dalam beberapa kasus; Permintaan HTTP hanyalah salah satu aspek kinerja. Menggabungkan beberapa gambar bersama-sama dalam sebuah sprite mungkin mencapai kompresi yang lebih baik dan, dengan demikian, ukuran unduhan yang lebih kecil secara keseluruhan, terutama jika semua gambar tersebut digunakan pada halaman yang sedang dimuat. Namun, itu tidak akan lagi menjadi kasus bahwa sprite selalu menjadi pilihan terbaik.

Menyejajarkan Gambar Menggunakan URI Data

Solusi lain untuk masalah beberapa permintaan HTTP di HTTP/1.1 adalah dengan menyejajarkan gambar dalam CSS menggunakan URI data. Menyematkan gambar dengan cara ini akan membuat lembar gaya jauh lebih besar. Jika Anda telah menggabungkan ini dengan teknik pengoptimalan lain untuk menggabungkan aset, pengunjung kemungkinan akan mengunduh semua kode ini meskipun mereka tidak pernah mengunjungi halaman tempat gambar digunakan.

Dengan permintaan HTTP yang sangat murah di HTTP/2, "praktik terbaik" ini akan menghambat daripada membantu kinerja.

Menggabungkan CSS dan JavaScript

Sebagai langkah terakhir dalam proses pembuatan, banyak dari kita akan menggabungkan semua file CSS dan JavaScript kecil yang digunakan di situs web kita. Kami sering ingin memisahkan ini saat mengembangkan untuk mempermudah pengelolaan sumber daya ini — tetapi kami tahu bahwa mengirimkan satu file ke browser lebih efisien untuk kinerja daripada mengirimkan lima. Sekali lagi, kami mencoba membatasi permintaan HTTP.

Jika Anda melakukan ini, maka pengunjung yang membuka halaman beranda Anda mungkin mengunduh semua CSS dan JavaScript yang diperlukan untuk situs web Anda, meskipun mereka tidak pernah menggunakannya sebagian besar. Sebagai pengembang, Anda dapat mengatasi masalah ini dengan hati-hati memilih dan memasukkan file tertentu untuk setiap area situs web dalam proses pembuatan Anda, tetapi itu bisa menjadi pekerjaan yang cukup banyak.

Masalah tambahan dengan penggabungan adalah bahwa semuanya perlu dibersihkan dari cache sekaligus. Anda tidak dapat memberikan beberapa file yang tidak pernah mengubah tanggal kedaluwarsa yang lama sambil memberikan bagian yang sering berubah dari basis kode tanggal yang lebih pendek. Semuanya harus kedaluwarsa jika bahkan satu baris CSS, yang digunakan pada satu halaman, diubah.

Saya membayangkan Anda melihat ke mana arahnya! Permintaan HTTP murah di dunia HTTP/2 . Mengatur aset Anda selama pengembangan sesuai dengan halaman di mana mereka akan digunakan akan jauh lebih baik. Anda kemudian dapat menyajikan hanya kode yang dibutuhkan pengunjung. Mengunduh banyak lembar gaya kecil tidak masalah. Anda juga dapat mengatur berdasarkan seberapa sering hal-hal berubah; aset dengan umur panjang kemudian bisa dirawat lebih lama.

Memisahkan Sumber Daya Antar Host: Sharding

Dengan HTTP/1.1, Anda dibatasi pada jumlah koneksi yang terbuka. Jika memuat sejumlah besar sumber daya tidak dapat dihindari, salah satu metode untuk mengatasi pembatasan ini adalah dengan mengambilnya dari beberapa domain. Ini dikenal sebagai domain sharding. Ini dapat mencapai waktu pemuatan yang lebih baik, namun dapat menyebabkan masalah itu sendiri, belum lagi biaya pengembangan untuk mempersiapkan ini untuk situs web Anda.

HTTP/2 menghilangkan kebutuhan akan pembagian domain ini karena Anda dapat meminta sumber daya sebanyak yang Anda butuhkan. Faktanya, teknik ini kemungkinan akan merusak kinerja karena menciptakan koneksi TCP tambahan dan menghalangi HTTP/2 dari memprioritaskan sumber daya.

Cara Mempersiapkan HTTP/2 Sekarang

Jika Anda memulai proyek yang Anda harapkan berumur panjang tetapi tidak dapat meluncurkan HTTP/2 mungkin karena dukungan server, ada baiknya mempertimbangkan bagaimana Anda dapat mempersiapkan HTTP/2. Anda dapat menambahkan beberapa hal ke proses pembuatan Anda sekarang yang akan membuat peralihan lebih mudah nanti.

Buat Aset Individu Selain Sprite dan URI Data

Jika Anda membuat sprite, tambahkan ke proses Anda pembuatan dan pengoptimalan masing-masing aset tersebut, atau sprite khusus halaman yang lebih kecil jika Anda merasa kinerja akan lebih baik ditingkatkan dengan ini. Ini akan memudahkan Anda untuk beralih dari sprite besar ke sprite kecil (atau tidak sama sekali) ketika titik kritis untuk situs web Anda tercapai.

Hal yang sama berlaku untuk URI data. Jika saat ini Anda menggunakan ini di CSS Anda, siapkan gambar saat Anda beralih dari teknik ini.

Atur Aset Anda Berdasarkan Bagian Situs Web

Dengan penggabungan CSS dan JavaScript, ada godaan untuk mengoptimalkan untuk kemudahan pengembangan karena bagaimanapun juga semua file akan terjepit. Saat Anda beralih ke HTTP/2, Anda akan mendapatkan kinerja terbaik dengan mengelola sumber daya secara hati-hati sehingga hanya hal-hal yang dibutuhkan oleh halaman tertentu yang dikirimkan ke halaman tersebut. Oleh karena itu, mulai mengatur perkembangan Anda dengan cara ini sekarang akan membuahkan hasil. Untuk saat ini, Anda mungkin masih menggabungkan, dan ketika titik kritis tercapai, Anda dapat menghentikan bagian itu dari proses pembangunan dan menyajikan sumber daya satu per satu.

Kelola Pembagian Domain

Praktik terbaik saat ini untuk HTTP/1.1 adalah membatasi sharding ke dua nama host. Ada cara untuk mendapatkan HTTP/2 untuk menggabungkan koneksi, jika sertifikat TLS valid untuk kedua host dan host menyelesaikan ke IP yang sama. Karena pelaksana browser memerlukan HTTP/2 untuk dijalankan melalui HTTPS, sertifikat TLS harus dijalankan melalui HTTP/2. Lihat selengkapnya di slide 26 dek slide Ilya Grigorik dari Velocity Conference.

Akan datang lebih banyak lagi

Pada akhirnya, kita akan mendapatkan banyak praktik terbaik untuk HTTP/2. Untuk kinerja terbaik, protokol ini akan menyerahkan banyak kendali kembali kepada Anda, yang berarti Anda perlu membuat keputusan untuk setiap proyek. Saya belum membahas dalam artikel ini bagaimana memanfaatkan fitur baru HTTP/2 seperti server push. Teknologi ini memungkinkan Anda untuk memutuskan sumber daya mana yang menjadi prioritas dan memerintahkan server untuk membagikannya sebelum hal-hal yang kurang penting.

Kapan Beralih?

Untuk desainer dan pengembang yang tidak memiliki kendali penuh atas server yang mereka gunakan, keputusan mungkin harus menunggu hingga server yang mereka gunakan diperbarui. Ada perusahaan hosting yang sudah menawarkan HTTP/2 - bahkan untuk hosting bersama - jadi menyebarkan ke server pendukung adalah sesuatu yang dapat Anda rekomendasikan kepada klien jika Anda tahu mereka akan mendapat manfaat.

Setelah situs web Anda dihosting di server yang mendukung HTTP/2, keputusan apakah akan terus mengoptimalkan HTTP/1.1 atau mengoptimalkan HTTP/2 akan ditentukan oleh protokol yang didukung oleh sebagian besar pengguna Anda . Ingatlah bahwa HTTP/2 kompatibel dengan versi sebelumnya — Anda tidak perlu melakukan sesuatu yang spesifik. Keputusan yang perlu Anda buat adalah kapan harus mengoptimalkannya.

Anda harus memutuskan sesuai dengan data analitik Anda. Jika lebih banyak pengunjung yang menggunakan browser yang mendukung HTTP/2 daripada tidak, maka saya sarankan itu adalah titik kritis yang masuk akal untuk mengoptimalkan pengguna tersebut. Banyak dari kita pasti sudah mencapai titik itu. Anda harus menggunakan data dari situs seperti Can I Use bersama dengan data yang dikumpulkan dari analitik Anda sendiri dan pengetahuan tentang kemungkinan audiens Anda. Misalnya, banyak manfaat HTTP/2 akan sangat dirasakan oleh pengguna perangkat seluler yang mendukung HTTP/2. Jika Anda memiliki persentase lalu lintas seluler yang tinggi, ini mungkin merupakan indikasi untuk beralih ke HTTP/2 lebih cepat. Namun, jika Anda memiliki persentase lalu lintas seluler yang tinggi dari pengguna yang menjelajah menggunakan Opera Mini maka itu akan menjadi alasan untuk menunda perpindahan ke HTTP/2 karena saat ini tidak memiliki dukungan sementara memiliki jumlah pengguna yang tinggi di beberapa bagian dari dunia.

Jika Anda sedang membangun situs web baru hari ini, saya sarankan untuk mengingat pengoptimalan HTTP/2 di seluruh pembuatan Anda. Jika saat peluncuran, Anda merasa perlu membuat konsesi untuk HTTP/1.1 karena dukungan browser atau server, banyak hal yang dapat dilakukan dalam proses pembuatan, memungkinkan Anda untuk beralih ke versi HTTP/2 segera setelah Anda merasa waktunya tepat.

Rencana Tindakan HTTP/2 Anda

1. Luncurkan dengan koneksi aman atau pindah ke TLS sekarang Ini harus menjadi prioritas Anda.
2. Persiapkan HTTP/2 dalam proses pembuatan Anda. Situs web apa pun yang Anda buat sekarang kemungkinan besar akan mendapat manfaat dari pengoptimalan HTTP/2 selama masa pakainya. Gunakan tips di atas untuk membuat proses build yang dapat dioptimalkan untuk kedua protokol.
3. Periksa statistik Anda. Dengan membandingkan penggunaan browser di situs web Anda dengan tabel dukungan di Can I Use, Anda dapat melihat persentase pengunjung yang akan mendapat manfaat dari pengoptimalan HTTP/2.
4. Periksa hosting Anda. Saat Anda mencapai titik di mana Anda akan mendapat manfaat dari peralihan, Anda perlu memastikan bahwa server Anda mendukung HTTP/2. Bicaralah dengan penyedia hosting atau administrator server Anda untuk mengetahui rencana migrasi mereka.
5. Luncurkan pengoptimalan HTTP/2. Setelah server Anda mendukung HTTP/2, sisanya terserah Anda. Berhenti menggunakan praktik terbaik lama dan beralih ke yang baru. Ini berarti bahwa pengguna dengan browser yang tidak mendukung HTTP/2 akan mendapatkan pengalaman yang lebih lambat, itulah sebabnya pendorong di balik perubahan Anda harus menjadi titik kritis ketika mayoritas akan mendapat manfaat.

Saat Anda pindah ke HTTP/2, akan menarik untuk membandingkan peningkatan kecepatan dan untuk melihat teknik mana yang membuat perbedaan terbesar di situs web Anda. Saya menantikan untuk melihat informasi dari kasus dunia nyata saat orang memigrasikan situs web. Informasi tersebut akan membantu kami mengembangkan generasi baru praktik terbaik.

Temukan lebih banyak lagi

Semakin banyak informasi tentang HTTP/2 tersedia secara online. Saya telah mencantumkan beberapa sumber di sini untuk referensi Anda, banyak di antaranya yang saya rujuk saat menulis artikel ini.

• “Hypertext Transfer Protocol Version 2 (HTTP/2)” (spesifikasi), Gugus Tugas Teknik Internet Ini adalah untuk orang-orang yang senang membaca spesifikasi atau yang perlu memahami poin-poin yang lebih baik. Untuk semua orang, FAQ HTTP/2 adalah ringkasan yang sangat baik dari fitur-fitur utama.
• http2 menjelaskan , Daniel Sternberg Ebook gratis ini layak dibaca jika Anda ingin menggali detail protokol saat Anda merencanakan strategi Anda.
• Jaringan Browser Berkinerja Tinggi , Ilya Grigorik, O'Reilly Buku ini mencakup praktik terbaik HTTP/1.1 dan HTTP/2. Ini akan berguna bagi siapa saja yang ingin meningkatkan kinerja hari ini dan mempersiapkan masa depan.
• “HTTP/2 Ada di Sini, Mari Optimalkan” (slidedeck) Ilya Grigorik Kumpulan slide yang luar biasa ini memiliki lebih banyak informasi tentang beberapa poin yang dibahas dalam artikel ini.
• Indikator HTTP/2: Firefox dan Chrome Plugin browser ini memberi tahu Anda apakah situs web yang Anda kunjungi dilayani melalui HTTP/2.
• Untuk bacaan lebih lanjut, lihat daftar besar tautan yang dikuratori oleh Rebecca Murphey ini.