Najlepsze praktyki dotyczące projektowania stron internetowych istnieją nie tylko w interfejsie użytkownika. Istnieją również na zapleczu, tam gdzie znajduje się kod. Miejsce umieszczenia arkuszy stylów i skryptów może wpłynąć na sposób ładowania witryny.

Gdzie umieszczać arkusze stylów?

Jeśli chcesz, aby Twoja witryna ładowała się szybciej, umieść swój CSS u góry w sekcji head, a JavaScript u dołu. Dzięki temu przeglądarka może najpierw załadować Twój CSS, aby użytkownicy mogli zobaczyć zawartość witryny. Użytkownicy nie będą wpatrywać się w pustą białą stronę.

Działa to jako wizualna informacja zwrotna, dzięki której użytkownicy czują się tak, jakby strona ładowała się szybciej, niż ma to miejsce w rzeczywistości. Wszystko to dzieje się przed uruchomieniem JavaScript na dole strony.


Nie umieszczaj JavaScirptu przed CSS

Jeśli umieścisz JavaScript na górze strony, a CSS na dole, użytkownicy będą musieli patrzeć na pustą białą stronę, dopóki JavaScript nie zakończy ładowania, ponieważ znaczniki script blokują pobieranie równoległe. Oznacza to, że elementy wizualne witryny nie będą wyświetlane, dopóki JavaScript nie zakończy pobierania. Po jej zakończeniu użytkownicy zobaczą krótki błysk bez stylu i przesunięcie elementów na ekranie.

Zmuszenie użytkowników do czekania na Twoją witrynę i pokazanie im niesformatowanej zawartości nie jest dobrą praktyką UX (ang. doświadczenie użytkownika). Postępuj zgodnie z tą najlepszą praktyką, używając jej w swoim kodzie, a Twoi użytkownicy nie powinni narzekać na szybkość Twojej strony.