Hugo, dwa tygodnie p├│┼║niej

I tak min─Ö┼éy dwa tygodnie odk─ůd moja strona dzia┼éa na podstawie Hugo, a nie WordPress.

Po 39 wersjach (commits) na GitHub i 30 minutach budowania strony (build) na Netlify, tak min─Ö┼éy dwa tygodnie, odk─ůd przesiad┼éem si─Ö z WordPress na Hugo i nie ┼╝a┼éuje!

I, mimo ┼╝e straci┼éem troch─Ö odwiedzin wg Google Analytics (w wi─Ökszo┼Ťci os├│b pr├│buj─ůcych w┼éama─ç si─Ö na moj─ů stron─Ö), to nadal wszystko dzia┼éa i nie mog─Ö uwierzy─ç, ┼╝e odesz┼éo z mojej g┼éowy podstawowe zadanie sprawdzania, czy moja strona ca┼éy czas dzia┼éa prawid┼éowo.

Przy przenoszeniu zadba┼éem o odpowiednie przekierowywania, aby zminimalizowa─ç b┼é─Ödy 404 oraz upewni┼éem si─Ö, aby zaktualizowa─ç narz─Ödzia webmastera Google, Bing i Yandex. Mimo utraty odwiedzin nie zaobserwowa┼éem zmiany w wysoko┼Ťci przychod├│w z reklam AdSense, co jednocze┼Ťnie ┼Ťwiadczy, ┼╝e stracony ruch nie by┼é tym, kt├│ry wprowadza┼é interakcj─Ö tre┼Ťci z u┼╝ytkownikiem ÔÇô czyli nie by┼é tym najbardziej warto┼Ťciowym.

Przy użyciu narzędzi takich jak Atom (do edycji kodu) oraz GitHub Desktop, pozostało mi patrzenie jak Netlify (z automatycznym budowaniem strony), robi wszystko za mnie.

Czas, kt├│ry zyska┼éem, przez pierwsze dwa tygodnie sp─Ödzi┼éem na optymalizacji kodu oraz nauczenia si─Ö nowych, przydatnych technik zwi─ůzanych z Hugo, HTML, CSS, JavaScriptem oraz JSON.

Udało mi się między innymi:

  • zachowa─ç moje przekierowania (redirects) i stworzy─ç nowe;
  • doda─ç ciemny motyw (Dark Mode), o kt├│rym wspomnia┼éem w moim pierwszym wpisie;
  • ustawi─ç zaawansowane okruszki (breadcrumbs) wraz z generowaniem odpowiedzi w JSON dla post├│w oraz specyficzny dla przepis├│w. Pozwoli┼éo mi to nauczy─ç si─Ö, ja w prosty spos├│b w przysz┼éo┼Ťci wprowadzi─ç niestandardowy schema dla nowych typ├│w wpis├│w, kt├│re mog─Ö stworzy─ç;
  • doda─ç instantpage w celu przy┼Ťpieszenia ┼éadowania odno┼Ťnik├│w, na kt├│re u┼╝ytkownik najedzie, a kt├│re b─Ödzie chcia┼é odwiedzi─ç. Dzi─Öki czemu strona ┼éadowa─ç si─Ö b─Ödzie wr─Öcz natychmiastowo.
  • nauczy─ç poprawnych metod implementacji skrypt├│w, zdj─Ö─ç, jak r├│wnie┼╝ popracowa─ç nad optymalizacj─ů SEO.
  • ograniczy─ç ┼éadowanie niepotrzebnych skrypt├│w do czasu, gdy s─ů one potrzebne ÔÇô takich jak komentarze Discus.
  • doda─ç w┼éasne ikony udost─Öpnienia tre┼Ťci w sieciach spo┼éeczno┼Ťciowych oraz ikony, prowadz─ůce do moich profili w tych sieciach;
  • zastosowa─ç fingerprinting dla styl├│w CSS. Dzi─Öki temu, gdy dokonam zmiany w stylu CSS strony, po od┼Ťwie┼╝eniu mam pewno┼Ť─ç, ┼╝e za┼éadowana zostanie zawsze najnowszy plik, a nie ten, kt├│ry domy┼Ťlnie przesiaduje w pami─Öci podr─Öcznej przegl─ůdarki u┼╝ytkownika ko┼äcowego.

…oraz wiele wi─Öcej.

Po dw├│ch tygodniach od uruchomienia, na mojej li┼Ťcie zosta┼éo tylko:

  • zadbanie o zdj─Öcia w r├│┼╝nych rozmiarach, automatycznie generowanych przez Hugo Images Processing przy generowaniu strony;
  • dodanie obraz├│w w formatach nowej generacji (WebP), kt├│re, na razie nie s─ů natywnie generowane przez Hugo. Podczas u┼╝ywania przeze mnie WordPress i wtyczki EWWW do generowania WebP nauczy┼éem si─Ö, w jaki spos├│b rozwi─ůza─ç to z my┼Ťl─ů o przysz┼éym zastosowaniu (generowaniu WebP rezyduj─ůcego na sta┼ée obok standardowego obrazu). Na razie b─Öd─Ö rozwa┼╝a┼é spos├│b na jego wprowadzenie, ale my┼Ťl─Ö, ┼╝e poczekam z tym do aktualizacji Safari 14, kt├│ra w ko┼äcu wprowadzi ich obs┼éug─Ö do przegl─ůdarek w systemach operacyjnych z nadgryzionym jab┼ékiem.

Oczywi┼Ťcie, na ka┼╝dym kroku przegl─ůdaj─ůc internet, natrafiam na rozwi─ůzania, kt├│re inni zaimplementowali na swoich stronach, a kt├│re w prosty spos├│b teraz mog─Ö wprowadzi─ç (zapo┼╝yczy─ç) do siebie bez znacz─ůcej zmiany w kodzie. Co┼Ť, czego wprowadzenie (w tym sprawdzenie, aby dzia┼éa┼éo prawid┼éowo) z wykorzystaniem WordPress zaj─Ö┼éoby mi znacznie wi─Öcej czasu, szczeg├│lnie gdy nie u┼╝ywa┼éem w┼éasnego motywu, tylko gotowy Twenty Twenty, na kt├│rego bazie stworzy┼éem Child Theme.

Nim sko┼äczy┼éem niniejszy wpis, ju┼╝ mia┼éem spos├│b na wprowadzenie czego┼Ť nowego ­čśë.

Po ca┼éych tych pracach dostosowawczych, cho─ç wydawa─ç si─Ö one mog─ů czasoch┼éonne (wi─Öcej czasu ÔÇô przesz┼éo dwa tygodnie ÔÇô zaj─Ö┼éo mi przeniesienie z WordPress do Hugo) mam wi─Öksz─ů frajd─Ö o obserwowaniu efektu ko┼äcowego.

Efekt ko┼äcowy, do kt├│rego zmierzam, o kt├│rym wspominam, jest osi─ůgni─Öcie szybkiej i dostosowanej strony z tre┼Ťci─ů, kt├│r─ů odwiedzaj─ůcy b─Öd─ů czyta─ç z zainteresowaniem.

I tak web.dev pokaza┼é ju┼╝ spor─Ö cze┼Ť─ç na zielono (SEO 100, Best Practices 100 oraz Accessibility 91) to jednak Wydajno┼Ť─ç (Performance) kuleje na poziomie 20, g┼é├│wnie ze wzgl─Ödu na obrazy serwowane w postaci pe┼énowymiarowej.

web.dev dariusz.wieckiewicz.org 21-08-2020

Aktualizacja 29/08/2020

Wg powy┼╝szego wyniku web.dev wida─ç powa┼╝ny problem z wydajno┼Ťci─ů, kt├│ry jednak┼╝e nie jest do ko┼äca prawdziwy. Po ka┼╝dym od┼Ťwie┼╝eniu strony opr├│┼╝niany jest cache po stronie Netlify, jak i w moim przypadku po stronie CloudFlare. Gdy cache jest odbudowany, wydajno┼Ť─ç wraca do poziomu 80.

web.dev dariusz.wieckiewicz.org 28-08-2020


Mimo ┼╝e korzystam z Netlify do serwowania mojej strony, to nie ch─Ötny jestem do wprowadzenia zale┼╝no┼Ťci wielko┼Ťci moich zdj─Ö─ç od ich rozwi─ůzania (Large Media) i wola┼ébym to rozwi─ůza─ç bezpo┼Ťrednio z Hugo.

W zwi─ůzku z tym jeszcze troch─Ö przede mn─ů. Mimo tego ju┼╝ czuj─Ö, ┼╝e wr├│ci┼éem ponownie do tre┼Ťci a ni┼╝eli bawienie si─Ö w utrzymanie przy ┼╝yciu strony internetowej.

Komentarze
Kategorie