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

01/03/2017

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

Czas czytania:

office

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.

Scalanie i minimalizacja plików

Tworząc większy serwis wygodniej i czytelniej posługiwać się kilkoma arkuszami stylów, jak i skryptami. Przygotowując produkcyjną wersję strony, scalmy wszystkie pliki danego typu w jeden (ang. concat), aby maksymalnie zmniejszyć ilość zapytań do serwera. Połączyć można również grafik, z których składa się serwis w jeden większy (Sprite CSS). Dodatkowo zastosujmy minimalizację (ang. minify) dla JS, HTML i CSS, aby pozbyć się z plików białych znaków. Zmniejszy to plik wynikowy o kilka procent.

Konfigurowanie serwera Apache

Również serwer, który obsługuje nasz serwis potrzebuje kilku optymalizacji. W tym celu otwieramy, bądź tworzymy na serwerze w katalogu głównym serwisu plik .htaccess. Posłużymy się zaawansowaną konfiguracją udostępnioną w serwisie GitHub o nazwie Apache Server Configs. W szybki sposób konfiguruje najważniejsze aspekty serwera Apache. Omówmy kilka z nich.

Kompresja GZIP

Pierwsza konfiguracja dotyczyła będzie włączenia kompresji GZIP. Osiąga ona najlepsze wyniki dla zasobów tekstowych (CSS, JavaScript, HTML) więc idealnie dla nas. Wszystkie współczesne przeglądarki odsługują taką kompresję więc warto ją zastosować.

Apache Configuration

<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript image/vnd.microsoft.icon font/opentype application/x-font-ttf application/vnd.ms-fontobject image/svg+xml
</ifModule>

Używanie pamięci podręcznej

Normalnie przeglądarka pobiera wciąż te same stałe elementy dla strony (obrazki, czcionki) gdy użytkownik przegląda serwisie. Aby temu zapobiec wykorzystamy pamieć podręczną, aby stałe elementy wczytywane były z dysku twardego.

Apache Configuration

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 1 month"
</IfModule>

Wynik końcowy

Dzięki wprowadzonym zmianom użytkownicy, bądź potencjalni klienci podejdą z większym entuzjazmem do naszego serwisu ,a przeglądarki internetowe wyżej nas ocenią w swoich wynikach wyszukiwania.

Niestety, niektóre pliki dostarczane przez firmy trzecie (np. googleadservices) będą skutecznie zaniżać nam ocenę serwisu pod kątem wydajności. Są one jednak niezbędne do planowanego prowadzenia firmy.