WSTĘP
Po kilku latach budowania stron opartych głównie o silnik WordPress doszliśmy do kilku wniosków i przemyśleń, z którymi chcemy się z wami dzisiaj podzielić. Historia dotyczy naszej firmowej strony nayma.pl oraz nayma.eu. Do tej pory strony te były zbudowane na systemie WordPress plus kilka wtyczek tj: Akismet, backWPup, contact form 7 + honeypot, Cookie Notice, Jetpack, Yoast SEO, WP Rocket, WP SMTP Mail + kilka innych używanych do szablonu. Szablonem był mocno zmodyfikowany szablon one page Brooklyn z Theme Forest. Ta wersja służyła nam przez ponad 2 lata. Niestety przez ten czas sporo się zmieniło, a przede wszystkim nasze podejście do tematu. Strona firmowa była aktualizowana bardzo rzadko (1-2 razy w roku) a częste aktualizacje wtyczek i samego WordPressa zapoczątkowało częste awarie strony. Niestety ostatnim czasem coraz częściej po aktualizacjach coś się rozjeżdża na stronach, coś nie działa. Taki stan rzeczy można zauważyć wszędzie, nie tylko w internecie ale i systemach operacyjnych. Doszliśmy więc do wniosków, które mądrzejsi ludzie od nas mówili i głosili już dawno: Przy prostych statycznych stronach nie warto pchać się w WordPressa.
ZMIANY, ZMIANY, ZMIANY...
Po dłuższej chwili zastanowienia postanowiliśmy przepisać stronę od zera w HTML5. Żeby nie tworzyć całkowicie wszystkiego od zera (bo jest to bez sensu) skorzystaliśmy już z wcześniej opisywanego przez nas framework BULMA.io opartego na flexboxie.
Strona została dodatkowo oparta o kilka ciekawych naszym zdaniem modułów CSS3, jQuery i Java Script:
- Animate.css do animacji https://daneden.github.io/animate.css/
- WOW.js do kontroli animate.css http://mynameismatthieu.com/WOW/
- bLazy.js do kontroli ładowania zdjęć. Świetne narzedzie które pozwala na sporo opcji ładowania innych obrazków dla urządzeń mobilny, małych ekranów Retina i kontroli tego wszystkiego. Polecamy. http://dinbror.dk/blog/blazy/
- waypoints.js to kontroli pozycji na stronie i ładowania odpowiednich elementów http://imakewebthings.com/waypoints/
- Śniegowy modół z Jetpacka ?
HTML5 vs WORDPRESS
Strona w HTML została odchudzona z niepotrzebnego kodu CSS dzięki narzędziu UnCSS Online!, które gorąco polecamy wszystkim. Pliki JS i CSS zostały zminifikowane i uzyskaliśmy świetne wyniki, które postaramy się wam przedstawić poniżej.
- Objętość:
- Strona HTML to zaledwie** 5.4MB** wliczając wszystkie pliki graficzne, pliki php do wysyłki maili oraz pliki js i css plus fonty i ikony.
- Strona WordPress to łacznie 144,3MB - to ponad 26 razy więcej.
- Waga strony pobieranej podczas ładowania:
- HTML to zaledwie 144.1kb
- WordPress to 1.3MB czyli 9 razy więcej
- Czas ładowania:
- HTML to 0.52 sek
- WordPress to 3-4sek (przy optymalnych warunkach udało się nam zejść czasami poniżej 2 sek.)
- Liczba zapytań:
- HTML to jedynie 14 zapytań
- WordPress to 70 zapytań. Uwaga - podczas dobrej konfiguracji WP Rocket udało się nam zmniejszyć liczbę zapytań do 43.
Poniżej przedstawiamy porównanie stron według pingdom. Na górze stara strona na WordPress a na dole HTML5 oparta o Bulma.io.
Poniżej również wyniki z GTmetrix
Dwa testy nowej strony:
Nie wiemy dlaczego, ale GTmetrix pokazuje zupełnie inną liczbę zapytań oraz wielkość strony jak inne testery ?
Dodatkowo nowa strona otrzymała bardzo wysokie noty w Google Speed Test bo wersja mobilna 100/100 a wersja na PC 95/100.
Link do testu: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fnayma.pl
Podsumowując strona wykonana w HTML5s w tym wypadku pozostawia konkurenta na starcie daleko w tyle. My tworząc taka stronę mamy dużo większą kontrolę nad kodem i jego optymalizacją. Do tego odchodzi największa bolączka WordPress - bezpieczeństwo, aktualizacje rdzenia, motywów i wtyczek. Strona na pewno zyskała na szybkości ładowania i działania oraz bezpieczeństwie. Na koniec dodamy że czas realizacji jest niewiele dłuższy niż takiego samego projektu na systemie WordPress, niestety wymaga jednak więcej skupienia - pisanie kodu oraz większej wiedzy i znajomości jak pewne biblioteki pracują. Niemniej jednak dla wprawionych osób uważamy że nie warto stawiać prostych stron które będą bardzo rzadko aktualizowane na systemie WordPress. Strona na HTML będzie działać dożywotnio, nie potrzebuje opieki technicznej, jest bezpieczna (nikt nie wykorzysta nam jej do ataków DDoS lub rozsyłania spamu), zużywa mniej zasobów serwera i ładuje się sporo szybciej.
A jakie są wasze przemyślenia w tej kwestii ?? Czy tez uważacie że czasami WordPress to przerost formy nad treścią i lepiej zbudować stronę w oparciu o np bardzo popularny Bootstrap od Twittera ?? Napiszcie swoje opinie w komentarzach.
