Jak przyśpieszyć stronę internetową? Garść porad.

Twoja strona internetowa wczytuje się wolno i zastanawiasz się nad tym, jak ją przyśpieszyć? Z poniższego tekstu dowiesz się jak to zrobić, dlaczego warto się tym zająć oraz jak w ogóle zmierzyć szybkość ładowania się strony.  Oto 10 porad na to, jak przyśpieszyć stronę internetową.

Dlaczego w ogóle przejmować się szybkością ładowania strony?

Po pierwsze, szybkość ładowania się strony ma wpływ na SEO. Im czas ładowania jest krótszy, tym wyższy ranking strony w Google, a zatem rośnie szansa, że strona pojawi się wyżej w wynikach wyszukiwania. Jak ważny jest ten czynnik w kontekście SEO? Tak dokładnie to nie wiadomo. Czynników, które mają wpływ na SEO jest mnóstwo, no i algorytm Google służący do obliczania pozycji strony w wyszukiwarce nie jest powszechnie znany.

Po drugie, długo ładująca się strona internetowa jest po prostu irytująca. Im dłużej użytkownik czeka na załadowanie się strony internetowej, tym wzrasta prawdopodobieństwo, że ją opuści. Rośnie wówczas współczynnik odrzuceń, a ten powinniśmy utrzymywać na jak najniższym poziomie.

Jak zmierzyć szybkość wczytywania się strony internetowej?

Jest kilka narzędzi służących do tego celu. Jednym z nich jest PageSpeed Insights od Google. W widocznym na niebieskim tle polu wystarczy wpisać adres naszej strony internetowej i kliknąć przycisk”Analizuj”. Po chwili naszym oczom ukaże się ekran z punktacją w skali od 1 do 100 informującą o tym, jak dobrze nasza strona internetowa jest zoptymalizowana. Otrzymamy dwa wyniki — jeden dla urządzeń mobilnych i drugi dla komputerów stacjonarnych. Otrzymamy też listę sugestii dotyczących tego, jak poprawić otrzymane wyniki.

Alternatywami dla PageSpeed Insight są: Pingdom Website Speed Test, GTmetrix lub WEBPAGETEST.

A więc jak przyśpieszyć stronę internetową?

Jest dużo rzeczy, które można zrobić. Poniżej przedstawię kilka sposobów na to, jak ugryźć ten temat. Myślę, że nawet osoby nieznające się na programowaniu znajdą tu metody, które będą w stanie wykorzystać.

Optymalizacja zdjęć

Brak odpowiednio zoptymalizowanych zdjęć to chyba najczęstszy problem stron internetowych. Przede wszystkim nie wolno zamieszczać zdjęć na stronę internetową prosto z aparatu lub banku zdjęć. Takie zdjęcia mają zazwyczaj kilka do kilkunastu razy większy rozmiar (a zatem wagę), niż powinny mieć. Zdjęcia trzeba odpowiednio przygotować.

Zadbaj o prawidłowy rozmiar i wagę zdjęcia.

Po pierwsze zdjęcie należy dopasować. Jeżeli np.: posiadasz na swojej stronie internetowej galerię zdjęć i pojedynczy obrazek w tej galerii osiąga maksymalnie rozmiar, powiedzmy 700 na 700 pikseli, to kompletnie nie ma sensu dodawać tam zdjęć w większej rozdzielczości.

Jak sprawdzić, do jakiego rozmiaru powinniśmy zmniejszyć naszą grafikę? Wystarczy wejść na podstronę, na której znajduje się zdjęcie,  które chcemy zmienić. Następnie klikamy PPM na to zdjęcie i z menu kontekstowego wybieramy „Zbadaj” (tak jest w Google Chrome, w innej przeglądarce ta opcja może się inaczej nazywać). Powinniśmy uzyskać dostęp do narzędzi dla programistów, a naszym oczom powinien się ukazać taki widok:

Domyślną zakładką po wejściu do narzędzi programistycznych jest zakładka Elements (jeżeli tak nie jest, to powinniśmy do niej przejść). Widzimy w niej podgląd tzw. drzewka DOM, czyli wszystkich elementów na podstronie, całej jej struktury. Nasze zdjęcie, na którym kliknęliśmy PPM, powinno być wyróżnione na niebiesko. Teraz wystarczy najechać na nie kursorem myszki. Zdjęcie zostanie wyróżnione w podglądzie strony powyżej. Pojawi się też „dymek”, na którym będzie informacja o aktualnym rozmiarze zdjęcia w galerii. W naszym przypadku jest to 131 na 131 pikseli.

Zanim dostosujemy zdjęcie,  powinniśmy jeszcze sprawdzić jakie rozmiary będzie ono przyjmować, gdy zmniejszymy szerokość okna  przeglądarki (symulujemy wówczas mniejszy rozmiar ekranu urządzenia). W przypadku strony, z której pochodzi powyższy zrzut ekranu, zdjęcie nie powiększa się, gdy okno przeglądarki się zmniejsza. Zatem nasze zdjęcia, które chcielibyśmy zamieścić w galerii, powinniśmy pomniejszyć do rozmiaru 131 na 131 pikseli (jeżeli całą procedurę przeprowadzaliśmy w maksymalnej rozdzielczości okna przeglądarki powiedzmy 1440 px, to możemy wziąć jeszcze pod uwagę większe ekrany i obrazek pomniejszyć do nieco większej rozdzielczości np.: 170 na 170 pikseli).

Do pomniejszenia i kadrowania obrazków używamy edytora graficznego (Corel Draw, Adobe Photoshop, Gimp) lub narzędzia online (np.: Pixlr X).

Przyśpieszenie strony internetowej — kompresja zdjęć

Drugim sposobem na optymalizację zdjęć jest ich kompresja. Większość edytorów graficznych (jak nie wszystkie) posiada opcję zmniejszenia jakości zdjęcia przy zapisie. Obniżając jakość obrazka, sprawiamy, że wygląda on nieco gorzej, za to oszczędzamy na jego wadze. Jeżeli nie przesadzimy z obniżaniem jakości zdjęcia, to zmiana w jego wyglądzie nie będzie nawet zauważalna.

Opóźnienie wczytywania się zdjęć, czyli lazy load

Technika opóźnionego ładowania obrazków polega na tym, że ładujemy obrazki porcjami i na żądanie, w zależności od tego, która część strony jest aktualnie wyświetlana przez użytkownika. Dzięki temu strona może znacznie przyśpieszyć, gdyż zamiast wszystkich grafik, zostanie pobranych jedynie kilka aktualnie potrzebnych do prawidłowego wyświetlenia się strony.

Aby uzyskać taki efekt, możemy posłużyć się odpowiednią wtyczką lub zaimplementować tę metodę samemu.

Minifikacja plików

Minifikacja oznacza usunięcie z kodu html, css, javascript białych znaków (spacje, taby, przejścia do nowych linii) oraz komentarzy. Dzięki temu zmniejszamy rozmiar naszych plików i przyśpieszamy naszą stronę.

Możemy się tutaj posłużyć narzędziami dostępnymi online np.: https://www.willpeavy.com/tools/minifier/, http://minifycode.com/html-minifier/, lub w przypadku gdy nasza strona jest postawiona na WordPress’ie — zainstalować odpowiedni plugin do optymalizacji i odpowiednio go skonfigurować.

Osobom, którym programowanie nie jest obce, polecam zainstalować node.js oraz gulpa i tak skonfigurować swoje środowisko programistyczne, aby minifikacja plików odbywała się automatycznie, przy każdym zapisie pliku.

Jak przyśpieszyć stronę internetową przy pomocy asynchronicznego wczytywania skryptów

Wczytywać skrypty możemy na dwa sposoby: synchronicznie i asynchronicznie. W pierwszym przypadku, kiedy wchodzimy na stronę i wczytujemy skrypty, ich pobieranie i wykonywanie następuje jeden po drugim. W trakcie tego procesu renderowanie strony internetowej jest blokowane.

Aby wczytywać skrypty równocześnie, nie blokując renderowania przy ich pobieraniu, należy wczytać je asynchronicznie. Możemy to zrobić ręcznie, modyfikując kod HTML czy PHP, lub posłużyć się wtyczką.

Ręczna modyfikacja kodu

Aby wczytać skrypt asynchronicznie, należy w kodzie html znacznika <script> dodać  atrybut async:

[html] <script async="async" src="./main.js"></script>; [/html]

lub defer:

[html] <script defer="defer" src="./main.js"></script>; [/html]

Użytkownikom WordPress’a może przydać się poniższy fragment kodu. Wystarczy go skopiować do pliku functions.php, znajdującego się w głównym folderze naszego motywu i lekko go zmodyfikować:

[php]
if( !function_exists( "addAsyncAttribute" ) ){
function addAsyncAttribute($tag, $id) {
if ( 'script-id’ === $id ){
return str_replace( ’ src’, ’ defer="defer" src’, $tag );
}else{
return $tag;
}
}

add_filter(’script_loader_tag’, 'addAsyncAttribute’, 10, 2);
}
[/php]

Powyższy kod pozwala wczytać skrypt asynchronicznie lub nie, na podstawie jego identyfikatora oraz sprecyzować sposób wczytywania (async, defer).

Async a defer

Różnica między tymi dwoma sposobami wczytywania się skryptów polega na tym, że skrypty wczytane za pomocą słówka async będą wykonywać się zaraz po pobraniu. A te z kolei, może nastąpić w zasadzie w dowolnym momencie wczytywania się strony www. A zatem, wczytując skrypty w ten sposób, tracimy kontrolę nad kolejnością ich wykonywania się.

Natomiast skrypty wczytane z atrybutem defer wykonają się po pełnym sparsowaniu dokumentu HTML, w kolejności, w jakiej znajdują się na stronie.

Na co uważać?

Asynchroniczne wczytywanie się skryptów przyśpiesza naszą stronę internetową. Jednak powinniśmy być ostrożni. Jeżeli jakiś skrypt jest zależny od innego, to powinniśmy zadbać o prawidłową kolejność ich wczytywania. Powinni na to uważać szczególnie początkujący programiści.

Zmniejszenie ilości zapytań do serwera

Każdy zasób (pliki html, css, javascript, obrazki) na stronie internetowej to dodatkowe zapytanie do serwera, na którym rezyduje strona internetowa. Im więcej zapytań tym proces wczytywania strony będzie się wydłużał.

Aby zoptymalizować ilość zapytań, można samemu łączyć wiele mniejszych plików css czy javascript w jeden większy lub pomóc sobie w tym zadaniu wtyczką do optymalizacji.

Podobnie można uczynić z obrazkami. W programie graficznym łączymy wiele mniejszych grafik w jedną większą. Aby później wyświetlić jedną z takich pomniejszych grafik, należy otrzymany obrazek ustawić jako tło i w kodzie css poprawnie określić własność background-position.

Wybór dobrego serwera

Jest to pierwsza rzecz, nad którą powinniśmy się zastanowić, jeżeli szybkość wczytywania strony jest jednym z naszych priorytetów. Przez „wybór dobrego serwera” w kontekście tego, jak przyśpieszyć stronę internetową, rozumiem sprawdzenie parametrów hostingu, takich jak:

• lokalizacja,
• obsługa HTTP/2,
• obsługiwane wersje PHP.

Lokalizacja

Kupując serwer, warto zwrócić uwagę na jego lokalizację. Jeżeli spodziewasz się na swojej stronie użytkowników jedynie (albo w znacznej większości) z Polski, to nie ma sensu kupować serwera, który fizycznie znajduje się np.: w Anglii. Powód jest prosty — zapytania generowane przez użytkowników do serwera, podczas przeglądania Twojej strony internetowej będą miały fizycznie dłuższą drogę do przebycia, a to wydłuży czas ładowania się strony.

Obsługa HTTP/2

Przed zakupem hostingu sprawdź, czy obsługuje on najnowszą wersję protokołu HTTP/1.1 (protokołu odpowiadającego za komunikację przeglądarki z serwerem). HTTP/2 pozwala m.in. na jednoczesne pobieranie wielu zasobów (np.: plików .css czy .html). W starszej wersji protokołu zasoby były pobierane jeden po drugim, co wydłużało proces ładowania się strony.

Aby strona internetowa obsługiwała HTTP/2, trzeba spełnić 3 warunki:

• serwer, na którym rezyduje strona, musi mieć wdrożony tenże protokół,
• strona internetowa musi mieć wdrożony protokół SSL (kłódka przy adresie strony),
• użytkownik musi korzystać z nowszej wersji przeglądarki. Tutaj można zobaczyć, jak wygląda wsparcie dla protokołu HTTP/2 na różnych przeglądarkach,

Po spełnieniu powyższych wymagań możemy cieszyć się faktem, że nasza strona obsługuje HTTP/2. Do sprawdzenia, czy tak rzeczywiście jest, możemy wykorzystać to narzędzie online lub zainstalować to rozszerzenie do przeglądarki.

Obsługiwane wersje PHP

Kolejnym parametrem hostingu, na który należy zwrócić uwagę, są obsługiwane wersje PHP. Powinniśmy się upewnić, że nasz serwer obsługuje najnowszą wersję (7.3), albo przynajmniej (7.2). Nie ma się tu co rozpisywać — im nowsza wersja interpretera, tym szybciej kod PHP będzie przetwarzany przez serwer. Wzrasta również bezpieczeństwo.

Wersja PHP

Tak jak wspomniałem wyżej — im wyższa wersja interpretera PHP, tym szybsze przetwarzanie kodu PHP strony. Wersję PHP Twojej strony możesz sprawdzić w panelu administracyjnym swojego hostingu. Możesz też posłużyć się którymś z darmowych plugin’ów np.: Display PHP Version.

Po zmianie wersji PHP powinniśmy sprawdzić, czy strona działa poprawnie — w nowszych wersjach PHP nie wszystkie funkcje muszą być tak samo zapisane, a niektórych może nawet nie być. W związku z tym przejście ze starej wersji PHP na nowszą może wygenerować niespodziewane błędy.

Kompresja gzip lub deflate

Jest to rodzaj kompresji bezstratnej zachodzący po stronie serwera. Dzięki kompresji możemy zmniejszyć rozmiar plików tekstowych pobieranych przez przeglądarkę, a zatem skrócić czas ładowania się strony. Kompresja pozwala zaoszczędzić nawet do 70% wagi plików z rozszerzeniem .js, .css, .html, .svg czy fontów. Tej kompresji nie stosujemy dla obrazków.

Włączyć kompresje możemy używając odpowiedniego plugina lub samemu wklejając poniższy kod do pliku .htaccess w folderze głównym naszej strony internetowej:

[plain]

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

</IfModule>;

[/plain]

Powyższy fragment kodu nie zadziała, jeżeli nasz serwer nie będzie obsługiwał modułu mod_deflate.

Wykorzystaj pamięć cache przeglądarki

Aby uniknąć ciągłego pobierania zasobów z serwera, możemy wykorzystać pamięć cache przeglądarki. Pobrane zasoby (skrypty, obrazki, fonty) zostaną zapisane na dysku użytkownika i w razie konieczności ponownego ich użycia — wczytane bezpośrednio z dysku komputera.

Tutaj znowu mamy dwie opcje: wklejamy poniższy fragment kodu do pliku .htaccess w głównym katalogu naszej strony.

[plain]
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>
[/plain]

Lub posiłkujemy się wytyczką.

Jak przyśpieszyć stronę internetową za pomocą wtyczki?

Większość z metod na to, jak przyśpieszyć stronę internetową, które wypisałem w tym artykule można wykonać bardzo prosto samemu. Wystarczy zainstalować wtyczkę, maksymalnie dwie i odpowiednio je skonfigurować. Cały proces nie powinien zająć więcej niż 10 minut. Jednak z uwagi na fakt, że ten wpis jest już dość długi, o tym jak przyśpieszyć stronę internetową za pomocą wtyczki napiszę niedługo w oddzielnym wpisie.