Apakah tautan kerja prefetching lintas subdomain?

10

Saya telah mencoba menggunakan sesuatu seperti ini untuk mendapatkan peningkatan kinerja saat mengklik dari halaman arahan sederhana ke aplikasi satu halaman kelas berat:

<link rel="prefetch" href="https://example.com" as="document" />
<link rel="prefetch" href="https://example.com/app.js" as="script" />
<link rel="prefetch" href="https://example.com/app.css" as="style" />

Tampaknya tidak ada peningkatan kinerja yang terlihat saat halaman arahan saya berada di subdomain. Katakan https://subdomain.example.com,.

Ketika saya mengklik tautan untuk mengunjungi https://example.com, saya masih melihat penundaan yang lama di tab jaringan Chrome sebagai app.jsdan app.cssdimuat:

Sumber daya yang diambil sebelumnya Waktu pengunduhan sumber daya dengan prefetching

Berikut sumber yang sama dengan prefetching dinonaktifkan:

Waktu pengunduhan sumber daya tanpa prefetching

Total waktu yang dibutuhkan kira-kira sama.

Minta tajuk untuk salah satu aset yang dimuat dengan cache prefetch:

Umum:

Request URL: https://example.com/css/app.bffe365a.css
Request Method: GET
Status Code: 200  (from prefetch cache)
Remote Address: 13.226.219.19:443
Referrer Policy: no-referrer-when-downgrade

Tanggapan:

accept-ranges: bytes
cache-control: max-age=31536000
content-encoding: gzip
content-length: 39682
content-type: text/css
date: Mon, 06 Jan 2020 21:42:53 GMT
etag: "d6f5135674904979a2dfa9dab1d2c440"
last-modified: Mon, 06 Jan 2020 20:46:46 GMT
server: AmazonS3
status: 200
via: 1.1 example.cloudfront.net (CloudFront)
x-amz-cf-id: dO3yiCoPErExrE2BLYbUJaVye32FIJXXxMdI4neDGzGX9a6gcCDumg==
x-amz-cf-pop: LAX50-C1
x-amz-id-2: 1O0LmihxpHIywEaMQWX7G3FDAzxtH9tZq1T/jeVLMzifFSJSIIJSS6+175H61kKdAq6iEbwfs2I=
x-amz-request-id: AF35C178092B65D4
x-cache: Hit from cloudfront

Permintaan:

DNT: 1
Referer: https://example.com/auth/join
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36

Pertanyaan saya adalah: Jika Chrome menunjukkan bahwa cache prefetch digunakan, mengapa ada waktu pengunduhan konten yang signifikan?

Tampaknya Chrome memiliki berbagai jenis cache: cache prefetch, cache disk, dan cache memori. Cache disk dan cache memori sangat cepat (5ms dan 0ms memuat kali). Namun cache prefetch sangat tidak berguna dengan 300ms kali pengunduhan. Bisakah saya mendapatkan penjelasan teknis mengapa ini terjadi? Apakah ini bug dengan Chrome? Saya di Chrome 79.0.3945.117.

html  link-prefetch 
— Maros
sumber
Prefetch digunakan untuk mempercepat navigasi di masa depan, lihat penjelasan singkat dari ( web.dev/link-prefetch )
— Mohammad Yaseer
Ya, prefetch harus mempercepat navigasi di masa depan. Lalu mengapa itu tidak mempercepatnya dalam kasus saya? Lihat grafik waktu.
— Maros
Bisakah Anda mencoba dan menempatkan konten subdomain di domain lain dan memeriksa apakah itu juga membutuhkan waktu yang sama untuk memuat? Anda tampaknya telah menyimpulkan bahwa subdomain mungkin menjadi masalah tanpa menunjukkannya dengan menunjukkan cara kerja kasus non-subdomain (yaitu domain lain). Jika subdomain adalah masalah maka langkah selanjutnya adalah menjelajahi apakah ada pengaturan konfigurasi Chrome untuk mengubah yang akan melakukan ini, atau
— Martin
Atau apakah waktu pemuatan yang sama untuk subdomain dan / atau domain indie muncul di browser lain dengan set alat serupa seperti Firefox Inspector atau Opera? Jika masalah waktu yang sama terjadi pada peramban lain yang menggunakan mesin yang berbeda (saya tidak yakin yang melakukannya dan tidak lagi melakukannya) seperti yang Anda rujuk, itu mungkin bug - saya sepenuhnya percaya itu bisa jadi bug Chrome jika nilai waktu yang dicatat ini sangat berbeda pada browser lain.
— Martin

Jawaban:

0

Menambahkan <link rel=prefetch>ke halaman web memberitahu browser untuk mengunduh seluruh halaman atau beberapa sumber daya (seperti skrip atau file CSS), yang mungkin dibutuhkan pengguna di masa depan. Ini dapat meningkatkan metrik seperti Cat Konten Pertama dan Waktu ke Interaktif dan sering dapat membuat navigasi berikutnya muncul untuk dimuat secara instan.

masukkan deskripsi gambar di sini

Petunjuk pengambilan awal menggunakan byte tambahan untuk sumber daya yang tidak segera diperlukan, sehingga teknik ini perlu diterapkan secara bijaksana; hanya mengambil sumber daya saat Anda yakin bahwa pengguna akan membutuhkannya. Pertimbangkan untuk tidak mengambil saat pengguna berada di koneksi yang lambat. Anda dapat mendeteksi itu dengan API Informasi Jaringan.

Ada berbagai cara untuk menentukan tautan mana yang akan diambil. Yang paling sederhana adalah dengan mengambil tautan pertama atau beberapa tautan pertama di halaman saat ini. Ada juga perpustakaan yang menggunakan pendekatan yang lebih canggih, yang dijelaskan kemudian dalam posting ini- https://web.dev/link-prefetch/ .

— Mohammad Yaseer
sumber
Saya mencari penjelasan mengapa tautan pra-pengambilan tidak mempercepat dalam kasus khusus saya. Apakah karena subdomain, pekerja layanan atau yang lain? Jika Anda melihat tangkapan layar saya, Anda dapat melihat bahwa peramban mengunduh ulang kontennya meskipun telah mengambil sebelumnya.
— Maros
0

Saya hanya bisa menebak. Jawaban yang meyakinkan mungkin hanya dapat ditemukan oleh Anda, melalui eksperimen. Ada terlalu banyak variabel untuk diperhitungkan. Tapi di sini ada beberapa ide:

  1. prefetchadalah petunjuk untuk browser. Browser dapat mengabaikannya karena beberapa alasan sewenang-wenang. Lebih dari itu memiliki prioritas terendah.
  2. Misalnya untuk berjaga-jaga, silakan, periksa pengaturan browser Anda:
    Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching
    (atau sesuatu seperti itu).
  3. Jika kebetulan Anda menggunakan internet seluler itu juga bisa menjadi masalah.
    https://www.technipages.com/google-chrome-prefetch
  4. Seberapa cepat Anda menavigasi dari halaman arahan Anda ke example.com?
  5. Periksa log server Anda untuk melihat apakah pernah menerima prefetchpermintaan.

  6. Periksa apakah server Anda menetapkan beberapa header aneh sebagai respons terhadap prefetchpermintaan. Misalnya Cache-Control: no-cache. Ya, saya melihat bahwa Anda punya cache-control: max-age=31536000, jadi itu akan sangat aneh, jika server akan mengirim tajuk yang berbeda untuk permintaan yang sama (baik ... hampir sama , setidaknya Anda tidak mengatakan bahwa mereka, dan setidaknya ada bisa ada beberapa tajuk yang menunjukkan bahwa itu adalah prefetchpermintaan), tetapi hal-hal aneh terjadi.

  7. Anda mungkin harus mencoba menambahkan crossoriginatribut. Misalnya

    <link rel="prefetch" href="https://example.com/app.css" as="style" crossorigin />

    Di sini https://www.w3.org/TR/resource-hints/ Anda dapat menemukan contoh ini

    <link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>

    cukup relevan untuk kasus Anda, tetapi sayangnya tanpa penjelasan.

  8. Dalam versi asli pertanyaan Anda, Anda menyebutkan pekerja layanan ... Jika mereka mengunduh sesuatu, atau bahkan diri Anda sendiri mengunduh sesuatu, itu juga bisa menjadi masalah. Karena prioritas terendahprefetch

    https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ#What_if_I.27m_downloading_something_in_the_background.3F_Will_link_prefetching_compete_for_bandwidth.3F

    Jika Anda mengunduh sesuatu menggunakan Mozilla, tautan prapengambilan akan ditunda hingga semua pengunduhan latar belakang selesai

    Saya pikir hal yang sama berlaku untuk Chrome.

  9. Sudahkah Anda mencoba untuk memindahkan halaman arahan Anda ke domain root? Jika, ya, dan prefetchberfungsi seperti yang diharapkan, maka ya - subdomain adalah penyebab masalah. Dan pesan GUI Status Code: 200 (from prefetch cache)mungkin hanya kesalahan. Karena baru-baru ini beberapa hal mulai berubah dalam prefetchperilaku di Chrome. Dan saya belum tahu apakah semuanya beres. Pada dasarnya, ya, ada kemungkinan tertentu bahwa Anda prefetchhanya dapat dari asal yang sama.

    https://docs.google.com/document/d/1bKGDIePAuF6YXmmrwM33LeLvtuCsla3vTspsxsNp-f8/edit

— x00
sumber
Beberapa catatan acak setelah membaca jawaban Anda: Saya menavigasi dengan sangat lambat dari halaman arahan ke example.com, memberikan cukup waktu bagi semua sumber daya untuk memuat. Saya melakukan pengujian di atas dengan pekerja layanan dinonaktifkan di Chrome. Saya pikir atribut crossorigin adalah untuk sesuatu yang lain. Saya memang mencoba menggunakannya dan tidak berhasil. Kasus terburuk, saya akan melakukan pengujian yang Anda sarankan dengan memindahkan halaman arahan ke domain root. Saya berharap jawaban di sini akan menyelamatkan saya dari pekerjaan.
— Maros
1
Sudahkah Anda mencoba FF? Dari tautan MDN di atas: "Apakah Mozilla akan mengambil dokumen dari host yang berbeda? Ya. Tidak ada batasan asal-sama untuk prefetching tautan. Membatasi prefetching ke hanya URL dari server yang sama tidak akan menawarkan peningkatan keamanan browser." Bagian ini bisa usang, tetapi tetap saja. Akan bagus untuk mengetahui apakah mereka berbeda dalam perilaku mereka dengan Chrome.
— x00
Saya mencoba tetapi saya tidak dapat menonaktifkan pekerja layanan yang tampaknya lebih diutamakan dari cache prefetch. Saya bisa mencobanya lagi.
— Maros
@Maros, entah bagaimana Anda tidak memiliki kode, atau ada masalah teknis?
— x00
-1

Anda harus menambahkan kode di bawah jika Anda subdomain yang aktif dan Anda ingin sumber daya dari domain

<link rel="preconnect" href="https://example.com">
— divyang4481
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.