Cara Speed Up Website dengan LINK Tag

"Meramalkan" browser adalah masa depan atas surfing internet kecepatan, membawa kita sumber daya yang kita inginkan bahkan sebelum kita tahu kita ingin mereka. browser saat ini sudah membuat beberapa prediksi sekarang dan kemudian untuk mempercepat mengambil dan rendering dokumen. Untuk mengambil ini ke langkah berikutnya, kita melihat tidak lain dari pengembang web.

Pengembang memiliki ide yang cukup baik tentang bagaimana situs mereka berlayar, dan sumber daya yang diminta paling sering dan dengan demikian, mereka dapat memprediksi beberapa operasi masa depan browser harus lakukan untuk situs. Semua yang dibutuhkan sekarang adalah bagi pengembang untuk menemukan cara untuk menyampaikan prediksi ini untuk browser dan menempatkan mereka dengan baik. Di sinilah beberapa khusus "link HTML" datang.

Sebuah Penyegaran di Permintaan HTTP
Sebelum mengambil melihat link ini, saatnya untuk menyegarkan ingatan kita tentang bagaimana file-pengambilan operasi HTTP-diminta khas terjadi. Katakanlah seseorang bernama Joe ingin mengunjungi sebuah website.

Inilah yang terjadi selanjutnya:

Joe jenis alamat manusiawi direcall website di address bar browser dan menekan "Enter".
Setelah menerima alamat itu, browser meminta server DNS (pujian dari ISP) untuk alamat IP dari alamat yang diberikan oleh Joe.
Server DNS mewajibkan.
Sekarang bahwa browser mengetahui alamat IP, ia akan mengirimkan pesan (dalam TCP dialek) ke server website, meminta sambungan.
Jika server masih hidup dan sehat, ia akan mengirimkan balasan mengakui permintaan browser dan browser merespon dan mengakui pesan server. (Catatan: Ya, ini adalah versi yang sangat encer bawah dari jabat tangan TCP antara klien dan server.)
Ketika jabat tangan lebih, sambungan dibuat antara keduanya.
Sekarang, browser yang mengubah gaya dialek untuk HTTP dan meminta server untuk website.
server, mengetahui halaman rumah website mengembalikan hanya itu, yang diterima oleh browser dan ditampilkan ke Joe siapa yang menunggu dengan sangat sabar di depan komputer.
Permintaan HTTP khas melewati semua itu (dan lebih) untuk mengambil dokumen melalui Internet. Jadi jika salah satu proses tersebut dapat jumpstarted bila memungkinkan, kita bisa mengurangi waktu kita harus menunggu untuk pengiriman sumber daya yang kami inginkan.

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

1. DNS Prefetch
Dalam DNS prefetch, resolusi nama domain (alias mendapatkan alamat yang cocok IP dari server DNS) dilakukan sebelumnya.

"Permintaan DNS sangat kecil dalam hal bandwidth, tapi latency bisa sangat tinggi, terutama pada jaringan mobile. Dengan spekulatif prefetching hasil DNS, latency dapat dikurangi secara signifikan pada waktu tertentu, seperti ketika pengguna mengklik link. Dalam beberapa kasus, latency dapat dikurangi dengan kedua. - Mozilla Developer Network "

Katakanlah ada sebuah halaman acuan dalam website dengan banyak link referensi ke situs kembarnya. Ketika pengguna mengunjungi halaman referensi, ada kemungkinan besar bahwa pengguna akan menavigasi ke situs saudara. Jadi, sebuah DNS lookup awal untuk situs adik bisa mengurangi waktu yang dibutuhkan untuk membuka situs (dengan demikian meningkatkan pengalaman pengguna).

Penurunan latency ini melalui DNS prefetching dapat dilakukan dengan menambahkan kode ini ke halaman referensi.

1
<Link rel = "dns-prefetch" href = "// mysistersite.org">
Ketika browser memproses kode ini di halaman referensi, itu akan menambah lookup DNS dari situs saudara antrian tugas, dan ketika ia bebas dari tugas prioritas tinggi lainnya dalam antrian, akan mulai resolusi DNS dari situs kakak.

Jadi ketika pengguna akhirnya mengklik salah satu link yang akan membawa mereka ke situs adik, resolusi DNS dari situs yang mungkin telah selesai, dan browser dapat segera mulai membangun client-server koneksi TCP dengan server situs adik, membuat bahwa beban halaman lebih cepat.

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

2. preconnect
Preconnect adalah langkah lebih lanjut dari DNS prefetch, itu menetapkan koneksi ke server yang mungkin ada permintaan yang dikirim kemudian di masa depan.

"Preconnect adalah alat penting dalam toolbox optimasi Anda ... dapat menghilangkan banyak roundtrips mahal dari jalur permintaan Anda - dalam beberapa kasus mengurangi permintaan latency oleh ratusan bahkan ribuan milidetik. - Lya Grigorik "

W3C berisi kasus penggunaan ideal untuk preconnect: pengalihan. Pengembang menggunakan pengalihan untuk sejumlah alasan.

Dalam hal ini, permintaan berikutnya peramban (situs diarahkan) adalah 100% diprediksi, dan dapat preconnected untuk, untuk mengurangi navigasi latency.

Bayangkan ada sebuah halaman situs perantara yang diarahkan ke "xyzsite", link HTML berikut akan membuat preconnect browser dengan server yang xyzsite, ketika sampai ke halaman perantara.

1
<Link rel = "preconnect" href = "// xyzsite.com">
Per Maret 2016, ini tersedia di Chrome, Opera dan Firefox.

3. Prefetch
Dengan prefetch, untuk sumber daya, browser mulai menerapkan resolusi DNS dari nama domain sumber daya ini, kemudian melakukan koneksi TCP dengan server sumber daya ini, membuat permintaan HTTP, dan akhirnya menjemput dan menyimpan sumber daya PREFETCHED di cache browser.

Jika Anda yakin mana sumber daya yang akan dibutuhkan nanti, itulah sumber daya untuk prefetch terlebih dahulu; di situlah letak menangkap. Prefetching mengambil menebak, dan jika Anda menebak salah, Anda mungkin benar-benar memperlambat bukannya mempercepat situs Anda.

"Teknik ini memiliki potensi untuk mempercepat banyak situs interaktif, tapi tidak akan bekerja di mana-mana. Untuk beberapa situs, itu terlalu sulit untuk menebak apa yang mungkin pengguna lakukan selanjutnya. Bagi yang lain, data mungkin akan basi jika diambil terlalu cepat. Ini juga penting untuk berhati-hati untuk tidak prefetch file terlalu cepat, atau Anda dapat memperlambat halaman pengguna sudah melihat. - Google Developers "

Untuk buku online, galeri, atau portofolio, jika pengguna yang paling mungkin untuk browse ke halaman berikutnya, prefetching sumber daya seperti gambar, dapat mempercepat secara signifikan. Berikut kode untuk melakukan itu.

1
<Link rel = "prefetch" href = "// xyzsite.com/nextimage.jpg">
Prefetch didukung di Chrome, Firefox dan Opera.

4. Tampilan sebelumnya
Hanya untuk halaman HTML dapat prapenguraian dilakukan. Sebuah halaman HTML diprarender diberikan offline, dan dicat ke layar ketika itu benar-benar dibutuhkan oleh pengguna. Rendering biaya pekerjaan dan memori sumber daya komputasi yang lebih tinggi; ditambah, dalam rangka untuk membuat sebuah halaman, browser mungkin membutuhkan sumber daya tambahan (seperti gambar ditambahkan ke halaman) yang akan menyebabkan permintaan lebih konsekuen oleh browser.

Jadi, prerender harus digunakan dengan hati-hati, dan tidak terlalu sering digunakan. Menambahkan kode berikut akan prapenguraian "Tentang" halaman sebelumnya.

1
<Link rel = "prerender" href = "// example.com/about.html">
"The prerender hint dapat digunakan oleh aplikasi untuk menunjukkan target navigasi HTML berikutnya kemungkinan: agen pengguna akan mengambil dan memproses sumber daya ditetapkan sebagai respon HTML. Untuk mengambil konten-jenis lainnya dengan header permintaan yang tepat, atau jika preprocessing HTML tidak diinginkan, aplikasi dapat menggunakan petunjuk prefetch. - W3C "

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

Beberapa Hal Catatan
(1) Tidak ada petunjuk sumber daya tersebut di atas menjamin pelaksanaan dan penyelesaian berbagai tahap permintaan itu dibuat untuk karena ketika browser sudah sibuk memproses permintaan yang dibutuhkan untuk operasi dari halaman saat pengguna berada di, melakukan optimasi ini dapat menghalangi tugas-tugas pengguna saat ini.

Jadi, semuanya antri dan dijalankan ketika browser terasa cukup bebas untuk melakukannya.

petunjuk sumber daya ini tidak perlu harus hadir di halaman bahkan sebelum pemuatan halaman. Mereka dapat ditambahkan kemudian oleh JavaScript, dan petunjuk sumber daya akan melakukan pekerjaan mereka seperti biasa.

(2) W3C menentukan atribut tautan HTML disebut petunjuk probabilitas, pr (dengan nilai 0 ke 1) untuk petunjuk sumber daya tersebut, yang dapat digunakan untuk memberikan probabilitas permintaan yang akan dilakukan di masa depan. Saya belum melihat atribut ini sedang dilaksanakan oleh browser apa pun sekalipun. Sebagai contoh, kode berikut menyatakan bahwa ada kesempatan xyzsite 80% akan diminta di masa depan dan 30% untuk halaman tentang.

1
2
<Link rel = "preconnect" href = "// xyzsite.com" pr = "0.8">
<Link rel = "prerender" href = "// example.com/about.html" pr = "0.3">
Kami juga dapat menambahkan atribut crossorigin opsional untuk sumber daya petunjuk untuk menginformasikan browser credential CORS permintaan terkait ini.