Czy pobieranie linków działa w subdomenach?

10

Próbowałem użyć czegoś takiego, aby uzyskać wzrost wydajności, gdy klikam od prostej strony docelowej do ciężkiej aplikacji na jednej stronie:

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

Wygląda na to, że nie ma zauważalnego wzrostu wydajności, gdy moja strona docelowa znajduje się w subdomenie. Powiedzmy https://subdomain.example.com.

Po kliknięciu na link aby odwiedzić https://example.com, wciąż widzę duże opóźnienie w karcie sieciowej Chrome app.jsi app.csssą ładowane:

Oto ten sam zasób z wyłączonym pobieraniem wstępnym:

W sumie zajmuje to mniej więcej tyle samo czasu.

Żądaj nagłówków dla jednego z zasobów załadowanych z pamięcią podręczną pobierania wstępnego:

Generał:

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

Odpowiedź:

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

Żądanie:

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

Moje pytanie brzmi: jeśli Chrome wskazuje, że używana jest pamięć podręczna pobierania wstępnego, dlaczego czas pobierania zawartości jest znaczny?

Wygląda na to, że Chrome ma różne rodzaje pamięci podręcznych: pamięć podręczną pobierania wstępnego, pamięć podręczną dysku i pamięć podręczną. Pamięć podręczna dysku i pamięć podręczna są bardzo szybkie (czasy ładowania 5 ms i 0 ms). Pamięć podręczna pobierania wstępnego jest jednak dość bezużyteczna, a czasem pobierania 300 ms. Czy mogę uzyskać techniczne wyjaśnienie, dlaczego tak się dzieje? Czy to błąd w Chrome? Korzystam z Chrome 79.0.3945.117.

html link-prefetch

— Maros
źródło

Pobieranie wstępne służy do przyspieszenia przyszłych nawigacji, patrz krótkie wyjaśnienie z ( web.dev/link-prefetch )

— Mohammad Yaseer

Tak, pobieranie wstępne powinno przyspieszyć przyszłe nawigacje. Więc dlaczego nie przyspieszyło to w moim przypadku? Zobacz wykresy czasowe.

— Maros

Czy możesz spróbować umieścić zawartość subdomeny w innej domenie i sprawdzić, czy ładowanie również zajmuje tyle samo czasu? Wygląda na to, że narysowałeś, że subdomena może stanowić problem bez pokazywania jej, pokazując, jak działa przypadek inny niż subdomeny (tj. Inna domena). Jeśli poddomena stanowi problem, następnym krokiem byłoby sprawdzenie, czy istnieje ustawienie konfiguracji Chrome do poprawienia, które to zrobi, lub

— Martin

Czy te same czasy ładowania dla subdomeny i / lub domeny indie pojawiają się w innych przeglądarkach z podobnymi zestawami narzędzi, takimi jak Firefox Inspector lub Opera? Jeśli ten sam problem z czasem występuje w innych przeglądarkach, które używają różnych silników (nie jestem pewien, które to robią i nie więcej), jak się odwołujesz, może to być błąd - mogę całkowicie wierzyć, że może to być błąd Chrome jeśli podane wartości czasu są znacząco różne w innych przeglądarkach.

— Martin

0

Dodanie <link rel=prefetch>do strony internetowej nakazuje przeglądarce pobranie całych stron lub niektórych zasobów (takich jak skrypty lub pliki CSS), których użytkownik może potrzebować w przyszłości. Może to poprawić wskaźniki, takie jak Pierwszy zadowolony lakier i Czas na interakcję, i często sprawia, że kolejne nawigacje wydają się ładować natychmiast.

Wskazówka pobierania wstępnego pochłania dodatkowe bajty dla zasobów, które nie są natychmiast potrzebne, więc tę technikę należy zastosować z rozwagą; pobieraj zasoby tylko wtedy, gdy masz pewność, że użytkownicy będą ich potrzebować. Nie należy pobierać z wyprzedzeniem, gdy użytkownicy korzystają z wolnych połączeń. Możesz to wykryć za pomocą interfejsu API Network Information API.

Istnieją różne sposoby określania, które łącza mają zostać pobrane wstępnie. Najprostszym jest pobranie pierwszego linku lub kilku pierwszych linków na bieżącej stronie. Istnieją również biblioteki, które wykorzystują bardziej wyrafinowane podejścia, wyjaśnione w dalszej części tego posta - https://web.dev/link-prefetch/ .

— Mohammad Yaseer
źródło

Chciałem wyjaśnić, dlaczego pobieranie linków wstępnych nie przyspiesza w moim konkretnym przypadku. Czy to z powodu poddomen, pracowników usług czy czegoś innego? Jeśli spojrzysz na moje zrzuty ekranu, zobaczysz, że przeglądarka ponownie pobiera zawartość pomimo pobrania wstępnego.

— Maros

0

Mogę tylko zgadywać. Pewna odpowiedź może być znaleziona tylko przez ciebie, poprzez eksperyment. Istnieje zbyt wiele zmiennych, aby można je było uwzględnić. Ale tutaj kilka pomysłów:

prefetchjest wskazówką dla przeglądarki. Przeglądarka może go zignorować z pewnych arbitralnych powodów. Co więcej, ma najniższy priorytet.
Np. Na wszelki wypadek sprawdź ustawienia przeglądarki:
Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching
(lub coś w tym rodzaju).
Jeśli przez przypadek korzystasz z mobilnego internetu, może to również stanowić problem.
https://www.technipages.com/google-chrome-prefetch
Jak szybko nawigujesz ze strony docelowej do example.com?
Sprawdź dzienniki serwera, aby zobaczyć, czy kiedykolwiek otrzyma prefetchżądania.
Sprawdź, czy Twój serwer ustawia jakieś dziwne nagłówki w odpowiedzi na prefetchżądania. Np Cache-Control: no-cache. Tak, widzę, że cache-control: max-age=31536000tak, to byłoby naprawdę dziwne, gdyby serwer wysłał inny nagłówek dla tego samego żądania (cóż ... prawie taki sam , przynajmniej nie powiedziałeś, że są, i przynajmniej może być nagłówkami wskazującymi, że jest to prefetchżądanie), ale zdarzają się dziwne rzeczy.
Prawdopodobnie powinieneś spróbować dodać crossoriginatrybut. Na przykład

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

Tutaj https://www.w3.org/TR/resource-hints/ można znaleźć ten przykład
```
<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>
```
dość istotne dla twojej sprawy, ale niestety bez wyjaśnienia.
W oryginalnej wersji pytania wspomniałeś o pracownikach usług ... Jeśli coś pobierają, a nawet ty coś pobierasz ręcznie, może to być problem. Ze względu na najniższy priorytetprefetch

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

Jeśli pobierasz coś za pomocą Mozilli, pobieranie linków będzie opóźnione do momentu zakończenia pobierania w tle

Myślę, że to samo dotyczy Chrome.
Czy próbowałeś przenieść swoją stronę docelową do domeny głównej? Jeśli tak i prefetchdziała zgodnie z oczekiwaniami, wówczas tak - subdomena jest przyczyną problemu. A komunikat GUI Status Code: 200 (from prefetch cache)to prawdopodobnie tylko usterka. Ponieważ niedawno niektóre rzeczy zaczęły się zmieniać prefetchw Chrome. I nie wiem jeszcze, czy wszystko się ułożyło. Zasadniczo tak, istnieje pewne prawdopodobieństwo, że możesz prefetchpochodzić tylko z tego samego źródła.

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

— x00
źródło

Kilka losowych notatek po przeczytaniu Twojej odpowiedzi: bardzo wolno nawiguję ze strony docelowej do example.com, dając wystarczająco dużo czasu na załadowanie wszystkich zasobów. Powyższe testy wykonałem z pracownikami usług wyłączonymi w Chrome. Myślę, że atrybut crossorigin dotyczy czegoś innego. Próbowałem go użyć i bez powodzenia. W najgorszym przypadku zrobię test, który sugerujesz, przenosząc stronę docelową do domeny root. Miałem nadzieję, że odpowiedź tutaj uratuje mi pracę.

— Maros

1

Czy próbowałeś FF? Z linku MDN powyżej: „Czy Mozilla pobierze wstępnie dokumenty z innego hosta? Tak. Nie ma ograniczenia tego samego pochodzenia w przypadku pobierania wstępnego łącza. Ograniczenie pobierania wstępnego tylko do adresów URL z tego samego serwera nie zapewniłoby żadnego większego bezpieczeństwa przeglądarki”. Ten fragment może być przestarzały, ale nadal. Dobrze będzie wiedzieć, czy różnią się zachowaniem w Chrome.

— x00

Próbowałem, ale nie byłem w stanie wyłączyć pracowników usług, które wydawały się mieć pierwszeństwo przed pamięcią podręczną pobierania wstępnego. Mogę spróbować jeszcze raz.

— Maros

@Maros, jakoś nie masz kodu lub wystąpił problem techniczny?

— x00

-1

powinieneś dodać poniższy kod na wypadek, gdybyś był w swojej subdomenie i chciałbyś zasobów z domeny

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

— divyang4481
źródło