Wydajność aplikacji. Czy semantyczny HTML ma na to wpływ?
Czy wiesz czym jest semantyczny HTML? Pewnie tak bo dla Web Developera to chleb powszedni (chyba, że nim nie jesteś to wtedy ten artykuł Ci to wytłumaczy). Ale czy zastanawiałeś/aś się czy ma on jakikolwiek wpływ na wydajność aplikacji? Jeśli tak, to jaki? Zapraszam do lektury.
Czego się dzisiaj dowiesz?
Na początku wytłumaczę czym jest semantyczny (semantic) HTML i po co został wymyślony. Nawiążę przy tym do pojęć takich jak accessibility i SEO. Następnie przeprowadzę test przy użyciu narzędzia do określania szybkości stron mający na celu sprawdzić, czy strona napisana semantycznym HTMLem jest szybsza. Na końcu krótka analiza tego, jakie czynniki mają wpływ na wydajność aplikacji. Dużo ciekawych rzeczy 🙂
Dlaczego o tym piszę?
Od dawna mnie to pytanie nurtowało: Czy semantyczny HTML jest szybszy? Pozornie mało istotna kwestia ale sukcesywnie drążyła moją świadomość. W końcu nadszedł ten czas… Rozstrzygnę to raz na zawsze. Przeprowadzę test…
Oczywiście dzisiejszy test nie jest ostateczną odpowiedzią na poruszane zagadnienie jednak zawsze to mały krok w kierunku budowy swojej bazy wiedzy.
Czym jest semantyczny HTML?
Koncepcja semantycznego HTML’a dojrzewała aby ujrzeć swoją współczesną odsłonę w HTML 5. O co chodzi?
Jak wiemy kod HTML ma za zadanie zbudować strukturę aplikacji, drzewo DOM. Ową strukturę tworzy się za pomocą tagów HTML które najczęściej mają postać <exampletag> </exampletag>.
Do głównych tagów tworzących trzon aplikacji należą odpowiednio:
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
Powyżej widać, że wewnątrz tagu <head> znajdują się tzw. metatagi określające rozmaite właściwości aplikacji. Cała sztuka zaczyna się przy tworzeniu wnętrza tagu <body> bo właśnie tam buduje się właściwy program. Do akcji może wtedy wkroczyć semantyczny HTML…
Semantyczny HTML
Semantyczny HTML to kod napisany za pomocą tagów które mają określone znaczenie i mogą być odpowiednio interpretowane przez przeglądarkę i developera. Dla odróżnienia tagi które nie są semantyczne są obojętne tzn. nie mówią wprost nic na temat swojej zawartości.
No to jakie tagi są semantyczne a jakie nie?
Tagi nie-semantyczne
Do tej grupy należy np. bardzo popularny <div> </div> lub <span> </span>
<div>
<span>A</span>
<span>B</span>
<span>C</span>
</div>
Tagi semantyczne
Tu mamy zdecydowanie większy wybór np:
<header>
<figure></figure>
<details></details>
</header>
<nav></nav>
<article>
<aside></aside>
</article>
<section>
<summary></summary>
</section>
<footer>
<mark></mark>
</footer>
W zasadzie używanie tagów jest dość intuicyjne bo np. większą zawartość tekstową możesz umieścić w tagu <article>, grafiki, obrazy np. w <figure> itp…
Chcę więcej tagów!
Jeśli chcesz sprawdzić wszystkie tagi dostępne w HTML 5 to sprawdź np. TUTAJ.
Accessibility i SEO
Dwoma kluczowymi zagadnieniami które wymienia się jako beneficjentów semantycznego HTML’a są accessibility i SEO. Czym one są?
SEO czyli Search Engine Optimization jest zbiorem dobrych praktyk które mają na celu polepszenie wyników osiąganych w wyszukiwarkach internetowych. Po prostu jak być jak najwyżej w wyszukiwaniu w Google. Napisałem o tym osobny artykuł.
Accessibility (pl. dostępność) to tworzenie aplikacji w sposób który jest łatwy do interpretacji dla przeglądarki i/lub specjalnych urządzeń przystosowanych przez osoby niepełnosprawne. Po prostu przeglądarka wie kiedy ma do czynienia z obrazkiem, nawigacją czy artykułem. Więcej informacji na ten temat można znaleść np. TUTAJ.
Czy semantyczny HTML wpływa na szybkość aplikacji?
Jak widać to enigmatyczne hasło w istocie kryje pod sobą prosty kod. Więc skoro wiemy już z czym mamy do czynienia to zmierzmy się z sednem dzisiejszego wpisu. Czy semantyczne tagi przyśpieszają działanie aplikacji?
Prosty eksperyment
Przeprowadzę prosty test tzn. porównam dwie wersje tej samej strony. Pierwsza nie będzie napisana semantycznie, druga już tak.
Na tapetę wezmę proste PSD które zakodziłem dawno temu. Stronka wygląda tak:
Teraz czas na kod.
Nie-semantyczny kod
W tym wypadku użyłem niemal samych tagów <div>, jest też trochę nagłówków i linków. Ciekawostką jest to, że zastąpiłem wektory o tagach <svg> divami i grafiki wciąż działają…
TUTAJ możesz zobaczyć tą wersję na Githubie
Semantyczny kod
Tym razem starałem się zastąpić wszystkie divy odpowiednimi tagami. Można dyskutować na temat dobrych praktyk przy wyborze konkretnych tagów jednak nie o to tu chodzi.
Wersja kodu TUTAJ.
Porównanie szybkości strony
Do analizy szybkości strony służy wiele narzędzi. Dość szybkim narzędziem jest np. Google Speed Test jednak jego statystyki wyników są dość ogólne. Dlatego bardzo spodobał mi się…
GTmetrix
Ich serwery są zazwyczaj przeładowane więc na analizę należy poczekać kilka minut jednak… warto bo aplikacja pięknie wypisuje co należy poprawić aby przyśpieszyć naszą stronę. Mi się podoba.
Wyniki analizy
Poniżej zrzuty z ekranu:
Nie-semantyczny kod
Semantyczny kod
Komentarz
Obydwa rezultaty są TAKIE SAME! Czyżby semantyczny HTML nie miał żadnego wpływu na wydajność?
Plik HTML
Idąc dalej tym tropem czas sprawdzić o co chodzi… Test pokazał mi też taki komunikat:
Czyli aby nieco przyśpieszyć tą stronę mogę zminifikować plik .html i wtedy oszczędzę 35B. Jednak dostałem też informację, że ten manewr ma niski priorytet czyli nie ugram w ten sposób zbyt wiele…
No ale jednak rozmiar pliku ma znaczenie…
Rozmiar pliku .html
Porównując dwa przypadki semantyczny plik ma 21 889 B a nie-semantyczny 21 830 B więc różnica jest minimalna. W tym wypadku można uznać tą różnicę za marginalną i nie wpływa ona znacząco na wydajność aplikacji.
Wnioski z analizy
Semantyczne tagi są mimo wszystko dłuższe niż <divy> i ich odwzorowanie zajmuje więcej bitów/bajtów. Przy rozbudowanych aplikacjach różnica może się zwiększać jednak można ogólnie stwierdzić, że semantyczny HTML ma teoretycznie negatywny wpływ na szybkość aplikacji lecz w praktyce ten wpływ jest marginalny i można go pominąć.
Więc co ma realny wpływ na szybkość aplikacji?
No właśnie… Podzieliłbym to na 3 kategorie:
Czynniki ilościowe
Czyli wszystko co związane z ostatecznym rozmiarem aplikacji np.
- Minifikacja/konkatenacja plików .html, .css, .js etc.
- Dostosowywyanie rozmiaru grafik rasterowych (.jpg, .png itp.) i ich optymalizacja
- Użycie grafik wektorowych
…
Czynniki jakościowe
Czyli dbanie o jakość naszego kodu np.
- Nie powtarzanie zbędnego kodu przez co pliki są mniejsze
- Tree shaking i usuwanie zbędnych części kodu
- Tworzenie buildów produkcyjnych redukujących rozmiar aplikacji
- Dbanie o zmiejszenie złożoności obliczeniowej poprzez stosowanie optymalnych algorytmów.
…
Czynniki sieciowe
Zakładając, że sieć/internet działa prawidłowo i dane mogą być swobodnie przesyłane:
- Ograniczenie ilości potrzebnych żądań (np. GET/POST) przy ładowaniu strony.
- Użycie pamięci podręcznej cache
- Stosowanie różnych asynchronicznych technik ładowania danych np. lazy loading
- Kompresja gzip
…
To by były tylko te najbardziej oczywiste punkty. Wydajność aplikacji jako taka może być traktowana jako osobna dziedzina wiedzy ale mam nadzieję, że ten wpis choć trochę zainteresował Cię tematem 🙂
Podsumowanie
Semantyczny HTML w praktyce nie ma wielkiego wpływu na wydajność aplikacji internetowych jednak odpowiednio skonstruowany kod pozwala na dotarcie do większej liczby użytkowników. Co najważniejsze używając tej techniki możesz dotrzeć do tych, którzy często inspirują wolą walki i siłą swojego charakteru.
Jeśli ten wpis zawiera jakieś błędy logiczne lub techniczne napisz to proszę w komentarzu 🙂
Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?
Cześć jestem Bartek.
Na tym blogu wprowadzę Cię w tajniki Front-Endu i programowania webowego.