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:
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:
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
Kamil Winiszewski
Pasjonat ogólnopojętego marketingu internetowego. Od wielu lat zajmuje się SEO ale przez strach przed efektem Dunninga-Krugera nie ma śmiałości nazywania się ekspertem.
