Troszkę paradoksalny jest fakt, że kod HTML rzadko kiedy jest w centrum uwagi przy optymalizacji szybkości i wydajności stron internetowych. Jak wiadomo, jest to fundament stron internetowych. To właśnie kod HTML jest parsowany, przekształcany na drzewo DOM, które jest punktem wyjściowym do skonstruowania CSSOM. Na podstawie CSSOM przeglądarka wylicza pozycję i rozmiar poszczególnych elementów i tak dalej…

HTML można optymalizować pod kątem wydajności na wiele sposobów. Wszelkie techniki optymalizacyjne HTML mają tak naprawdę jeden cel – dążenie do możliwie największej prostoty i małego rozmiaru. Preferowana prostota dotyczy zarówno samego kodu HTML który jest zapisany za pomocą tekstu jak i całej abstrakcyjnej struktury DOM, która jest tworzona za pomocą poszczególnych znaczników i atrybutów.

Nie należy lekceważyć drobnostek, bo od nich zależy doskonałość.

Michał Anioł

Usuwanie komentarzy

Jedną z najbardziej oczywistych technik optymalizacji HTML jest usunięcie komentarzy. Bezpośrednio w kodzie HTML można umieścić zarówno komentarze HTML:

<!-- Tu jest komentarz HTML -->

Komentarze CSS:

<style>
   h2 {font - size:24px} /* Nagłówek drugiego stopnia */
</style>

Oraz komentarze JavaSript

<script>
/* Komentarz 
w wielu liniach */
// Komentarz w jednej linii
</script>

Komentarze co prawda mogą zawierać przydatne uwagi dla deweloperów aby można było łatwiej utrzymywać kod. W najczęstszych przypadkach nie są jednak potrzebne w produkcyjnej wersji strony. Można je śmiało usunąć bo nie wpływają na interpretację przez przeglądarkę.

Czy warto usuwać komentarze z kodu HTML? Tak, bo ma to same zalety. Oczywiście, usunięcie kilku znaków nie będzie zauważalne z perspektywy użytkownika jednak gdybyśmy dysponowali bardzo dokładnym testem prędkości wczytywania, odchudzenie kodu HTML o kilkadziesiąt znaków powinno być już zauważalne. Wymierne korzyści z tej techniki optymalizacyjnej można osiągnąć poprzez usunięcie sporych bloków – takich jak np. tego typu ASCII Art dołączany do każdej podstrony:

ASCII Art w formie komentarza na stronie znanej marki odzieżowej 🙂

Minifikacja kodu HTML

Tak samo jak w przypadku kodu CSS i JS, kod HTML także można minimalizować (minifikować). Polega to na usunięciu nadmiarowych spacji, tabulatorów i znaków nowej linii, które tak samo jak komentarze – nie wpływają na finalną interpretację przez przeglądarkę.

Minifikację kodu HTML można wykonać:

  • ręcznie przy ładowaniu plików na serwer statyczny,
  • w CMSie
  • lub po stronie serwera za pomocą modułu PageSpeed

Czytaj więcej o odchudzaniu, czyli minifikacji (minimalizacji) kodu HTML, CSS i JavaScript.

Kompresja GZIP

Zwracany przez serwer kod HTML można kompresować za pomocą standardowych technik kompresji jaką jest deflate i GZIP. Kompresja danych jest możliwa dzięki specjalnym algorytmom, które potrafią wyłapać powtórzenia i schematy aby za pomocą krótszego zapisu odwzorować oryginalną zawartość.

Serwer przed wysłaniem kompresuje dane a przeglądarka przed interpretacje je dekompresuje. Choć kompresowanie i dekompresowanie wymaga poświęcenia zasobów przez obie strony, w obecnym postepie technologcznym i przy aktualnych szybkościach procesorów jest to opłacalne czasowo, ponieważ dłużej zajęłaby transmisja nieskompresowanych danych. Kompresja GZIP może zaoszczędzić aż ok. 70% rozmiaru.

Czytaj więcej jak kompresować dane tekstowe za pomocą GZIP i deflate.

Pamięć podręczna dla HTML (Cache)

Tak samo jak przechowujemy obrazki i pliki CSS / JS w pamięci podręcznej przeglądarki, tak samo możemy przechowywać tymczasowo cały kod HTML konkretnej podstrony.

Służą do tego nagłówki:

Cache-Control

Cache-Control: max-age=3600

ETag

ETag: "32a28df551425fcc11e4d42a148795d9f24f88d2"

Last Modified

Last-Modified: Wed, 07 Jul 2020 14:20:00 GMT

Uproszczanie i skracanie drzewa DOM

Całkiem inną techniką jest upraszczanie drzewa DOM. Ingerencja w kod pod tym kątem wpływa już na interpretację ale niekoniecznie będzie wpływać na wygląd czy funkcjonalność.

W przypadku licznych elementów, można wyświetlić kilka pierwszych i umożliwić załadowanie kolejnych za pomocą AJAX lub przekierować do specjalnej strony. To samo tyczy się kodu Pop-Upów, które zamiast być załadowane „na zapas” mogą być asynchronicznie pobieranie dopiero w momencie kiedy mają zostać wyświetlone.

Unikanie deklaracji stylów inline

HTML pozwala na dołączanie stylów jeszcze w jeden sposób – wewnątrz znacznika za pomocą atrybutu style np:

<div style="padding:8px, border:1px solid #333">

Technika ta może być wygodna w przypadku dynamicznych elementów, jednak w każdej innej sytuacji warto zastąpić styl in-line dołączając te parę linijek do pliku CSS, który jak pamiętamy może się zapisać w pamięci podręcznej i przyspieszyć wczytywanie się strony w przypadku ponownych wyświetleń.

Przycinanie adresów URL

Choć jest to dość rzadko spotykana technika, pozwala w łatwy sposób zaoszczędzić kilkanaście a nawet kilkadziesiąt bajtów na jednej podstronie. Polega ona na tym, że adresy URL rozpoczynające się od https:// można zamienić na dwa ukośniki” //.

Adres:

https://mansfeld.pl

jest równoznaczny z:

//mansfeld.pl

To jaki zostanie użyty protokół http lub https zależy od strony odsyłającej. Ponieważ obecnie i tak większość stron ma włączony SSL a adresy rozpoczynające się od HTTP są przekierowywane na adresy HTTPS, nie powinno to generować żadnych problemów.

Moduł PageSpeed, o którym wspominałem wcześniej jest w stanie zastąpić wszystkie adresy URL na krótsze odpowiedniki. Z techniki tej można skorzystać zarówno przy atrybutach href jak i src.

Usunięcie cudzysłowów z wartości atrybutów

Taką możliwość mamy do wykorzystania w przypadku dokumentów zgodnych z HTML5. XHTML wymagał używania cudzysłowów dla wartości atrybutów ale w HTML5 został ten wymóg zniesiony. Choć często spotykamy taką syntaksę:

<img src="obrazek.jpg" alt="Opis obrazka" width="300" height="180" loading="lazy">

Równie poprawny jest zapis:

<img src=obrazek.jpg alt="Opis obrazka" width=300 height=180 loading=lazy>

Cudzysłów możemy opuścić, jeżeli przy pierwszym wystąpieniu wartości użyliśmy cudzysłowów oraz wartość nie zawiera spacji i ani znaków specjalnych. Taki zapis nie dość, że pozwala zaoszczędzić dodatkowe miejsce, powoduje większą efektywność kompresji GZIP poprzez kanonikalizację tekstualnej reprezentacji par klucz=wartość.

Usunięcie domyślnych wartości w atrybutach

Czasem możemy się spotkać z dołączaniem wartości domyślnych w często używanych atrybutach:

<button name="submit" disabled="disabled">

To samo dotyczy required, selected i paru innych atrybutów. Taki zapis jest przez przeglądarki traktowany dokładnie tak samo:

<button name="submit" disabled>

Posługując się HTML5 nie ma przeciwskazań do takiego skróconego zapisu. Podobnie sprawa ma się z:

<form method="get">

Tak naprawdę wystarczy samo:

<form>

Należy tylko pamiętać, że praktyka taka nie jest zgodna ze specyfikacją XHTML, jednak obecnie, w praktyce nie ma to żadnego znaczenia.

Wydzielenie niekrytycznego stylu CSS do osobnych plików

Ładowanie stylu CSS do osobnego pliku blokuje renderowanie. Nie ma sensu natomaist ładować wszystkich stylów CSS do kodu HTML bo osiągniemy efekt odwrotny do zamierzonego.

Tylko krytyczny CSS o stosunkowo małej objętości (kilkadziesiąt kilobajtów) można załadować w nagłówku za pomocą znacznika <style>. Całą resztę można dołączyć za pomocą:

<link rel="stylesheet" href="styles.css">

Warto też rozważyć wykorzystanie techniki opóźnienia ładowania, która nie blokuje renderowania, o której możesz przeczytać w artykule: Optymalizacja CSS.

Wydzielenie skryptów do osobnych plików

Tak samo sprawa się ma ze skryptami JavaScript. Zamiast dołączać cały kod do strony HTML, można je wydzielić do osobnych plików. Ma to sens tylko w przypadku dużych plików dla których możemy użyć atrybutu defer lub async.

Podsumowanie

Jak widać sam kod HTML można optymalizować na wiele sposobów. Najważniejsze techniki to pamięć podręczna i kompresja GZIP. Wiele pozostałych technik znacznie obniża jego czytelność dla człowieka ale pamiętajmy, że przeglądarki zinterpretują go tak samo, zaleta polega na tym, że zrobią to dużo szybciej.

Nawet gdyby była taka potrzeba, skompresowany kod można przywrócić do „ludzkiej” wersji za pomocą narzędzi typu „Prettify”. Większość technik wykona za nas poprawnie skonfigurowany serwer, w wielu wypadkach wystarczy zainstalować i skonfigurować moduł PageSpeed.

Źródła

Oceń artykuł na temat: Optymalizacja kodu HTML
Średnia : 4.9 , Maksymalnie : 5 , Głosów : 13