Jak sprawdzić szybkość i przyspieszyć działanie strony WWW


Ilość ocen: 4 Średnia ocena: 4/5

Jednym z wielu czynników branych pod uwagę przez wyszukiwarkę Google przy określaniu pozycji strony w wynikach wyszukiwania jest prędkość jej działania.

Z oczywistych względów im szybciej nasza strona się wczytuje tym lepiej, nikt nie lubi przecież czekać na załadowanie strony. Czy jest jakiś sposób by samodzielnie sprawdzić prędkość działania strony WWW i co można zrobić by działanie strony przyspieszyć?

Jednym z darmowych narzędzi dostępnych w Internecie, nie wymagających instalacji, które pozwoli Ci błyskawicznie ocenić wydajność i szybkość działania twojej strony WWW jest narzędzie PageSpeed udostępnione przez firmę Google.

W celu dokonania analizy należy przejść na stronę

https://developers.google.com/speed/pagespeed/insights

i w polu "Enter a web page URL" wpisać adres strony, którą chcemy przeanalizować, a następnie kliknąć klawisz "Analyze".

Teraz musimy chwilę odczekać w celu przeanalizowania podanej strony i przygotowania raportu przez narzędzie Google. Gdy raport będzie gotowy zostanie on nam wyświetlony i będzie miał postać podobną do tej przedstawionej poniżej.

Zaraz pod nagłówkiem Overview powinna nam się ukazać ocena punktowa w skali od 0 do 100. Nasza strona osiągnęła w tym teście wynik 95 punktów, co jest bardzo dobrym wynikiem :)

Po lewej stronie znajdują się sugestie co możemy poprawić, by strona działała jeszcze szybciej. Podzielone są one na 4 sekcje:

High priority. Te propozycje zapewniają największą możliwą poprawę wydajności przy minimalnym nakładzie pracy.
Medium priorityty. Te propozycje mogą zapewniać mniejszą poprawę lub wiązać się ze znacznie większą ilością pracy do wykonania.
Low priority. Te propozycje zapewniają najmniejszą poprawę. 
Experimental rules. Te propozycje są eksperymentalne i nie mają wpływu na całkowity wynik testu.

W pierwszej kolejności powinniśmy zwrócić uwagę na informacje znajdujące się w sekcji "High priority", ponieważ dzięki wprowadzeniu tam zawartych wskazówek możemy szybko i przy małym nakładzie pracy uzyskać zwiększenie wydajności strony.

Ponieważ dla naszej strony nie ma w tej sekcji żadnych wskazówek - wszystkie wytyczne zostały już spełnione - dlatego zajmiemy się poniżej omówieniem najczęściej spotykanych problemów.

Włącz kompresję

Ponieważ kompresja zasobów przy użyciu algorytmu gzip lub deflate może zmniejszyć liczbę przesyłanych podczas pobierania strony danych dlatego włączenie kompresji na serwerze może zdecydowanie przyspieszyć czas potrzebny na otwarcie strony.

W celu włączenia kompresji na serwerach typu Apache (czyli na większości serwerów firm hostingowych w polsce) wystaczy w katalogu głównym serwera utworzyć plik o nazwie .htaccess (na początku nazwy jest kropka), a następnie w tym pliku umieścić następującą linię kodu:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript application/json

Ponieważ nie chcemy kompresować wszystkich zasobów, a jedynie te tekstowe (kod javascript, kod HTML, style CSS) określamy dokładnie jakiego rodzaje zasoby będą kompresowane.

UWAGA!!! Powyższy sposób może nie zadziałać lub wręcz spowodować wystąpienie błędu 500 Internal Server Error, jeżeli w kodzie wkradnie się błąd lub serwer nie obsługuje modułu mod_deflate.

Wykorzystaj pamięć podręczną przeglądarki

Bardzo istotna kwestią przy prędkości działania strony jest ustawienie czasu odpowiednio długiego czasu wygaśnięcia dla zasobów statycznych, które się nie zmieniają. Dzięki temu przy otwieraniu przez tego samego użytkownika nowej zakładki na stronie lub gdy ponownie wróci on na naszą stronę po jakimś czasie dane takie jak zdjęcia, kod javascript, arkusze stylów, itp. nie będą pobierane ponownie z serwera, a z lokalnego komputera, gdzie zostały wcześniej zapisane przez przeglądarkę.

W celu optumalego wykorzystania pamięci podręcznej przeglądarki do wspomnianego już wcześniej pliku .htaccess powinniśmy dopisać następujące reguły:

ExpiresActive On
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType application/javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/icon A2592000

Pierwsza linijka włącza obsługę modułu mod_expires na serwerze (o ile nie jest ona domyślnie włączona), a następne linie określają dla poszczególnych typów plików czas wygaśnięcia w sekundach. Wartość 2592000 podana w przykładzie powyżej odpowiada 30 dniom. Jeżeli wiemy, że zawartość poszczególnych plików w długim czasie nie ulegnie zmianie możemy tą wartość jeszcze bardziej zwiększyć.

UWAGA!!! Powyższy sposób może nie zadziałać lub wręcz spowodować wystąpienie błędu 500 Internal Server Error, jeżeli w kodzie wkradnie się błąd lub serwer nie obsługuje modułu mod_expires.

Włącz obrazy do sprite’ów CSS

Ta reguła ma zastosowanie przede wszystkim do obrazów, które stanowią tło poszczególnych elementów na stronie. Jeżeli obrazów takich jest na naszej stronie bardzo dużo każdy jest pobierany przez przeglądarkę z osobna.

Nawet jeżeli połączenie internetowe, z którego korzystamy jest bardzo szybkie, pobieranie kilkudziesięciu małych plików zajmie dużo dłużej ni pobranie jednego większego pliku, nawet jeżeli jego rozmiar jest większy niż suma rozmiarów tych małych plików. 

Dzieje się tak dlatego, że przesłanie każdego pliku wiąże się z wysłaniem żądania do serwera, oczekiwaniem na odpowiedź i przesłaniem pliku. Czasy poszczególnych etapów możemy przedstawić mniej więcej tak:

Gdy połączymy wiele plików graficznych w jeden, powyższy cykl będzie wykonany tylko raz, a zwiększy się jedynie czas przesyłania pliku z serwera, dzięki czemu czas potrzebny na otwarcie strony ulegnie znacznemu skróceniu.

Niestety wykonanie sprite'ów CSS nie jest już takie proste i wymaga doświadczenia przy tworzeniu stron WWW, dlatego samodzielna optymalizacja strony WWW pod kątem tego punktu jest raczej niemożliwa.

Zastosuj przeskalowane obrazy

Jedną z najczęstszych przyczyn długiego czasu ładowania stron jest wstawianie na stronę grafik o bardzo dużych rozmiarach i dostosowywanie ich wielkości jedynie poprzez zmianę atrybutów 'width' i 'height' obrazów.

Efektem takiego działania jest to, że użytkownikowi podczas otwierania strony przesyłany jest bardzo duży obraz, który następnie pomniejszany jest przez przeglądarkę.

W celu wyeliminowania tego problemu najlepiej przeskalować zdjęcie do rozmiarów, które chcemy docelowo użyć. Dzięki temu czas niezbędny na przesłanie pliku ulegnie znaczącemu skróceniu, a ponadto nasza strona będzie się ładować dużo szybciej. Zaoszczędzimy przy tym również sporo miejsca na serwerze.

Powyższe reguły to tylko kilka z najważniejszych, które mają fundamentalny wpływ na szybkość ładowania i działania strony. Pełne informacje w języku angielskim można znaleźć na stronie https://developers.google.com/speed/docs/best-practices/rules_intro

Dla przeglądarek Google Chrome oraz Mozilla Firefox są dostępne wtyczki, które pozwalają na analizowanie prędkości działania bezpośrednio będąc na danej stronie z poziomu przeglądarki. Dzięki zainstalowaniu dodatków mamy dostęp do komunikatów w języku polskim. Ponadto w przypadku przeglądarki Firefox przeglądarka zapisuje zoptymalizowane wersje plików i obrazów, które możemy następnie wykorzystać w celu przyspieszenia strony, ale o tym w następnym artykule.

Uważasz ten artykuł za przydatny? A może chciałbyś mieć stronę zoptymalizowaną tak dobrze, jak nasza?
Jeśli tak koniecznie zapoznaj się z naszą ofertą na tworzenie i projektowanie stron www.
Wpis w kategorii: Blog

Podziel się z nami opinią