Geekly articles weekly

Pra-muat, prefetch, dan tag lainnya

Ada banyak cara untuk meningkatkan kinerja web . Salah satunya adalah konten preloading yang akan dibutuhkan nanti. Preferensi CSS, rendering pratinjau halaman penuh, atau resolusi nama domain. Kami melakukan semuanya terlebih dahulu, dan kemudian langsung menampilkan hasilnya! Kedengarannya keren.

Lebih keren lagi adalah sangat mudah diimplementasikan. Lima tag <link rel> memberi perintah pada browser untuk tindakan pendahuluan:

<link rel="prefetch" href="/style.css" as="style" /> <link rel="preload" href="/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" />

Jelaskan secara singkat apa yang mereka lakukan dan kapan menggunakannya.

Langsung ke: preload · prefetch · preconnect · dns-prefetch · prerender

preload


<link rel= "preload"> memberi tahu browser untuk memuat dan menyimpan sumber daya (misalnya, skrip atau style sheet) sesegera mungkin. Ini berguna ketika Anda membutuhkan sumber daya beberapa detik setelah halaman dimuat - dan Anda ingin mempercepat prosesnya.

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

Sintaks


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

href menunjuk ke sumber daya yang ingin Anda unduh.

apa pun yang dapat Anda unduh di browser:

  • style untuk style sheet,
  • script untuk skrip,
  • font untuk font,
  • fetch sumber yang dimuat menggunakan fetch() atau XMLHttpRequest ,
  • lihat daftar lengkap di MDN .

Penting untuk menentukan atribut as - ini membantu browser memprioritaskan dan merencanakan unduhan dengan benar.

Kapan harus digunakan


Gunakan preload saat sumber daya dibutuhkan dalam waktu dekat. Sebagai contoh:

  • Fon khusus dari file eksternal:

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

    Secara default, comic-sans.woff2 hanya akan mulai memuat setelah memuat dan index.css parsing index.css . Agar tidak menunggu terlalu lama, Anda dapat mengunduh font lebih awal menggunakan <link rel= "preload"> :

     <link rel="preload" href="comic-sans.woff2" as="font" />
  • Jika Anda membagi gaya sesuai dengan pendekatan CSS Kritis menjadi dua bagian, kritis (untuk rendering langsung) 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 memuat ketika JavaScript diluncurkan, yang mungkin terjadi beberapa detik setelah rendering. Alih-alih menunggu JS, gunakan <link rel= "preload"> untuk memulai unduhan sebelumnya:

     <style> /* Inlined critical styles */ </style> <link rel="preload" href="/app/non-critical.css" as="style" /> <script> /* Custom JS that starts downloading non-critical styles */ loadCSS('/app/non-critical.css'); </script>

Jangan menyalahgunakan preload . Jika Anda mengunduh semuanya dalam satu baris, situs tidak akan mempercepat secara ajaib, tetapi sebaliknya, ini akan mencegah browser dari pekerjaan perencanaan yang benar.

Jangan bingung dengan prefetching . Jangan gunakan <link rel= "preload"> kecuali jika Anda membutuhkan sumber daya segera setelah memuat halaman. Jika Anda membutuhkannya nanti, misalnya, untuk halaman berikutnya, maka gunakan <link rel= "prefetch"> .

Detail


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

Prioritas Untuk sumber daya yang berbeda (gaya, skrip, font, dll.), Peramban biasanya menetapkan prioritas yang berbeda untuk memuat sumber daya yang paling penting terlebih dahulu. Dalam hal ini, browser memprioritaskan atribut as. Untuk browser Chrome, Anda dapat melihat tabel prioritas penuh .



prefetch


<link rel= "prefetch"> meminta browser untuk mengunduh dan menyimpan sumber daya (misalnya, skrip atau style sheet) di latar belakang. Pengunduhan dilakukan dengan prioritas rendah, sehingga tidak mengganggu sumber daya yang lebih penting. Ini berguna jika Anda membutuhkan sumber daya di halaman berikutnya, dan Anda ingin menyimpannya terlebih dahulu.

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

Sintaks


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

href menunjuk ke sumber daya yang ingin Anda unduh.

apa pun yang dapat Anda unduh di browser:

  • style untuk style sheet,
  • script untuk skrip,
  • font untuk font,
  • fetch sumber yang dimuat menggunakan fetch() atau XMLHttpRequest ,
  • lihat daftar lengkap di MDN .

Penting untuk menentukan atribut as - ini membantu browser memprioritaskan dan merencanakan unduhan dengan benar.

Kapan harus digunakan


Untuk mengunduh sumber dari halaman lain , jika Anda membutuhkan sumber dari halaman lain, dan Anda ingin memuatnya untuk mempercepat rendering halaman ini nanti. Sebagai contoh:

  • Anda memiliki toko online, dan 40% pengguna pergi dari halaman utama ke halaman produk. Gunakan <link rel= "prefetch"> saat memuat file CSS dan JS untuk membuat halaman produk.
  • Anda memiliki aplikasi satu halaman, dan halaman berbeda memuat paket yang berbeda. Ketika seorang pengguna mengunjungi suatu halaman, Anda dapat memuat ulang paket untuk semua halaman yang dirujuk.

Mungkin, tag ini dapat digunakan dengan aman dalam volume apa pun . Browser biasanya merencanakan prefetch dengan prioritas terendah, sehingga tidak mengganggu siapa pun. Perlu diingat bahwa ia menghabiskan lalu lintas pengguna, yang dapat menghabiskan 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


Tag opsional . Browser tidak diharuskan untuk mengikuti instruksi ini, ia dapat mengabaikannya, misalnya, pada koneksi yang lambat.

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

preconnect


<link rel= "preconnect"> meminta browser untuk melakukan pra-koneksi ke domain saat Anda ingin mempercepat koneksi di masa depan.

Browser harus membuat koneksi jika mengambil beberapa sumber daya dari domain pihak ketiga yang baru. Misalnya, jika Anda mengunduh Google Fonts, React fonts dari CDN, atau meminta respons JSON dari server API.

Membangun koneksi baru biasanya membutuhkan beberapa ratus milidetik. Ini dilakukan sekali, tetapi masih butuh waktu. Jika Anda telah membuat koneksi terlebih dahulu, menghemat waktu dan mengunduh sumber daya dari domain ini lebih cepat.

Sintaks


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

href menunjukkan nama domain yang Anda inginkan untuk menentukan alamat IP. Anda dapat menentukan dengan awalan ( https://domain.com ) atau tanpanya ( //domain.com ).

Kapan harus digunakan


Gunakan untuk domain yang Anda akan segera perlu mengunduh gaya, skrip, atau gambar penting dari sana, tetapi Anda belum tahu URL sumber daya. Sebagai contoh:

  • Aplikasi Anda dihosting di my-app.com dan membuat permintaan AJAX ke api.my-app.com : Anda tidak tahu permintaan spesifik sebelumnya, karena permintaan tersebut dibuat secara dinamis dari JS. Di sini cukup tepat untuk menggunakan tag untuk koneksi awal ke domain.
  • Aplikasi Anda dihosting di my-app.com dan menggunakan Google Fonts. Mereka diunduh dalam dua tahap: pertama, file CSS diunduh dari domain fonts.googleapis.com , lalu file ini meminta font dari fonts.gstatic.com . Anda tidak dapat mengetahui file font spesifik apa dari fonts.gstatic.com Anda perlukan hingga Anda mengunduh file CSS, jadi kami hanya dapat membuat koneksi awal terlebih dahulu.

Gunakan tag ini untuk mempercepat sedikit skrip pihak ketiga atau gaya sedikit dengan pra-atur koneksi.

Jangan menyalahgunakan . Membuat dan memelihara koneksi adalah operasi yang mahal untuk klien dan server. Gunakan tag ini untuk maksimum 4-6 domain.

Detail


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

Yang termasuk proses koneksi . Untuk terhubung ke setiap situs, browser harus melakukan langkah-langkah berikut:

  • Penyelesaian 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 ke server.
  • Jabat Tangan TLS (hanya 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, tetapi masih jauh.

dns-prefetch


<link rel= "dns-prefetch"> meminta browser untuk melakukan pra-penyelesaian DNS untuk domain terlebih dahulu jika Anda akan segera terhubung dengannya dan ingin mempercepat koneksi awal.

Peramban harus menentukan alamat IP domain jika akan mengambil beberapa sumber daya dari domain pihak ketiga yang baru. Misalnya, unduh Google Fonts, React fonts dari CDN, atau minta respons JSON dari server API.

Untuk setiap domain baru, resolusi DNS biasanya memakan waktu sekitar 20-120 ms. Ini hanya mempengaruhi pemuatan sumber daya pertama dari domain yang diberikan, tetapi masih merupakan penundaan. Jika Anda menerapkan resolusi DNS terlebih dahulu, maka kami akan menghemat waktu dan memuat sumber daya lebih cepat.

Sintaks


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

href menunjukkan nama domain yang digunakan untuk mengatur alamat IP. Anda dapat menentukan dengan awalan ( https://domain.com ) atau tanpanya ( //domain.com ).

Kapan harus digunakan


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

  • Aplikasi Anda dihosting di my-app.com dan membuat permintaan AJAX ke api.my-app.com : Anda tidak tahu permintaan khusus sebelumnya, karena permintaan tersebut dibuat secara dinamis dari JS. Di sini cukup tepat untuk menggunakan tag untuk koneksi awal ke domain.
  • Aplikasi Anda dihosting di my-app.com , dan menggunakan Google Font. Mereka diunduh dalam dua tahap: pertama, file CSS diunduh dari domain fonts.googleapis.com , lalu file ini meminta font dari fonts.gstatic.com . Anda tidak dapat mengetahui file font spesifik apa dari fonts.gstatic.com Anda perlukan hingga Anda mengunduh file CSS, jadi kami hanya dapat membuat koneksi awal terlebih dahulu.

Gunakan tag ini untuk mempercepat sedikit skrip pihak ketiga atau gaya sedikit dengan pra-atur koneksi.

Perhatikan spesifikasi serupa pada <link rel= "dns-prefetch"/> dan <link rel= "preconnect"> . Menggunakannya bersama untuk domain yang sama biasanya tidak masuk akal: <link rel= "preconnect"> sudah termasuk <link rel= "dns-prefetch"/> dan banyak lagi. Ini dapat dibenarkan dalam dua kasus:

  • Anda ingin mendukung browser lama . <link rel= "dns-prefetch" /> telah didukung sejak IE10 dan Safari 5 . <link rel= "preconnect"> didukung untuk beberapa waktu di Chrome dan Firefox, tetapi ditambahkan ke Safari hanya di 11.1 dan masih belum didukung di IE / Edge . Jika Anda perlu mendukung browser ini, gunakan <link rel= "dns-prefetch" /> sebagai <link rel= "preconnect"> untuk <link rel= "preconnect"> .
  • Anda ingin mempercepat koneksi Anda ke lebih dari 4-6 domain . <link rel= "preconnect"> tidak disarankan untuk digunakan dengan lebih dari 4-6 domain, karena membuat dan memelihara koneksi adalah operasi yang mahal. <link rel= "dns-prefetch" /> menghabiskan lebih sedikit sumber daya, jadi gunakan jika perlu.

Detail


Tag opsional . Browser tidak diharuskan untuk mengikuti instruksi ini, oleh karena itu, browser mungkin tidak melakukan penyelesaian DNS, misalnya, jika ada banyak tag seperti itu pada halaman atau dalam beberapa kasus lainnya.

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

Untuk menentukan alamat IP, browser harus menanyakan server DNS. Dibutuhkan 20-120 ms saat menghubungkan ke domain pihak ketiga yang baru.

DNS di-cache, meskipun tidak terlalu andal . Beberapa sistem operasi dan browser men-cache kueri DNS: ini akan menghemat waktu pada kueri yang diulang, tetapi Anda tidak bisa mengandalkan caching. Di Linux, biasanya tidak berfungsi sama sekali. Chrome memiliki cache DNS, tetapi hanya berlangsung satu menit. Windows menyimpan respons DNS selama lima hari.

prerender


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

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

Sintaks


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

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

Kapan harus digunakan


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

Jangan menyalahgunakan . Pra-rendering sangat mahal dalam hal lalu lintas dan memori. Jangan gunakan <link rel= "prerender"> lebih dari satu halaman.

Detail


Tag opsional . Browser tidak diharuskan untuk mengikuti instruksi ini dan dapat mengabaikannya, misalnya, pada koneksi yang lambat atau ketika tidak ada cukup memori bebas.

Demi menghemat memori, Chrome tidak melakukan perenderan penuh , tetapi hanya melakukan pramuat NoState . Ini berarti bahwa Chrome memuat halaman dan semua sumber dayanya, tetapi tidak membuat dan tidak menjalankan JavaScript.

Firefox dan Safari tidak mendukung tag ini sama sekali. Ini tidak melanggar spesifikasi, karena browser tidak diharuskan untuk mengikuti instruksi ini; tapi sedih juga. Bug implementasi di Firefox telah terbuka selama tujuh tahun. Ada laporan bahwa Safari juga tidak mendukung tag ini .

Ringkasan


Gunakan:

  • <link rel= "preload"> - ketika Anda membutuhkan sumber daya dalam beberapa detik
  • <link rel= "prefetch"> - ketika Anda membutuhkan sumber di halaman selanjutnya
  • <link rel= "preconnect"> - ketika Anda tahu bahwa Anda akan membutuhkan sumber daya segera, tetapi Anda belum tahu URL lengkapnya
  • <link rel= "dns-prefetch"> - sama halnya, ketika Anda tahu bahwa Anda akan membutuhkan sumber daya segera, tetapi Anda masih tidak tahu URL lengkapnya (untuk browser lama)
  • <link rel= "prerender"> - ketika Anda yakin bahwa pengguna akan pergi ke halaman tertentu dan ingin mempercepat tampilannya

Source: https://habr.com/ru/post/id445264/

More articles:


All Articles