Cara Mempercepat Situs Web dengan Tag

"Meramalkan"Peramban adalah masa depan berselancar Internet kecepatan tinggi, membawakan kami sumber daya yang kami inginkan bahkan sebelum kita tahu kita menginginkannya. Browser hari ini sudah membuat beberapa prediksi sekarang dan kemudian untuk mempercepat pengambilan dan rendering dokumen. Untuk mengambil ini ke langkah berikutnya, kami tidak lain mencari pengembang web.

Pengembang memiliki ide yang bagus dari bagaimana situs web mereka dinavigasi, dan yang mana sumber daya paling sering diminta dan dengan demikian, mereka dapat memprediksi beberapa browser operasi masa depan yang harus dilakukan untuk situs. Yang dibutuhkan sekarang adalah agar pengembang menemukan cara untuk melakukannya menyampaikan ini prediksi ke browser dan memanfaatkannya dengan baik. Di sinilah beberapa "tautan HTML" khusus masuk.

Penyegaran pada Permintaan HTTP

Sebelum melihat tautan-tautan ini, saatnya menyegarkan memori kita tentang bagaimana operasi pengambilan file yang diminta HTTP biasa terjadi. Katakanlah seseorang bernama Joe ingin mengunjungi situs web.

Inilah yang terjadi selanjutnya:

1. Joe mengetik alamat situs web yang dapat diingat secara manusiawi di bilah alamat browser dan menekan "Enter".
2. Setelah menerima alamat itu, browser meminta server DNS (pujian ISP) untuk alamat IP dari alamat yang diberikan oleh Joe.
3. Server DNS wajib.
4. Sekarang setelah browser mengetahui alamat IP, ia mengirim pesan (dalam dialek TCP) ke server situs web, meminta koneksi.
5. Jika server hidup dan baik, ia mengirim balasan yang mengakui permintaan browser dan browser merespons dan mengakui pesan server. (Catatan: Ya, ini adalah versi yang sangat dipermudah dari jabat tangan TCP antara klien dan server.)
6. Ketika jabat tangan selesai, koneksi dibuat antara keduanya.
7. Sekarang, browser mengubah gaya dialeknya menjadi HTTP dan meminta server untuk situs webnya.
8. Server, mengetahui halaman beranda situs web mengembalikan hal itu, yang diterima oleh browser dan ditunjukkan kepada Joe yang menunggu dengan sangat sabar di depan komputer.

Permintaan HTTP tipikal berjalan semua itu (dan lebih banyak lagi) untuk mengambil dokumen melalui Internet. Jadi kalau ada dari proses ini dapat dimulai jika memungkinkan, kita dapat kurangi waktu kita harus menunggu pengiriman sumber daya yang kita inginkan.

Hubungan HTML Link

W3C menentukan 4 hubungan tautan HTML (rel untuk hubungan) bernama dns-prefetch, preconnect, prefetch, dan prerender. Bersama-sama mereka dipanggil (oleh W3C) sebagai "Petunjuk Sumber Daya". Sekarang, kita akan lihat apa yang bisa mereka lakukan dan di mana mereka dapat digunakan.

1. Prefetch DNS

Di DNS prefetch, the resolusi nama domain (alias mendapatkan alamat IP yang cocok dari server DNS) dilakukan sebelumnya.

Katakanlah ada halaman referensi di situs web dengan banyak tautan referensi ke situs saudaranya. Saat pengguna mengunjungi halaman referensi, ada kemungkinan besar bahwa pengguna akan menavigasi ke situs saudara. Jadi, sebuah pencarian DNS awal untuk situs saudara dapat mengurangi waktu yang diperlukan untuk membuka situs (dengan demikian meningkatkan pengalaman pengguna).

Ini pengurangan latensi melalui prefetching DNS dapat dilakukan dengan menambahkan kode ini ke halaman referensi.

Ketika browser memproses kode ini di halaman referensi, itu akan menambahkan pencarian DNS situs saudara ke antrian tugasnya, dan ketika bebas dari tugas prioritas tinggi lainnya dalam antrian, itu akan memulai resolusi DNS dari situs saudara perempuan.

Jadi ketika pengguna akhirnya mengklik salah satu tautan yang membawa mereka ke situs saudara, resolusi DNS dari situs itu mungkin sudah selesai, dan browser segera dapat mulai membuat koneksi TCP klien-server dengan situs saudara server, membuat halaman memuat lebih cepat.

Fitur ini tersedia di hampir semua browser modern kecuali Safari pada Maret 2016.

2. Pra-koneksi

Preconnect adalah selangkah lebih jauh dari prefetch DNS, itu membuat koneksi ke server yang mungkin ada permintaan dikirim kemudian di masa depan.

W3C mencantumkan kasus penggunaan yang ideal untuk pra-koneksi: arahan ulang. Pengembang menggunakan arahan ulang karena sejumlah alasan.

Dalam hal ini, permintaan browser berikutnya (situs yang dialihkan) adalah 100% dapat diprediksi, dan dapat akan terhubung ke, untuk mengurangi latensi navigasi.

Bayangkan ada halaman situs perantara yang dialihkan ke "xyzsite", tautan HTML berikut ini akan membuat browser terhubung dengan server xyzsite, ketika sampai ke halaman perantara itu.

Pada Maret 2016, ini tersedia di Chrome, Opera dan Firefox.

3. Ambil sebelumnya

Dengan prefetch, untuk sumber daya, browser mulai menerapkan resolusi DNS dari nama domain sumber daya itu, kemudian melakukan koneksi TCP dengan server sumber daya, membuat permintaan HTTP, dan akhirnya mengambil dan menyimpan sumber daya yang diambil sebelumnya dalam cache browser.

Jika Anda yakin akan sumber daya mana yang akan dibutuhkan nanti, itulah sumber daya yang harus ditentukan sebelumnya; di situlah letak tangkapan. Pengambilan awal membutuhkan perkiraan, dan jika Anda salah menebak, Anda mungkin malah memperlambat alih-alih mempercepat situs Anda.

Untuk buku online, galeri, atau portofolio, jika pengguna kemungkinan besar akan mencari ke halaman berikutnya, mengambil sumber daya seperti gambar, dapat mempercepat segalanya secara signifikan. Inilah kode untuk melakukan itu.

Prefetch didukung di Chrome, Firefox dan Opera.

4. Prerender

Hanya untuk halaman HTML prapengaturan dapat dilakukan. Halaman HTML prerendered adalah dirender secara offline, dan dicat ke layar saat itu sebenarnya dibutuhkan oleh pengguna. Rendering biaya kerja komputasi dan sumber daya memori yang lebih tinggi; ditambah, untuk merender halaman, browser mungkin memerlukan sumber daya tambahan (seperti gambar yang ditambahkan ke halaman) yang akan mengarah ke permintaan yang lebih konsekuen oleh browser.

Begitu, prerender harus digunakan dengan hati-hati, dan tidak digunakan secara berlebihan. Menambahkan kode berikut akan membuat halaman "Tentang" sebelumnya.

Prerender sudah tersedia di Chrome, IE dan Opera pada Maret 2016.

Beberapa Hal yang Perlu Dicatat

(1) Tidak ada petunjuk sumber daya yang disebutkan di atas yang menjamin eksekusi dan penyelesaian berbagai tahap permintaan yang dibuat karena ketika browser sudah sibuk memproses permintaan yang diperlukan untuk operasi halaman saat ini pengguna berada, melakukan optimasi dapat menghambat tugas pengguna saat ini.

Jadi semuanya ada antri dan dieksekusi ketika browser merasa cukup bebas untuk melakukannya.

Petunjuk sumber daya ini tidak harus ada di halaman bahkan sebelum memuat halaman. Mereka bisa menjadi ditambahkan kemudian oleh JavaScript, dan petunjuk sumber daya akan melakukan pekerjaan mereka seperti biasa.

(2) W3C menentukan a Atribut tautan HTML bernama probabilitas petunjuk, pr (dengan nilai 0 hingga 1) untuk petunjuk sumber daya ini, yang dapat digunakan untuk memberikan probabilitas permintaan yang akan dibuat di masa depan. Saya belum melihat atribut ini diimplementasikan oleh browser apa pun. Sebagai contoh, kode berikut menyatakan bahwa ada 80% kemungkinan xyzsite akan diminta di masa depan dan 30% untuk halaman tentang.

Kami juga dapat menambahkan atribut crossorigin opsional ke petunjuk sumber daya untuk memberi tahu browser tentang kredensial CORS permintaan yang ditautkan.