Jak sprawdzić parametry strony?
Korzystając z szybkiego łącza internetowego przy tworzeniu lub obsłudze strony internetowej często zapominamy o tym, że istnieją jeszcze miejsca na świecie i w Polsce, gdzie Internet o przepustowości 1Mb/s jest rarytasem. Zaś coraz popularniejszy w Polsce dostęp do sieci za pomocą Internetu mobilnego zmusza nas do rozliczania się z każdego pobranego bajta danych. Jak więc sprawdzić naszą stronę pod względem wydajności i optymalizacji kodu? Mamy na to kilka sposobów:
Co poprawić na mojej stronie?
Jeżeli szukasz wskazówek i narzędzi które w jasny sposób opiszą Ci braki i niedostatki Twojej strony internetowej to możesz skorzystać z kilku przydatnych narzędzi jakimi są:
- Google Page Speed zwracający uwagę na elementy strony, które powodują powolne jej ładowanie,
- walidator składni HTML, który wskaże na błędy w kodzie HTML lub
- walidator składni plików CSS, który wskaże błędy i ostrzeżenia w zeszycie styli dołączonych do strony internetowej.
Każdy programista aplickacji internetowych powinien znać przynajmniej dwa ostatnie narzędzia i dostosować stronę pod różne przeglądarki i systemy operacyjne. Jest to czasochłonne i mozolne zajęcie, ale daje satysfakcje stworzenia strony, która poprawnie otworzy się w każdej przeglądarce i zrobi to nawet 10x szybciej niż jej pierwotna wersja.
Kilka sztuczek dla osób tworzących nowe strony internetowe
Jako, że starą stronę nie zawsze można już optymalizować to postanowiliśmy przedstawić kilka prostych sztuczek dla osób, które dopiero budują lub mają zamiar zbudować nową stronę internetową. Jest to ogólny zbiór porad zarówno dla początkujących webmasterów i zaawansowanych front-end'owców.
Znajdź 'spowalniacze'
Za pomocą Developers Tools od Google Chrome lub Firebug'a w Mozilla Firefox przeprowadź test szybkości ładowania się strony internetowej (w zakładce Network lub Net). Pozwoli Ci to wyłapać elementy, których ładowanie zajmuje najwięcej czasu lub wskaże Ci komponenty strony, których nie używasz, a zostały one niepotrzebnie załadowane. Nie ma złotego środka, ale zaleca się, aby komponenty strony internetowej nie przekraczały wielkości 25KB. Minimalizacja ilości tych elementów może znacząco wpłynąć na czas ładowania się strony internetowej.
Poprawnie zapisuj grafiki
Pamiętaj o poprawnym zapisie grafik użytych na stronie internetowej. Zdjęcia powinny być zapisane w formacje skompresowanych plików JPG, zaś grafiki o niewielkiej liczbie kolorów lub z bez tła w formacie PNG lub GIF. Przy dużej ilości zdjęć na stronie, wybór odpowiedniego formatu może okazać się kluczowy. Na stronie nigdy nie stosuj plików BMP. Pamiętaj również o kompresji obrazów.
Zminimalizuj plik CSS i JS
Minimalizacja kodu CSS i JS wspomoże Twoją stronę o dodatkowe kilobajty. Obecnie na rynku jest sporo darmowych narzędzi pozwalających to wykonać w prosty i szybki sposób.
Złącz swoje pliki CSS i JS
Każdy osobny plik CSS i JS to osobne wywołanie przez protokół HTTP. W celu minimalizacji takich zapytań zaleca się - o ile to możliwe - złączenie ich do jak najmniejszej ilości. Można to zrobić ręcznie, choć praca ta jest mozolna lub skorzystać z rozwiązań dostarczanych przez PHP.
Złącz ikonki w paski CSS
Jeżeli na stronie używasz dużo małych ikonek to zalecane jest użycie tzw. CSS Stripe dla poprawy wydajności strony. Są to obrazkowe paski ikonek minimalizujące ilość zapytań przeglądarki, które możesz wyświetlać za pomocą backgroud-position.
Wykorzystaj serwer do kompresji plików
Niestety nie każdy serwer oferuje taką możliwość, ale te co ją mają pomogą Ci w skuteczny sposób przyśpieszyć działanie strony internetowej. Jeżeli jednak posiadasz taką możliwość to do swojego pliku .htacces wklej następującą formułkę:
FileETag none
# Insert filters
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/atom+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/x-httpd-php-source
AddOutputFilterByType DEFLATE image/svg+xml
# Drop problematic browsers
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
ExpiresActive On
ExpiresByType text/html A1
ExpiresByType application/xhtml+xml A1
# Add Expire header set to 30 days (far future)
ExpiresByType text/css A3153600
ExpiresByType text/javascript A3153600
ExpiresByType application/javascript A3153600
ExpiresByType application/x-javascript A3153600
ExpiresByType image/gif A3153600
ExpiresByType image/png A3153600
ExpiresByType image/jpg A3153600
ExpiresByType image/jpeg A3153600
ExpiresByType image/x-icon A3153600
ExpiresByType image/vnd.microsoft.icon A3153600
ExpiresByType image/svg+xml A3153600
ExpiresByType text/plain A3153600
# Add Expire header set to 1 day
ExpiresByType text/xml A108000
ExpiresByType application/x-httpd-php A108000
ExpiresByType application/x-httpd-fastphp A108000
ExpiresByType application/x-httpd-php-source A108000
# Add Expire header set to 1 hour
ExpiresByType application/xml A108000
ExpiresByType application/atom+xml A108000
ExpiresByType application/rss+xml A108000
# Fallback - when there is no mod_expires, try to add far future expire headers using mod_headers
Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT"
W ten sposób umożliwisz kompresję plików i korszystając z cashe przeglądarki umożliwisz ich zapisanie na dysk twardy komputera na którym jest przeglądana strona internetowa.
Unikaj kodu CSS i JS w treści strony
Domyślnie przeglądarki zapisują pliki CSS i JS do swojej pamięci podręcznej, zaś nie robią tego z kodem wpisanym w treść dokumentu HTML. Duża ilość kodu CSS i JS w treści dokumentu znacząco wpłynie na spowolnienie ładowania się każdej Twojej podstrony.
Monitoruj prędkość działania Twojego serwera
Dzięki Narzędziom Google dla Webmasterów możesz stale monitorować wydajność Twojego serwera. Jeżeli będzie ona zbyt niska to może być to kluczowym elementem przyśpieszenia działania strony internetowej.
Podsumowanie
Nie łatwo jest sprostać wymaganiom wszystkich użytkowników, a samo przyśpieszenie ładowania strony może mieć wpływ przedewszystkim nie na nowych, a na powracających użytkowników witryny. Warto więc się zastanowić czy warto poświęcić kilka godzin pracy na dopracowanie strony internetowej, dzięki czemu nasi klienci zawsze będą zadwoleni z jej wydajności i z chęcią będą na nią powracać.