Pytanie rekrutacyjne nr 2: Jak optymalizowałbyś zasoby strony internetowej? — JavaScript Developer

• 5 minut

Czas odpowiedzieć na kolejne pytanie rekrutacyjne. Tym razem jest ono związane z optymalizacją. Jakie znacie techniki optymalizacyjne? Opowiem Wam o kilku, które znam, a które w tym momencie przychodzą mi do głowy.

Moja odpowiedź

Jeśli chodzi o techniki optymalizacji, jakie można wprowadzić do strony, to jest ich mnóstwo. Przygotowałem dla Was ponad 20 pomysłów, aby zoptymalizować zasoby strony internetowej.

Obrazki

  • Technika CSS Sprites — aby wyeliminować zapytania HTTP za każdym razem, gdy strona będzie chciała wyświetlić malutką ikonkę, można obrazki połączyć w jeden duży plik. Przy HTTP/2 i HTTP/3 wiele małych zapytań kosztuje niewiele, więc zysk z tej techniki jest dziś niewielki. Więcej

  • Ikony można załączyć w formie fontu, zbudowanego np. za pomocą Fontello, ale ta technika ma wady: czytniki ekranu potrafią odczytać ikonę jako przypadkowy znak, a do czasu załadowania fontu w miejscu ikony widać pusty kwadrat. Więcej

  • Lepszym pomysłem jest wykorzystanie SVG i używanie ikonek jako specjalnie zbudowanych obrazów wektorowych (np. osadzonych w HTML albo zebranych w jednym pliku jako <symbol>). Więcej

  • Wykorzystanie Base64 zamiast bitmap, ale tylko dla bardzo małych obrazków: zakodowany plik jest o ok. 1/3 większy i nie da się go osobno zapisać w cache przeglądarki. Więcej

  • Optymalizacja plików JPG, PNG za pomocą narzędzia ImageOptim redukując delikatnie jakość pliku. Więcej

  • Jeśli musi obrazek musi być bitmapą to wykorzystać nowoczesny format, czyli WebP albo AVIF (z JPG jako zapasem w znaczniku <picture>), z uwagi na możliwość zastosowania dużej kompresji obrazu, redukując tym samym jego wielkość. PNG zostaw dla grafik z przezroczystością. Więcej

  • Zredukowanie wymiarów obrazków do takich, jakie są wykorzystane podczas prezentacji na stronie (uniknąć skalowania w dół). Więcej

CSS: Warstwa arkuszy stylów kaskadowych

  • Spakowanie plików *.css do jednego, aby wyeliminować dużą ilość zapytań HTTP. Przy HTTP/2 nie trzeba z tym przesadzać: jeden ogromny plik unieważnia cache przy każdej, nawet drobnej zmianie. Więcej

  • Usunięcie nieużywanych selektorów. Do tego celu warto wykorzystać narzędzie “Coverage” w DevToolsach przeglądarki Google Chrome. Więcej

  • Nie używać składni @import w plikach *.css. Więcej

JavaScript: Warstwa zdefiniowania logiki aplikacji po stronie przeglądarki

  • Łączenie plików *.js w paczki (bundling), ale z podziałem na mniejsze części ładowane wtedy, gdy są potrzebne (code splitting). Więcej

  • Minifikacja kodu (usunięcie białych znaków i komentarzy). Więcej

  • Skracanie nazw zmiennych (ang. mangling), zwykle robione razem z minifikacją. Więcej

  • Usunięcie nieużywanych skryptów. Do tego celu warto wykorzystać narzędzie “Coverage” w DevToolsach przeglądarki Google Chrome. Więcej

  • Osadzenie plików *.js na dole strony (przed zamknięciem body). Więcej

  • Opóźnienie wykonania plików *.js do czasu sparsowania dokumentu za pomocą atrybutu defer. Atrybut async też nie blokuje parsowania, ale uruchamia skrypt zaraz po jego pobraniu, bez zachowania kolejności. Więcej

HTML: Warstwa opisu dokumentu

  • Wykorzystanie znacznika <link rel="preload" href="FILENAME"/> dla zasobów potrzebnych na bieżącej stronie oraz <link rel="prefetch" href="FILENAME"/> dla zasobów, które przydadzą się na następnej stronie. Więcej

  • Poinformowanie przeglądarkę, żeby rozwiązała DNS do często wykorzystywanych zasobów z konkretnej domeny. Nie ma sensu podawać adresy do takich gigantów jak: Google, Facebook, czy Twitter.

    Przykład: <link rel="dns-prefetch" href="http://example-domain.com/">

    Więcej

Komunikacja z serwerem

  • Wsparcie przesyłania danych spakowanych za pomocą algorytmu GZIP. Więcej

  • Wykorzystanie protokołu HTTP/2, który przesyła wiele zapytań i odpowiedzi równolegle w ramach jednego połączenia (multipleksowanie). Każdy plik dalej ma własną odpowiedź, ale wyeliminujemy w ten sposób nawiązywanie połączenia za każdym razem po zasób. Więcej

  • Kiedy komunikujemy się za pomocą RESTa, to możemy dostawać “zbyt duże” odpowiedzi, tj. dostaniemy także te dane, których nie potrzebujemy. Rozwiązaniem na sytuację, jest wykorzystanie technologi GraphQL, która to oczekuje od klienta dokładnej struktury, jaka powinna zostać zwrócona przez serwer. Więcej

Infrastruktura (konfiguracja web serwera)

  • Włączenie nagłówków Cache-Control, aby wyeliminować pytanie przeglądarki po zasób za każdym razem, kiedy tylko będzie taka definicja na stronie. Więcej

  • Wykorzystanie serwerów CDN, które mają skrócić czas dostępu do plików statycznych (obrazków, *.css, *.js, *.html, itp.). Więcej

Baner promujący artykuł

Rozwiązania społeczności

  • Dominik Szczepaniak via Facebook

    Przede wszystkim optymalizacja obrazów, plików audio i video - to waży zdecydowanie najwięcej. Oprócz tego minifikacja stylów i skryptów. Można też wykorzystać kompresję GZIP. Część skryptów i arkuszy CSS można podpiąć korzystając z CDN.

•

Ogłoszenie

Dziś o 9:00 na fanpage-u zostało opublikowane 8. pytanie z serii pytań rekrutacyjnych zadawanych przeze mnie na rozmowach rekrutacyjnych, które prowadzę.

Zapraszam do dzielenia się swoimi odpowiedziami!

Cya! 👋