PWA

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

• 4 minuty

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. Więcej

  • Obecnie lepszą techniką do wykorzystywania ikono-grafik, jest załączenie ich w formie fontu, zbudowanej np. za pomocą Fontello. Więcej

  • Kolejnym pomysłem, jest wykorzystanie SVG i używanie ikonek jako specjalnie zbudowanych obrazów wektorowych. Więcej

  • Wykorzystanie Base64 zamiast bitmap. 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ć format JPG, z uwagi na możliwość zastosowania dużej kompresji obrazu, redukując tym samym jego wielkość. 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 wszystkich plików *.css do jednego, aby wyeliminować dużą ilość zapytań HTTP. 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 jeden. Więcej

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

  • Obfuskacja kodu (zastąpienie długich nazw zmiennych, krótkimi). 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 ładowanie plików *.js za pomocą atrybutu async. Więcej

HTML: Warstwa opisu dokumentu

  • Wykorzystanie znacznika <link rel="prefetch" href="FILENAME"/>. 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/">

    Aby sprawdzić, czy jakie adresy przeglądarka już sobie rozwiązała, należy w Google Chrome wejść na adres: chrome://net-internals/#dns

    Limit przechowywanych rozwiązanych adresów wynosi 1000 sztuk. Więcej

Komunikacja z serwerem

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

  • Wykorzystanie protokołu HTTP/2, który jest w stanie zwrócić kilka plików, w jednym responsie. Wyeliminujemy w ten sposób, nawiązywania 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!