skip to Main Content
+48 606 628 628 info@zgred.pl
Html Css Wydajnosc

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:

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.

 

1 gwiazdka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek (8 głosów, średnia: 4,50 z 5)

Mateusz Hauer

Grafik i projektant stron internetowych w krakowskim studio hauerpower.com gdzie tworzy się użyteczny internet dostarczając do niego co jakiś czas nowe, świeże i dopracowane strony. Miłośnik dobrego designu i smaku w tym co robi. Minimalizm i kwestie funkcjonalne stawia na pierwszym miejscu nie tylko w tworzeniu stron ale i na co dzień. Lubi dobrą robotę i ma wrażenie że ona jego także.

Ten wpis ma 18 komentarzy
  1. „…Po drugie – stosuj odpowiednie rozszerzenie pliku. Chyba nikt o zdrowych zmysłach nie publikuje na stronie zdjęć i grafik w formacie .png…”

    A pod spodem zdjęcie w formacie… lol

    Widać jestem wśród szaleńców.

      1. Autorowi pewnie chodziło o zdjęcia, galerie, portfolio itp. Duże zdjęcia w PNG faktycznie ważą dużo więcej niż JPG. PNG stosuję tylko wówczas, kiedy jest to niezbędne, logo czy drobne elementy strony.

        1. Biorąc pod uwagę fakt, że tekst jest o poprawie wydajności strony internetowej to właśnie waga miała tu na pewno znaczenie. Oczywiście, że da się skompresować png, jednak nie każdy o tym wie i potrafi to zrobić.

  2. A ja się zastanawiam czy minifikacja plików ma sens jeśli użyjemy gzip? przecież tak czy siak ten plik (jeśli tylko jest serwowany z naszego serwera) zostanie przed wysłaniem spakowany więc mam wątpliwości czy takie działanie efektywnie do czegokolwiek doprowadzi.

  3. Cenny artykuł, dobrze zbierający do kupy podstawowe techniki, ale mam kilka uwag:

    Nie używać w sieci PNG, czyli Portable NETWORK Graphic? Ciekawa koncepcja. A na poważnie, PNG może być dobrym rozwiązaniem, nie wyobrażam sobie publikowania infografik lub innych grafik zawierających tekst lub poszarpaną grafikę w JPG, GIF-owy limit 256 kolorów też często nie wystarcza (mamy 2017 rok, więc to już nie te czasy, żeby się bawić w dithering). W niektórych przypadkach dobrze skompresowany PNG może być mniejszy niż taki sam (wizualnie) GIF.

    „kompresja JPG na 90%”, co to znaczy? Nie ma w tym formacie definicji procentów, ergo każdy program obsługujący JPG będzie interpretował procentowy poziom kompresji na swój sposób. I 90% w PS będzie wyglądać inaczej niż 90% z GIMP-a, bo użyją innych tablic kwantyzacji.

    a2enmod jest specyficzną komendą dla dystrybucji Debianopochodnych, więc nie jest to zbyt uniwersalna metoda (zakładając, że ktoś w ogóle ma roota/sudo w systemie).

    Wspomniane techniki w artykule mają wzajemny wpływ na swoją skuteczność. Powiedziałbym, że minifikacja ma niemal zerowy wpływ na wydajność, jeśli korzystamy z gzipa/deflate. Różnica między skompresowanym plikiem minifikowanym a skompresowanym zwykłym jest pomijalna. Niemniej nadal ogromne znaczenie ma łączenie plików JS/CSS, i tu kompresja nie ma nic do rzeczy.

    HTTP Expiration Cache jest dobrym rozwiązaniem dla grafik, ale dodałbym też do artykułu możliwość użycia go dla JS/CSS, oczywiście z wykorzystaniem oznaczenia wersji w Query String. To też dobrze wpłynie na wydajność i oszczędzanie requestów.

    I jeszcze jedna ważna rzecz, na którą kiedyś natknąłem się przy konfiguracji pierwszego serwera. Zawsze sprawdzić, czy serwer pozwala na utrzymywanie otwartych połączeń (nagłówek Connection: keep-alive), szczególnie przy korzystaniu z SSL (ale nie tylko). Każdorazowa negocjacja nowego połączenia TCP jest karkołomnym zadaniem.

    Uff, alem się naprodukował :)

  4. Odnośnie minifikacji to można napisać sobie prosty skrypt do kompresowania CSS in fly, który usuwa wszystkie spacje, tabulatory w kodzie i wyświetla skompresowaną wersję. Takie rozwiązanie ma dwie zalety, mało waży ale przede wszystkim przy edycji kodu mamy nadal przejrzyste i czytelne wcięcia.

  5. Polecam też do kompresji https://tinypng.com – również robi świetną robotę.
    Do kompresji plików css i js polecam też webpacka – jest dużo wydajnieszy i popularniejszy niż gulp czy grunt – one są już „depracated”.
    Po za tym, używanie wszelkich pluginów WP jest słabe, bo w większości przypadków działają one „on-the-fly” czy zarzynają Wasze serwery (m.in. RAM i CPU). No i kolejna rzecz – używanie WP jest słabe :D

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Back To Top
Przeczytaj poprzedni wpis:
notka-prasowa
Zgredoprasówka lipcowa z roku Pańskiego 2k17

Skoro tyle osób pisze prasówkę, nawet Szymon Słowik zaczął - to ja też !!! A co !! Ostatnie kilka dni...

klient zrobiony na rybke
Raport SEO z pozycjonowania dla klienta – długa droga do transparentności

Co powinien zawierać raport SEO z pozycjonowania? To jest bardzo trudne do określenia i wiele agencji czy freelancerów ma z...

Zamknij