Co się dzieje, gdy wpisujesz adres w przeglądarce
Między naciśnięciem Enter a pojawieniem się strony mija ułamek sekundy. W tym czasie dzieje się kilka rzeczy, które warto znać — choćby po to, żeby wiedzieć, gdzie szukać, kiedy strona się nie ładuje.
Wpisujesz web-pc.pl, naciskasz Enter i po chwili widzisz stronę. Wygląda to na jedną czynność, a jest ich co najmniej pięć. Oto one — bez żargonu.
1. Przeglądarka pyta o adres (DNS)
Nazwa domeny to udogodnienie dla ludzi. Komputery rozmawiają numerami IP. Przeglądarka musi więc najpierw zapytać: pod jakim numerem mieszka web-pc.pl? Odpowiada system DNS — coś w rodzaju wielkiej książki telefonicznej internetu.
Odpowiedź jest zapamiętywana na jakiś czas, dlatego drugie wejście na tę samą stronę jest szybsze. I dlatego po przeniesieniu strony na inny serwer część osób jeszcze przez chwilę widzi starą wersję.
2. Nawiązanie połączenia i kłódka
Przeglądarka łączy się z serwerem pod uzyskanym numerem. Jeśli adres zaczyna się od https, po drodze obie strony wymieniają certyfikat i ustalają klucze szyfrowania. To właśnie ta kłódka przy adresie.
Od tego momentu nikt po drodze — ani dostawca internetu, ani właściciel sieci Wi-Fi w kawiarni — nie zobaczy, co przesyłasz. Certyfikat jest dziś darmowy i standardowy, więc strona bez kłódki wygląda po prostu na zaniedbaną.
3. Pytanie i odpowiedź (HTTP)
Przeglądarka wysyła krótkie żądanie w stylu „daj mi stronę główną". Serwer odpowiada nagłówkiem ze statusem i treścią strony. Te statusy widujesz na co dzień:
- 200 — jest, proszę bardzo,
- 301 — to się przeniosło na stałe pod inny adres,
- 404 — nie ma tu nic takiego,
- 500 — coś się wywaliło po stronie serwera.
4. Budowanie strony
Przeglądarka dostaje sam HTML — szkielet bez wyglądu. Czyta go i po drodze odkrywa, że potrzebuje jeszcze arkusza stylów, skryptów, czcionek i obrazków. Każdy taki plik to osobna wyprawa do serwera.
Dlatego strona z pięćdziesięcioma plikami ładuje się zauważalnie wolniej niż ta z dziesięcioma, nawet jeśli waży tyle samo. Sporo pracy przy optymalizacji stron to po prostu zmniejszanie liczby tych wypraw.
5. Wyświetlenie
Na końcu przeglądarka liczy, co gdzie ma stanąć, i maluje stronę na ekranie. Jeśli w międzyczasie dociąga czcionkę albo skrypt zmieniający układ, zobaczysz charakterystyczne przeskoczenie treści — dokładnie to, co Google mierzy i za co potrafi obniżyć ocenę strony.
Cała ta droga trwa zwykle poniżej sekundy. Widać ją dopiero wtedy, gdy któryś z kroków zawiedzie.
Po co to wiedzieć
Bo diagnoza staje się prosta. Strona nie otwiera się nigdzie? Prawdopodobnie DNS albo serwer. Ostrzeżenie o bezpieczeństwie? Certyfikat. Widać goły tekst bez wyglądu? Nie wczytał się arkusz stylów. Wszystko działa, tylko wolno? Za dużo plików albo za ciężkie zdjęcia.
Cztery pytania — i wiadomo, gdzie szukać.
Komentarze (7)
-
Krzysztof
Świetnie wytłumaczone, w końcu rozumiem po co ten DNS. Zawsze mi to ktoś tłumaczył od strony technicznej i nic z tego nie wynikało.
Odpowiedz -
Krzysztof
Świetnie wytłumaczone, w końcu rozumiem po co ten DNS. Zawsze mi to ktoś tłumaczył od strony technicznej i nic z tego nie wynikało.
Odpowiedz -
Ola Nowak
A da się jakoś sprawdzić, który z tych kroków u mnie trwa najdłużej? Strona ładuje się wolno, ale nie wiem od czego zacząć szukanie.
Odpowiedz- Administrator autor bloga
Tak — w przeglądarce klawisz F12, zakładka Sieć, i odświeżenie strony. Przy każdym pliku widać rozbicie na czekanie na DNS, nawiązanie połączenia i pobieranie. Kolumna Waterfall od razu pokazuje, który krok zjada czas.
Odpowiedz - Administrator autor bloga
Tak — w przeglądarce klawisz F12, zakładka Sieć, i odświeżenie strony. Przy każdym pliku widać rozbicie na czekanie na DNS, nawiązanie połączenia i pobieranie. Kolumna Waterfall od razu pokazuje, który krok zjada czas.
Odpowiedz
-
-
Ola Nowak
A da się jakoś sprawdzić, który z tych kroków u mnie trwa najdłużej? Strona ładuje się wolno, ale nie wiem od czego zacząć szukanie.
Odpowiedz- Administrator autor bloga
Tak — w przeglądarce klawisz F12, zakładka Sieć, i odświeżenie strony. Przy każdym pliku widać rozbicie na czekanie na DNS, nawiązanie połączenia i pobieranie. Kolumna Waterfall od razu pokazuje, który krok zjada czas.
Odpowiedz
-
Przeczytaj też
REST czy GraphQL — bez świętej wojny
Jedno API oddaje dane w stałych porcjach, drugie pozwala klientowi zamówić dokładnie to, czego potrzebuje. Oba podejścia mają sens, tylko w innych sytuacjach.
WebSocket w Node: kiedy strona ma odzywać się sama
Zwykły HTTP działa jak wysyłanie listów: klient pyta, serwer odpowiada. Przy czacie czy powiadomieniach to za mało — potrzebna jest linia telefoniczna, którą obie strony mogą się odezwać w dowolnym momencie. Od tego jest WebSocket.
Pięć wyrażeń regularnych, które warto mieć pod ręką
Wyrażenia regularne wyglądają jak przypadkowy zbiór znaków, dopóki nie rozłoży się ich na części. Oto pięć wzorców z codziennej pracy, rozebranych po kawałku.
Robimy strony, które są szybkie nie tylko na papierze.
Poproś o darmową wycenę