Be eco be rich be fast – Notatka z nauki

Zanotowałem z tego materiału:

• Systemy informatyczne zużywają coraz więcej prądu (a przez to pieniędzy). Prognozowane jest, że w 2025 roku połowę produkowanego prądu będą zużywały tylko centra danych. Zoptymalizowanie kodu sprawia, że zużywamy mniej prądu, a przez to utrzymanie naszego oprogramowania jest tańsze.
• Wydajność strony ma wpływ na pozycję w rankingu w Google. Z tego względu zwiększenie wydajności aplikacji, może zmniejszyć nakłady na marketing.
• Dłuższe ładowanie strony to realne straty w liczbie przeglądających ją użytkowników. Im szybsza strona, tym więcej użytkowników.
• Sposoby pomiaru strony:
  • Google Lighthouse
  • Core Web Vitals
• Jak można przyspieszyć stronę?
  • Content Delivery Network (CDN) cachować stronę bliżej użytkownika końcowego.
  • Selft Hosting (self hosting zewnętrznych zależności).
  • Optymalizacje obrazków:
    • Zmniejszenie ich rozmiaru bez widocznej straty jakości.
    • Zmiana formatu (np. z JPEG na AVIF) na lżejszy. Nie wszystkie przeglądarki wspierają wszystkie formaty, ale w HTML 5 można określić kilka obrazków jako jeden.
    • Responsives images – rezponsywne obrazki – kilka obrazków różnej wielkości (srcset=”…”) oraz powiedzenie przeglądarce, jak dużo miejsca na zarezerwować na obrazek (sizes=”…”).
    • Lazy loading – loading=”lazy”.
    • Intersection observer.
  • Optymalizacja CSS:
    • Critical CSS – wybierz minimalny zbiór CSS, a resztę usuń.
  • Rezygnacja z ciężkich rzeczy, ale nie będących super potrzebnych – np. karuzela zdjęć.
  • Dwa warianty strony: ze skryptami trakującymi i ze skryptami.
  • Puppeteer
• Testuj wszystkie optymalizacje przed wrzuceniem na produkcję, bo możesz znacząco pogorszyć optymalizację. Przede wszystkim nie zmniejszam wydajności strony!