Jak założyć bloga, czyli przepis na bezpieczną i wydajną stronę

Jak założyć bloga, czyli przepis na bezpieczną i wydajną stronę

Justyna Jóźwik 27 czerwca 2017

Jak założyć bloga, który będzie ładny, bezpieczny i wydajny? Tłumaczy Justyna Jóźwik, Senior Front-end Developer w FinAi, na przykładzie bloga FinAi.pl.

W dzisiejszych czasach bloga stworzyć i prowadzić może praktycznie każdy. To jak kupienie gotowego ciasta w cukierni: jeśli jesteś bardzo głodny albo mało wymagający, to na pewno znajdziesz coś dla siebie. A czasami cukiernia jest znana z jednego naprawdę dobrego rodzaju ciasta. 

Jeśli jednak przeglądając półki w cukierni nie widzisz tego, na co masz ochotę, to musisz poszukać innego sposobu... może by upiec coś samemu?

Z blogiem jest podobnie. Możesz użyć do jego prowadzenia Facebooka albo któregoś z bezpłatnych systemów blogowych. Jeśli jednak chcesz, żeby Twój blog wyglądał dokładnie, jak Ty chcesz, żeby posiadał funkcjonalności, których potrzebujesz oraz żeby był zoptymalizowany pod kątem wydajności, SEO, bezpieczeństwa czy analityki danych, to przestaje to być takie proste.

Na przykładzie bloga www.finai.pl pokażę, jak stworzyć bloga na podstawie gotowego szablonu HTML/CSS/JS. To trochę jak ciasto z pudełka: część składników ktoś już skompletował i wymieszał, ale trzeba dodać sporo od siebie, żeby ciasto wyszło smaczne i było wyjątkowe.

W FinAi dbamy o bezpieczeństwo, dlatego przy wyborze technologii dla naszego bloga odrzuciliśmy opcje, które nie spełniały naszych rygorystycznych wymagań w tej kwestii. Zdecydowaliśmy, że backendowo blog będzie obsługiwany przez ASP.NET, co już na starcie zapewni przewagę nad innymi technologiami w kwestii bezpieczeństwa.

Po analizie wielu opcji nasz wybór padł na Umbraco. System ten jest rozwiązaniem open source, nie narzuca struktury HTML w swoich szablonach i jest bardzo łatwy w rozbudowie. A dzięki temu, że wszyscy developerzy w naszym zespole posługują się C# płynnie, rozszerzanie będzie dla nas łatwiejsze.

 

PRZEPIS NA BLOGA

Stopień trudności: średni

Czas przygotowania: od kilku godzin do kilku tygodni, w zależności od tego, jak bardzo wymagający jest końcowy odbiorca

Składniki:

  • 1 szablon HTML/CSS/JS
  • 1 dowolnie wybrany system CMS (ja użyłam Umbraco)
  • 1 biblioteka do minimalizacji i łączenia plików CSS i JS (ja użyłam Combres)
  • 1 biblioteka do optymalizacji obrazów (ja użyłam ImageProcessor)
  • Garść wytycznych od grafika (składnik opcjonalny, ale pozytywnie wpływa na końcowy efekt)
  • Po łyżce znajomości HTML i CSS
  • Szczypta znajomości JavaScript

Jeśli wybierzesz technologię (środowisko, CMS-a, itp.), w której nie jesteś biegły, nieoceniona może okazać się pomoc programistów i dev opsów, którzy skonfigurują środowisko i zajmą się kwestiami serwerowymi 😊

 

Wstępne przygotowania

Przygotowanie większości ciast należy zacząć od nagrzania piekarnika.

Z blogiem jest podobnie. Na początek musisz zainstalować czystego CMS-a. W przypadku Umbraco istnieje kilka opcji, ja wybrałam ręczną instalację. Mam gotowy szablon HTML/CSS, więc instaluję czysty projekt, bez żadnej przykładowej strony startowej.

Gdy CMS jest już zainstalowany, przenoszę statyczny szablon do CMS-a i sprawdzam, czy wszystkie zasoby (pliki CSS, JavaScript, czcionki i obrazki) ładują się poprawnie.

 

Łączenie podstawowych składników

Kolejnym krokiem w przygotowywaniu ciasta byłoby połączenie ze sobą najważniejszych składników. Z blogiem jest podobnie.
Oryginalny szablon, z którego chcę skorzystać, wygląda tak: 

 

Zmieniam czcionki, dopasowuję kolorystykę do tej zgodnej z logo firmy i jej identyfikacją wizualną, modyfikuję nieco układ treści. Zamiast dołączonych do szablonu ikonek, używam rozwiązania opartego na plikach SVG. W pracy z ikonkami bardzo pomaga mi serwis IcoMoon, o którym szerzej opowiem w kolejnym wpisie.

 

To dobry moment na aktualizację używanych w projekcie bibliotek JavaScript. Kupując gotowy szablon nie mam pewności, czy jego twórcy zadbali o aktualizacje. Powinnam wręcz założyć, że tego nie zrobili. Okazuje się, że nawet najpopularniejsze biblioteki nie są wolne od ”dziur”.

 

Przykładem mogą być choćby podatności na ataki XSS w starszych wersjach bardzo popularnej biblioteki jQuery. Sami w trakcie projektu znaleźliśmy jedną taką podatność i ją usunęliśmy. Warto więc przeprowadzić aktualizację ze względów bezpieczeństwa, jak również ze względu na ulepszenia, które mogły pojawić się w używanych w projekcie bibliotekach. Trochę jak z robieniem ciasta na przeterminowanych składnikach – może nie wpłynie to na smak, ale może zepsuć absolutnie wszystko i jeszcze się pochorujemy.

 

Trochę dynamiki

Gdybym robiła ciasto, prawdopodobnie w tym momencie musiałabym wymieszać pozostałe składniki w osobnym naczyniu.

Kolejny krok w przypadku bloga to udynamicznienie statycznego szablonu. Przy pomocy narzędzi w CMS tworzę potrzebne typy treści. Na tym etapie często okazuje się, czego w szablonie brakuje. Kiedy pojawiają się prawdziwe treści, doskonale widać, co jeszcze trzeba zmienić i jakie elementy należy dodać do layoutu.

 

 

To odpowiedni moment na skonfigurowanie procesu deploymentu aplikacji. Warto sprawdzić, czy dane przenoszą się poprawnie pomiędzy różnymi bazami danych i czy wszystkie pliki są deployowane w odpowiednie miejsce. W przypadku mojego bloga dużo czasu zajęło znalezienie odpowiedniego narzędzia do synchronizacji danych oraz jego konfiguracja. Użyliśmy uSync, jednak żeby jego działanie odpowiadało w 100% naszym potrzebom, potrzebnych było kilka iteracji konfiguracji.

Spędziliśmy kilka ładnych godzin nad ustawieniami naszego procesu continous integration, ale wraz z naszym magikiem Piotrem Stappem, w końcu udało się usunąć problemy z synchronizacją i wszystko działa automatycznie.

 

Usunięcie niepotrzebnych elementów

Oprócz dodawania kolejnych składników, przygotowując ciasto trzeba też coś czasem wyrzucić - jak pestki z owoców.

Po raz kolejny łatwo o analogię do tworzenia bloga. Kiedy wszystkie potrzebne elementy layoutu są już uwzględnione w szablonach, powstały też przykładowe treści wpisów, warto przejrzeć szablon i zastanowić się, czy wszystkie jego elementy są wykorzystywane.

Wiele szablonów opartych jest na popularnym frameworku Bootstrap. Często dołączana jest kompletna biblioteka ze wszystkimi jej komponentami, a faktycznie używanych jest jedynie kilka z nich. Tak też było w przypadku mojego szablonu - po krótkiej analizie udało mi się odrzucić około 80% dołączonego pliku .css. Dodatkowo usunęłam style i skrypty dla niewykorzystywanych przeze mnie sekcji z pierwotnego szablonu.

Takie operacje zmniejszają wagę strony, co bezpośrednio przekłada się na jej wydajność oraz prędkość ładowania w przeglądarce.

Dodatkowo, mając mniej kodu, łatwiej jest się w nim odnaleźć i wprowadzać kolejne modyfikacje czy rozszerzenia. Poniżej opisuję jeszcze kilka sztuczek, które dały nam jakże ważne punkty w wynikach PageSpeed Insights.

 

Ostatnie poprawki

Teraz następuje moment, w którym trzeba połączyć ze sobą wszystkie składniki ciasta i zobaczyć, czy wszystko wygląda jak trzeba, czy może jeszcze coś trzeba poprawić przed wstawieniem go do pieca.

W przypadku bloga zajmuję się teraz optymalizacją. Jeśli w szablonie było wiele osobnych plików CSS i JavaScript, warto je połączyć w jeden i zminimalizować. Zmniejszy to liczbę i wielkość requestów, a co za tym idzie skróci czas ładowania się strony.

Dla projektów w środowisku .NET świetnie sprawdza się w tym zadaniu biblioteka Combres. Konfiguracja odbywa się poprzez odpowiednie wpisy w pliku xml. W łatwy sposób można zdefiniować parametry łączenia i minifikacji plików, jak również zbiory plików, które mają być połączone w jeden.

<resourceSet name="siteCss" type="css">
  <resource path="~/css/bootstrap.min.css" />
  <resource path="~/css/bootstrap-ext.css" />
  <resource path="~/fontello/css/font-icon.css" />
  <resource path="~/css/plugin.css" />
  <resource path="~/css/animations.css" />
  <resource path="~/css/nice-select.css" />
  <resource path="~/css/base.css" />
  <resource path="~/css/style.css" />
</resourceSet>

Na tym etapie warto również zwrócić uwagę na to, czy grafiki mają rozmiar odpowiadający wielkości miejsca w layoucie. Przykładowo: jeśli w szablonie szerokość obrazka została zdefiniowana na 200px, to złym pomysłem jest wyświetlanie tam obrazu, który ma 2000px. Taki błąd powoduje wolniejsze ładowanie się strony, a co za tym idzie dłuższe oczekiwanie użytkownika na treść, którą chce zobaczyć.

Tym bardziej, jeśli korzysta on z urządzenia mobilnego i jest poza zasięgiem sieci WiFi. Doskonałym narzędziem dla środowiska .NET, pomagającym zapanować nad wielkościami grafik, jest biblioteka ImageProcessor. Korzystając z niej, za pomocą parametrów dodawanych do URL-a obrazka można zmienić jego wielkość czy kadr bez potrzeby ręcznego generowania poszczególnych grafik.

Na poniższym przykładzie oryginalny obraz zostanie przeskalowany do wielkości 640px:

<div class="graphic-box">
    <a href="@href" target="_blank">
        <img src="@img.Url?width=640&upscale=false" alt="@alt" title="@img.Name" />
    </a>
</div>

Kolejny przykład pokazuje jak w łatwy sposób można oprócz ustawienia obrazkowi odpowiedniej szerokości zadbać również o właściwe proporcje.

<div class="post-thumb">
    <img src="@Model.MainPhoto.Url?width=320&heightratio=0.4&upscale=false&mode=crop"
        alt="@Model.MainPhoto.AltText"
        title="@Model.MainPhoto.Name"
        class="u-photo photo" />
</div>

 

Kolejnym krokiem jest sprawdzenie wyświetlania strony w różnych przeglądarkach i na różnych urządzeniach. Upewniam się, że strona jest poprawnie skonstruowana pod względem wytycznych SEO oraz że przechodzi walidację W3C. 

W przypadku szablonu, którego użyłam do stworzenia www.finai.pl, na tym etapie zauważyłam, że strona główna byłaby lżejsza, gdyby wpisy znajdujące się dalej w strukturze HTML, doładowywały się asynchronicznie, zamiast wyświetlania wszystkich naraz. Oryginalny szablon nie wspierał takiej funkcjonalności, więc przygotowaliśmy taki mechanizm.

Na samym końcu podpinam skrypty śledzące, dzięki którym będę wiedziała, jak użytkownicy korzystają z mojego bloga. Pozwoli to na dodawanie usprawnień wynikających z potrzeb użytkowników.

 

Pieczenie i podawanie

Gdy wszystko jest już gotowe, wstawiam ciasto do pieca.

W przypadku bloga to moment, kiedy uruchamiam go produkcyjnie i czekam na użytkowników. Rosnące statystyki odwiedzin, wysoka pozycja w wynikach wyszukiwania oraz wysokie wyniki analiz prędkości ładowania strony są najlepszym dowodem na to, że mój wysiłek przyniósł oczekiwany efekt!

Mimo użycia gotowego szablonu, potrzeba było wiele czasu, poznania różnych narzędzi i pokonania wielu trudności, żeby efekt końcowy był na najwyższym poziomie. Jestem pewna, że korzystając z któregoś z bezpłatnych systemów blogowych, nie byłoby możliwe uzyskanie takiego efektu:

 

Justyna Jóźwik, FinAi.com

Warszawa, 27 czerwca 2017 roku

Unia Europejska
Location icon Facebook icon Twitter icon Google+ icon LinkedIn icon Technology icon Business icon Marketing icon Phone icon Mail icon User icon Tag icon Bubble icon Arrow right icon Arrow left icon Calendar PR Contact