Чи працює попереднє завантаження посилань для піддоменів?

Я намагався використовувати щось подібне, щоб підвищити ефективність при натисканні з простої цільової сторінки на важку вагу для однієї сторінки:

<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" />

Здається, немає помітного підвищення продуктивності, коли моя цільова сторінка знаходиться в субдомені. Скажімо, https://subdomain.example.com.

Коли я натискаю посилання, щоб відвідати https://example.com, на вкладці мережі Chrome все ще спостерігається велика затримка як app.jsі app.cssзавантажується:

Ось той самий ресурс, де попереднє завантаження вимкнено:

Це займає приблизно стільки ж часу.

Попросіть заголовки для одного з ресурсів, завантажених кешем попереднього вибору:

Загальне:

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

Відповідь:

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

Запит:

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

Моє запитання: Якщо Chrome вказує, що кеш попереднього вибору використовується, чому тоді існує значний час завантаження вмісту?

Здається, що Chrome має різні типи кеш-пам'ять: кеш попереднього вибору, кеш диска та кеш пам'яті. Дисковий кеш і кеш пам’яті дуже швидкі (5мм і 0мс завантаження). Однак кеш попереднього вибору досить марний, часом завантаження 300 мс. Чи можу я отримати технічне пояснення, чому це відбувається? Це помилка з Chrome? Я перебуваю на Chrome 79.0.3945.117.

Додавання <link rel=prefetch>на веб-сторінку повідомляє браузеру завантажувати цілі сторінки або деякі ресурси (наприклад, скрипти або файли CSS), які користувачеві можуть знадобитися в майбутньому. Це може покращити такі показники, як "Перша змістовна фарба" та "Час до інтерактивного", і часто може зробити так, щоб наступні навігації завантажувалися миттєво.

Підказка щодо попереднього вибору споживає додаткові байти для ресурсів, які не потрібні відразу, тому цю техніку потрібно застосовувати продумано; попередньо завантажуйте ресурси лише тоді, коли ви впевнені, що користувачі їм знадобляться. Подумайте, що не попереднє завантаження, коли користувачі знаходяться на повільних з'єднаннях. Ви можете виявити це за допомогою API мережі інформації.

Існують різні способи визначити, які посилання на попередній вибір. Найпростішим є попереднє вилучення першого посилання або декількох перших посилань на поточній сторінці. Існують також бібліотеки, які використовують більш складні підходи, пояснені пізніше в цьому пості - https://web.dev/link-prefetch/ .

Я можу лише здогадуватися. Впевнена відповідь, ймовірно, може бути знайдена лише ви, в ході експерименту. Занадто багато змінних для обліку. Але ось кілька ідей:

1. prefetchє підказкою для браузера. Браузер може ігнорувати це з якихось довільних причин. Більше того, він має найнижчий пріоритет.
2. Наприклад, про всяк випадок, будь ласка, перевірте налаштування свого веб-переглядача:
   Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching
   (або щось подібне).
3. Якщо ви випадково використовуєте мобільний Інтернет, це також може бути проблемою.
   https://www.technipages.com/google-chrome-prefetch
4. Як швидко ви переходите від цільової сторінки до example.com?
5. Перевірте журнали сервера, щоб побачити, чи отримує він коли-небудь prefetchзапити.

6. Перевірте, чи ваш сервер встановлює якісь дивні заголовки у відповідь на prefetchзапити. Напр Cache-Control: no-cache. Так, я бачу, що у вас є cache-control: max-age=31536000, тому було б справді дивно, якщо сервер надсилатиме різні заголовки на один і той же запит (ну ... майже те саме , принаймні ви не сказали, що вони є, і, принаймні, можна бути деякими заголовками, що вказують, що це prefetchзапит), але трапляються дивні речі.

7. Напевно, вам слід спробувати додати crossoriginатрибут. Напр

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

   Тут https://www.w3.org/TR/resource-hints/ ви можете знайти цей приклад

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

   досить актуально для вашої справи, але, на жаль, без пояснень.

8. В оригінальній версії свого питання ви згадали службових працівників ... Якщо вони щось завантажують, або навіть ви самі щось завантажуєте вручну, це також може бути проблемою. Через найнижчий пріоритетprefetch

   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

   Якщо ви завантажуєте щось за допомогою Mozilla, попереднє завантаження посилань буде відкладено до тих пір, поки завантаження фону не завершиться

   Я думаю, те саме стосується і Chrome.

9. Ви намагалися перенести цільову сторінку до кореневого домену? Якщо так, так і prefetchпрацює, як очікувалося, тоді так - субдомен є причиною проблеми. І повідомлення GUI Status Code: 200 (from prefetch cache)- це, мабуть, лише глюк. Тому що зовсім недавно деякі речі почали змінюватися в prefetchповедінці в Chrome. І я ще не знаю, чи все налагодиться. В основному, так, є певна ймовірність, що ти можеш prefetchлише того самого походження.

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

ви повинні додати код нижче, якщо ви маєте піддомен ont і хочете ресурс з домену

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