Atrybut rel=”preconnect” – kiedy, jak i dlaczego go stosować

Atrybuty HTML

Atrybuty HTML to pewnego rodzaju cechy elementów wykorzystywanych w tym języku. O atrybutach możemy mówić np. w przypadku linków [wtedy będzie mowa np. o atrybucie rel=”nofollow”]. Istnieją jednak także inne atrybuty, a każdy z nich ma swoją nazwę oraz wartość, którą reprezentuje jego znaczenie w dokumencie HTML.

W przypadku atrybutu:

rel="preconnect"

jego nazwą jest element rel, a wartością to co znajduje się pomiędzy dwoma cudzysłowami.

I to właśnie atrybut rel będzie głównym gościem tego programu. Jego nazwa pochodzi od wyrazu relationship oznaczającego w tej sytuacji relację pomiędzy dwoma połączonymi ze sobą linkiem dokumentami. Co oznacza natomiast wartość preconnect?

Zanim odpowiemy Ci na to pytanie i przedstawimy bliżej atrybut rel=”preconnect” koniecznie przeczytaj pozostałe nasze wpisy odnoszące się do innych atrybutów takich jak rel=”prefetch”, czy rel=”preload”. Są one bardzo mocno ze sobą powiązane i będą stanowić dla Ciebie doskonałe uzupełnienie wiedzy, którą tutaj znajdziesz.

Atrybut rel=”preconnect”

Atrybut rel=”preconnect” należy wraz z atrybutami rel=”dns-prefetch”, rel=”prefetch” i rel=”preload” do jednej rodziny atrybutów. Każdy z nich mówi o tym w jaki sposób przeglądarka [klient] ma nawiązywać połączenie z zewnętrznym źródłem oraz czy powinna pobrać wskazane na nim zasoby. W przypadku atrybutu rel=”preconnect” możemy już z samej nazwy wywnioskować, że oznacza on wstępne połączenie ze wskazanym źródłem [serwerem] i będziemy mieli w tym przypadku rację.

Atrybut rel=”preconnect” w rzeczywistości informuje przeglądarkę, aby w trakcie ładowania strony internetowej wykonała wstępne połączenie do wskazanej domeny oraz serwera, który za nią się znajduje. W przeciwieństwie jednak do wartości dns-prefetch, dodatkowo powinna ona wymienić podstawowe informacje za pomocą protokołu TCP oraz dokonać negocjacji TLS [jeżeli strona jest zabezpieczona certyfikatem SSL]. A więc atrybut rel=”preconnect” zawiera w sobie również rozwiązanie nazwy serwera DNS określane właśnie atrybutem rel=”dns-prefetch”.

Co istotne jednak to fakt, że:

Atrybut rel=”preconnect” nie jest obowiązkowy dla przeglądarki. Oznacza to, że może, lecz nie musi ona postępować według tej zasady.

Atrybut rel=”preconnect wymaga jednak od przeglądarki znacznie mniej niż atrybuty rel=”prefetch” i rel=”preload„. Wskazuje on, aby przeglądarka internetowa połączyła się z zewnętrznym serwerem zanim domena poprosi o pobranie zasobów niezbędnych do wyświetlenia jej strony, jednak nie pobierała ich do czasu, aż będzie to niezbędne.

W dalszej części tego poradnika dowiesz się kiedy i dlaczego warto stosować atrybut rel=”preconnect” oraz jak dokonać tego w praktyce.

Kiedy warto stosować atrybut rel=”preconnect”?

Na to pytanie nie ma jednoznacznej odpowiedzi, ponieważ każda strona internetowa wymaga innych zasobów z różnymi priorytetami ich ładowania. Niewątpliwie jednak atrybut rel=”preconnect” powstał po to, aby Twoja strona internetowa oparta np. o CMS WordPress ładowała się szybciej i sprawniej wczytywała zewnętrzne zasoby.

Zasobami zewnętrznymi nazywamy wszelkie elementy, które z pewnych względów znajdują się serwerze innym niż znajdującym się za wskazaną domeną, a są one niezbędne do poprawnego wyświetlania strony internetowej. Najprostszym przykładem zobrazowania takiej sytuacji są czcionki znajdujące się na zewnętrznym serwerze Google Fonts, a które muszą zostać pobrane przez przeglądarkę w celu ich wykorzystania na stronie www [przeczytaj także o font-display w CSS].

W tej sytuacji można zastosować każdy ze wskazanych atrybutów. Wybierając jednak atrybut preconnect, podpowiadasz przeglądarce internetowej, aby odwiedzając stronę internetową wstępnie nawiązała połączenie z domeną np. fonts.googleapis.com zawierającą zbiory czcionek z Google Fonts, dzięki czemu ich późniejsze załadowanie będzie trwało krócej.

Kod atrybytu rel=”preconnect” wyglądałby wtedy następująco:

<link rel="preconnect" href="//fonts.googleapis.com">

Wstępne połączenie przeglądarki z serwerem za pomocą protokołu TCP oraz negocjacja TLS potrafi zaoszczędzić cenne ułamki sekundy, które w przypadku wielu zewnętrznych zasobów mogą bardzo korzystnie wpłynąć na całkowity czas ładowania strony internetowej.

Wyobraź sobie więc sytuację, w której:

Znajdujesz się w samochodzie na krzyżówce, przed sobą masz czerwone światło, a Ty trzymasz swoją nogą na pedale gazu.

Jesteś więc w pełnej gotowości na to, aby ruszyć, gdy tylko sygnalizacja zmieni kolor na zielony. Poza czasem reakcji, który w tej sytuacji przypomina czas odpowiedzi serwera, nie tracisz dodatkowych milisekund na zmianę ułożenia swojego ciała.

Aby dowiedzieć się, które zewnętrzne elementy swojej strony internetowej warto ładować za pomocą atrybutu rel=”preconnect” odwiedź witrynę webpagetest.org i wykonaj znajdujący się tam bezpłatny test. Przechodząc do zakładki Details dowiesz się o wszystkich zasobach niezbędnych do wyświetlenia wskazanego adresu URL.

Zdecydowanie za pomocą atrybutu preconnect warto także optymalizować czas wczytywania reklam Google AdSense na stronie internetowej, których nie powinno natomiast optymalizować za pomocą chociażby atrybutu preload. Przykładowe stosowanie rel=”preconnect” dla skryptów Google AdSense powinno wyglądać tak:

<link rel="preconnect" href="//adservice.google.com">
<link rel="preconnect" href="//googleads.g.doubleclick.net">
<link rel="preconnect" href="//www.googletagservices.com">
<link rel="preconnect" href="//tpc.googlesyndication.com">
<link rel="preconnect" href="//pagead2.googlesyndication.com">
<link rel="preconnect" href="//partner.googleadservices.com">

W przypadku zewnętrznych zasobów i stosowania atrybutu rel=”preconnect” istotny będzie wskaźnik connect, który informuje o tym ile czasu przeglądarka potrzebuje na połączenie z zewnętrznym źródłem. Czas ten oczywiście możesz skrócić stosując właśnie atrybut rel=”preconnect”.

Oprócz istotnych korzyści w wydajności strony internetowej, przemyślane stosowanie atrybutów rel=”preconnect” pomagają także nadać priorytet treściom, dzięki czemu pozostałe zasoby mogą być płynniej ładowane, a renderowanie strony może przebiegać sprawniej.

Jeżeli chcesz poprawić szybkość swojej strony WordPress przeczytaj ten poradnik: Jak przyśpieszyć WordPress.

Jak stosować atrybut preconnect?

Ponieważ kod atrybutu rel=”preconnect” odnosi się jedynie do domeny, a nie konkretnego zasobu zewnętrznego, jego budowa jest bardzo prosta i wygląda tak:

<link rel="preconnect" href="//fonts.googleapis.com">

W tej sytuacji jedyną zmienną pozostaje nazwa domeny, którą zawsze należy poprzedzić dwoma //, co wskazuje na stosowanie zarówno protokołu http:// jak i https://.

Taki kod powinien znaleźć się w części head dokumentu HTML pomiędzy znacznikami <head> oraz </head>:

<head>

<link rel="preconnect" href="//fonts.googleapis.com">

</head>

W WordPress możesz dokonać tego np. za pomocą zewnętrznych wtyczek umożliwiających wstrzykiwanie kodu w dowolnej częsci strony [polecamy plugin Head, Footer and Post Injections], za pomocą motywu [niektóre z nich umożliwiają dodanie własnego kodu w wybranej części strony] oraz poprzez ręczną edycję pliku header.php [najbardziej ryzykowna opcja, której nie polecamy niedoświadczonym użytkownikom].

Pamiętaj, aby przed każdą zmianą wykonać kopię zapasowej WordPress.

Skorzystaj z naszej pomocy

Mamy nadzieję, że docenisz naszą pracę udostępniając ten poradnik lub komentując go poniżej ☺️ skontaktuj się z nami, aby uzyskać pomocą dotyczącą wdrożenia atrybutu rel=”preconnect” oraz optymalizacji swojej strony internetowej pod kątem czas wczytywania. Pomożemy Ci w każdym problemie związanym z WordPressem ☺️ Do usłyszenia 👏