Nadszedł czas, by zrobić porządek na blogu i nieco przyspieszyć całą stronę. Szata graficzna była zmieniana już wielokrotnie, eksperymentowałem też z układem postów, menu czy widgetów w sidebarze.

Zauważyłem jednak, że nie idzie to w dobrym kierunku. Kolory nie współgrały ze sobą i szablon przypominał bardziej połączoną pracę kilku losowych grafików-amatorów niż jakiś wspólny, spójny projekt.

Tak wyglądał motyw przed zmianami:
Stary motyw bloga - Jakub Jurkian

Można powiedzieć, że sam kiedyś byłem grafikiem – w dawnych czasach przez 2-3 lata hobbystycznie działałem w Photoshopie i udzielałem się na forach różnej treści tworząc sygnaturki i avatary dla forumowiczów. Sprawiało mi to mega frajdę.

Kiedy jednak próbowałem tworzyć projekty stron, zrozumiałem, że mając masę ciekawych pomysłów w głowie, tak naprawdę nie umiem tego przenieść ani na papier, ani do programu graficznego.

Więc na sygnaturkach dla forumowiczów zakończyła się moja „kariera designera” i postanowiłem zająć się kodem, w którym dużo lepiej się odnajduję.

Mówi się, że nie da się być jednocześnie dobrym grafikiem i człowiekiem od kodu – coś w tym jest. Cóż, niektórym to się udaje, ale niektórzy niech się lepiej za grafikę nie biorą…

 

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

 

Nowy motyw – Shamrock

Dlatego właśnie postawiłem na gotowe rozwiązanie, na szablon, który stworzył ktoś doświadczony. Nowy motyw jest minimalistyczny i prosty.

Przy wyborze brałem pod uwagę czytelność, bo czytelnik bloga o programowaniu nie przychodzi tutaj raczej podziwiać masy zdjęć, jak na blogu fotograficznym, ale bardziej nauczyć się czegoś nowego i wprowadzić to u siebie.

Ciekawostka dla wtajemniczonych: ten szablon powstał jako child theme, czyli modyfikacja oryginalnego motywu Shamrock. Polega to na tym, że modyfikujesz tylko te pliki, które są Ci potrzebne, a reszta jest ładowana z oryginału.

Oznacza to, że nawet jeśli oryginał zostanie zaktualizowany – Ty nie stracisz swoich zmian (stałoby się tak, gdybyś od razu edytował orginał).

Układ treści – od razu konkrety

Lekko zmieniłem układ górnej części strony na taki, by osoba, która pierwszy raz wchodzi na bloga od razu wiedziała kim jestem, co robię i miała dostęp do moich kursów oraz możliwość skontaktowania się.

Nieco rozbudowałem i uspójniłem stronę „O mnie„. Dopisałem jak krok po kroku wyglądało u mnie wejście w świat tworzenia stron oraz jaki jest cel tego bloga czy kanału na YouTube. Opisałem też krótko metodę nauki programowania polegającą na tworzeniu własnych projektów – sprawdza się świetnie.

Optymalizacja strony – Wtyczki WordPress

Przeczytaj więcej w artykule: jak przyspieszyć stronę WordPress.

Priorytetem było to, by strona wczytywała się szybko. Słabo się robi, gdy widzę jak spore, szanowane w danej branży blogi są dosłownie zawalone kilkunastoma wtyczkami, z których powstaje już kilkadziesiąt odniesień do skryptów czy stylów CSS.

To wszystko dzieje się w kodzie – gołym okiem tego nie widać. Po prostu można to odczuć, kiedy czekasz 4-6 sekund aż jakaś część strony łaskawie się załaduje i będziesz mógł ją zobaczyć.

Według badań spora część ludzi wyjdzie z Twojej strony, jeśli nie załaduje się ona w ciągu pierwszych 3 sekund.

Nawet jeśli masz tam najlepsze rzeczy w internecie, to nikt ich nie zobaczy…

Do tej pory korzystałem tylko z wtyczki W3 Total Cache i tam, w zakładce minify, ustawiałem listę skryptów i stylów CSS, które powinny zostać zminimalizowane i skompresowane do jednego pliku.

Wtedy podczas ładowania się strony, zamiast wysyłać 10 zapytań do serwera, Twoje urządzenie wyśle tylko jedno, a w dodatku otrzyma pliki mniejszych rozmiarów.

Włączyłem też opcję Page Cache, a w zakładce Browser Cache warto włączyć kompresję GZIP.

Z W3 Total Cache korzystam nadal, jednak w trakcie pojawił się pewien problem – jeśli dodasz jakąś nową wtyczkę, to ona doda do kodu swoje skrypty i style, a Ty znowu będziesz musiał to wszystko przerabiać w W3 Total Cache.

Z pomocą przyszła wtyczka Autoptimize, która organizuje wszystkie skrypty i style na stronie, i ostatecznie łączy je w 1-2 pliki wynikowe, a co najlepsze: to wszystko dzieje się automatycznie. Odpada więc potrzeba ręcznej minifikacji (jak poprzednio).

Wyznacznikiem tego, czy idziesz w dobrym kierunku – samo W3 Total Cache ma masę opcji, z którymi polecam eksperymentować – jest PageSpeed Insights, czyli narzędzie bezpośrednio od Google, które powie Ci co jeszcze można poprawić, by jak najbardziej zbliżyć się do wyniku 100/100 punktów.

Inne wtyczki WordPress, których używam

  • Składnię w kodzie na stronie podświetla SyntaxHighlighter Evolved
  • Przy odpowiednim SEO pomaga mi Yoast SEO
  • Formularz kontaktowy obsługuje Contact Form 7
  • Gwiazdki umożliwiające ocenianie wpisów dostarcza kk Star Ratings
  • Pasek boczny (aktualnie po lewej stronie) pokazujący przyciski do udostępnienia wpisu na Facebooku, Twitterze czy Google plus (i masa innych serwisów do wyboru) to SumoMe z włączonym modułem Share.

 

Eksperyment – automatyczna optymalizacja obrazków

Obrazki na stronie optymalizuje mi automatycznie wtyczka Compress JPEG & PNG Images autorstwa TinyPNG – serwisu, z którego regularnie korzystałem tworząc strony, ponieważ był bezkonkurencyjny jeśli chodzi o „odchudzanie” obrazków, a przy tym darmowy.

Ta strona potrafiła zmniejszyć obrazek, przy którym inne wysiadały, a przy tym strata jakości była nieznaczna.

Wystarczy uzyskać klucz API, wpisać go w menu wtyczki i (w zależności od Twojego szablonu WordPressa) około 100 obrazków miesięcznie zostanie Ci zoptymalizowane za darmo, bez widocznej utraty jakości (zazwyczaj trzeba się nieźle przyjrzeć).

Warto dodać, że obrazki to jeden z kluczowych czynników wpływających na szybkość ładowania się strony i jednocześnie taki, który można szybko poprawić.

Jeżeli jednak chcesz mieć większą kontrolę nad wynikowym obrazkiem, wypróbuj program FileOptimizer.

Korzystam z niego zamiennie z TinyPNG, i choć oferuje mniejszą kompresję, to nie ma aż takich strat w jakości jak u poprzednika. Wydaje mi się, że TinyPNG radzi sobie dużo lepiej z plikami PNG niż JPG, mimo że obsługuje oba formaty.

W jaki sposób sprawdzić szybkość ładowania się strony?

Ciekawym narzędziem, które pokazuje rozmiar strony (obrazków, skryptów, CSSów i innych treści), ilość zapytań czy czas ładowania się strony jest Pingdom Website Speed Test.

Zobaczysz tam także wykres prezentujący to, jakie elementy mają największy wpływ na ładowanie, a dzięki temu rozpoznasz które skrypty/obrazki warto poprawić, by szybko uzyskać lepszy efekt.

Pamiętaj: robisz to wszystko dla odwiedzających, ale nie każdy z nich posiada łącze 60 mbit i szybki komputer. Część używa też smartphonów czy tabletów i nie mają ochoty nadużywać swojego transferu.

Wyniki przyspieszania strony

W rezultacie tego wszystkiego mój blog ładuje się w ciągu 980 milisekund, aktualnie waży 928,6 kB, wysyła 44 zapytania do serwera i jest szybszy niż 90% testowanych na Pingdom stron. O to właśnie chodziło – cel osiągnięty!

Oczywiście można to wszystko cały czas dopracowywać i polepszać, ale polecam kierować się zasadą Pareto, czyli: znajdź symboliczne 20% rzeczy, które dadzą Ci 80% efektów. Oznacza to, byś skupił się tylko na tym, co da Tobie najlepsze rezultaty.

W tym przypadku główną rolę odgrywa W3 Total Cache i Autoptimize, ale również wtyczka od TinyPNG, o której wspominam wyżej może mieć ogromne, jeśli nie najważniejsze znaczenie na niektórych blogach.

 

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

 

Polecam każdemu podejść na poważnie do tematu optymalizacji strony/bloga, bo jeżeli Twoja wizytówka będzie ładować się 5+ sekund, pierwsze wrażenie będzie po prostu słabe.

A pierwsze wrażenie występuje tylko raz… Chcesz być zapamiętany jako ten, którego strona ładuje się 10 sekund (jeżeli ktoś w ogóle tyle wytrzymał)?

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

>