Norbert Witak: Wstęp do audytu stron WWW

Norbert Witak: Wstęp do audytu stron WWW
Strona internetowa – w dzisiejszych czasach nie wydaje się to niczym trudnym do zrobienia. Jesteśmy ją w stanie stworzyć wyklikując w generatorze albo korzystając z gotowych systemów jak WordPress. Istnieją także bardziej rozbudowane aplikacje internetowe, jak Facebook, Booking.com, czy inne tego typu.

Korzystając na co dzień z Internetu jesteśmy w stanie zauważyć, że jedne strony wczytują się szybciej od innych. Czy to zależy tylko od szybkości naszego łącza internetowego, czy ilości danych na stronie? Oba czynniki na pewno mają na to wpływ, jeśli jednak chcielibyśmy spojrzeć w głąb, z pomocą przychodzi nam audyt. Słowo to, pomimo, że właściwie głównie używane jest w księgowości, znalazło zastosowanie w informatyce. W naszym przypadku posłużymy się nim do weryfikacji aplikacji.

Audyt można podzielić na kilka etapów:

  • Poprawność kodu HTML,
  • Accessibility,
  • UX,
  • Bezpieczeństwo.

Zacznijmy od podstaw, czyli od weryfikacji markupu. Najnowsze aplikacje internetowe pisane są w standardzie HTML 5, za który odpowiedzialna jest organizacja World Wide Web Consortium, w skrócie W3C. I ona także w tym przypadku przychodzi nam z pomocą, udostępniając narzędzia do weryfikacji poprawności napisanego przez nas kodu HTML. Możemy z nich skorzystać używając strony: https://validator.w3.org/. Bardziej rozbudowane narzędzie weryfikujące również poprawność CSS dostępna jest na podstronie: https://validator.w3.org/unicorn/.

Narzędzia umożliwiają wpisanie linku do naszej witryny bądź też bezpośrednie wklejenie kodu. Dzięki niemu możemy szybko zweryfikować końcowy rezultat naszej pracy. Błędy dodatkowo są opisane, umożliwiając zwrócenie uwagi na te najczęściej popełniane podczas pisania kodu, jak np. pomijanie atrybutu „alt” w tagu „img”.

I chyba najważniejsze - każdy z popełnionych przez nas błędów przeglądarka musi „naprawić”. Tracimy wtedy cenne milisekundy oraz nie mamy gwarancji, że otrzymamy ten sam rezultat we wszystkich przeglądarkach. Dodatkowo, poprawny kod strony jest ważnym krokiem w optymalizacji widoczności w wyszukiwarkach (SEO).

A co z pozostałymi parametrami? Na szczęście również istnieją narzędzia do ich weryfikacji. Od pewnego czasu najpopularniejszym było YSlow, które oparte jest o 23 spośród 34 reguł, które można testować, stworzone przez specjalny zespół ds. jakości Yahoo! Narzędzie dostępne jest jako dodatek do przeglądarek a także jako opcja dodatkowa do niektórych testów wykonywanych przez aplikacje online. Niestety jest ono rzadko rozwijane.

http://yslow.org/

Dużo ciekawszym, a jednocześnie bardziej rozbudowanym narzędziem jest PageSpeed Insights udostępniony przez Google.

PageSpeed Insights mierzy, jak można poprawić wydajność strony w następujących aspektach (zaczerpnięte ze strony producenta):

  • czas wczytywania części strony widocznej na ekranie: czas, który upływa od momentu wysłania żądania nowej strony do momentu wyrenderowania części strony widocznej na ekranie przez przeglądarkę,
  • czas pełnego wczytania strony: czas, który upływa od momentu, gdy użytkownik wysyła żądanie nowej strony do momentu, gdy strona zostanie w pełni wyrenderowana przez przeglądarkę,
  • mierzy aspekty wydajności renderowania strony niezależne od sieci: konfigurację serwera, strukturę kodu HTML strony, a także korzystanie z zasobów zewnętrznych, takich jak obrazy, pliki JS i CSS.

Narzędzie jest przydatne, ponieważ umożliwia weryfikację twojej aplikacji nie tylko od strony front-endu, ale zwraca też uwagę na ważne aspekty ustawień serwera, które mogą znacząco wpłynąć na czas potrzebny do pobrania i wyświetlenia strony. Przy okazji weryfikujemy jednocześnie wersję mobilną oraz wyświetlaną na „dużych” komputerach. Najbardziej jednak istotne jest, że wraz z błędem zwracana jest sugestia jak można go naprawić.

Warto sprawdzać wyniki co określony czas - Google na bieżące aktualizuje swoje narzędzie o nowe reguły. Uproszczona wersja wbudowana jest w przeglądarkę Chrome i można ją uruchomić w dowolnym momencie.

A co gdy przeprowadziliśmy test wykorzystując dowolne narzędzie i strona uzyskała wynik 50/100. Czy powinienem się tym martwić?

Na pewno jest co usprawnić na stronie, nie musimy jednak mieć obsesji nad uzyskaniem 100 na 100 punktów. Powodem dla którego Google opracował PageSpeed Insights było stworzenie przewodnika zawierającego najlepsze praktyki optymalizacji strony. Wynik 85 jest już bardzo zadowalający, natomiast osiągnięcie 100 może wymagać dużej ilości czasu oraz funduszy. Warto na pewno zacząć od eliminacji podstawowych błędów (np. kompresja plików, priorytetyzacja treści) i dążyć na bieżąco do usprawnienia działania witryny.

Narzędzie dostępne jest pod adresem: https://developers.google.com/speed/pagespeed/insights/

 

Inne narzędzia, na które warto w szczególności zwrócić uwagę, to Sitespeed.io i Lighthouse. Oba można zainstalować z NPMa i skorzystać z poziomu linii komend. Może to się jednak okazać dość żmudne i dużo łatwiejsze może być zainstalowanie Sitespeed.io, jako wirtualny kontener na platformie Docker, natomiast Lighthouse, na dobry początek, jako dodatek do przeglądarki Chrome. Oba oprogramowania umożliwiają przeprowadzenie gruntownych testów. W przypadku Sitespeed.io, warto wspomnieć, że możemy go dość dobrze sparametryzować, uwzględniając w raporcie między innymi szybkość połączenia internetowego użytkownika, czy możliwość nagrania postępu wczytywania się strony do celów późniejszego porównania. Wadą jest natomiast brak dodawanych podpowiedzi, które są dostępne po doinstalowaniu The Coach. Ma on jednak być zintegrowany z narzędziem w wakacyjnym releasie.

Wyniki mogą być przedstawione w formie raportu HTML lub zapisane w formacie JSON. Dzięki czemu, co jest jedną z ich najważniejszych zalet, jest możliwość zintegrowania w procesie ciągłej integracji (Continuous integration) aby móc na bieżąco śledzić postęp wytwarzanego oprogramowania. Więcej informacji na stronach producentów:

 

Nie można przy wymienieniu tych wszystkich narzędzi, których w Internecie znajdziemy znacznie więcej nie wspomnieć, iż każde z nich uwzględnia inne testy. Warto więc zapoznać się wcześniej, co dane narzędzie obejmuje, aby móc wybrać to, w którym są zawarte najważniejsze dla nas testy. Możemy też zawsze skorzystać z kilku narzędzi na raz, aby móc przeprowadzić bardziej rozbudowany audyt.

Bezpieczeństwo i dostępność (accessibility) jest tematem o wiele bardziej złożonym i wartym poświęcenia osobnego artykułu.

W przypadku accessibility, warto zacząć od zapoznania się ze standardami WCAG w wersji 1 i 2 dostępnymi na stronach W3C. Do przeprowadzania audytu możemy skorzystać z narzędzi, do których odnośniki znajdziemy na stronie: https://www.w3.org/WAI/ER/tools/?q=wcag-20-w3c-web-content-accessibility-guidelines-20 .

Temat bezpieczeństwa zależy natomiast od rodzaju testów, jakie chcemy przeprowadzić - czy mają to być testy penetracyjne, czy może atak Cross-site scripting (XSS). Na pewno nie można pominąć wstępu bez wspomnienia o narzędziu takim, jak OWASP Web Testing Environment Project. Narzędzie możemy pobrać jako maszynę wirtualną lub do bezpośredniego uruchomienia w przygotowanym środowisku Mantra OS, w formacie live CD. Warto przy tym pamiętać, że narzędzie próbuje przeprowadzić różne ataki penetracyjne z jakich korzystają hakerzy. Powinniśmy więc wykonywać testy tylko na posiadanych przez nas maszynach i w żadnym przypadku nie powinniśmy odpalać ich w środowisku produkcyjnym. Przygotowany wcześniej łatwy do wgrania backup także może okazać się kluczowy.

Podsumowując, warto pamiętać, że nikt z nas nie lubi czekać na wczytująca się stronę, a każdy z nas może przeprowadzić audyt swojej aplikacji www, który pozwali nam przyspieszyć ten proces. Możemy go przeprowadzić analizując krok po kroku pojedyncze dane lub skorzystać z gotowych narzędzi, z których w szczególności warto polecić takie, jak: PageSpeed Insights, Sitespeed.io czy Lighthouse. Większość z nich udostępnia bardzo przejrzyste raporty, przy każdym podpunkcie prezentując konkretny wynik na skali ocen czy określonej punktacji. Dodatkowo otrzymujemy opis błędów i podpowiedź, jak można poprawić kod. Każdy z wymienionych programów ma swój zestaw testów, z pewnością znajdziemy więc coś dla siebie.

Audyt warto zacząć od eliminacji najprostszych błędów jak poprawność kodu i drążyć temat coraz głębiej. Dzięki niemu możemy uniknąć potencjalnych problemów już na wstępnym etapie realizacji projektu oraz, nie tylko zwrócić uwagę, ale i niekiedy dowiedzieć się o najnowszych trendach przyspieszających rendering strony. Jednakże, warto przy tym pamiętać, aby przeprowadzać go okresowo, gdyż technologia nie stoi w miejscu.