Ta strona używa cookies
sprawdź politykę prywatności

Rozumiem

Komentarze

Polecane

Wydajność aplikacji. Czy semantyczny HTML ma na to wpływ?

html teoria

8/8/2018

Bartek Cis

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:

MAKER

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 🙂

Podziel się z innymi 🙂

Bartek Cis

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?

html teoria

Cześć jestem Bartek.

Na tym blogu wprowadzę Cię w tajniki Front-Endu i programowania webowego.

Warto