W 2016 roku powstał ten wpis https://blog.wyremski.pl/nowa-strona-www/
I już minęły 3 lata!

Przyszedł czas na kolejną przebudowę mojego portfolio pod adresem https://wyremski.pl

Jednak tym razem oprócz kilku drobnych zmian nie budowałem wyglądu strony od nowa. Podoba mi się taki jak jest.

Zmieniłem jednak kompletnie silnik strony. Wcześniej był na PHP + system szablonów Twig2.

Nowa wersja jest zbudowana na JavaScript i frameworku React. Widać to wyraźnie w źródle strony.

Dużym plusem tego rozwiązania jest to, że po kliknięciu na linki w menu (nie dotyczy zmiany języka) nie przeładowuje się cała strona, a jedynie jej zawartość (menu i stopka zostają). Dzięki temu strona działa znacznie szybciej. Do tego serwer praktycznie nie jest obciążony, jedyny plik PHP służy do wysyłki maili.
Jeszcze niedawno Google nie potrafiło zindeksować stron zbudowanych na JavaScript, na szczęście już sobie z tym radzi. Niestety musiałem zrezygnować z wersji AMP.

Nowa strona nie używa już bibliotek jQuery ani Bootstrap.

Poniżej porównanie obydwóch wersji.

Wagi plików

Stara wersja:

• łączny rozmiar plików CSS: 121 KB
• łączny rozmiar plików JS: 116 KB
• łączny rozmiar plików HTML: 220 KB
• łączny rozmiar plików JSON: 9 KB
• łączny rozmiar plików PHP: 1016 KB

Nowa wersja (po kompilacji):

• łączny rozmiar plików CSS: 28 KB
• łączny rozmiar plików JS: 376 KB
• rozmiar pliku HTML strony głównej: 23 KB
• łączny rozmiar plików JSON: 70 KB
• łączny rozmiar plików PHP: 4 KB

Jeśli chodzi o CSS to widać wyraźną oszczędność. JS co prawda jest dużo więcej, ale w nim są zawarte skrypty Reacta, a także większość treści stron HTML. Pliki JSON zawierają spisy projektów, skryptów oraz w przypadku nowej wersji teksty na podstrony ze skryptami. Dzięki temu będę mógł w łatwy sposób modyfikować treści na podstronach z opisem skryptów, np. linki do przykładowych domen. Rozmiar plików PHP oczywiście nie wpływa bezpośrednio na szybkość ładowania strony w przeglądarce. W nowej wersji jest tylko jeden plik PHP odpowiadający za wysyłkę maili.

Testy szybkości

Stara wersja:

• Google Speed Insights mobile: 96 / desktop: 100
• gtmetrix.com PageSpeed Score: 98% / YSlow Score: 94%
• tools.pingdom.com Performance grade: A95 / Page size: 328.7 KB / Load time: 304 ms / Requests: 17

Nowa wersja:

• Google Speed Insights mobile: 88 / desktop: 98
• gtmetrix.com: PageSpeed Score: 100% / YSlow Score: 91%
• tools.pingdom.com: Performance grade: A93 / Page size: 386.7 KB / Load time: 305 ms / Requests: 22

Jak widać niestety nowa wersja strony prezentuje się nieco gorzej pod względem testów szybkości. Jednak należy tu pamiętać, że stara wersja była maksymalnie „wyśrubowana” m.in. kod CSS i JS był wklejany w źródło strony na serwerze aby ograniczyć liczbę zapytań i zwiększyć prędkość wczytywania. Subiektywne odczucie jednak pokazuje, że nowa strona jest szybsza, szczególnie przełączanie podstron odbywa się niemal natychmiastowo.

Kody źródłowe

Na Githubie zamieściłem kody źródłowe obydwóch wersji.
Tu link do starej wersji: https://github.com/kamilwyremski/wyremski.pl-2016
Tutaj do obecnej wersji: https://github.com/kamilwyremski/wyremski.pl-2019

Jeśli macie jakieś sugestie co do kodu źródłowego strony (mówię o nowej wersji), to proszę o informacje w komentarzach.
Zapraszam też do zobaczenia strony na żywo pod adresem: https://wyremski.pl