Kaliop Poland

Optymalizacja strony

Dlaczego optymalizacja strony jest ważna? Czy Twoja strona wymaga optymalizacji oraz jak ją wykonać i naprawić potencjalne problemy.

Dlaczego optymalizacja jest ważna?

Czas ładowania strony jest jednym z najważniejszych elementów user experience, a także jednym z czynników jeśli chodzi o SEO. Obecnie użytkownicy nie mają cierpliwości, żeby czekać na długie ładowanie strony. Ponad 40% użytkowników opuszcza stronę, jeżeli ładuje się ona 3 sekundy lub więcej (źródło). Jeśli strona ładuje się zbyt wolno, tracisz potencjalnych klientów. Wiele osób korzysta także z urządzeń mobilnych, więc ten czynnik ma tutaj jeszcze większe znaczenie.

W poniższym artykule postaram się przybliżyć najczęściej występujące problemy i sposoby ich rozwiązania, co pomoże przyspieszyć stronę i zwiększyć zadowolenie użytkowników z jej korzystania.

Czy moja strona wymaga optymalizacji?

W celu zmierzenia szybkości ładowania strony oraz wyszukania potencjalnych problemów korzystamy z 2 darmowych narzędzi:

Jak naprawić potencjalne problemy?

Minifikacja oraz optymalizacja CSS i JavaScript

Proces minifikacji polega na usunięciu zbędnych znaków jak spacje, znaki nowych linii, komentarze. Dodatkowo w plikach JS optymalizowane są nazwy zmiennych do ich krótszych odpowiedników.
Do minifikacji CSS i JS można skorzystać np. z gulpa lub narzędzi online np. http://tools.w3clubs.com/cssmin/ oparty o YUI Compressor.

Po zminifikowaniu plików najlepiej jest połączyć je w jeden, co zmniejszy ilość zapytań do serwera i przyspieszy ich wczytywanie.

Minifikacja HTML

Podobnie jak w przypadku plików CSS i JS minifikacja polega na usunięciu zbędnych znaków. W przypadku dynamicznych stron, nie możemy zrobić tego ręcznie z pomocą narzędzi online, więc pozostaje nam użycie modułu PageSpeed od google https://developers.google.com/speed/pagespeed/module/ lub wycięcie zbędnych znaków ręcznie w kodzie np. w php:

$content = preg_replace('/\x20+/', ' ', $content); //usuwa wielokrotne spacje (wcięcia w kodzie HTML)

Optymalizacja obrazów

Rozdzielczość obrazów na stronie nie powinna być zbyt duża np. 3-4 razy większa niż rozmiar w jakim jest on wyświetlany na stronie.

Trzeba również zastosować odpowiedni poziom kompresji dla plików JPG zachowując balans pomiędzy jakością, a rozmiarem pliku.

Często zmiana kompresji JPG na 90% skutkuje zmniejszeniem rozmiaru o 55% bez wyraźnej utraty jakości (na zdjęciu z większą ilością szczegółów, zmiana będzie jeszcze mniej widoczna). Dalsze zmniejszanie jednak nie daje już tak spektakularnych rezultatów, a następuje już wyraźne pogorszenie jakości.

Do kompresji plików JPG i PNG można użyć tego narzędzia online (http://compresspng.com/).

Kompresja gzip

Kompresja redukuje czas ładowania strony poprzez zmniejszenie rozmiaru przesyłanych plików. Gzip jest obecnie najbardziej popularną i efektywną metodą kompresji - redukuje rozmiar odpowiedzi HTTP nawet o 70%.

W apache2 kompresję można włączyć komendą:

sudo a2enmod deflate

Czasami trzeba dodać ręcznie kompresję gzip dla plików svg w pliku .htaccess lub konfiguracji virtual hosta:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Expire headers

Nagłówki expire informują przeglądarkę, czy dany zasób ma być pobrany z serwera czy z pamięci podręcznej przeglądarki. Jeśli ustawisz ten nagłówek np. dla plików zdjęć w formacie jpg, przeglądarka zachowa te zasoby w pamięci podręcznej przeglądarki na czas określony w nagłówku. Użytkownikowi odwiedzającemu stronę po raz kolejny załaduje się ona szybciej, ponieważ przeglądarka będzie już miała te zdjęcia pobrane.

Poniżej przykład ustawienia nagłówków dla plików zdjęć, svg, css oraz javascript.

<IfModule mod_expires.c>
    Header unset ETag
    FileETag None
    ExpiresActive On
    Header append Cache-Control "public"

    ExpiresDefault "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/svg+xml "access plus 1 month"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType application/x-javascript "access plus 1 year"
 </IfModule>

Wyłączyć blokujące zasoby CSS i Javascript

Jeżeli chodzi o skrypty blokujące renderowanie strony to są 2 wyjścia.
Pierwsze, to umieszczenie skryptów na końcu strony, przed zamknięciem tagu <body>.
Drugie, to użycie parametru async (ładowanie asynchroniczne) lub defer.

Parametr async powoduje, że skrypty są ładowane bez blokowania parsowania HTML, jednak kolejność ich wykonania może nie być zachowana (nie będzie taka jak kolejność dołączania plików w kodzie). Jeżeli mamy pliki javascript połączone w 1 to nie będzie to problemem. Plik wykona się zaraz po jego załadowaniu.

Parametr defer również nie powoduje blokowania parsowania HTML, pliki zachowują kolejność wykonywania i są wykonywane po zakończeniu parsowania HTML.

Różnice obrazuje poniższa ilustracja:

W przypadku CSS jest trochę trudniej, ponieważ pliki CSS muszą być zadeklarowane w części <head> strony.
Rozwiązaniem wg Google jest umieszczenie kodu CSS niezbędnego do wyrenderowania części strony widocznej na ekranie jako inline w tagu <style> i doładowanie reszty kodu CSS po wyrenderowaniu strony. Jednak trzeba podejść do tego z pewną dozą ostrożności: style inline nie są przechowywane w pamięci podręcznej przeglądarki, może być trudno wydzielić taki kod dla każdej podstrony oraz można czasem zauważyć przez chwilę nieostylowaną treść.
Można to zrobić w przypadku małych plików CSS w całości oraz zastosować tę technikę np. tylko dla strony głównej.