Optymalizacja nowej strony Racy Mind

19 grudnia 2019

Tworząc nową stronę Racy Mind zależało nam na 2 rzeczach. Na zmianie formy komunikacji oraz na optymalizacji strony www. W testach PageSpeed Insights udało się uzyskać wyniki 90+. Z kolei w GTmetrix uzyskaliśmy ponad 80%. Jak tego dokonaliśmy?

Optymalizacja nowej strony Racy Mind

Graika pochodzi z freepik.com

Grafiki svg I webp

Motywem przewodnim naszego nowego szablonu są ilustracje. Gdybyśmy chcieli zapisać je standardowo w png każda z nich ważyłaby po około 150 KB. Dodając kilka grafik na 1 stronie wszystko ważyłoby ponad megabajt. Dlatego, zamiast png, wykorzystaliśmy wektorowy format svg. Format ten jest obsługiwany przez wszystkie nowe przeglądarki. Tworzenie grafiki odbywa się na urządzeniu użytkownika, a sam plik waży około 20 KB, czyli prawie 8 razy mniej. Znacząca różnica.

Zdjęć czy zrzutów ekranu nie da się zapisać w wektorze, ale tutaj też są możliwości optymalizacji. Wystarczy wykorzystać nowy format webp. Jest on dedykowany stronom internetowym. Pozwala zwiększyć kompresję o kilkadziesiąt procent bez straty na jakości.

Tak na marginesie. Warto pamiętać też o dopasowaniu rozdzielczości zdjęć do potrzeb. Często widzę w galeriach obrazki o wymiarach 4000 na 4000 pikseli. Zajmują one po kilka megabajtów, a w większości przypadków wystarczą grafiki o maksymalnym wymiarze 800 pikseli.

Leniwe ładowanie grafik

Najbardziej obciążającymi elementami strony www są bez wątpienia obrazki. Żeby ograniczyć ich negatywny wpływ, wykorzystuje się technikę lazy load. Normalnie wszystkie obrazki są wczytywane podczas ładowania strony. Wykorzystując lazy load dodaje się mechanizm, dzięki któremu obrazki wczytywane są na żądanie. Użytkownik przewija stronę i grafiki są doczytywane w momencie, gdy mają się pokazać na ekranie.

Optymalizacja kodu, kompresja gzip, użycie cache

Za powolne wczytywanie strony odpowiadają w znacznej mierze obrazki, ale można nieco przyspieszyć stronę optymalizując inne aspekty.

Na serwerze włączyliśmy kompresję gzip. Dzięki temu dane przesyłane z serwera są skompresowane, co wpływa pozytywnie na szybkość przesyłania.

Obrazki, pliki CSS i JS nie zmieniają się zbyt często po stworzeniu strony internetowej. Dlatego włączyliśmy ich cache’owanie. Zamiast każdorazowego pobierania z komputera, zostaną pobrane tylko przy 1 wczytaniu. Potem będą wczytywane z pamięci urządzenia.

No i oczywiście zadbaliśmy o jakość kodu. Im mniej zapytań do bazy danych, tym lepiej. Pamiętaliśmy również o minimalizacji kodu CSS / JS. Są to rzeczy, o których każdy web developer powinien pamiętać 🙂