Mój pierwiastek perfekcjonisty sprawia, że na blogu, który właśnie czytasz, ciągle znajduję przestrzeń do usprawnień. Na przestrzeni dwóch ostatnich lat, na moim blogu zaszły ogromne zmiany. W tym wpisie przedstawię Ci jakie zmiany wprowadziłem, opowiem nieco o powodach zmian, oraz pokażę jak Ty możesz usprawnić swojego bloga na WordPress. Wiele z tych zmian możesz wdrożyć również na innych swoich stronach WWW, niekoniecznie blogach i niekoniecznie opartych o WordPressa.

Design i zmiany na froncie

Design bloga jest pierwszym aspektem, którego zmiany regularny czytelnik mógł zaobserwować. Do najbardziej widocznych zmian zaliczam znaczne usprawnienie wyświetlania bloga i komfortu czytania na urządzeniach mobilnych. Na moment publikacji wpisu, głównym medium, które wykorzystują czytelnicy jest komputer (około 70%), następnie smartfony (około 30%) i tablety (poniżej 0.5%). Mimo, że urządzenia mobilne stanowią mniejszość, to odsetek urządzeń mobilnych z roku na rok w statystykach bloga zwiększa się. Dlatego też zdecydowałem się na poświęcenie większej uwagi urządzeniom mobilnym.

Ponieważ jako bazę pod szatę graficzną bloga wykorzystałem jeden z wbudowanych motywów WordPressa, dostosowanie większości elementów do poprawnego wyświetlania na urządzeniach mobilnych nie stanowiło problemu. Wbudowane motywy WordPressa są dostosowane do wyświetlania na ekranach urządzeń mobilnych. Sporo uwagi poświęciłem stylom powiązanym z tekstem. Poprawiłem rozmiary tekstu na różnych rozmiarach ekranu, style dla niektórych typów tekstu, takich jak blockquote czy code. Zaktualizowałem również style dla elemetów takich jak przyciski i listy.

Zmiany dotknęły również podstronę blog, gdzie przerośnięte miniatury zostały zastąpione schludną, paginowaną listą wpisów.

Mała rewolucja miała miejsce w identyfikacji wizualnej mojego bloga. Logo główne oraz ikona zostały zaktualizowane i przygotowane w formacie SVG. Za przygotowanie wersji SVG głównego loga kieruję serdeczne podziękowania dla Piotra Kowalskiego. Ikonę przygotowałem już samodzielnie. Elementem mojej nowej typografii jest również uspójniona paleta kolorów. Oprócz całej gamy odcieni szarości, zdefiniowałem kilka kolorów, które na stałe wpisały się już w szatę graficzną bloga:

• Chilli red – #C31807,
• Crimson – #B80F0A,
• Candy Apple – #FF0801.

Na pliki SVG zamieniłem również ikony, które wcześniej były ładowane z wykorzystaniem biblioteki Font Awesome. Dzięki temu, wyniki analizy Core Web Vitals zwiększyły się o kilka dodatkowych punktów.

Core Web Vitals i inne aspekty związane z wydajnością bloga analizowałem z wykorzystaniem narzędzia Lighthouse z przeglądarki Google Chrome. Problemem była dla mnie konieczność analizy każdej podstrony z osobna, co w moim przypadku oznaczało konieczność ręcznej analizy kilkudziesięciu podstron. Oprócz tego, że jest to czasowo nieefektywne, to przy długotrwałym, manualnym procesie ryzyko na popełnienie błędów jest duże. Rozwiązaniem okazało się narzędzie Unlighthouse, które jednym poleceniem pozwala przygotować raport dla każdej podstrony na wskazanej stronie.

Treść

Opis zmian w treściach można zacząć od narzędzia usprawniającego przeglądanie treści. Po dodaniu kilkudziesięciu wpisów, nadszedł czas, aby dodać wyszukiwarkę treści. Na szczęście WordPress oferuje gotowe rozwiązanie do wyszukiwania wpisów, należało je jedynie nieco dostosować. Dodatkową korzyścią, oprócz możliwości znalezienia konkretnych treści jest fakt, że treści zapytań wskazują mi czym zainteresowani są czytelnicy. Oprócz wyszukiwarki, poznawaniu nowych treści służy też sekcja „inne wpisy, które mogą Cię zainteresować”.

Innym usprawnieniem, dzięki któremu mam szansę na dotarcie z treściami do szerszego grona czytelników jest lista mailingowa. Uprościłem formularz zapisu na mailing, dodałem dedykowaną podstronę, oraz przy próbie opuszczenia bloga pojawia się okienko z propozycją zapisu. Dodatkowo, pod każdym wpisem istnieje możliwość zapisu na mailing.  Korzystając z okazji, jeśli nie jesteś jeszcze na mojej liście mailingowej to zachęcam do zapisu. Jest to najlepszy sposób, aby być na bieżąco z nowymi treściami na moim blogu. Jedynie poprzez mailing jestem w stanie w 100% Ci zagwarantować, że otrzymasz informację o nowych treściach. Wystarczy, że przejdziesz na tę podstronę, wypełnisz formularz i potwierdzisz zapis na mailing.

Oprócz strony z mailingiem, przygotowałem podstronę FAQ oraz napisałem od zera treść podstrony „o mnie„. Ponieważ zależy mi na tym, aby czytelnik wracając na bloga mnie kojarzył oraz lepiej poznał, pod każdym wpisem dodałem sekcję o autorze wpisu. Jest to jednocześnie przygotowanie pod publikację wpisów gościnnych, które pojawią się w przyszłości. Wtedy, znajdzie się tam krótkie bio autorów wpisów gościnnych.

Poza stroną „o mnie”, przepisałem całkowicie kilka starszych wpisów:

• Wprowadzenie do REST API
• Najlepsze kanały dla programistów na YouTube

Na liście „do przepisania” czeka kilka kolejnych wpisów. Niestety, treści informatyczne rzadko kiedy są jak wino. Zwykle z czasem tracą na jakości. Czytając swoje starsze treści, często mam odczucia podobne do przeglądania swojego kodu sprzed lat. Widzę mnóstwo rzeczy, które zrobiłbym inaczej… i robię!

Infrastruktura i bezpieczeństwo

Prace nad tym aspektem rozpocząłem w momencie, gdy mój blog zaliczył kilkudniowy downtime. Moim błędem było postawienie na darmowy hosting. Ponieważ nie mam o nim dobrego zdania, zdecydowałem się aby nie padła w tym artykule jego nazwa. Ponieważ hosting był darmowy, administratorzy nie gwarantowali żadnych norm jeśli chodzi o czas dostępności usługi. Drugim mankamentem była pomoc techniczna w postaci forum, oraz ewentualne prób kontaktu poprzez e-mail/FB z adminstratorami.

Do pierwszej (i ostatniej) awarii zupełnie mi to nie przeszkadzało. Problem pojawił się w momencie, gdy administratorzy postanowili przemigrować MySQL do nowszej wersji, co spowodowało kilkudniowy brak dostępności usługi. Sytuacji nie ratowała lakoniczna kominikacja administracji pokroju „wystąpiła awaria usługi, czas przywrócenia usługi nie jest znany”. Usterka była na tyle poważna, że nie było możliwe nawet ustawienie odpowiedniego komunikatu dla czytelników mojego bloga.

Zanim usługa została przywrócona, mój blog stał już na Mikrusie – tanim i dobrym VPS. Na szczęście regularnie robione backupy zrobiły robotę. Moje wrażenia z użytkowania Mikrusa są bardzo pozytywne i w najbliższym czasie nie planuję zmiany. Więcej o mojej opinii o Mikrusie oraz o jego możliwościach możesz dowiedzieć się z mojej recenzji Mikrusa.

Zmiany dotknęły również wartstwy rekordów DNS. Dodałem brakujące wpisy SPF, DKIM i DMARC dla mojej domeny. Dzięki temu, szanse że moje maile będą traktowane przez klientów poczty jako spam dość istotnie zmalały. Zdecydowałem się również na konfigurację darmowego monitoringu DMARC narzędziem Postmark. Skonfogurowałem również monitoring od MXToolBox do sprawdzania, czy domena bloga nie znajduje się na znanych blacklistach.

Aby lepiej monitorować swojego Mikrusa, przygotowałem i skonfigurowałem dashboardy w Grafanie. Zdecydowałem się na wykorzystanie darmowej wersji Grafana Cloud. Dzięki temu jestem w stanie, w wygodny sposób, przeglądać logi z mojego serwera.

Zmiany w konfiguracji WordPress

Z głównych zmian jakie zaszły na przestrzeni otatnich dwóch lat było:

• Usunięcie większości zbędnych wtyczek. Wiele wtyczek, które wykorzystywałem była niepotrzebna lub ich możliwości były łatwe do zastąpienia krótkim fragmentem kodu.
• Wyłączenie dostępu do REST API.
• Wyłączenie domyślnej ścieżki logowania do panelu administracyjnego.
• Usunięcie toolkitu MonsterInsights na rzecz Site Kit od Google. MonsterInsights służył mi głownie do szybkiego podglądu statystyk i integracji z Universal Analytics. Wykorzystałem fakt konieczności migracji na GA4 i zdecydowałem się na usunięcie MonsterInsights.
• Migracja na GA4 spowodowała, że moja analityka znacznie zyskała. Była to też dobra okazja do zrewidowania mojej obecnej konfiguracji i przygotowanie nowej. Mimo początkowej dezorientacji, GA4 wywarło na mnie bardzo pozytywne wrażenie. W mojej opinii, GA4 jest znacznie bardziej intuicyjne od Universa Analytics, a konfiguracja dashboardów i obsługa odpowiednich zdarzeń zajęła mi jeden wieczór.

Komentarze

Opis ewolucji systemu komentarzy na moim blogu zasługuje na osobną sekcję.

Ewolucja systemu komentarzy na moim blogu przebiegała praktycznie od pierwszego opublikowanego wpisu. Jak prawdopodobnie większość blogerów zaczynających swoją przygodę z WordPressem, ja również zacząłem od wbudowanego systemu komentarzy w WordPress. Początkowo byłem z niego całkiem zadowolony. Zdobywając swoje pierwsze doświadczenie zawodowe natknąłem się na Disqusa. Disqus jest rozbudowanym systemem komentarzy, który możesz zintegrować ze swoją stroną/aplikacją WWW. Disqus jest nie tylko systemem komentarzy, ale też platformą do budowania zaangażowania czytelników. Sprzyja temu m.in. możliwość obserwacji innych użytkowników, systemy rekomendacji, czy system ocen treści i komentarzy innych użytkowników.

Możliwości brzmiały intersująco, stąd bez większego namysłu przemigrowałem się na Disqusa. Początkowo byłem zachwycony. Z biegiem czasu jednak dostrzegałem coraz więcej mankamentów Disqusa. Problemy, które napotkałem przy korzystaniu z Disqusa opisałem na łamach swojego bloga w artykule Disqus – panu już podziękujemy. Ostatecznie, zdecydowałem się na powrót do wbudowanego systemu komentarzy. Po ponad roku od powrotu, uważam że był to krok w dobrą stronę.

Pojawił się wtedy inny problem. Mój system komentarzy był… biedny. Mojej sekcja komenarzy brakowało m.in. schludnej i czytelnej szaty graficzne, a także możliwości wygodnego tworzenia np. pogrubień, kursywy czy bloków kodu.

Na ratunek przyszło mi rozszerzenie wpDiscuz. Rozszerzenie wykorzystuje wbudowany mechanizm komentarzy WordPressa i rozszerza go o m.in.: system ocen wpisów i komentarzy, powiadomień o odpowiedziach, mechanizm captcha, a także prosty rich text editor do tworzenia komentarzy. Rozszerzenie pozwala także na wybór jednego z kilku stylów, oraz na szybkie dostosowanie palety kolorów i typografii. Po około roku z wpDiscuz jestem zachwycony i najprawdopodobniej zostanę z tym rozwiązaniem na stałe. Rozszerzenie jest również platformą, którą można rozszerzać. Należy jednak wspomnieć, że rozszerzenia dla wpDiscuz są płatne, w przeciwieństwie do podstawowej wersji rozszerzenia, która jest darmowa.

Podsumowanie

Mam nadzieję, że opisane case study pokazało Ci, co możesz usprawnić na swoim blogu, stronie WWW czy systemie opartym o WordPressa. Oczywiście opisane zmiany, to nie koniec ewolucji bloga. Mam nadzieję, że realizacja moich planów pozwoli na napisanie drugiej części tego wpisu w przyszłości! 💪

Źródła i materiały dodatkowe

• Disqus – dlaczego MUSISZ uważać na ten system komentarzy na blogu
• wpDiscuz – The Best WordPress Comment Plugin
• Disqus – panu już podziękujemy
• Mikrus – czyli co nieco o zapleczu bloga
• Grafana Cloud
• Font Awesome
• unlighthouse
• Free DMARC Monitoring from Postmark
• Email Blacklist Check – IP Blacklist Check

Zaobserwuj mnie na LinkedIn!

LinkedIn jest głównym medium, poza blogiem, gdzie publikuję swoje przemyślenia. Zaobserwuj mój profil na LinkedIn, by być na bieżąco!
Zachęcam też do zaobserwowania devszczepaniak.pl na Facebooku, gdzie oprócz informacji o nowych artykułach publikuję linki do ciekawych treści.

Udostępnij wpis

Szukasz taniego i dobrego VPS? Skorzystaj z Mikrusa i przy zakupie odbierz dodatkowy miesiąc usługi za darmo!

📖 Koniecznie sprawdź ofertę księgarni Helion oferującej tysiące książek dla programistów w dobrych cenach! Kupując z tego linku, pomagasz w rozwoju bloga.

Chcesz docenić moją pracę? Postaw mi kawę!