Dołącz do czytelników
Brak wyników

Audyt www

8 listopada 2021

NR 60 (Październik 2021)

Tuning serwisu WWW – jak zweryfikować słabe i mocne strony witryny internetowej? Ranking aplikacji i narzędzi web managera

0 22

Jeśli masz swoją witrynę, na pewno chciałbyś, żeby dotarła do jak największej grupy odbiorców i była pozytywnie odbierana. Ten cel będzie trudny do osiągnięcia, jeśli witryna zawiera dużo defektów funkcjonalnych – nie można jej odtworzyć na urządzeniach mobilnych lub jest problem z nawigacją czy zrozumieniem zawartej w niej treści.

Obecnie powstaje wiele podmiotów oferujących swoje usługi w zakresie testowania serwisów internetowych pod różnym kątem ich użyteczności. Jednak, niezależnie od tego, jaki jest Twój budżet, wiedza oraz to, czy jest to rozbudowany serwis internetowy, czy tylko pojedyncza strona, wiele podstawowych zagadnień możesz sprawdzić samodzielnie. Wystarczy skorzystać z odpowiednich narzędzi. Każde z nich służy do ujawnienia najróżniejszych defektów witryny. Jakich?
Defekty witryny dotyczą m.in. takich dziedzin, jak:

POLECAMY

  • optymalizacja,
  • dostępność,
  • bezpieczeństwo,
  • wydajność.

Jednak wspomniane obszary to jedno. Nad wieloma kwestiami możesz się zastanowić jeszcze na etapie projektowania witryny. O jakich istotnych kwestiach mowa?

  • Do kogo witryna ma być skierowana?
  • Jaki efekt chcesz osiągnąć?
  • Co Twój serwis będzie robił?
  • Czy ze strony będą korzystać osoby niepełnosprawne? 
  • Jaki masz budżet?
  • Z jakich technologii skorzystasz do realizacji projektu?

Odpowiednio wcześnie robione korekty pozwolą uniknąć wielu błędów w przyszłości. Zaoszczędzi to czas web developerów i pieniądze. Przy realizacji projektu często nie ma już czasu na dogłębną analizę, co później może się odbić czkawką. Potocznie mówi się o tym, że „papier wszystko przyjmie”. Ale jak już przystąpisz do realizacji projektu i nagle okaże się, że trzeba zmienić kluczowe funkcje serwisu, to już nie będzie to takie proste. Potrzebne będą duże nakłady pracy i czas zespołu tworzącego Twój serwis. Jedna z zasad testowania mówi, że „wczesne testowanie oszczędza czas i pieniądze”, a więc im wcześniej zweryfikujesz swoje zamiary, tym lepiej dla projektu.

Optymalizacja

Optymalizacja serwisu to bardzo ogólne pojęcie, które obejmuje dostosowanie kodu, treści, grafik i struktury serwisu. W pierwszej kolejności powinieneś sprawdzić kod HTML i CSS, bo to podstawa strony internetowej.
W kodzie HTML zawiera się odpowiednie elementy semantyczne, zgodne ze specyfikacją najnowszego HTML5, takie jak: header, footer, main, section itd. Powinieneś też określić typ dokumentu, atrybut językowy oraz przypisać odpowiednie metadane, z których potem będą korzystać przeglądarki internetowe. Pamiętaj, by nie zostawiać zbędnych komentarzy oraz nieaktywnego kodu. Poza tym serwis powinien obsługiwać strony błędów (404, 5xx itd.), ale nie powinien zawierać błędów, takich jak 404. W celu weryfikacji tych ostatnich najlepiej zrobisz, jeśli posłużysz się narzędziami do tego przeznaczonymi:

Zadbajmy również o opisy strony i favicon, który będzie widoczny w zakładce. W elemencie musisz zawrzeć tytuł i opis swojej strony internetowej. Według specyfikacji idealny tytuł zawiera 30–55 znaków. Opis natomiast powinien mieścić się w granicach 70–150 znaków. 
W celu lepszego odbioru witryny przez użytkownika zwróć uwagę na dobór odpowiedniego fontu. Webfont musi być użyty w odpowiednim formacie (WOFF, WOFF2, TFF), aby każda nowoczesna przeglądarka internetowa mogła go obsłużyć. Dodatkowo rozmiar webfontu nie powinien przekraczać 2 MB.
Do szybkiej weryfikacji błędów w kodzie HTML oraz CSS możesz użyć walidatora W3C:

A co, jeśli ktoś udostępni Twoją stronę w mediach społecznościowych? Social media są obecnie szalenie ważnym źródłem informacji w naszym społeczeństwie, stąd też kluczowe jest, aby społecznościowe metatagi umieszczać w kodzie. Facebook Open Graph oraz Twitter Cards są jednymi z podstawowych tagów odpowiedzialnych za wyświetlanie informacji o Twojej stronie podczas udostępniania jej w social 
mediach.

Open Graph:

 

Twitter Card:
 


Za pomocą poniższych narzędzi w łatwy sposób możesz sprawdzić, jak udostępniany przez Ciebie link wyświetli się w konkretnych social mediach:

lub 


Obrazy, które załączasz, muszą być również zoptymalizowane do wyświetlania za pomocą przeglądarek. Jednym z najpopularniejszych narzędzi do kompresowania zdjęć online jest TinyPNG. Obrazy powinny być też responsywne – dzięki temu dostosują się do szerokości urządzenia, na którym będą wyświetlane. Niezbędny jest też opisujący grafikę alternatywny tekst, który użytkownik zobaczy w razie jej nieprawidłowego załadowania.
Na tym etapie należałoby wspomnieć o RWD (Responsive web design), czyli technice projektowania stron WWW, której celem jest dostosowywanie serwisu lub pojedynczej strony do rozmiaru okna przeglądarki. Responsywność możesz sprawdzić za pomocą narzędzi deweloperskich wbudowanych w przeglądarki:
 


DevTools zapewnia wiele przydatnych informacji na temat strony, a także generuje podstawowe raporty ogólnego jej stanu:
 


Możesz też posłużyć się przeznaczonymi do tego narzędziami w sieci, takimi jak:

Genialnym programem (niestety płatnym), za pomocą którego możesz zweryfikować wyświetlanie swojej strony na przeglądarkach, systemach i rzeczywistych urządzeniach mobilnych, jest BrowserStack. Dzięki tej platformie masz możliwość podglądu witryny na określonym urządzeniu, z określoną przeglądarką lub na określonym systemie. Już nie musisz mieć przy sobie wielu urządzeń, żeby być pewnym, czy wszystko odpowiednio się wyświetla na konkretnym telefonie lub tablecie:
 


Często mówi się o optymalizacji strony internetowej pod kątem SEO (Search Engine Optimization). Dostosowanie wiąże się z wyszukiwarkami internetowymi, które w przyszłości będą znajdować Twoją witrynę oraz indeksować za pomocą robotów sieciowych. W celu sprawnego poprawienia swojego wizerunku w oczach przeglądarek internetowych, możesz się posłużyć odpowiednimi programami, np.:


Jest to program, z pomocą którego w łatwy sposób sprawdzisz, jakie zagadnienia są krytyczne i wymagają natychmiastowej poprawy, a które z nich w nieznacznym stopniu wpływają na Twoją witrynę.
Drugim podobnym programem jest SEMRUSH – https://semrush.com
Dostępne opcje pozwalają monitorować stronę oraz śledzić ruch.

Dostępność

Dostępność serwisów internetowych to ostatnio coraz częściej omawiany temat, który wykracza już poza strony podmiotów publicznych. Obecnie tematem dostępności zajmują się również prywatne firmy. Istnieje wiele zaleceń zawartych w normach WCAG (Web Content Accessibility Guidelines), które powinna spełniać strona, żeby bez przeszkód mogły z niej korzystać osoby z niepełnosprawnościami.
W Polsce istnieje ustawa o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych. Możesz w niej przeczytać o obowiązujących normach i karach, jakie są przewidziane za ich niedotrzymanie. Normy WCAG są sprawdzane w czterech kategoriach:

  • postrzegalność,
  • funkcjonalność,
  • zrozumiałość,
  • kompatybilność.

Każda z tych czterech kategorii zawiera wytyczne i kryteria sukcesu wymagane do spełnienia na jednym z trzech poziomów: A, AA lub AAA. Ważnym elementem jest nawigacja po serwisie. Nagłówki powinny być stosowane w odpowiedniej kolejności oraz każda strona powinna zawierać tylk...

Pozostałe 70% treści dostępne jest tylko dla Prenumeratorów

Co zyskasz, kupując prenumeratę?
  • 6 drukowanych wydań magazynu Online Marketing
  • Dodatkowe artykuły niepublikowane w formie papierowej
  • Dostęp do czasopisma w wersji online
  • Dostęp do wszystkich archiwalnych wydań magazynu oraz dodatków specjalnych
  • ... i wiele więcej!
Sprawdź szczegóły

Przypisy