Jak przyspieszyć witrynę za pomocą tagu

„Przewidujący„przeglądarki to przyszłość szybkiego surfowania w Internecie, przynosząc nam zasoby, których chcemy jeszcze zanim wiemy, że ich chcemy. Dzisiejsze przeglądarki już robić trochę przewidywania od czasu do czasu przyspieszyć pobieranie i renderowanie dokumentów. Aby przejść do następnego kroku, zwracamy się do twórców stron internetowych.

Deweloperzy mają całkiem dobry pomysł z jak nawigowane są ich strony internetowe, i która najczęściej żądane są zasoby a zatem mogą przewidzieć niektóre przyszłe operacje, które przeglądarki powinny wykonać dla witryn. Wszystko, co jest teraz potrzebne, to aby programiści mogli znaleźć sposób przekaż je przewidywania do przeglądarek i dobrze je wykorzystać. W tym miejscu pojawiają się specjalne „linki HTML”.

Odświeżanie żądań HTTP

Przed spojrzeniem na te łącza nadszedł czas, aby odświeżyć naszą pamięć na temat tego, jak odbywa się typowa operacja pobierania plików żądana przez HTTP. Powiedzmy, że ktoś o imieniu Joe chce odwiedzić stronę internetową.

Oto, co dzieje się dalej:

1. Joe wpisuje po ludzku adres strony internetowej w pasku adresu przeglądarki i naciska „Enter”.
2. Po otrzymaniu tego adresu przeglądarka prosi serwer DNS (komplementy dostawcy usług internetowych) o adres IP adresu podanego przez Joe.
3. Serwer DNS zobowiązuje.
4. Teraz, gdy przeglądarka zna adres IP, wysyła wiadomość (w dialekcie TCP) do serwera strony, prosząc o połączenie.
5. Jeśli serwer żyje i ma się dobrze, wysyła odpowiedź potwierdzającą żądanie przeglądarki, a przeglądarka odpowiada i potwierdza komunikat serwera. (Uwaga: Tak, jest to bardzo rozwodniona wersja uzgadniania TCP między klientem a serwerem.)
6. Gdy uściski dłoni się skończą, zostaje nawiązane połączenie między nimi.
7. Teraz przeglądarka zmienia swój styl dialektu na HTTP i prosi serwer o stronę internetową.
8. Serwer, wiedząc o stronie głównej witryny, zwraca właśnie to, co jest odbierane przez przeglądarkę i pokazywane Joe, który czeka bardzo cierpliwie przed komputerem.

Przechodzi typowe żądanie HTTP wszystko że (i więcej) pobrać dokument przez Internet. Więc jeśli którykolwiek z tych procesów można uruchomić w miarę możliwości, możemy skrócić czas oczekiwania na dostarczenie potrzebnych zasobów.

Relacje HTML Link

W3C określa 4 powiązania linków HTML (rel dla związku) o nazwie dns-prefetch, preconnect, prefetch, i prerender. Razem nazywani są (przez W3C) „Wskazówki dotyczące zasobów„. Zobaczymy co mogą zrobić i gdzie mogą być użyte.

1. Prefetch DNS

W DNS preetch, rozpoznawanie nazw domen (aka uzyskiwanie pasującego adresu IP z serwera DNS) odbywa się z wyprzedzeniem.

Załóżmy, że na stronie internetowej znajduje się strona referencyjna z wieloma odnośnikami do jej siostrzanej strony. Gdy użytkownik odwiedza stronę referencyjną, jest wysokie prawdopodobieństwo że użytkownik przejdzie do witryny siostrzanej. Tak więc wczesne wyszukiwanie DNS dla siostrzanej witryny może skrócić czas potrzebny na otwarcie witryny (a tym samym poprawić wrażenia użytkownika).

To redukcja opóźnienia przez wstępne pobieranie DNS można to zrobić, dodając ten kod do strony odniesienia.

Gdy przeglądarka przetworzy ten kod na stronie odniesienia, doda wyszukiwanie DNS witryny siostrzanej do swoich kolejek zadań, a gdy będzie wolne od innych zadań o wysokim priorytecie w kolejce, rozpocznie rozpoznawanie DNS siostrzana strona.

Tak więc, gdy użytkownik w końcu kliknie jedno z łączy prowadzących do witryny siostrzanej, rozwiązanie DNS tej witryny mogło już zostać zakończone, a przeglądarka może od razu rozpocząć ustanawianie połączenia TCP klient-serwer z witryną siostrzaną serwer, dzięki czemu strona ładuje się szybciej.

Ta funkcja jest dostępna w prawie wszystkich nowoczesnych przeglądarkach z wyjątkiem Safari od marca 2016 roku.

2. Podłącz ponownie

Preconnect to krok dalej od wstępnego pobierania DNS, ustanawia połączenie z serwerem, do którego może być wysłane żądanie w przyszłości.

W3C wymienia idealny przypadek użycia dla prekonektu: przekierowania. Programiści używają przekierowań z wielu powodów.

W takim przypadku następną prośbą przeglądarki (przekierowana witryna) jest 100% przewidywalności, i mogę być podłączonym do, do zmniejszyć opóźnienie nawigacji.

Wyobraź sobie, że istnieje strona pośrednia, która przekierowuje do „xyzsite„poniższy link HTML sprawi, że przeglądarka będzie wstępnie połączona z serwerem xyzsite, gdy dotrze do tej strony pośredniej.

Od marca 2016 roku jest dostępna w Chrome, Opera i Firefox.

3. Prefetch

Z prefetch, dla zasobu przeglądarka rozpoczyna implementację rozwiązania DNS nazwy domeny zasobu, następnie wykonuje połączenie TCP z serwerem zasobów, wykonuje żądanie HTTP i wreszcie pobiera i przechowuje wstępnie pobrany zasób w pamięci podręcznej przeglądarki.

Jeśli jesteś pewien, które zasoby będą potrzebne później, jest to zasób, który należy wcześniej pobrać; w tym leży haczyk. Pobieranie wstępne wymaga zgadywania, a jeśli zgadniesz błędnie, możesz faktycznie zwolnić zamiast przyspieszać witrynę.

W przypadku książek, galerii lub portfeli online, jeśli użytkownik najprawdopodobniej przejdzie do następnej strony, wstępnie pobierając zasoby, takie jak obrazy, może znacznie przyspieszyć. Oto kod, aby to zrobić.

Prefetch jest obsługiwany w Chrome, Firefox i Opera.

4. Prerender

Tylko dla stron HTML można dokonać wstępnego renderowania. Wstępnie przygotowana strona HTML to renderowane offline, i jest malowany na ekranie, gdy jest rzeczywiście potrzebny użytkownikowi. Wykonanie kosztuje wyższą pracę obliczeniową i zasoby pamięci; plus, aby renderować stronę, przeglądarka może potrzebować dodatkowych zasobów (takich jak obrazy dodane do strony), które doprowadzą do bardziej konsekwentne prośby przez przeglądarkę.

Więc, prerender musi być używane ostrożnie, i nie nadużywane. Dodanie następującego kodu spowoduje wcześniejsze wykonanie strony „Informacje”.

Prerender jest już dostępny w Chrome, IE i Opera od marca 2016 roku.

Kilka rzeczy do odnotowania

(1) Żadna z wyżej wymienionych wskazówek dotyczących zasobów nie gwarantuje wykonania i ukończenia różnych etapów żądania, ponieważ przeglądarka jest już zajęta przetwarzaniem żądań potrzebnych do działania bieżącej strony, w której znajduje się użytkownik, wykonując te optymalizacje może utrudniać bieżące zadania użytkownika.

Więc wszystko jest w kolejce i wykonywane, gdy przeglądarka czuje się wystarczająco wolna, aby to zrobić.

Te wskazówki dotyczące zasobów niekoniecznie muszą być obecne na stronie nawet przed załadowaniem strony. Oni mogą być dodane później przez JavaScript, a wskazówki dotyczące zasobów wykonają swoją pracę jak zwykle.

(2) W3C określa a Atrybut łącza HTML nazywa prawdopodobieństwo podpowiedzi, pr (o wartości 0 do 1) dla tych wskazówek dotyczących zasobów, które mogą być wykorzystane do zapewnienia prawdopodobieństwa żądań, które zostaną wykonane w przyszłości. Nie widziałem jeszcze tego atrybutu zaimplementowanego przez jakąkolwiek przeglądarkę. Na przykład poniższy kod stwierdza, że ​​w przyszłości będzie wymagane 80% szansy na xyzsite i 30% na stronę około.

Możemy również dodać opcjonalny atrybut crossorigin do wskazówek dotyczących zasobów, aby poinformować przeglądarkę o referencjach CORS połączonego żądania.