Poprawiamy prędkość strony internetowej – poradnik

Jak wszyscy wiemy prędkość wczytywania strony internetowej ma wpływ na komfort użytkownika i pozwala na osiągnięcie lepszego miejsca w SERP’ach. Jeśli czas dostępu do treści nie przekracza 100ms, użytkownik odbiera stronę jako płynnie działającą i chętnie ją przegląda. W przedziale 200ms-1s już dostrzega opóźnienie. Po upływie 1s traci poczucie płynności. Użytkownik zaczyna obserwować pasek postępu i traci komfort przeglądania. Po 3 sekundach najczęściej opuszcza stronę. Obserwacje Nielsena Norman’a, autora „Usability Enginering”.

Od czego zależy prędkość wczytywania strony www i jak ją poprawić?

Content Delivery Network (CDN dla stron www)

Nowsze przeglądarki internetowe najczęściej mogą pobierać 6 plików jednocześnie z jednego hosta i kilkanaście (niektóre kilkadziesiąt) plików ogólnie. Dobrym rozwiązaniem jest zatem rozrzucenie powtarzalnych elementów strony jak logo, nagłówek, style css, javascript’y itp. na różnych serwerach. Mogą to być „nasze” inne strony lub CDN. Content Delivery Network mają tę zaletę, że są zoptymalizowane geograficznie a więc użytkownik z Kanady odwiedzający naszą stronę te pliki dostaje z serwera bliższego swojej lokalizacji np. z USA. W większości przypadków rozsianie plików na innych naszych serwerach w zupełności wystarczy.

Cache przeglądarki internetowej

Bardzo przydatną funkcją, często niedocenianą jest wykorzystywanie cache przeglądarki internetowej. Działa to na bardzo prostej zasadzie - pierwsze odwiedziny strony sprawiają, że jej pliki pozostają na komputerze użytkownika. Przejście na podstronę serwisu nie wiąże się z potrzebą wczytywania ponownie tych samych plików z serwera o ile się nie zmieniły. Strona powinna zawierać nagłówki Expires w kodzie lub posiadać odpowiednie ustawienia w pliku .htaccess określające jak długo pliki mają być przetrzymywane w buforze pamięci. Przykład:

<IfModule mod_mime.c>
 AddType text/css .css
 AddType text/x-component .htc
 AddType application/x-javascript .js
 AddType application/javascript .js2
 AddType text/javascript .js3
 AddType text/x-js .js4
 AddType text/html .html .htm
 AddType text/richtext .rtf .rtx
 AddType image/svg+xml .svg .svgz
 AddType text/plain .txt
 AddType text/xsd .xsd
 AddType text/xsl .xsl
 AddType text/xml .xml
 AddType video/asf .asf .asx .wax .wmv .wmx
 AddType video/avi .avi
 AddType image/bmp .bmp
 AddType application/java .class
 AddType video/divx .divx
 AddType application/msword .doc .docx
 AddType application/vnd.ms-fontobject .eot
 AddType application/x-msdownload .exe
 AddType image/gif .gif
 AddType application/x-gzip .gz .gzip
 AddType image/x-icon .ico
 AddType image/jpeg .jpg .jpeg .jpe
 AddType application/json .json
 AddType application/vnd.ms-access .mdb
 AddType audio/midi .mid .midi
 AddType video/quicktime .mov .qt
 AddType audio/mpeg .mp3 .m4a
 AddType video/mp4 .mp4 .m4v
 AddType video/mpeg .mpeg .mpg .mpe
 AddType application/vnd.ms-project .mpp
 AddType application/x-font-otf .otf
 AddType application/vnd.ms-opentype .otf
 AddType application/vnd.oasis.opendocument.database .odb
 AddType application/vnd.oasis.opendocument.chart .odc
 AddType application/vnd.oasis.opendocument.formula .odf
 AddType application/vnd.oasis.opendocument.graphics .odg
 AddType application/vnd.oasis.opendocument.presentation .odp
 AddType application/vnd.oasis.opendocument.spreadsheet .ods
 AddType application/vnd.oasis.opendocument.text .odt
 AddType audio/ogg .ogg
 AddType application/pdf .pdf
 AddType image/png .png
 AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
 AddType audio/x-realaudio .ra .ram
 AddType application/x-shockwave-flash .swf
 AddType application/x-tar .tar
 AddType image/tiff .tif .tiff
 AddType application/x-font-ttf .ttf .ttc
 AddType application/vnd.ms-opentype .ttf .ttc
 AddType audio/wav .wav
 AddType audio/wma .wma
 AddType application/vnd.ms-write .wri
 AddType application/font-woff .woff
 AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
 AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresByType text/css A31536000
 ExpiresByType text/x-component A31536000
 ExpiresByType application/x-javascript A31536000
 ExpiresByType application/javascript A31536000
 ExpiresByType text/javascript A31536000
 ExpiresByType text/x-js A31536000
 ExpiresByType text/html A3600
 ExpiresByType text/richtext A3600
 ExpiresByType image/svg+xml A3600
 ExpiresByType text/plain A3600
 ExpiresByType text/xsd A3600
 ExpiresByType text/xsl A3600
 ExpiresByType text/xml A3600
 ExpiresByType video/asf A31536000
 ExpiresByType video/avi A31536000
 ExpiresByType image/bmp A31536000
 ExpiresByType application/java A31536000
 ExpiresByType video/divx A31536000
 ExpiresByType application/msword A31536000
 ExpiresByType application/vnd.ms-fontobject A31536000
 ExpiresByType application/x-msdownload A31536000
 ExpiresByType image/gif A31536000
 ExpiresByType application/x-gzip A31536000
 ExpiresByType image/x-icon A31536000
 ExpiresByType image/jpeg A31536000
 ExpiresByType application/json A31536000
 ExpiresByType application/vnd.ms-access A31536000
 ExpiresByType audio/midi A31536000
 ExpiresByType video/quicktime A31536000
 ExpiresByType audio/mpeg A31536000
 ExpiresByType video/mp4 A31536000
 ExpiresByType video/mpeg A31536000
 ExpiresByType application/vnd.ms-project A31536000
 ExpiresByType application/x-font-otf A31536000
 ExpiresByType application/vnd.ms-opentype A31536000
 ExpiresByType application/vnd.oasis.opendocument.database A31536000
 ExpiresByType application/vnd.oasis.opendocument.chart A31536000
 ExpiresByType application/vnd.oasis.opendocument.formula A31536000
 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
 ExpiresByType application/vnd.oasis.opendocument.text A31536000
 ExpiresByType audio/ogg A31536000
 ExpiresByType application/pdf A31536000
 ExpiresByType image/png A31536000
 ExpiresByType application/vnd.ms-powerpoint A31536000
 ExpiresByType audio/x-realaudio A31536000
 ExpiresByType image/svg+xml A31536000
 ExpiresByType application/x-shockwave-flash A31536000
 ExpiresByType application/x-tar A31536000
 ExpiresByType image/tiff A31536000
 ExpiresByType application/x-font-ttf A31536000
 ExpiresByType application/vnd.ms-opentype A31536000
 ExpiresByType audio/wav A31536000
 ExpiresByType audio/wma A31536000
 ExpiresByType application/vnd.ms-write A31536000
 ExpiresByType application/font-woff A31536000
 ExpiresByType application/vnd.ms-excel A31536000
 ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
 <IfModule mod_headers.c>
 Header append Vary User-Agent env=!dont-vary
 </IfModule>
 AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json
 <IfModule mod_mime.c>
 # DEFLATE by extension
 AddOutputFilter DEFLATE js css htm html xml
 </IfModule>
</IfModule>
<FilesMatch ".(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$">
 FileETag MTime Size
 <IfModule mod_headers.c>
 Header set Pragma "public"
 Header append Cache-Control "public"
 Header set X-Powered-By "XCache"
 </IfModule>
</FilesMatch>
<FilesMatch ".(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$">
 FileETag MTime Size
 <IfModule mod_headers.c>
 Header set Pragma "public"
 Header append Cache-Control "public"
 Header set X-Powered-By "XCache"
 </IfModule>
</FilesMatch>
<FilesMatch ".(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|woff|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|WAV|WMA|WRI|WOFF|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
 FileETag MTime Size
 <IfModule mod_headers.c>
 Header set Pragma "public"
 Header append Cache-Control "public"
 Header set X-Powered-By "XCache"
 </IfModule>
</FilesMatch>

Łączenie oraz minifikacja plików JS i CSS

To moja ulubiona metoda poprawy prędkości wczytywania. Polega ona na scaleniu wszystkich plików JavaScript w jeden, większy i usunięcie wszelkiego rodzaju zbędnych elementów jak komentarze, ciągi spacji itp. Można plik wysyłać do przeglądarki użytkownika w formie spakowanego pliku gzip. Włączenie kompresji GZIP wymaga odpowiedniego skonfigurowania serwera. Nowsze strony z rodzaju tych „zbajerowanych” potrafią wykorzystywać kilka, kilkanaście a nawet kilkadziesiąt plików ze skryptami i arkuszami CSS a więc ich wczytanie wiąże się z każdorazowym nawiązaniem połączenia z serwerem i ich pobraniem. Pamiętajmy, że kilkanaście drobnych plików wysyła się znacznie wolnej niż jeden większy. Dodatkowo można zmniejszyć plik wynikowy za pomocą takich narzędzi jak jsmini.com (http://www.danstools.com/javascript-minify/) czy CSS Compresor (http://csscompressor.com/). Poprawne scalenie plików pozwala na wzrost prędkości wczytywania o kilkadziesiąt procent. Gra zatem jest warta zachodu. Tu jest jeden haczyk, który potrafi napsuć krwi … ustalenie odpowiedniej kolejności plików. Warto przeanalizować źródło już działającej strony klikając prawym przyciskiem myszki i wybierając pokaż źródło strony. Należy wyszukać wszystkie pliki .js i scalić je w jeden plik w kolejności występowania na stronie. Jeden plik wynikowy najlepiej jest osadzić tuż przed takiem </body> a więc jako ostatni element strony. W niektórych przypadkach może wystąpić konieczność utworzenia trzech plików i osadzenie ich w sekcji <head>, na początku <body> i na końcu.

Kompilowanie JS

Jeśli bardzo nam zależy na rozmiarze plików JS możemy wykluczyć zbędne elementy za pomocą https://developers.google.com/closure/compiler/. Jest to narzędzie, które kompiluje nam kod wraz z zależnościami w skrypt pozbawiony niepotrzebnych elementów. Można to zrobić bezpośrednio w edytorze https://closure-compiler.appspot.com/home. Jest to funkcja bardziej zaawansowana i wymagająca pewnej wiedzy programistycznej tak więc … ostrożnie.

Optymalizacja obrazów

Warto zadbać o jak najmniejsze rozmiary plików graficznych. Znacznie lepszym rozwiązaniem jest ustalenie wielkości obrazu zamiast zmniejszanie go za pomocą styli. Drugim elementem jest rozsądne ustawienie sposobu kompresji obrazów JPG.

Co natomiast zrobić gdy wykorzystujemy obrazy z przeźroczystościami jak PNG24?

Warto okroić liczbę wykorzystywanych kolorów za pomocą opcji Posterize dostępną w Photoshopie i późniejsze zapisanie jako png24. Niemal niezauważalna utrata jakości pozwoli zmniejszyć wagę pliku o połowę. A więc znów gra warta zachodu. Jakbyś chciał zgłębić temat to dokładniej cały proces z przykładem opisałem tu: http://secureglass.net/optymalizacja-grafiki-png24.

Sprajty CSS

Często powtarzalne elementy graficzne strony jak np.: wszelkiego rodzaju graficzne elementy nawigacyjne można scalić w jeden plik i odpowiednio wyświetlać je z pomocą CSS. Tego rodzaju elementy są plikami przeważnie małymi a więc czas wczytywania będzie znacznie dłuższy niż jednego większego.

Inline images

Można się pokusić o zapisanie elementów graficznych bezpośrednio w pliku CSS za pomocą kodowania base 64. Przykładem niech będzie każdemu znana ikonka wyszukiwania w Google, która zapisana jest właśnie jako Data URI.

background: rgba(0, 0, 0, 0) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABJklEQVR4Ae3VPYrbUBRA4a+RJ1VSJswvGG8mhYsswRhtxT/YmNEuhtEiAmpcJjBJOQsYyyBMsF0qXcjDjNF7pAnJOd0tTqN3r/yLfPCsFfrsvUje+ao91RdvRfBGpX3Fzy6c4UKh0Ua6U+gJKLSJFgKa5FAjoE23W6hRWpp4UKeHNnIZgMzIS0rom1shXHqKDW3cgoHC2tq9PriyiQvl4JPjr8nBEIxjQo0MA8dguneHTN09VL7ySBfgsXtoCdYnoQpMu4cmZ0Oz7qEHcH8SmoOye6iWoe8QTH+4QWYb8/lHYGj/W+YjyOPe0YtLcGehUpm7Adfq2BV5coWQa9/TlnYcLG2uTj8jtUdTM6VtxBlJNGCXnGn+1PFfCegl/Y4aKz1/Lf/5CShXgVKz4A8DAAAAAElFTkSuQmCC") no-repeat scroll center center / 24px 24px;

Prosty konwerter URI możesz znaleźć tu: http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/result/

Wersje obrazów dla urządzeń mobilnych

Warto zadbać o zróżnicowanie rozmiaru obrazów dla urządzeń mobilnych. Strony responsywne często w celu dopasowania strony do rozmiaru przeglądarki wykorzystują skalowanie za pomocą CSS. Nie jest to najlepsza metoda choć z całą pewnością najprostsza i najczęściej wykorzystywana. Jeśli zależy nam na komforcie użytkownika powinniśmy jednak w arkuszach określać pliki, które mają być wczytywane na mniejszych rozdzielczościach. Przykład:

.nagłówek {
 background-image: url(„http://secureglass.net/wp-content/uploads/2015/08/naglowek-1920.jpg");
 background-size: cover;
}

 @media (max-width:680px) {
 .nagłówek {
 background-image: url(„http://secureglass.net/wp-content/uploads/2015/08/naglowek-680.jpg");
 background-size: cover;
 }
}

Podsumowując Powyższe wskazówki to tylko kilka elementów poprawiających prędkość wczytywania strony. Zastosowanie jednak większości z nich jest w stanie zredukować ciężar strony o kilkadziesiąt procent (30-80% w zależności od rodzaju strony). Proszę sobie zatem wyobrazić jak wzrośnie komfort użytkownika i o ile więcej czasu spędzi on na Waszej stronie i jak Google samo w sobie będzie postrzegać Waszą stronę. Gra naprawdę jest warta zachodu. Nazywam się Ireneusz Mazur. Od kilkunastu lat zajmuję się tworzeniem stron internetowych. Od kilku lat pozycjonowaniem i audytowaniem. Od dwóch dzielę się swoimi spostrzeżeniami, darmowymi sztuczkami SEO, nie tylko z zakresu optymalizacji wydajnościowej. http://secureglass.net