Na naszym agencyjnym blogu dzielimy się nie tylko miękką wiedzą, ale także tą twardą, liczbową, ze zwrotami i komendami których, poza developerami, nikt w firmie nie kojarzy. Dlaczego? Bo wierzymy, że naszym czytelnikom wystarczy sama świadomość istnienia omawianych kwestii, aby zasiać ziarno ciekawości. Sprawdzić te kwestie w swoich firmach i reagować, jeśli zajdzie taka potrzeba. Taki jest nasz cel.
Mamy w naszym kraju coraz szybsze łącza i nikt nie lubi korzystać z serwisów internetowych, których treści ładują się bardzo długo… Każdy użytkownik oczekuje, by strona załadowała się jak najszybciej. Niekiedy proste oraz niewielkie serwisy internetowe potrafią ładować się w nieskończoność, co w przypadku np. serwisów e-commerce może mieć istotny wpływ na podjęcie (lub czy raczej niepodjęcie) decyzji zakupowej.
A to dlatego, że ich twórcy zapomnieli o podstawowych zasadach.
Tworząc stronę internetową web developer musi pamiętać o kilku regułach, które pozwolą mu przyśpieszyć budowany serwis. Jedną z podstawowych zasad jest to, aby wszystkie skrypty, które tylko mogą, były osadzane asynchronicznie lub na samym końcu dokumentu HTML. Dzięki temu prostemu zabiegowi możemy oszczędzić sporo czasu potrzebnego na pełne uruchomienie serwisu.
Osadzając zdjęcia w serwisie www warto pamiętać o ich optymalizacji. Dzięki programom takimi jak FileOptimizer możemy zaoszczędzić kilkadziesiąt cennych kilobajtów, co ma wypływ na zmniejszenie czasu ładowania o kolejne milisekundy. Optymalizacja zdjęcia nie musi wiązać się z utratą jego jakości. Większość programów usuwa tzw. metadane, czyli np. informacje EXIF, które przechowują dane o aparacie, programie graficznym itd.
W celu sprawdzenia, czy nasze zabiegi przynoszą odpowiednie rezultaty możemy skorzystać z narzędzia Google, jakim jest PageSpeed Insights. Dzięki niemu możemy zobaczyć co należy poprawić w serwisie, aby skrócić czas uruchomienia. Poniższa grafika prezentuje wynik testu z przed optymalizacji obrazów (z lewej), a kolejna - już po ich zoptymalizowaniu (z prawej):
Jak widać - wynik mocno się poprawił.
Ostatnią rzeczą, na którą warto zwrócić uwagę jest plik .htaccess w głównym folderze projektu. Dzięki dyrektywom w nim zawartym możemy ustalić po stronie serwera pewne zasady, które znacznie przyśpieszą pracę naszego serwisu i jakość jego użytkowania. Jednym ze sposób na skrócenie czasów ładowania jest kompresja danych wysyłanych z serwera do przeglądarki www. W tym celu można wykorzystać moduł serwera Apache - mod_deflate. Poniżej została przedstawiona przykładowa konfiguracja:
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
Jeśli mod_deflate nie jest aktywny, można wykorzystać mod_gzip:
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
Kolejne istotne dyrektywy związane z optymalizacją szybkości ładowania strony są związane z modułem mod_expires:
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType application/font-woff2 "access plus 1 year"
Powyższy kod ustawia czas ważności poszczególnych typów plików. Gdy użytkownik odwiedzi stronę po raz pierwszy poszczególne zasoby (pliki) zostaną zapisane w pamięci podręcznej przeglądarki na określony czas.
Powyższe zasady pozwoliły na kolejną poprawę szybkości ładowania naszej strony:
Jak widać proste oraz bardzo szybkie do wprowadzenia zmiany mogą skutkować bardzo dobrymi rezultatami. Warto pamiętać o powyższych zasadach, a jeszcze lepiej stosować je w swoich własnych serwisach. Wystarczy nieraz naprawdę niewiele, aby w znacznym stopniu polepszyć komfort korzystania ze strony www - co, jak sugerowaliśmy na początku, może mieć realne przełożenie na sprzedaż i zyski firmy.
