Szybkość
Głośność
require(#20) - Tricki na optymalizację stron
Pobierz odcinek 💾Odcinek na YouTube 📺Przesłuchaj na Spotify 🎧W tym odcinku prezentujemy wybrane przez nas techniki, pozwalające na przyspieszanie stron internetowych. Koncenturjemy się na prostych i łatwych w zaimplementowaniu rozwiązaniach, więc na pewno na każdą stronę znajdzie się coś, co pozwoli usprawnić jej wydajność.
Szybkie nowości
- Deno 1.4 https://deno.land/posts/v1.4
- GitHub CLI https://github.blog/2020-09-17-github-cli-1-0-is-now-available/
- Vue 3 https://github.com/vuejs/vue-next/releases/tag/v3.0.0
Linki i notatki
Caching
- Cachowanie assetów i
Cache-Control - Cloudflare https://www.cloudflare.com/
- Cachowanie requestów w
localStorage
Optymalizacja kodu strony
- Minifikuj pliki strony
- Ładowanie skryptów,
asyncvsdefer - Preloading
- Usuwaj nieużywany kod, nie powielaj jego wielu podobnych fragmentów
- Korzystaj z module bundlerów oraz z Tree Shakingu
Obrazki
- Wybierz odpowiedni format pliku - JPEG, PNG, GIF, WEBP
- Możesz dostosować rozmiar obrazka względem rozmiaru ekranu, korzystając z tagu
<picture> - Imagemin:
- Blurhash https://github.com/woltapp/blurhash
- Korzystaj z SVG
svgo- optimizer do plików SVG https://github.com/svg/svgo
Lazy loading
- Lazy loading kodu
- Lazy loading assetów:
<img loading="lazy">- Intersection Observer API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
- https://www.npmjs.com/package/lozad
Inne pro-tipy
- Przy ładowaniu czcionek, korzystaj tylko z tych subsetów, których potrzebujesz
- Korzystając z gotowych setów ikonek, ładuj tylko te ikony, z których korzystasz
Co zrobi te rzeczy za nas?
- Gatsby.js https://www.gatsbyjs.com/
- Prerendering
- Prefetching stron przez przekierowaniem
- Optymalizacja obrazków z
gatsby-imagehttps://www.gatsbyjs.com/plugins/gatsby-image/
- Next.js
- SSR