Pengantar HTTP/2 & Kecepatan Halaman

Diterbitkan: 2020-01-03

pengantar

Pada tahun 1991, versi terdokumentasi pertama dari protokol HTTP (HTTP 0.9) request-response diperkenalkan. Sejak itu, web telah berkembang secara drastis dan, 24 tahun kemudian, versi terbaru dari HyperText Transfer Protocol (HTTP/2) dirilis pada tahun 2015, memperkenalkan banyak kemungkinan manfaat untuk kinerja situs bila diterapkan dengan benar.

Artikel ini ditujukan untuk SEO yang ingin menerapkan HTTP/2 sebagai bagian dari inisiatif pengoptimalan kecepatan halaman mereka.

HTTP/2 adalah topik yang sangat kaya yang dapat didiskusikan dengan sangat rinci. Ada banyak informasi online yang membahas HTTP/2 dan manfaatnya lebih luas bagi pengguna akhir dan pengembang, tetapi sebelum Anda tenggelam dalam kekayaan informasi seputar HTTP/2, pastikan Anda mendapatkan informasi yang Anda butuhkan. Ini dimulai dengan mengajukan pertanyaan yang tepat:

  1. Bagaimana ini akan berdampak langsung pada pengoptimalan mesin telusur dan/atau kecepatan halaman?
  2. Bisakah rekomendasi dibuat dari wawasan?
  3. Apakah rekomendasi tersebut dapat dilaksanakan secara realistis?

Pertanyaan-pertanyaan ini membantu Anda untuk bertanya “apakah yang saya lakukan efektif dan berharga?” dan pada akhirnya menempatkan Anda pada posisi yang lebih baik untuk mengevaluasi bagaimana HTTP/2 dapat membantu meningkatkan situs web.

Karena sifat topik yang luas, ada banyak pengetahuan seputar HTTP/2 yang tidak diperlukan saat mencoba memahami pentingnya SEO. Manfaat inti HTTP/2 untuk SEO adalah Kecepatan Halaman.

Untuk membantu Anda menavigasi melalui kekayaan informasi online, berikut adalah pengantar HTTP/2, menjelaskan evolusi dari HTTP 1.1 hingga Spdy yang kompatibel dengan HTTP Google dan akhirnya ke HTTP/2.

Memahami bagaimana web telah berkembang akan membantu menyoroti peningkatan yang telah dilakukan sebagai konsekuensi dari penambahan protokol HTTP/2.

Bagaimana Google mengevaluasi Kecepatan Halaman?

Untuk melihat bagaimana Google mengevaluasi Kecepatan Laman, lihat Laporan Pengalaman Pengguna Chrome . Laporan ini memberikan metrik pengalaman pengguna tentang bagaimana pengguna mengalami tujuan populer di seluruh web. Ini didukung menggunakan metrik keterlibatan pengguna utama ( First Paint, First Contentful Paint, First Meaningful Paint, Time to Interactive) dan selanjutnya didukung melalui alat umum seperti Wawasan Kecepatan Laman, Proyek Kueri Besar Google Publik, Mercusuar, dan Uji Laman Web. Memanfaatkan metrik dan alat ini dapat membantu memungkinkan peningkatan seputar Kecepatan Halaman.

Pengantar HTTP/2

HTTP 1.1

Pada tahun 2015, HTTP 1.1 telah menjadi usang. Lewatlah sudah hari-hari di mana halaman / situs web dibangun / mengandalkan HTML dasar, CSS, dan JavaScript, dan banyak sumber daya dan kerangka kerja yang berbeda. Era pra-2015 didasarkan pada gagasan bahwa Anda terbatas pada satu permintaan per koneksi TCP. Hal ini menyebabkan situasi di mana klien web memiliki banyak sumber daya yang mengantri untuk diunduh, menyebabkan kemacetan jaringan dan waktu pemuatan halaman yang lambat.

HTTP/2 dirancang untuk menargetkan tiga bidang peningkatan utama untuk mengatasi masalah yang dibahas di atas:

  • Kesederhanaan
  • Performa Tinggi
  • Kekokohan

Manfaat SEO untuk HTTP/2

Kecepatan Halaman mungkin merupakan alasan utama SEO akan mempertimbangkan untuk menerapkan HTTP/2 di situs web mereka sendiri atau klien mereka. Kecepatan/Kinerja Halaman adalah sekumpulan metrik yang telah menjadi faktor peringkat sejak 2010 untuk kueri Desktop. Karena meningkatnya penggunaan perangkat seluler, pada Juli 2018 Google secara resmi mengumumkan bahwa Kecepatan Halaman akan menjadi faktor peringkat untuk Seluler.

HTTP/2 menyediakan 3 fungsi utama yang dapat digunakan saat mengoptimalkan situs untuk Kecepatan Halaman:

  1. Multiplexing
  2. Server Dorong
  3. Prioritas Aliran

Multiplexing

Multiplexing memungkinkan klien web untuk memasukkan beberapa permintaan dalam satu koneksi TCP tunggal, menghasilkan beban server yang lebih rendah dan mengurangi kemacetan jaringan.

Klien web modern (Chrome, Firefox, Safari, dan Opera) yang menggunakan protokol HTTP 1/1.1 yang lebih lama memiliki batas default pada jumlah koneksi TCP simultan per nama host. Oleh karena itu, klien web yang menggunakan HTTP 1/1.1 dapat dengan mudah mengalami kesulitan dengan kongesti TCP. Dengan klien web modern, masalah ini diselesaikan menggunakan multiplexing, yang dapat memberikan beberapa peningkatan paling signifikan pada kecepatan halaman.

Diperlihatkan di bawah ini adalah manfaat Multiplexing menggunakan perbandingan HTTP/1.1 dan HTTP/2, yang menunjukkan perilaku umum ketika multiplexing HTTP/2 diaktifkan dan tidak diaktifkan.

( WebpageTest, HTTP/1.1, Tanpa Multiplexing Ditunjukkan )

( WebpageTest, HTTP/2, Multiplexing Ditunjukkan )

Pada gambar di atas , air terjun berbasis kinerja digunakan untuk menunjukkan pemuatan sumber daya antara pengguna (yang meminta sumber daya) dan server (yang merespons sumber daya mana) dari halaman web. Biasanya, sumber daya halaman mencakup HTML, JavaScript, CSS, dan gambar. Air terjun berbasis kinerja menunjukkan titik yang tepat tentang kapan sumber daya tertentu dipanggil, diunduh, dan dirender dalam klien yang sangat penting dalam menemukan, mengevaluasi, dan menganalisis masalah kecepatan halaman di situs. Seperti yang ditunjukkan oleh gambar di atas “HTTP/2”, semua sumber daya mulai diunduh secara bersamaan tanpa sumber daya apa pun mulai dimuat pada titik yang berbeda. Karena HTTP/2 menggunakan multiplexing dan tidak lagi bergantung pada pengiriman hanya 1 permintaan melalui satu koneksi TCP, banyak sumber daya dapat diunduh pada saat yang sama seperti di atas. Sebaliknya, seperti yang ditunjukkan oleh gambar “HTTP/1.1”, sumber daya tidak diunduh secara bersamaan karena tidak dapat memanfaatkan fungsionalitas multiplexing. Peramban modern rata-rata di bawah HTTP/1.1 dapat secara bersamaan memiliki 6 koneksi, tetapi manfaat untuk mengimplementasikan HTTP/2 adalah bahwa jabat tangan TCP tidak diperlukan untuk setiap permintaan sedangkan tidak peduli berapa banyak koneksi yang dapat dijalankan secara bersamaan dengan HTTP/1.1 awal proses koneksi harus diselesaikan setiap saat. Oleh karena itu mereka mulai mengunduh pada titik yang berbeda sehingga menyebabkan pemuatan halaman yang lebih lama bagi pengguna.

( Diagram HTTP/1.1 Upwork vs HTTP/2 )

Perayap pencarian seperti Google dan Bing tidak secara langsung mendapat manfaat dari implementasi HTTP/2. Seperti dijelaskan di atas, manfaat utama dari pengoptimalan ini berpotensi untuk Kecepatan Halaman. Oleh karena itu, meskipun penerapan HTTP/2 mungkin tidak memengaruhi perayap penelusuran secara langsung, hal itu dapat memengaruhi Kecepatan Laman yang merupakan faktor peringkat langsung untuk kueri Google untuk Desktop sejak 2010 dan kueri Seluler sejak Juli 2018. Akibatnya, situs web tidak dapat ditayangkan. pengalaman yang lambat bagi pengguna, karena Google dapat menekan kinerja dengan memengaruhi peringkat, atau baru-baru ini, menandai kepada pengguna bahwa situs Anda mungkin lambat.

Server Dorong

Server Push memungkinkan server tertentu atau jaringan tepi untuk mengirim sumber daya ke klien web ketika mereka belum diminta oleh klien. Untuk memahami bagaimana server push berfungsi, pertama-tama penting untuk memahami pola permintaan-tanggapan yang diikuti situs web. Seorang pengguna meminta halaman dari situs web, dan server merespons dengan konten/sumber daya yang diminta.

Secara hipotetis, pikirkan tentang situs yang semua gayanya ditentukan dalam lembar gaya eksternal yang disebut styles.css. Ketika pengguna meminta kerangka HTML untuk halaman (misalnya dalam kasus ini index.html) server push dapat "mendorong" CSS ke pengguna tepat setelah mulai mengirim respons ke index.html.

( Majalah S mashing, Server Push )

Sebelum memahami bagaimana Server Push dapat membantu meningkatkan Kecepatan Halaman, penting untuk memahami cara kerja browser dengan berbagai sumber daya seperti gambar, CSS, dan JavaScript agar muncul di dalam browser Anda. Soalnya, browser mengirimkan instruksi tentang cara mengunduh gambar, CSS, dan sumber daya JavaScript. Saat pertama kali mengunjungi situs web Anda biasanya membuat permintaan GET, yaitu file .html. Setelah file .html ini diterima, browser memindai untuk memahaminya dan kemudian dapat membuat permintaan GET tambahan tergantung pada apa yang terkandung dalam file HTML.

Bagaimana Server Push membantu meningkatkan Kecepatan Halaman?

Melalui penggunaan Server Push, jumlah permintaan GET yang diperlukan dari browser (perjalanan pulang pergi) berkurang dan penundaan rendering yang menyebabkan peningkatan waktu pemuatan halaman dapat dihindari. Ini secara dramatis dapat membantu meningkatkan waktu rendering untuk klien web, yang membantu halaman web muncul lebih cepat bagi pengguna sehingga memberikan mereka pengalaman yang jauh lebih baik.

Meskipun Server Push tidak secara langsung memengaruhi cara Googlebot merayapi situs Anda, atau bahkan perayap lainnya, manfaat SEO diperoleh melalui peningkatan pada faktor yang berpusat pada pengguna seperti First Paint dan First Meaningful Content.

Memanfaatkan Pengujian Halaman Web, Mercusuar, Wawasan Kecepatan Halaman, dan Laporan Pengalaman Pengguna Chrome, Anda dapat menentukan bagaimana kinerja situs/halaman dibandingkan dengan pesaing dalam industri yang sama. Di bawah ini adalah dua gambar yang menunjukkan implementasi tanpa (Gambar 1) dan dengan Server Push (Gambar 2).

(WebpageTest, Tanpa Server Push)

(WebpageTest, HTTP/1.1, Dengan Server Push)

Dengan server push, server dapat dikonfigurasi sehingga selalu mengirimkan komponen halaman tambahan (seperti file CSS, JavaScript, dan gambar) jika diminta untuk mengirim melalui file .html yang berisi komponen tersebut.

Pada air terjun di atas kita dapat melihat bahwa push.php menggunakan empat file CSS.

Tanpa server push, browser perlu menerima file push.php, mengurai HTML dan kemudian membuat permintaan khusus untuk setiap file CSS tambahan. Hanya setelah menerima semua file CSS, ia dapat mulai menggunakannya dalam proses rendering.

Saat server push diaktifkan, permintaan push.php secara otomatis memicu server untuk mengirim empat file CSS. Browser menerimanya dan dapat mulai menggunakannya dalam proses rendering jauh lebih awal. Ini berarti browser dapat mulai merender konten halaman lebih cepat, yang menghasilkan metrik kecepatan halaman yang lebih baik.

Prioritas HTTP/2

Prioritas HTTP/2 memberikan kendali atas urutan pemuatan sumber daya, kembali ke pemilik situs. Dilakukan dengan benar, Prioritas menguntungkan pengalaman pengguna dan kecepatan Halaman/Situs dengan memberikan sumber daya halaman dalam urutan yang dioptimalkan, sehingga menciptakan pengalaman pengguna yang "cepat".

Jika kita melihat HTTP/2 pendahulunya HTTP/1.1, klien web mengontrol urutan kapan sumber daya akan dimuat. Seperti dibahas di atas, ini disebabkan oleh fakta bahwa setiap koneksi TCP hanya dapat mendukung satu sumber daya pada satu waktu. Terserah browser untuk menjadwalkan permintaan dengan memutuskan sumber daya apa yang akan dipilih dan berapa banyak koneksi yang akan dibuka secara paralel.

Sebelum masuk ke cara melakukannya, penting untuk memahami mengapa kita ingin menggunakan prioritas untuk sumber daya kita.

Jika kita memiliki gambar di bagian atas halaman dan gambar di bagian bawah halaman, secara logis kita ingin memastikan gambar di bagian atas dimuat sebelum gambar di bagian bawah. Konsep ini membantu menunjukkan pentingnya dan dampak dari Prioritas HTTP/2. Prioritas HTTP/2 memungkinkan kita untuk menentukan sumber daya mana yang harus dikirimkan terlebih dahulu dan dimuat sebelum yang lain (apakah itu JavaScript, CSS, atau gambar), sehingga memastikan waktu pemuatan halaman tercepat.

Sementara browser sekarang dapat meminta beberapa sumber daya secara bersamaan melalui satu koneksi TCP menggunakan multiplexing, sekarang browser juga dapat menentukan informasi prioritas dengan setiap permintaan untuk membantu menentukan kapan/bagaimana sumber daya harus dikirimkan. Jika server dan browser mendukung prioritas HTTP/2, browser harus menetapkan aturan untuk memprioritaskan penggunaan bandwidth penuh tanpa memiliki sumber daya yang bersaing satu sama lain. Untuk lebih memahami bagaimana proses prioritas berfungsi, penting untuk membahas tiga parameter yang penting untuk Prioritas HTTP/2:

Stream: Ini adalah aliran dua arah byte dalam koneksi mapan yang dapat membawa satu atau pesan.

Aliran Induk: Ini adalah aliran yang sumber dayanya bergantung pada

Aliran Anak: Ini adalah aliran dependen dari aliran induk. Mereka berbagi orang tua yang sama dan dengan demikian dikenal sebagai aliran anak

Bobot: Ini adalah angka yang dialokasikan antara 1 dan 256 yang mengidentifikasi berapa banyak bandwidth yang dialokasikan untuk streaming jika beberapa aliran berbagi koneksi. Bandwidth dialokasikan relatif terhadap bobot semua aliran aktif lainnya.

Bit Eksklusif: Ini adalah tanda yang menunjukkan bahwa aliran harus diunduh tanpa berbagi bandwidth dengan aliran lain.

Bingkai Header: Ini adalah identifikasi untuk aliran yang menjadi bingkainya

Lapisan Pembingkaian Biner: Ini adalah bagaimana pesan HTTP dienkapsulasi dan ditransfer antara klien dan server

Contoh di bawah ini menunjukkan contoh di atas:

( Prioritas Aliran HTTP/2 Google Developers )

Untuk melakukan Prioritas HTTP/2, Anda perlu menambahkan informasi prioritas dalam Frame Header yang terletak di dalam Layer Framing Binary HTTP/2 yang baru. Aliran induk dan ketergantungan/non-ketergantungan pada aliran anak lain akan menentukan prioritas/pembobotan dan dengan demikian pengiriman sumber daya ke klien web.

Meskipun prioritas HTTP/2 sekarang didukung di berbagai platform, banyak CDN dan penyedia hosting tidak mendukung prioritas HTTP/2. Oleh karena itu, penting untuk memastikan bahwa Anda menggunakan penyedia CDN/hosting yang mendukung prioritas HTTP/2 jika Anda ingin menggunakan teknik pengoptimalan ini. Di bawah ini adalah tabel yang menjelaskan CDN/hosting/server mana yang dapat dan tidak dapat mendukung Prioritas HTTP/2.

Prioritas HTTP/2 - Kompatibilitas Server/Hosting/CDN Umum

Perbandingan ini benar pada 01/02/2020 , tetapi ada baiknya memeriksa apakah penyedia layanan potensial telah meningkatkan kompatibilitasnya sebelum membuat keputusan tentang mana yang harus dipilih.

Penting juga untuk melihat browser tertentu secara kritis karena sayangnya tidak semua browser mendukung prioritas HTTP/2 dan memprioritaskan secara berbeda karena menjadi klien web yang berbeda. Di bawah ini adalah tabel yang menjelaskan klien web mana yang dapat mendukung Prioritas HTTP/2.

Kompatibilitas Klien Web Prioritas HTTP/2

Prioritas HTTP/2 dapat secara signifikan meningkatkan persepsi pengguna tentang Kecepatan Laman/Situs dan akan berdampak positif pada data yang terakumulasi dalam Laporan Pengalaman Pengguna Chrome. Meskipun pengoptimalan ini tidak berdampak pada perayap penelusuran seperti Googlebot, alat seperti Lighthouse dan Wawasan Kecepatan Laman akan membantu Anda menilai dampak Prioritas HTTP/2 pada kinerja kecepatan laman dari sudut pandang pengguna.

Dengan mengonfigurasi bobot streaming dengan benar dengan server dan klien menggunakan CDN/host yang didukung HTTP/2, Anda akan dapat meningkatkan metrik kecepatan halaman secara drastis untuk klien Anda.

Apa prasyarat untuk HTTP/2

Sebelum Anda dapat memanfaatkan manfaat kecepatan HTTP/2, pastikan Anda dapat menggunakannya. Ada beberapa prasyarat yang perlu diperhatikan:

  1. Penting untuk memastikan bahwa HTTPS diaktifkan.
  2. Manfaatkan sertifikat TLS dari otoritas yang diautentikasi dan aktifkan serta instal sertifikat.
  3. Pastikan perangkat lunak Server Web Anda seperti Nginx, Apache, dan IIS mendukung HTTP/2. Daftar lengkap yang diautentikasi untuk dukungan dapat ditemukan di http://ayi.ma/browsershttp2 yang akan menunjukkan dukungan browser untuk HTTP/2. Jika Anda mencari dukungan HTTP/2 untuk CDN's/Hosting, silakan merujuk ke http://ayi.ma/serverhosting .

Kesalahan Umum / Hal-Hal yang Harus Diubah dengan Pengenalan HTTP/2

Karena keterbatasan protokol HTTP 1.0 dan HTTP 1.1 sebelumnya, pengembang dan SEO telah berusaha untuk menemukan cara mengatasi banyak masalah yang disajikan keterbatasan ini untuk kinerja dan keamanan kecepatan halaman.

Akhirnya, mereka dapat menemukan "peretasan" untuk menghindari beberapa batasan ini, tetapi banyak dari metode ini menyebabkan pengembang bekerja lebih keras. Apa sajakah dari peretasan ini yang mungkin Anda tanyakan? Berikut adalah beberapa peretasan paling umum yang akan Anda lihat di situs yang dapat diselesaikan melalui penerapan HTTP/2 yang benar.

Hindari Pembagian Domain

Anehnya, banyak situs masih menggunakan peretasan ini meskipun mereka menerapkan HTTP/2 dengan benar. Saat HTTP/2 diaktifkan, penting untuk menghindari penggunaan domain sharding. Domain Sharding adalah teknik membagi sumber daya di nama host yang berbeda, sehingga memungkinkan lebih banyak sumber daya untuk dilayani secara bersamaan.

Berkat protokol HTTP/2 yang diperbarui, Domain Sharding tidak lagi diperlukan dan pada kenyataannya, menyebabkan lebih banyak masalah daripada penyelesaiannya. Jika HTTP/2 dikonfigurasi dan diaktifkan dengan benar untuk situs Anda dan Anda juga menggunakan Domain Sharding, Anda sebenarnya menetralkan beberapa manfaat HTTP/2 karena browser tidak akan dapat mengambil manfaat dari multiplexing dan unduhan di beberapa nama host.

Selain itu, melalui Domain Sharding, Anda sebenarnya melanggar Prioritas Aliran dan sumber daya Anda tidak akan dapat dimuat untuk mendapatkan hasil maksimal dari Kecepatan Halaman.

Gunakan Server Push dengan Benar

Server Push memiliki beberapa kelemahan yang harus Anda waspadai. Server Push sebenarnya dapat digunakan secara berlebihan dan Anda harus selektif dalam memilih kapan akan menggunakannya. Anda tidak perlu memaksakan terlalu banyak sumber daya karena ini dapat menyebabkan klien web tidak hanya mengunduh HTML tetapi semua yang "didorong" dengannya. Ini berarti bahwa halaman mungkin perlu waktu lebih lama untuk dimuat dan dirender (meningkatkan metrik yang berpusat pada pengguna yang difokuskan oleh Google seperti Time to Interactive).

Jebakan umum kedua untuk server push adalah mencari cara untuk tidak mendorong sumber daya yang sudah dimiliki klien web. Hal ini dapat dikendalikan melalui berbagai metode. Salah satu metodenya adalah memilih untuk tidak mendorong sumber daya ke pengguna yang kembali dan oleh karena itu mengizinkan pengguna yang kembali untuk menggunakan aset yang di-cache. Ini adalah implementasi yang paling mudah. Ini hanya dapat dilakukan dengan memeriksa header cache untuk sumber daya memastikan bahwa header tidak tumpang tindih dengan implementasi server push.

Tes Kehidupan Nyata di bawah HTTP/2

Pengetahuan teoretis selalu penting untuk meletakkan dasar untuk memahami HTTP/2 dan manfaatnya. Setelah konsep dipahami dan dipahami, penting untuk menguji teori-teori ini untuk mengukur dampak yang dapat dibuat HTTP/2 terhadap Kecepatan Laman.

Bagian 2 dari seri Kecepatan Halaman HTTP/2 Dalam Kehidupan Nyata - menggunakan Pengujian & Analisis Situs Web akan membahas manfaat sebenarnya dari HTTP/2 dalam hal Kecepatan Halaman dan nilai untuk SEO, jadi jangan lewatkan!

Bagaimana dengan HTTP/3?

Meskipun HTTP/3 menunjukkan potensi yang jelas sebagai protokol penerus HTTP/2, itu tidak dan tidak seharusnya menandakan akhir dari HTTP/2 untuk SEO di seluruh web. Seperti halnya setiap perkembangan besar baru ke web di seluruh dunia, itu akan melalui fase peluncuran normal dan mungkin perlu waktu bagi situs untuk mengadopsi protokol baru dan sebelum menjadi standar de-facto dalam industri SEO. Implementasi HTTP/2 masih merupakan keuntungan yang bermanfaat dan sederhana yang bila diterapkan dengan benar dapat membantu meningkatkan kinerja situs Anda.