ProHoster > blog > administrasi > Pramuat, ambil dulu, dan tag lainnya

Pramuat, ambil dulu, dan tag lainnya

Ada banyak cara untuk meningkatkan kinerja web. Salah satunya adalah melakukan preload konten yang akan dibutuhkan nantinya. Pra-pemrosesan CSS, pra-render halaman penuh, atau resolusi nama domain. Kami melakukan semuanya terlebih dahulu, dan kemudian langsung menampilkan hasilnya! Terdengar keren.

Yang lebih keren lagi adalah penerapannya sangat sederhana. Lima tag berikan perintah kepada browser untuk melakukan tindakan awal:

<link rel="prefetch" href="/id/style.css" as="style" />
<link rel="preload" href="/id/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 jelaskan secara singkat apa fungsinya dan kapan menggunakannya.

Π΅Ρ€Π΅ΠΉΡ‚ΠΈ : preload Β· ambil dulu Β· prakoneksi Β· dns-prefetch Β· prarender

preload

<link rel= "preload"> memberitahu browser untuk memuat dan menyimpan sumber daya (seperti skrip atau stylesheet) dalam cache sesegera mungkin. Ini berguna ketika sumber daya dibutuhkan beberapa detik setelah halaman dimuat - dan Anda ingin mempercepat prosesnya.

Browser tidak melakukan apa pun dengan sumber daya setelah memuat. Skrip tidak dijalankan, style sheet tidak diterapkan. Sumber daya hanya di-cache dan segera tersedia berdasarkan permintaan.

sintaksis

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

href menunjuk ke sumber daya yang ingin Anda unduh.

as bisa apa saja yang bisa didownload di browser:

  • style untuk lembar gaya,
  • script untuk skrip,
  • font untuk font,
  • fetch untuk sumber daya yang dimuat menggunakan fetch() ΠΈΠ»ΠΈ XMLHttpRequest,
  • lihat daftar lengkap di MDN.

Penting untuk menentukan atributnya as – ini membantu browser untuk memprioritaskan dan menjadwalkan pengunduhan dengan benar.

Kapan harus digunakan

Gunakan pramuat ketika sumber daya dibutuhkan dalam waktu dekat. Misalnya:

  • Font non-standar dari file eksternal: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ comic-sans.woff2 akan mulai memuat hanya setelah mengunduh dan menguraikan index.css. Agar tidak menunggu lama, Anda bisa mendownload font tadi menggunakan <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Jika Anda memisahkan gaya Anda menurut pendekatannya CSS penting menjadi dua bagian, kritis (untuk rendering segera) dan non-kritis: 
    <style>
/* Inlined critical styles */
</style>

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

    Dengan pendekatan ini, gaya non-kritis hanya akan mulai dimuat saat JavaScript dijalankan, yang dapat terjadi beberapa detik setelah rendering. Daripada menunggu gunakan JS <link rel= "preload">untuk mulai mengunduh lebih awal:

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

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

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

Jangan terlalu sering menggunakan pramuat. Jika Anda memuat semuanya secara berurutan, situs tidak akan bertambah cepat secara ajaib; sebaliknya, ini akan menghalangi browser untuk merencanakan pekerjaannya dengan benar.

Jangan bingung dengan pengambilan awal. Jangan gunakan <link rel= "preload">, jika Anda tidak memerlukan sumber daya segera setelah halaman dimuat. Jika nanti Anda membutuhkannya, misalnya untuk halaman selanjutnya, maka gunakanlah <link rel= "prefetch">.

Detail

Ini adalah tag yang diperlukan untuk dieksekusi oleh browser (jika mendukungnya), tidak seperti semua tag lainnya terkait dengan pramuat. Browser harus mengunduh sumber daya yang ditentukan <link rel="preload">. Dalam kasus lain, ini mungkin mengabaikan pramuat, misalnya jika berjalan pada koneksi yang lambat.

Prioritas. Browser biasanya menetapkan prioritas berbeda untuk sumber daya yang berbeda (gaya, skrip, font, dll.) untuk memuat sumber daya terpenting terlebih dahulu. Dalam hal ini, browser menentukan prioritas berdasarkan atribut as. Untuk browser Chrome Anda dapat melihatnya tabel prioritas penuh.

Pramuat, ambil dulu, dan tag lainnya

ambil dulu

<link rel= "prefetch"> meminta browser untuk mengunduh dan menyimpan sumber daya (seperti skrip atau style sheet) di latar belakang. Pemuatan terjadi pada prioritas rendah sehingga tidak mengganggu sumber daya yang lebih penting. Ini berguna jika sumber daya diperlukan di halaman berikutnya dan Anda ingin menyimpannya dalam cache terlebih dahulu.

Di sini juga, browser tidak melakukan apa pun dengan sumber daya setelah memuat. Skrip tidak dijalankan, style sheet tidak diterapkan. Sumber daya hanya di-cache dan segera tersedia berdasarkan permintaan.

sintaksis

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

href menunjuk ke sumber daya yang ingin Anda unduh.

as bisa apa saja yang bisa didownload di browser:

  • style untuk lembar gaya,
  • script untuk skrip,
  • font untuk font,
  • fetch untuk sumber daya yang dimuat menggunakan fetch() ΠΈΠ»ΠΈ XMLHttpRequest,
  • lihat daftar lengkap di MDN.

Penting untuk menentukan atributnya as - ini membantu browser memprioritaskan dan menjadwalkan pengunduhan dengan benar.

Kapan harus digunakan

Untuk memuat sumber daya dari halaman lain, jika Anda memerlukan sumber daya dari halaman lain, dan Anda ingin memuatnya terlebih dahulu untuk mempercepat rendering halaman tersebut. Misalnya:

  • Anda memiliki toko online, dan 40% pengguna meninggalkan halaman beranda menuju halaman produk. Menggunakan <link rel= "prefetch">, memuat file CSS dan JS untuk merender halaman produk.
  • Anda memiliki aplikasi satu halaman, dan halaman berbeda memuat paket berbeda. Saat pengguna mengunjungi suatu halaman, paket untuk semua halaman yang ditautkan dapat dimuat sebelumnya.

Kemungkinan besar tag ini dapat digunakan dengan aman sampai batas tertentu.. Browser biasanya menjadwalkan prefetch dengan prioritas paling rendah, sehingga tidak mengganggu siapa pun. Perlu diingat bahwa ini menghabiskan lalu lintas pengguna, yang dapat memerlukan biaya.

Bukan untuk permintaan mendesak. Jangan gunakan <link rel= "prefetch">, ketika sumber daya dibutuhkan dalam beberapa detik. Dalam hal ini, gunakan <link rel= "preload">.

Detail

Label opsional. Browser tidak diharuskan untuk mengikuti instruksi ini; browser mungkin mengabaikannya, misalnya, pada koneksi yang lambat.

Prioritas di Chrome. Di Chrome <link rel= "prefetch"> biasanya dieksekusi dengan prioritas minimum (lihat tabel prioritas penuh), yaitu, setelah memuat yang lainnya.

prakoneksi

<link rel= "preconnect"> meminta browser untuk terhubung ke domain terlebih dahulu bila Anda ingin mempercepat pengaturan koneksi di masa mendatang.

Browser harus membuat sambungan jika mengambil sumber daya apa pun dari domain pihak ketiga yang baru. Misalnya, jika memuat Google Font, font React dari CDN, atau meminta respons JSON dari server API.

Membuat koneksi baru biasanya memerlukan waktu beberapa ratus milidetik. Sekali saja dilakukan, namun tetap memerlukan waktu. Jika Anda telah membuat koneksi terlebih dahulu, Anda akan menghemat waktu dan mengunduh sumber daya dari domain ini lebih cepat.

sintaksis

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

href menunjukkan nama domain yang ingin Anda tentukan alamat IPnya. Dapat ditentukan dengan awalan (https://domain.com) atau tanpanya (//domain.com).

Kapan harus digunakan

Gunakan untuk domain yang akan dibutuhkan segera untuk mengunduh gaya, skrip, atau gambar penting dari sana, tetapi Anda belum mengetahui URL sumber dayanya. Misalnya:

  • Aplikasi Anda dihosting di my-app.com dan membuat permintaan AJAX ke api.my-app.com: Anda tidak mengetahui kueri spesifik sebelumnya karena dibuat secara dinamis dari JS. Di sini cukup tepat menggunakan tag untuk melakukan pra-koneksi ke domain.
  • Aplikasi Anda dihosting di my-app.com dan menggunakan Google Font. Mereka diunduh dalam dua langkah: pertama, file CSS diunduh dari domain fonts.googleapis.com, lalu file ini meminta font dengan fonts.gstatic.com. Anda tidak dapat mengetahui dari mana file font tertentu berasal fonts.gstatic.com Anda memerlukannya sampai Anda memuat file CSS, jadi kami hanya dapat membuat koneksi awal terlebih dahulu.

Gunakan tag ini untuk sedikit mempercepat skrip atau gaya pihak ketiga karena koneksi yang telah ditentukan sebelumnya.

Jangan berlebihan. Membangun dan memelihara koneksi adalah operasi yang mahal bagi klien dan server. Gunakan tag ini untuk maksimal 4-6 domain.

Detail

Label opsional. Browser tidak diharuskan untuk mengikuti instruksi ini dan mungkin mengabaikannya, misalnya, jika banyak koneksi telah dibuat atau dalam kasus lain.

Apa saja yang termasuk dalam proses koneksi?. Untuk terhubung ke setiap situs, browser harus melakukan hal berikut:

  • resolusi DNS. Temukan alamat IP server (216.58.215.78) untuk nama domain yang ditentukan (google.com).
  • jabat tangan TCP. Pertukaran paket (klien β†’ server β†’ klien) untuk memulai koneksi TCP dengan server.
  • Jabat tangan TLS (khusus situs HTTPS). Dua putaran pertukaran paket (klien β†’ server β†’ klien β†’ server β†’ klien) untuk memulai sesi TLS yang aman.

Catatan: HTTP/3 akan meningkatkan dan mempercepat mekanisme jabat tangan, namun masih jauh dari yang diharapkan.

dns-prefetch

<link rel= "dns-prefetch"> meminta browser untuk melakukan resolusi DNS untuk domain tersebut terlebih dahulu jika Anda akan segera menyambungkannya dan ingin mempercepat sambungan awal.

Browser harus menentukan alamat IP domain jika akan mengambil sumber daya apa pun dari domain pihak ketiga yang baru. Misalnya, memuat Google Font, React font dari CDN, atau meminta respons JSON dari server API.

Untuk setiap domain baru, resolusi data DNS biasanya memerlukan waktu sekitar 20-120 ms. Hal ini hanya memengaruhi pemuatan sumber daya pertama dari domain tertentu, namun tetap menimbulkan penundaan. Jika kami melakukan resolusi DNS terlebih dahulu, kami akan menghemat waktu dan memuat sumber daya lebih cepat.

sintaksis

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

href menunjukkan nama domain yang ingin Anda atur alamat IPnya. Dapat ditentukan dengan awalan (https://domain.com) atau tanpanya (//domain.com).

Kapan harus digunakan

Gunakan untuk domain yang akan dibutuhkan segera untuk mengunduh sumber daya dari sana yang tidak diketahui browser sebelumnya. Misalnya:

  • Aplikasi Anda dihosting di my-app.com dan membuat permintaan AJAX ke api.my-app.com: Anda tidak mengetahui kueri spesifik sebelumnya karena dibuat secara dinamis dari JS. Di sini cukup tepat menggunakan tag untuk melakukan pra-koneksi ke domain.
  • Aplikasi Anda dihosting di my-app.com, dan menggunakan Google Font. Mereka diunduh dalam dua langkah: pertama, file CSS diunduh dari domain fonts.googleapis.com, lalu file ini meminta font dengan fonts.gstatic.com. Anda tidak dapat mengetahui dari mana file font tertentu berasal fonts.gstatic.com Anda akan membutuhkannya sampai Anda memuat file CSS, jadi kami hanya dapat membuat koneksi awal terlebih dahulu.

Gunakan tag ini untuk sedikit mempercepat skrip atau gaya pihak ketiga karena koneksi yang telah ditentukan sebelumnya.

Harap perhatikan karakteristik 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. Hal ini dapat dibenarkan dalam dua kasus:

  • Apakah Anda ingin mendukung browser lama?. <link rel= "dns-prefetch" /> didukung oleh sejak IE10 dan Safari 5. <link rel= "preconnect"> didukung untuk sementara waktu di Chrome dan Firefox, tetapi hanya ditambahkan ke Safari di 11.1 dan masih belum didukung di IE/Edge. Jika Anda perlu mendukung browser ini, gunakan <link rel= "dns-prefetch" /> sebagai opsi cadangan untuk <link rel= "preconnect">.
  • Anda ingin mempercepat koneksi ke lebih dari 4-6 domain. Menandai <link rel= "preconnect"> Tidak disarankan untuk menggunakan lebih dari 4-6 domain, karena membuat dan memelihara koneksi adalah operasi yang mahal. <link rel= "dns-prefetch" /> mengkonsumsi lebih sedikit sumber daya, jadi gunakanlah jika perlu.

Detail

Label opsional. Browser tidak diharuskan untuk mengikuti instruksi ini, sehingga mungkin tidak melakukan resolusi DNS, misalnya jika terdapat banyak tag seperti itu di halaman atau dalam kasus lain.

Apa itu DNS. Setiap server di Internet memiliki alamat IP unik, seperti apa 216.58.215.78. Nama situs biasanya dimasukkan ke bilah alamat browser (misalnya, google.com), dan server DNS (Domain Name System) mencocokkannya dengan alamat IP server (216.58.215.78).

Untuk menentukan alamat IP, browser harus menanyakan server DNS. Diperlukan waktu 20βˆ’120 ms saat menyambung ke domain pihak ketiga baru.

DNS di-cache, meskipun tidak terlalu andal. Beberapa OS dan browser melakukan cache permintaan DNS: ini akan menghemat waktu pada permintaan berulang, namun caching tidak dapat diandalkan. Di Linux biasanya tidak berfungsi sama sekali. Chrome memiliki cache DNS, tetapi hanya bertahan sebentar. Windows menyimpan cache tanggapan DNS selama lima hari.

prarender

<link rel= "prerender"> meminta browser untuk mengunduh URL dan menampilkannya di tab yang tidak terlihat. Ketika pengguna mengklik link tersebut, halaman tersebut akan segera ditampilkan. Ini berguna jika Anda yakin pengguna akan mengunjungi halaman tertentu dan ingin mempercepat tampilannya.

Meskipun (atau karena) efektivitas luar biasa dari tag ini, pada tahun 2019 <link rel= "prerender"> kurang didukung di browser utama. Lihat lebih detail. di bawah.

sintaksis

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

href menunjuk ke URL yang ingin Anda mulai rendering di latar belakang.

Kapan harus digunakan

Ketika Anda benar-benar yakin bahwa pengguna akan menuju ke halaman tertentu. Jika Anda memiliki β€œterowongan” di mana 70% pengunjung halaman A menuju ke halaman B, maka <link rel= "prerender"> pada halaman A akan membantu menampilkan halaman B dengan sangat cepat.

Jangan berlebihan. Pra-rendering sangat mahal dalam hal bandwidth dan memori. Jangan gunakan <link rel= "prerender"> untuk lebih dari satu halaman.

Detail

Label opsional. Browser tidak diharuskan untuk mengikuti instruksi ini dan mungkin mengabaikannya, misalnya, pada koneksi yang lambat atau ketika memori bebas tidak mencukupi.

Untuk menghemat memori Chrome tidak melakukan rendering penuhDan hanya pramuat NoState. Artinya, Chrome memuat laman dan semua sumber dayanya, namun tidak merender atau menjalankan JavaScript.

Firefox dan Safari sama sekali tidak mendukung tag ini. Ini tidak melanggar spesifikasi, karena browser tidak diharuskan mengikuti instruksi ini; tapi tetap saja menyedihkan. Kesalahan implementasi Firefox telah dibuka selama tujuh tahun. Ada laporan bahwa Safari juga tidak mendukung tag ini.

Ringkasan

Menggunakan:

  • <link rel= "preload"> - saat Anda membutuhkan sumber daya dalam beberapa detik
  • <link rel= "prefetch"> - ketika Anda membutuhkan sumber daya di halaman berikutnya
  • <link rel= "preconnect"> - ketika Anda tahu bahwa Anda akan membutuhkan sumber daya segera, tetapi Anda belum mengetahui URL lengkapnya
  • <link rel= "dns-prefetch"> - sama halnya ketika Anda tahu bahwa Anda akan membutuhkan sumber daya segera, tetapi Anda belum mengetahui URL lengkapnya (untuk browser lama)
  • <link rel= "prerender"> β€” ketika Anda yakin bahwa pengguna akan membuka halaman tertentu, dan Anda ingin mempercepat tampilannya

Sumber: www.habr.com

Tambah komentar