Image for Jak uzyskać 100pkt. w Google PageSpeed Insights – optymalizacja szybkości ładowania strony.

Jak uzyskać 100pkt. w Google PageSpeed Insights – optymalizacja szybkości ładowania strony.

Czas czytania:

Zbyt długi czas ładowania strony może negatywnie wpłynąć na użytkownika. Od momentu przejścia w link, aż do wygenerowania strony powinno minąć jak najmniej czasu. Każde opóźnienie zwiększa możliwość zniechęcenia się użytkownika do przejrzenia naszych treści. Jak więc przyśpieszyć serwis, a dodatkowo zwiększyć SEO strony? Przyjrzyjmy się poszczególnym elementom i sprawdźmy jak je zoptymalizować na podstawie naszego serwisu.

Zawartość witryny

Kod HTML, arkusze stylów, skrypty JS, czcionki, nagrania wideo, zdjęcia – to wszystko składa się przykładowo na jedną stronę w naszym serwisie. Analogicznie im więcej tym przeglądarka potrzebuje więcej czasu na pobranie wszystkich tych elementów. Przeglądając łączną wielkość plików z podziałem na typ, pierwsze co rzuca się w oczy to wielkość plików graficznych. Zajmują one zdecydowanie najwięcej przestrzeni co znacząco wpływa na czas wczytania strony. Skrypty JS i arkusze stylów może nie są ciężkimi plikami, ale ich ilość i priorytet wczytania przed zawartością strony również znacząco zmniejszają wydajność.

Optymalizacja grafik

Na potrzeby rozwijającego się internetu stworzono format plików JPEG (algorytm kompresji grafik rastrowych), który pozwala zamieszczać dobrej jakości grafiki na naszej stronie przy użyciu mniejszej ilości danych. Niestety JPEG nie obsługuje warstwy alfa, która odpowiedzialna jest za przeźroczystość grafiki. Nowoczesnym formatem jest WebP stworzonym i rozwijanym przez Google, który pozwala wyświetlać grafiki w wysokiej jakości przy użyciu mniejszej wagi pliku. Używając dodatkowo tagu <picture> z warunkiem wyświetlania odpowiednio większego pliku dla rozdzielczości wyświetlaczy tworzymy serwis, który maksymalnie zmniejszy wielkość pobieranych plików graficznych. Dzięki temu użytkownik przeglądający serwis przez telefon będzie pobierał elementy graficzne dużo szybciej niż przez przeglądarkę na komputerze.

Oczywiście przeglądarki, które nie obsługują rozszerzenia .webp (istnieje skrypt JS, który im to umożliwia) wczytają ten sam plik, ale zapisany w innym formacie (np. jpg).

HTML
<picture>
  <source type="image/webp" srcset="image-l.webp" media="(min-width: 640px)">
  <source type="image/webp" srcset="image-m.webp" media="(min-width: 320px)">
  <source type="image/webp" srcset="image-s.webp">
  <source srcset="image-l.jpg" media="(min-width: 640px)">
  <source srcset="image-m.jpg" media="(min-width: 320px)">
  <source srcset="image-s.jpg">
  <img alt="Description of the image" src="image-l.jpg">
</picture>

Nie można tutaj nie wspomnieć o grafikach i animacjach wektorowych w formacie SVG, których jakość jest najwyższa (nawet przy kilkukrotnym przybliżenia), a waga pliku bardzo niska (więcej Co to jest SVG Sprites?).

Stosując standardowe formaty dla grafik (JPEG, PNG), możemy zastosować dodatkową kompresję przy użyciu np. programu ImageMagick, która przy rozważnym stosowaniu pozwala bezstratnie zmniejszyć wagę pliku.

Porównanie kompresji PNG i JPEG (źródło: interactivesearchmarketing.com)

Długie oczekiwanie na pliki JS i CSS

Trzeba przypomnieć, że przeglądarka pobiera pliki umieszczone przy pomocy łączy w HTML (mowa tutaj o CSS i JS), w sposób synchroniczny (jedna operacja w danej chwili). Zmusza to do czekania, zanim zostanie pobrana widoczna część witryny.

Rozwiązaniem dla plików JS jest ich umieszczenie na dole sekcji <body>, dzięki czemu nie będą blokowały renderowania strony.

HTML
<script src="script.js"></script>
</body>

Dla plików CSS rozwiązaniem może być zamieszczenie funkcji loadCSS w sekcji <head>. Odpowiedzialna będzie za pobieranie tych plików asynchronicznie.

JavaScript
(function(w){
    "use strict";
    var loadCSS = function( href, before, media ){

Pamiętać musimy, że w tym wypadku plik CSS, czyli styl naszej strony zostanie zdecydowanie później wczytany, niż treść. Rozwiązaniem tutaj może być użycie Critical CSS, czyli zamieszczenie fragmentu stylu odpowiedzialnego za widoczną część na ekranie w pliku HTML. Te zadanie może za nas wykonać Grunt, albo inny system automatyzacji pracy. Wystarczy dodać wtyczkę grunt-criticalcss i wprowadzić odpowiednie konfiguracje.