Jak wygląda nowoczesna strona internetowa od strony kodu?

Nowoczesna strona internetowa może składać się z setek elementów, które – złożone – tworzą jej całość. Prawie zawsze są to pliki graficzne i tekstowe, przechowujące kod HTML, CSS oraz JavaScript, a czasem, dodatkowo, plik muzyczny lub wideo. Jeżeli strona nie korzysta z dostępnych w systemie operacyjnym fontów, to przeglądarka również pobiera z serwera odpowiednie pliki, aby wyświetlić tekst w pożądanym stylu.

W jaki sposób przeglądarka pobiera wszystkie niezbędne do wyświetlenia strony zasoby?

Za naszym codziennym surfowaniem po Internecie stoi pewien jasno ustalony sposób komunikacji, który w skrócie nazywa się HTTP (HyperText Transfer Protocol). W wersji 1.1 został wprowadzony już 17 lat temu.

Protokół ten ustala sposób komunikacji między naszym komputerem a serwerem, na którym znajduje się strona internetowa. Jeżeli wejdziemy na dowolny adres, komputer zawsze wyśle zapytanie do serwera, tak, aby otrzymać zasoby niezbędne do wyświetlenia żądanej strony www.

W odpowiedzi serwer zacznie odsyłać do przeglądarki dokument HTML, będący szkieletem strony internetowej. Zawiera on informację o kolejnych niezbędnych plikach. Na przykład: jeżeli przeglądarka, analizując dokument HTML, natknie się na plik CSS, wyśle żądanie do serwera, aby ten plik otrzymać.

Nie rozwodząc się nad technicznymi aspektami, protokół http jest straszną gadułą. Wymaga zapytania serwera o każdy zasób napotkany w procesie przetwarzania struktury strony. Intuicja mówi, że nie jest to najszybszy sposób dostarczania plików i można by np. z wyprzedzeniem wysyłać kilka plików bez zbędnego zadawania pytań. Niestety tego http w wersji 1.1 nie potrafi. Istnieją pewne sztuczki mające przyspieszyć działania protokołu, ale o tym w nadchodzących wpisach.

Protokół HTTP to tylko czubek góry lodowej

Fundamentem jego działania jest inny protokół – TCP (Transmission Control Protocol). To z kolei protokół określający, w jaki sposób informacje są przesyłane przez sieć.

Mówiąc krótko i bez zbędnej technicznej gadki, jeżeli pobieramy z Internetu, np. zdjęcie, to do naszego komputera nie zostaje ono przesłane jako jeden cały plik, tylko jest podzielone na mniejsze części, które są na tyle niewielkie, że można je szybko przesłać. To proces niejawny i w pełni zautomatyzowany. Na docelowym komputerze te pakiety danych są składane z powrotem i w ten sposób plik możemy ponownie otworzyć.

Protokół TCP wysyła segmenty w sposób ostrożny – na początek kilka segmentów, później, gdy otrzyma odpowiedź od odbiorcy, że pakiety dotarły, wysyła kolejną, tym razem większą partię. Ta technika zwana Slow-Start zapobiega przepełnieniu sieci internetowej, uniemożliwiając przesłanie większej ilości danych niż sieć jest w stanie przyjąć.

Jest to najbardziej widoczne w chwili, kiedy zaczynamy pobierać jakikolwiek duży plik z sieci. Nigdy nie ma sytuacji, w której pobieralibyśmy taki plik z pełną prędkością, jaką deklaruje nasz dostawca – transfer musi "się rozkręcić".

Slow-Start niestety bardzo skutecznie ogranicza zalety posiadania szybkiego łącza internetowego w przypadku pobierania stron internetowych. Ponieważ niezbędne zasoby do pobrania nie są zazwyczaj dużych rozmiarów, przeglądarka nie zdąży się rozkręcić, aby skorzystać z pełnej przepustowości łącza.

Dlaczego w ogóle korzysta się z techniki Slow-Start? Otóż 17 lat temu, kiedy protokół powstawał, sieć internetowa nie była tak rozbudowania jak teraz. Nikt się chyba nie spodziewał, do jakich rozmiarów rozrośnie się Internet, dlatego też nie przewidziano możliwości wyłączenia tego.

Większość plików, jakich potrzebuje przeglądarka, żeby wyświetlić stronę internetową, ma możliwość ponownego wykorzystania, czy to w obrębie całego serwisu, czy pojedynczej strony. Dla przykładu: za pomocą jednego pliku CSS można określić wygląd wszystkich elementów strony internetowej. Ten plik jest pobierany przez przeglądarkę na każdej podstronie serwisu.

Gdyby tak pobrać ten plik tylko przy pierwszym wejściu na stronę i przechowywać gdzieś na naszym komputerze… Oznaczałoby to, że nie będzie trzeba tego pliku pobierać ponownie przy przejściu na kolejną podstronę.

I takie rozwiązanie jak najbardziej istnieje – nazywa się właśnie cache´owaniem.

Przechowywanie podręczne – pamięć podręczna (ang. cache) jest pewną formą buforowania, której celem jest poprawa efektywności realizacji operacji. Polega na gromadzeniu kopii danych w pamięci w celu poprawy efektywności ich przetwarzania

Pamięć podręczna (ang. cache) – mechanizm, w którym część spośród danych zgromadzonych w źródłach o długim czasie dostępu i niższej przepustowości jest dodatkowo przechowywana w pamięci o lepszych parametrach. Ma to na celu poprawę szybkości dostępu do tych informacji, które przypuszczalnie będą potrzebne w najbliższej przyszłości.

Informację na temat możliwości cache´owania konfiguruje się zazwyczaj po stronie serwera. W moich rozważaniach skupimy się na najpopularniejszym chyba systemie serwerowym, jaki oferują hostingodawcy – Apache. Istnieją oczywiście inne rozwiązania umożliwiające hosting stron internetowych jak nginx, jednak w naszym przypadku oprzemy się właśnie na Apache.

Za pomocą małego pliku o nazwie .htaccess mamy możliwość edytowania konfiguracji Apache dla poszczególnej strony www. Opcję tę musi włączyć hostingodawca, jednak z własnego doświadczenia wiem, że zazwyczaj domyślnie możliwość takiej konfiguracji jest włączona.

Istnieje też kilka technik pozwalających na określenie zasad, na bazie których ma działać cache´owanie w przeglądarce, ja jednak skupię się na sposobie najbardziej wygodnym, w mojej ocenie, dla deweloperów – czyli technice, która określa, jakiego typu jest dany plik (MIME Type) na serwerze oraz w zależności od typu ustala, jak długo ma być ważny. Ale po kolei.

Co to jest MIME type?

Media type, lub zwany inaczej MIME type (…) jest identyfikatorem formatu plików. Identyfikatory te w sposób ogólny mają stanowić podpowiedź jaki typ danych zawiera plik. Taki typ składa się z 2 części – atrybutu określającego ogólny typ danych oraz wartości, która definiuje konkretne rozszerzenie pliku. Pierwotnie stworzony z myślą o załącznikach w mailach z powodzeniem został wykorzystany również w innych zastosowaniach.

Typów MIME jest tyle, ile jest rozszerzeń plików (blisko 2 tysiące), jednak tylko garstka rozszerzeń jest na co dzień wykorzystywana przy budowie stron internetowych.

Krok pierwszy

W pliku .htaccess za pomocą dowolnego edytora tekstu dodajemy następujący kod:

AddType text/html html

AddType text/css css

Co konkretnego wykonaliśmy? Powiedzieliśmy serwerowi, że plik html na serwerze ma być uznawany za plik tekstowy przechowujący kod html. Druga linijka kodu robi to samo, ale w tym przypadku pliki .css będą uznawane za pliki tekstowe przechowujące kod CSS.

W rzeczywistości podstawowe pliki, takie jak .html, .jpg, .gif, .css, w standardowej konfiguracji serwera posiadają już poprawnie skonfigurowane typy MIME. Jednak, dla porównania, pliki fontów pobierane przez przeglądarki już takich oznaczeń w domyślnej konfiguracji mogą nie posiadać, dlatego warto przy okazji skonfigurować wszystkie typy, z jakich możemy w przyszłości skorzystać.

Krok drugi

Dla danego typu MIME należy określić, jaki ma on termin ważności. Tutaj też warto rozważyć, które pliki i z jaką częstotliwością się zmieniają. Jeżeli chodzi o pliki graficzne, w tych zazwyczaj nie widać zmian. Co najwyżej występuje plik o innej nazwie w tym samym miejscu. Pliki CSS nie zmieniają się po odpaleniu serwisu. Mogą występować pewne modyfikacje, ale mają one charakter okresowy, np. co pół roku, kiedy poprawiamy jakiś element strony lub dodajemy coś nowego. Natomiast pliki z rozszerzeniem html mają tendencję do ciągłej zmiany (jak np. strona z najnowszymi wiadomościami ze świata) i takich plików nie powinniśmy cache´ować, jeżeli zależy nam na tym, by użytkownik zawsze widział najnowsze wiadomości.

Żeby określić "datę ważności", należy w pliku .htaccess dodać następującą linijkę kodu:

ExpiresByType text/html "access plus 0 seconds"

ExpiresByType text/css "access plus 1 year"

Za pomocą tego kodu serwer będzie traktować pliki html jako zawsze przeterminowane – przy każdym zapytaniu o dany plik, serwer prześle plik do użytkownika.

Natomiast plik CSS będzie ważny przez rok od momentu pobrania zasobu przez przeglądarkę. W przypadku ponownego zapytania o ten plik, serwer wyśle odpowiedź: "Hej, ten plik już kiedyś pobrałeś, nadal go masz, więc skorzystaj ze swojej kopii!".

Bardziej technicznie mówiąc: zostanie zwrócony kod 304 not modified, w odróżnieniu do nie cache´owanych zasobów, dla których zazwyczaj zwracany jest kod 200 OK (przesłano zawartość pliku).

No dobra, ale co nam to daje?

Dobrze skonfigurowany serwer sprawia, że przy kolejnym wejściu na niego nie będzie trzeba ściągać całej zawartości strony. Dla przykładu: ta strona, którą właśnie czytasz, składa się z około 125 zasobów pobieranych przez przeglądarkę. Jeżeli nie jest to twój pierwszy artykuł na tym blogu, to jest szansa, że kiedy tutaj się znalazłeś, przeglądarka musiała pobrać na nowo tylko 27 z 125 plików, ponieważ pozostałe były w pamięci podręcznej komputera. 

Optymalizacja kodu strony internetowej to nie tylko kwestia estetyki, ale także szybkości ładowania co wspomaga pozycjonowanie strony https://widzialni.pl/pozycjonowanie/. Wykorzystanie cache´owania i właściwa konfiguracja MIME Type może zredukować czas ładowania witryny, poprawiając tym samym doświadczenie użytkownika. Pamiętaj o tych kluczowych elementach, gdy planujesz lub analizujesz strukturę kodu swojej strony internetowej, by zapewnić nie tylko atrakcyjny wygląd, ale także efektywną działalność od strony technicznej.