Terdapat banyak cara untuk meningkatkan prestasi web. Salah satunya ialah pramuat kandungan yang akan diperlukan kemudian. Pra-pemprosesan CSS, pra-pemarahan halaman penuh atau resolusi nama domain. Kami melakukan segala-galanya terlebih dahulu, dan kemudian serta-merta memaparkan hasilnya! Sejuk bunyinya.

Apa yang lebih menarik ialah ia dilaksanakan dengan sangat mudah. Lima tag berikan pelayar arahan untuk melakukan tindakan awal:

<link rel="prefetch" href="/ms/style.css" as="style" />
<link rel="preload" href="/ms/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />

Mari kita terangkan secara ringkas apa yang mereka lakukan dan bila untuk menggunakannya.

Lompat ke: Pramuat · awalan · prasambung · dns-prefetch · pracetak

Pramuat

<link rel= "preload"> memberitahu penyemak imbas untuk memuatkan dan cache sumber (seperti skrip atau lembaran gaya) secepat mungkin. Ini berguna apabila sumber diperlukan beberapa saat selepas halaman dimuatkan - dan anda ingin mempercepatkan proses.

Pelayar tidak melakukan apa-apa dengan sumber selepas memuatkan. Skrip tidak dilaksanakan, helaian gaya tidak digunakan. Sumber itu hanya dicache dan segera disediakan atas permintaan.

sintaks

<link rel="preload" href="/ms/style.css" as="style" />

href menunjuk kepada sumber yang anda ingin muat turun.

as boleh menjadi apa sahaja yang boleh dimuat turun dalam penyemak imbas:

style untuk helaian gaya,
script untuk skrip,
font untuk fon,
fetch untuk sumber yang dimuatkan menggunakan fetch() atau XMLHttpRequest,
lihat senarai penuh di MDN.

Adalah penting untuk menentukan atribut as – ini membantu penyemak imbas untuk mengutamakan dan menjadualkan muat turun dengan betul.

Bila hendak digunakan

Gunakan pramuat apabila sumber diperlukan dalam masa terdekat. Sebagai contoh:

Fon bukan standard daripada fail luaran:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
По умолчанию comic-sans.woff2 akan mula memuatkan hanya selepas memuat turun dan menghuraikan index.css. Untuk mengelakkan menunggu terlalu lama, anda boleh memuat turun fon lebih awal menggunakan <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```

Jika anda memisahkan gaya anda mengikut pendekatan CSS kritikal kepada dua bahagian, kritikal (untuk pemaparan segera) dan tidak kritikal:

<style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

Dengan pendekatan ini, gaya tidak kritikal hanya akan mula dimuatkan apabila JavaScript berjalan, yang boleh berlaku beberapa saat selepas pemaparan. Daripada menunggu penggunaan JS <link rel= "preload">untuk mula memuat turun lebih awal:

<style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/ms/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

Jangan terlalu menggunakan pramuat. Jika anda memuatkan semuanya secara berturut-turut, tapak itu tidak akan dipercepatkan secara ajaib; sebaliknya, ia akan menghalang penyemak imbas daripada merancang kerjanya dengan betul.

Jangan dikelirukan dengan prefetching. Jangan guna <link rel= "preload">, jika anda tidak memerlukan sumber sejurus selepas halaman dimuatkan. Jika anda memerlukannya kemudian, contohnya untuk halaman seterusnya, kemudian gunakan <link rel= "prefetch">.

Details

Ini adalah teg yang diperlukan untuk dilaksanakan oleh penyemak imbas (jika ia menyokongnya), tidak seperti semua teg lain berkaitan dengan pramuat. Penyemak imbas mesti memuat turun sumber yang dinyatakan dalam <link rel="preload">. Dalam kes lain ia mungkin mengabaikan pramuat, contohnya jika ia berjalan pada sambungan yang perlahan.

Keutamaan. Penyemak imbas biasanya menetapkan keutamaan yang berbeza kepada sumber yang berbeza (gaya, skrip, fon, dll.) untuk memuatkan sumber yang paling penting terlebih dahulu. Dalam kes ini, penyemak imbas menentukan keutamaan mengikut atribut as. Untuk pelayar Chrome anda boleh lihat jadual keutamaan penuh.

awalan

<link rel= "prefetch"> meminta penyemak imbas untuk memuat turun dan cache sumber (seperti skrip atau helaian gaya) di latar belakang. Pemuatan berlaku pada keutamaan rendah supaya ia tidak mengganggu sumber yang lebih penting. Ini berguna jika sumber diperlukan pada halaman seterusnya dan anda ingin menyimpannya terlebih dahulu.

Di sini juga, penyemak imbas tidak melakukan apa-apa dengan sumber selepas memuatkan. Skrip tidak dilaksanakan, helaian gaya tidak digunakan. Sumber itu hanya dicache dan segera disediakan atas permintaan.

sintaks

<link rel="prefetch" href="/ms/style.css" as="style" />

href menunjuk kepada sumber yang anda ingin muat turun.

as boleh menjadi apa sahaja yang boleh dimuat turun dalam penyemak imbas:

style untuk helaian gaya,
script untuk skrip,
font untuk fon,
fetch untuk sumber yang dimuatkan menggunakan fetch() atau XMLHttpRequest,
lihat senarai penuh di MDN.

Adalah penting untuk menentukan atribut as - ini membantu penyemak imbas memberi keutamaan dan menjadualkan muat turun dengan betul.

Bila hendak digunakan

Untuk memuatkan sumber dari halaman lain, jika anda memerlukan sumber daripada halaman lain, dan anda ingin pramuatnya untuk kemudian mempercepatkan pemaparan halaman tersebut. Sebagai contoh:

Anda mempunyai kedai dalam talian, dan 40% pengguna meninggalkan halaman utama untuk halaman produk. guna <link rel= "prefetch">, memuatkan fail CSS dan JS untuk memaparkan halaman produk.
Anda mempunyai aplikasi satu halaman, dan halaman yang berbeza memuatkan pakej yang berbeza. Apabila pengguna melawat halaman, pakej untuk semua halaman yang dipautkannya boleh dipramuat.

Kemungkinan besar teg ini boleh digunakan dengan selamat dalam apa jua tahap.. Pelayar biasanya menjadualkan prefetch dengan keutamaan paling rendah, jadi ia tidak mengganggu sesiapa pun. Perlu diingat bahawa ia menggunakan trafik pengguna, yang boleh menelan belanja.

Bukan untuk permintaan yang mendesak. Jangan guna <link rel= "prefetch">, apabila sumber diperlukan dalam beberapa saat. Dalam kes ini, gunakan <link rel= "preload">.

Details

Tag pilihan. Pelayar tidak perlu mengikuti arahan ini; ia mungkin mengabaikannya, sebagai contoh, pada sambungan yang perlahan.

Keutamaan dalam Chrome. Dalam Chrome <link rel= "prefetch"> biasanya dilaksanakan dengan keutamaan minimum (lihat jadual keutamaan penuh), iaitu selepas memuatkan semua yang lain.

prasambung

<link rel= "preconnect"> meminta penyemak imbas menyambung ke domain terlebih dahulu apabila anda ingin mempercepatkan persediaan sambungan pada masa hadapan.

Penyemak imbas mesti mewujudkan sambungan jika ia mendapatkan semula sebarang sumber daripada domain pihak ketiga yang baharu. Contohnya, jika ia memuatkan Google Fonts, React fon daripada CDN atau meminta respons JSON daripada pelayan API.

Mewujudkan sambungan baharu biasanya mengambil masa beberapa ratus milisaat. Ia dilakukan sekali, tetapi masih memerlukan masa. Jika anda telah mewujudkan sambungan terlebih dahulu, anda akan menjimatkan masa dan memuat turun sumber daripada domain ini dengan lebih pantas.

sintaks

<link rel= "preconnect" href="https://api.my-app.com" />

href menunjukkan nama domain yang anda ingin tentukan alamat IP. Boleh ditentukan dengan awalan (https://domain.com) atau tanpanya (//domain.com).

Bila hendak digunakan

Gunakan untuk domain yang akan diperlukan tidak lama lagi untuk memuat turun gaya, skrip atau imej yang penting dari sana, tetapi anda belum mengetahui URL sumber lagi. Sebagai contoh:

Aplikasi anda dihoskan pada my-app.com dan membuat permintaan AJAX untuk api.my-app.com: Anda tidak mengetahui pertanyaan khusus terlebih dahulu kerana ia dibuat secara dinamik daripada JS. Di sini adalah agak sesuai untuk menggunakan teg untuk pra-sambung ke domain.
Aplikasi anda dihoskan pada my-app.com dan menggunakan Google Font. Ia dimuat turun dalam dua langkah: pertama, fail CSS dimuat turun dari domain fonts.googleapis.com, maka fail ini meminta fon dengan fonts.gstatic.com. Anda tidak boleh mengetahui dari mana fail fon tertentu fonts.gstatic.com anda perlukan sehingga anda memuatkan fail CSS, jadi kami hanya boleh membuat sambungan awal terlebih dahulu.

Gunakan teg ini untuk mempercepatkan beberapa skrip atau gaya pihak ketiga sedikit kerana sambungan yang telah ditetapkan.

Jangan berlebihan. Mewujudkan dan mengekalkan sambungan adalah operasi yang mahal untuk kedua-dua pelanggan dan pelayan. Gunakan teg ini untuk maksimum 4-6 domain.

Details

Tag pilihan. Penyemak imbas tidak perlu mengikuti arahan ini dan mungkin mengabaikannya, sebagai contoh, jika banyak sambungan telah diwujudkan atau dalam beberapa kes lain.

Apakah yang termasuk dalam proses sambungan?. Untuk menyambung ke setiap tapak, penyemak imbas mesti melakukan perkara berikut:

Resolusi DNS. Cari alamat IP pelayan (216.58.215.78) untuk nama domain yang ditentukan (google.com).
TCP berjabat tangan. Tukar paket (klien → pelayan → klien) untuk memulakan sambungan TCP dengan pelayan.
Jabat tangan TLS (tapak HTTPS sahaja). Dua pusingan pertukaran paket (klien → pelayan → klien → pelayan → klien) untuk memulakan sesi TLS yang selamat.

Nota: HTTP/3 akan menambah baik dan mempercepatkan mekanisme jabat tangan, tetapi ia masih jauh.

dns-prefetch

<link rel= "dns-prefetch"> meminta penyemak imbas untuk melaksanakan resolusi DNS untuk domain terlebih dahulu jika anda akan menyambung kepadanya tidak lama lagi dan ingin mempercepatkan sambungan awal.

Penyemak imbas mesti menentukan alamat IP domain jika ia akan mendapatkan sebarang sumber daripada domain pihak ketiga yang baharu. Contohnya, memuatkan Fon Google, fon React daripada CDN atau meminta respons JSON daripada pelayan API.

Untuk setiap domain baharu, resolusi rekod DNS biasanya mengambil masa kira-kira 20-120 ms. Ini hanya menjejaskan pemuatan sumber pertama daripada domain tertentu, tetapi masih menyebabkan kelewatan. Jika kami melaksanakan resolusi DNS terlebih dahulu, kami akan menjimatkan masa dan memuatkan sumber dengan lebih cepat.

sintaks

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href menunjukkan nama domain yang anda ingin tetapkan alamat IPnya. Boleh ditentukan dengan awalan (https://domain.com) atau tanpanya (//domain.com).

Bila hendak digunakan

Gunakan untuk domain yang akan diperlukan tidak lama lagi untuk memuat turun sumber dari sana yang tidak diketahui oleh penyemak imbas terlebih dahulu. Sebagai contoh:

Aplikasi anda dihoskan pada my-app.com dan membuat permintaan AJAX untuk api.my-app.com: Anda tidak mengetahui pertanyaan khusus terlebih dahulu kerana ia dibuat secara dinamik daripada JS. Di sini adalah agak sesuai untuk menggunakan teg untuk pra-sambung ke domain.
Aplikasi anda dihoskan pada my-app.com, dan menggunakan Google Font. Ia dimuat turun dalam dua langkah: pertama, fail CSS dimuat turun dari domain fonts.googleapis.com, maka fail ini meminta fon dengan fonts.gstatic.com. Anda tidak boleh mengetahui dari mana fail fon tertentu fonts.gstatic.com anda akan memerlukannya sehingga anda memuatkan fail CSS, jadi kami hanya boleh membuat sambungan awal terlebih dahulu.

Gunakan teg ini untuk mempercepatkan beberapa skrip atau gaya pihak ketiga sedikit kerana sambungan yang telah ditetapkan.

Sila ambil perhatian ciri yang serupa dengan <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Biasanya tidak masuk akal untuk menggunakannya bersama-sama untuk satu domain: <link rel= "preconnect"> sudah termasuk <link rel= "dns-prefetch"/> dan banyak lagi. Ini boleh dibenarkan dalam dua kes:

Adakah anda mahu menyokong pelayar lama?. <link rel= "dns-prefetch" /> disokong oleh sejak IE10 dan Safari 5. <link rel= "preconnect"> telah disokong untuk seketika dalam Chrome dan Firefox, tetapi hanya ditambahkan pada Safari dalam 11.1 dan masih tidak disokong dalam IE/Edge. Jika anda perlu menyokong penyemak imbas ini, gunakan <link rel= "dns-prefetch" /> sebagai pilihan sandaran untuk <link rel= "preconnect">.

Anda ingin mempercepatkan sambungan ke lebih daripada 4-6 domain. Tag <link rel= "preconnect"> Ia tidak disyorkan untuk digunakan dengan lebih daripada 4-6 domain, kerana mewujudkan dan mengekalkan sambungan adalah operasi yang mahal. <link rel= "dns-prefetch" /> menggunakan lebih sedikit sumber, jadi gunakannya jika perlu.

Details

Tag pilihan. Penyemak imbas tidak perlu mengikuti arahan ini, jadi ia mungkin tidak melaksanakan resolusi DNS, contohnya, jika terdapat banyak teg sedemikian pada halaman atau dalam beberapa kes lain.

Apakah itu DNS. Setiap pelayan di Internet mempunyai alamat IP yang unik, yang kelihatan seperti 216.58.215.78. Nama tapak biasanya dimasukkan ke dalam bar alamat penyemak imbas (contohnya, google.com), dan pelayan DNS (Domain Name System) memadankannya dengan alamat IP pelayan (216.58.215.78).

Untuk menentukan alamat IP, penyemak imbas mesti menanyakan pelayan DNS. Ia mengambil masa 20−120 ms apabila menyambung ke domain pihak ketiga yang baharu.

DNS dicache, walaupun tidak begitu boleh dipercayai. Sesetengah OS dan penyemak imbas cache pertanyaan DNS: ini akan menjimatkan masa pada pertanyaan berulang, tetapi caching tidak boleh dipercayai. Di Linux ia biasanya tidak berfungsi sama sekali. Chrome mempunyai cache DNS, tetapi ia hanya bertahan selama seminit. Windows menyimpan jawapan DNS selama lima hari.

pracetak

<link rel= "prerender"> meminta penyemak imbas memuat turun URL dan memaparkannya dalam tab yang tidak kelihatan. Apabila pengguna mengklik pada pautan, halaman tersebut hendaklah dipaparkan serta-merta. Ini berguna jika anda pasti pengguna akan melawat halaman tertentu dan ingin mempercepatkan paparannya.

Walaupun (atau kerana) keberkesanan luar biasa teg ini, pada 2019 <link rel= "prerender"> kurang disokong dalam pelayar utama. Lihat butiran lanjut. di bawah.

sintaks

<link rel="prerender" href="https://my-app.com/pricing" />

href menunjuk ke URL yang anda ingin mulakan untuk dipaparkan di latar belakang.

Bila hendak digunakan

Apabila anda benar-benar yakin bahawa pengguna akan pergi ke halaman tertentu. Jika anda mempunyai "terowong" di mana 70% pelawat ke halaman A pergi ke halaman B, maka <link rel= "prerender"> pada halaman A akan membantu untuk memaparkan halaman B dengan cepat.

Jangan berlebihan. Prapemarahan sangat mahal dari segi lebar jalur dan memori. Jangan guna <link rel= "prerender"> untuk lebih daripada satu muka surat.

Details

Tag pilihan. Penyemak imbas tidak perlu mengikuti arahan ini dan mungkin mengabaikannya, contohnya, pada sambungan yang perlahan atau apabila memori kosong tidak mencukupi.

Untuk menjimatkan memori Chrome tidak melakukan pemaparan penuhDan hanya pramuat NoState. Ini bermakna Chrome memuatkan halaman dan semua sumbernya, tetapi tidak memaparkan atau melaksanakan JavaScript.

Firefox dan Safari tidak menyokong teg ini sama sekali. Ini tidak melanggar spesifikasi, kerana pelayar tidak perlu mengikuti arahan ini; tapi tetap sedih. Pepijat pelaksanaan Firefox telah dibuka selama tujuh tahun. Terdapat laporan bahawa Safari tidak menyokong tag ini juga.

Ringkasan

Gunakan:

<link rel= "preload"> - apabila anda memerlukan sumber dalam beberapa saat
<link rel= "prefetch"> - apabila anda memerlukan sumber pada halaman seterusnya
<link rel= "preconnect"> - apabila anda tahu bahawa anda akan memerlukan sumber tidak lama lagi, tetapi anda belum mengetahui URL penuhnya
<link rel= "dns-prefetch"> - begitu juga, apabila anda tahu bahawa anda akan memerlukan sumber tidak lama lagi, tetapi anda belum mengetahui URL penuhnya (untuk pelayar lama)
<link rel= "prerender"> — apabila anda pasti bahawa pengguna akan pergi ke halaman tertentu, dan anda ingin mempercepatkan paparannya

Sumber: www.habr.com

Pramuat, prefetch dan teg lain

Pramuat

sintaks

Bila hendak digunakan

Details

awalan

sintaks

Bila hendak digunakan

Details

prasambung

sintaks

Bila hendak digunakan

Details

dns-prefetch

sintaks

Bila hendak digunakan

Details

pracetak

sintaks

Bila hendak digunakan

Details

Ringkasan

Tambah komen Batal reply