Polski frontend

Piotr Kowalski — JavaScript, Front-end oraz Node.js

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

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.

#pytanie 🎓 #rekrutacjaDrugie pytanie na poziomie podstawowym:Jak optymalizowałbyś zasoby strony internetowej? pic.twitter.com/ROdUPjucGp

— Piotr ❄️ (@piecioshka) December 5, 2018 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 czcionki, 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 nie generować 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 znacznika body).

Więcej

Opóźnienie ładowanie plików za pomocą atrybutu async.

Więcej

HTML: Warstwa opisu dokumentu

Wykorzystanie znacznika <link red="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, bez 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 (Content Delivery Network), które mają skrócić czas dostępu do plików statycznych (obrazki, pliki *.css, *.js, *.html, itp).

Więcej

Rozwiązania społeczności Maciek Głowacki via Twitter

-minifikacja plików,-łączenie skryptów w jeden plik, aby ograniczyć ilość zapytań do serwera,-optymalizacja grafik (np. przez tinypng),-odpowiednia kompresja/format plików wideo-ustawienia cache po stronie serwera

— Maciek Glowacki (@maciek_dev) December 5, 2018

Dominik Szczepaniak

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!

:wq