Optymalizacja plików, minifikacja CSS i JS, poprawa wydajności strony internetowej

Optymalizacja witryn internetowych to obecnie jeden z istotniejszych związany wielopłaszczyznowo z wieloma branżami zajmującymi się tworzeniem i obsługą stron. Powstają coraz lepsze praktyki, metody i narzędzia, dzięki którym możemy coraz sprawniej i skuteczniej odchudzać nasze witryny. Zatem dlaczego warto optymalizować?

Jednym z kluczowych celów optymalizacji jest skracanie czasu ładowania strony. Czas ten jest z kolei jednym z najważniejszych elementów UX i SEO. Szczęśliwy użytkownik to ten, który nie musi czekać dłużej niż 3 sekundy na wykonanie zapytania na stronie. Poza tym Google zdecydowanie uśmiecha się szerzej do szybszych witryn.

Nie muszę Ci chyba wspominać, że wolna strona skutecznie odpycha potencjalnych klientów, prawda?

No dobrze. Przydługi wstęp za nami. Teraz czas brać się do roboty. Subiektywne odczucie, że strona ładuje się za długo, nie wystarczy. Oczywiście może być punktem zapalnym, w którym weźmiesz ją na warsztat i zoptymalizujesz. Niemniej, cały proces powinien zaczynać się od czasu ładowania strony.

Jak sprawdzić czas ładowania strony?

Czas ten możesz sprawdzić dwoma darmowymi narzędziami: Google PageSpeed Insights i Gtmetrix.

Tak wygląda screen z narzędzia od Google. Poniżej narzędzie podpowiada nam, poszczególne działania, które można zrobić, aby skrócić czas ładowania. Na liście znajdziemy między innymi:

• Nadanie priorytetu widoczności treści
• Skrócenie czasu odpowiedzi serwera
• Unikanie przekierowań stron docelowych
• Eliminacja blokującego kodu renderowania JavaScript i CSS z części strony widocznej na ekranie
• I wiele więcej

Przy każdym działaniu Google odsyła nas do podstron wyjaśniających i instruujących, jak wykonać daną akcję.

Analiza witryny GTmetrixem wygląda tak, jak powyżej. Narzędzie na ekranie startowym prezentuje nam podstawowe detale związane z czasem ładowania, rozmiarem, czy wynikiem Yslow. Poniżej umieszczono zakładki, w których twórcy prezentują szczegółowe rekomendacje dotyczące przyśpieszenia witryny. Dzielone są na typ (zdjęcia, CSS, JS, serwer, treść) oraz na priorytet.

Minifikacja i optymalizacja obrazów

Optymalizowanie obrazów to jedno z podstawowych działań, które powinniśmy wykonać. Należy kierować się tu kilkoma zasadami. Po pierwsze ? nie przesadzaj z rozdzielczością grafik. Rozdzielczość 720p to górna granica, której powinieneś się trzymać. Dopasowuj rozdzielczość do funkcji, przeznaczenia i miejsca zagnieżdżenia obrazów.

Po drugie ? stosuj odpowiednie rozszerzenie pliku. Chyba nikt o zdrowych zmysłach nie publikuje na stronie zdjęć i grafik w formacie .png. Najlepiej sprawdzają się rozszerzenia .jpg oraz .gif. Poza tym staraj się je kompresować w taki sposób, aby zachować złoty środek między ich jakością a rozmiarem.

Warto wiedzieć, że kompresja formatu .jpg na 90% jest w stanie zredukować jego wymiary o ponad 50%. Jest to pewien punkt graniczny, ponieważ dalsza kompresja nie daje mocno zauważalnych rezultatów. Narzędziem przydatnym przy optymalizacji obrazów jest http://compresspng.com/.

Kompresja gzip

Kompresja gzip polega na zredukowaniu ilości danych, które przesyłane są między serwerem a użytkownikiem. Cały proces polega na serwerowej kompresji określonych plików, a następnie ich dekompresji na poziomie przeglądarki. Zwykle kompresowanymi plikami są: XML, JS, CSS i HTML. Kompresja gzip pozwala zredukować wagę odpowiedzi HTTP do 70%, a plików tekstowych nawet o 80%.

W serwerze apache2 kompresję gzip można załączyć, wpisując w konsoli: sudo a2enmod deflat.

Jak skorzystać z kompresji gzip?

Należy pamiętać, że załączenie kompresji jest zależne od serwera i w nieznacznie go obciąża. Niemniej, w większości przypadków wystarczy dodanie tokenu: AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon do pliku .htcaccess ? znajdziesz go w głównym katalogu instalacyjnym WP. W apache2 kompresję gzim włączysz komendą: sudo a2enmod deflate.

Czasem kompresję gzip można załączyć z poziomu panelu administracyjnego serwera. Jeżeli nie masz pewności, czy Twoja firma hostingowa udostępnia takie narzędzia ? skontaktuj się z nimi.

Kompresję strony możesz sprawdzić, korzystając z tego darmowego narzędzia: http://www.gidnetwork.com/tools/gzip-test.php. A jego interfejs po przeanalizowaniu strony wygląda następująco:

Minifikacja i optymalizacja CSS, JS i HTML

Minifikowanie plików HTML, skryptów JavaScript i arkuszy CSS polega przede wszystkim na ich sprzątaniu. Podczas minifikacji usuwamy zbędne komentarze, znaki oraz spacje. Dzięki takim zabiegom realnie zmniejszamy wagę i objętość poszczególnych komponentów witryny.

Tak wygląda kod przed minifikacją:

A tak po minifikacji:

Łączenie plików JS i CSS

Dobrym pomysłem jest również łączenie kilku mniejszych plików CSS z JS w jeden duży. W ten sposób serwer zamiast kilkunastu zapytań otrzyma jedno ? dotyczące jednego dużego pliku. W WordPressie zespolenie plików JS i CSS możesz wykonać, instalując wtyczkę JS & CSS Script Optimizer. W zasadzie do poprawnego połączenia plików wystarczy zainstalować i aktywować wtyczkę, która wykona za nas całą robotę.

Tak wygląda ilość zapytań przed przykładowym połączeniem plików JS i CSS:

A tak wygląda ilość zapytań po połączeniu plików:

Modyfikacja adresów URL

Modyfikowanie adresów URL w WP i innych CMSach umożliwia przyśpieszenie ładowania strony, a także wpływ na pozycjonowanie. Niestety, formaty URL, które są najbardziej SEO friendly, są jednocześnie mało-friendly w stosunku do ich wagi. Najkorzystniejszymi pod względem minifikacji kodami URL są: /%postname%/ i /%post_id%/%postname%/.

Włączenie Cache

Strona, która obsługuje Cache, pozwala na znaczne przyśpieszenie funkcjonowania witryn. Zwłaszcza zauważalną różnicę można zauważyć na dużych stronach ze sporym ruchem. Uwaga: włączenie Cache na stronach o minimalnym ruchu może nie przynieść żadnych rezultatów.

W WordPressie Cache można zarządzać poprzez wtyczkę SuperCacher. Po instalacji menu pluginu prezentuje się następująco:

Ułatwianie sobie życia i minifikacji ? Gulp, Grunt i pokrewne 

Istnieje tyleż samo fanów Gulpa co Grunta. Obydwa programy świetnie nadają się do automatyzacji pracy ? między innymi do minifikacji stylów i skryptów. Oczywiście narzędzia te są o wiele bardziej rozbudowane i skomplikowane i można napisać o nich osobny, rozbudowany wpis. Niemniej, minifikację możemy sobie ułatwić poprzez zainstalowanie odpowiednich wtyczek w edytorach tekstowych. Wtyczki te są w stanie od razu kompilować dwie wersje kodu ? roboczą i zminifikowaną.

Nagłówki expire

Czym są nagłówki expire? Ano, przekazują przeglądarce informację, czy dany zasób będzie pobierany z pamięci podręcznej przeglądarki, czy z serwera. Zarządzanie nagłówkami expire pozwala na znacznie szybsze ładowanie poszczególnych elementów strony użytkownikom, którzy już raz odwiedzili witrynę. Optymalizacja za pomocą nagłówków expire polega na umieszczaniu plików (głównie obrazów) w pamięci podręcznej przeglądarki, jednocześnie odciążając serwer, przykładowo:

<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"
</IfModule>

Wykorzystanie UglifyJS i UglifyCSS

Zapewne część z Was wie, czym jest UglifyJS i CSS. Profilaktycznie dodam tylko, że są to rozbudowane narzędzia, które wykorzystuje siędo kompresowania, parsowania i ogólnie rzecz biorąc modelowania skryptów JS i CSS.

Są one dostępne jako moduły Node.js. Więc ich instalacja globalna jest dosyć prosta. Wystarczy wprowadzić w konsoli poleceń: $ npm install -g uglify-js, a dalej: $ uglifyjs ?help. Jeżeli interesuje Cię wyłącznie instalacja lokalna, w katalogu projektu należy wpisać: 
$ cd /path/to/your/symfony/project

$ npm install uglify-js –prefix app/Resources

Instalacja UglifyCSS przebiega analogicznie. Pełną instalację i wykorzystanie UglifyJS i UglifyCSS znajdziesz w tym wpisie.

Wyłącznie blokujących zasobów CSS i JS

Blokowanie skryptów renderujących można wykonać na dwa sposoby. Pierwszym, stosunkowo prostym jest zagnieżdżenie skryptu na samym końcu kodu przed zamknięciem tagu </body>. Drugim, nieco bardziej wyrafinowanym sposobem jest wykorzystanie ładowania asynchronicznego (parametr async lub defer).

Pierwszy z parametrów sprawia, że ładowane są skrypty bez blokowania parsowania HTML, bez zachowania kolejności wykonywania. Parametr defer natomiast zachowuje tę kolejność.

Problem pojawia się w przypadku stylów CSS ze względu na konieczność deklaracji w sekcji <head>. Blokowanie renderowania najlepiej stosować w przypadku małych plików CSS i tylko dla poszczególnych podstron. Dlaczego? Otóż w przypadku CSS blokowanie renderowania najlepiej stosować poprzez umieszczanie kodu pierwszego załadowanego ekranu witryny w inline tagu <style>, a następnie doładowaniu kodu niewidocznego na pierwszym załadowanym ekranie dopiero po wyrenderowaniu strony.

Czy to wszystko?

Znasz inne metody na optymalizację kodu? Podziel się nimi w komentarzach.