Historia dzieje się na naszych oczach – właśnie dziś po raz pierwszy w historii Polski uruchomiono stronę internetową prezesa NBP. Jako zespół programistów nie mogliśmy przejść obok tego wydarzenia obojętnie. Wspólnie przeanalizowaliśmy tę stronę pod kątem technicznym, żeby dowiedzieć się, co skrywa strona prezesa NBP pod warstwą wizualną.
Wyniki naszej analizy prezentujemy w poniższym wpisie. Strona internetowa, którą analizujemy, dostępna jest pod adresem: https://prezes.nbp.pl.
Strona prezesa NBP jest oparta o WordPress
Fundamentem strony jest najpopularniejszy na rynku system CMS – WordPress. WordPress zainstalowany jest w wersji 6.0.1, która została opublikowania 12 lipca – jest to najnowsze wydanie WordPressa. My również w naszym zespole dokonalibyśmy wyboru takiego systemu. Kiedy jako Tamago tworzymy strony internetowe na zamówienie naszych klientów, również opieramy się głównie na WordPressie. 😉
Strona nie ma autorskiego projektu – jest oparta o gotowy zakupiony motyw
Charakterystyczną cechą stron WordPress jest to, że mogą posiadać autorski projekt albo być zaprojektowane w oparciu o gotowy zakupiony motyw (o różnicach pomiędzy tymi rozwiązaniami napisaliśmy obszerny wpis: Motyw WordPress – lepiej kupić gotowy czy tworzyć autorski?). Na stronie internetowej prezesa NBP postawiono na gotowy motyw.
Serwis https://prezes.nbp.pl/ został oparty o bezpłatny motyw Neve. Jest to jeden z najpopularniejszych motywów w repozytorium WordPressa. Skorzystać z niego może każdy, dostępny jest on pod adresem: https://pl.wordpress.org/themes/neve/.
Neve to dobry wybór spośród bezpłatnych motywów. Działa dość szybko i pod względem technicznym jest dobrze napisany i przygotowany do pracy z wieloma popularnymi edytorami treści. W tym przypadku twórca strony prezesa NBP również skorzystał z edytora treści.
Wybranym edytorem treści jest Elementor
Elementor jest edytorem treści, który pozwala osobom, które nie potrafią programować, budować proste strony www. Elementor udostępnia gotowe „klocki”, które można w wizualnym edytorze ułożyć wedle własnych preferencji. Oczywiście możemy korzystać tylko z gotowych elementów – nie ma możliwości wprowadzenia dowolnych opcji „na życzenie”.
Serwis prezesa NBP korzysta z najnowszej wersji Elementora (z rozszerzeniem PRO), która dostępna jest tutaj: https://wordpress.org/plugins/elementor/#developers. Elementor w wersji PRO to koszt 99$ rocznie w modelu subskrypcyjnym.
Na stronie prezesa NBP dodatkowo zainstalowano wtyczki
Poza Elementorem na stronie zainstalowano także wtyczki. Przede wszystkim wtyczkę Smart Slider 3 for WordPress, która pozwala na tworzenie sliderów, czyli przesuwających się obrazków. W oparciu o tę wtyczkę stworzono slider z budynkiem NBP w tle. Slider zawiera 3 cytaty przesuwające się kolejno na tle zdjęcia. Niestety dość niefortunnie wybrano kolor czcionki w zestawieniu ze zdjęciem w tle slidera, ponieważ biała czcionka jest nieczytelna w jasnych punktach na zdjęciu (podświetlony budynek w tle po prawej stronie kadru).
Poza tym na stronie zainstalowana jest jeszcze jedna wtyczka – Contact Form by WPForms – Drag & Drop Form Builder for WordPress. Jej obecność dziwi, ponieważ jest to wtyczka do budowy formularzy kontaktowych, tymczasem na stronie nie ma żadnego formularza. Być może we wstępnych założeniach był, a następnie zrezygnowano z tej funkcjonalności?
Funkcjonalność strony prezesa NBP
Serwis prezesa NBP nie ma (jeszcze?) zbyt wielu treści, jednak mimo to można dopatrzyć się kilku błędów funkcjonalności, a nawet błędów związanych z accessibility (dostępnością).
Problemy dostępności
W tym aspekcie nawet podstawowe narzędzia do analizy Accessibility pokazują, jakie błędy zostały popełnione. Przede wszystkim od strony technicznej to:
- brak odpowiednich znaczników,
- nie do końca prawidłowa struktura kodu,
- wykorzystanie nieprawidłowo znaczników.
Błędy te utrudniają poruszanie się po witrynie osobom korzystającym z czytników ekranowych. Innym problemem jest kontrast. Według wymogów WCAG na poziomie AA – kontrast powinien wynosić 4.5:1 dla standardowych tekstów i minimum 3:1 dla dużych tekstów (minimum 18pt). Niestety wiele elementów typu CTA (np.: przycisków) nie spełnia tych kryteriów. Problemem jest również kontrast tekstu na sliderze i pozostałe elementy, które łączą biel i złoto.
Dlaczego jako wyznacznik przyjęliśmy wymogi WCAG na poziomie AA? Ponieważ w Polsce obowiązuje Ustawa z 4 kwietnia 2019r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych i to ona definiuje, na jakim poziomie strona powinna być dostępna. Czy strona prezesa NBP zalicza się do wyjątków, które nie muszą spełniać kryteriów ustawy? Na to pytanie, jako informatycy, odpowiedzieć nie możemy. Jest to problem natury prawnej.
Inne problemy w użytkowaniu strony
Użytkowanie utrudniają również inne drobne błędy:
1. Brak automatycznego uruchamiania video w popupie.
2. Dziwnie zachowujący się element typu lightbox.
Element ten po kliknięciu w zdjęcie ładuje dwa okna. W założeniu tej funkcjonalności powinien ładować jedno. Błąd wynika z faktu, że serwis ma zdublowaną funkcjonalność i dwa narzędzia jednocześnie otwierają okno z większym zdjęciem.
Niska wydajność strony
W kwestii wydajności strony można wypowiedzieć się krótko – jest źle. Warto przy tym wskazać, że nie jest to nasza subiektywna opinia, a dane wynikające z analizy wydajności. Strona objętościowo jest bardzo prosta mała i prosta, a mimo to waży ponad 3MB. Dla porównania strona tamago.software waży 0.9MB, a np.: ogromna strona główna serwisu wp.pl na starcie ładuje 2.5 MB zasobów.
Wpływ na niską wydajność ma kilka elementów – przede wszystkim wspomniany wcześniej Elementor. Niestety narzędzia tego typu zwykle generują kod, który jest przerośnięty, ładując przy tym całą masę zasobów, które niekoniecznie muszą być aktualnie używane. Można nad tym popracować, jednak domyślnie pozostawia to wiele do życzenia – porównując to chociażby z projektami opartymi o natywny page builder WordPressa, jakim jest Gutenberg.
Stronę mocno obciąża również element odpowiedzialny za slider, którego tłem jest wieżowiec NBP. Niesie on za sobą 8 plików ze skryptami JS i dwa pliki CSS. Czy, biorąc pod uwagę obciążenie strony, ten slider był wart instalowania? Naszym subiektywnym zdaniem – nie. Animacja zmiany slajdu, jak i animacja tekstu podążającego za kursorem myszy, są całkowicie zbędne, a wręcz utrudniają dostęp do prezentowanych treści.
Kolejnym elementem wpływającym negatywnie na wydajność strony są obrazy. Ich format jest przestarzały, niezgodny z dzisiejszymi standardami. Same pliki, które musi załadować przeglądarka, mają zwykle rozmiar 3x większy niż to, co wyświetlane jest na stronie, a co za tym idzie – niezależnie od urządzenia ładowany jest jeden, duży rozmiar obrazu. Sytuację mogłoby poprawić wdrożenie leniwego ładowania zdjęć, ale niestety tej funkcjonalności na stronie prezesa NBP nie zastosowano.
Niski wynik PageSpeed strony prezesa NBP
O ilości i wadze ładowanych plików świadczy również niski wynik strony w narzędziu PageSpeed Insights. To narzędzie bada niezależnie prędkość strony i wydaje obiektywną ocenę – dane zaznaczone na czerwono są alarmujące i wskazują na konieczność naniesienia poprawek.
Czy każda strona zbudowana w oparciu o Elementor musi tyle ważyć? Nie. Istnieje szereg zadań, które może powinien wykonać każdy programista, dzięki którym wynik będzie co najmniej zadowalający.
Krytyczne style CSS, leniwe ładowanie styli i skryptów, optymalizacja obrazów i fontów – to najbardziej podstawowe techniki, które mają realny wpływ na wagę, a co za tym idzie – witryny. Techniki te nie zostały zastosowane w opublikowanej wersji strony prezesa NBP.
Strona prezesa NBP a kwestie SEO (pozycjonowania)
Ostatnia kwestia, nad którą się pochyliliśmy, to SEO, czyli pozycjonowanie. Bardzo podstawowa analiza pokazuje, że strona prezesa NBP nie zawiera podstawowych elementów, które mogłyby pozwolić na rozpoczęcie pozycjonowania w wyszukiwaniach Google’a:
- brak atrybutu meta-description, który wykorzystywany jest w wynikach wyszukiwania jako opis strony,
- błędna struktura nagłówków,
- brak znaczników Open Graph,
- brak atrybutów alt i title przy obrazach (wspomniane przy kwestii dostępności).
Jeśli dodamy do tego wcześniej wspomniane bardzo złe wyniki w narzędziu PageSpeed Insights, to mamy przepis na stronę, którą wypozycjonować będzie niezwykle trudno. Tutaj należy jednak uściślić nieco tą kwestię – pozycjonować ją byłoby trudno, jeśli byłaby to strona kogoś, kto zaczyna swoją przygodę z Internetem. Mając na uwadze, że jest strona https://prezes.nbp.pl/ powiązana z popularną obecnie osobą (prezesem NBP Adamem Glapińskim) oraz innymi serwisami rządowymi (dobrze wypozycjonowanymi), możemy mieć pewność, że jej pozycja w Google będzie całkiem wysoka. Wystarczy zapewne kilka dni lub tygodni, by strona ta pojawiała się na pierwszym miejscu przy kluczowych frazach związanych z prezesem NBP.
PS. Kwestię bezpieczeństwa strony pominiemy. Nie jesteśmy hakerami, ani też nie chcemy być posądzani o próby ataku na stronę NBP. Zgodnie z wszelkimi poradnikami dla początkujących w tworzeniu stron internetowych zalecamy jednak zmianę loginu ‘admin’ na coś bardziej wyszukanego i zablokowanie możliwości podglądu tych loginów. Jawny login to już połowa danych do logowania. 😉
