Optymalizacja po stronie aplikacji

Źle zaprojektowana strona, to strona wolna

autorzy: Paweł Kiśluk, Łukasz Bakaj

Sposób, w jaki zaprojektujesz witrynę, będzie mieć bezpośredni wpływ na jej szybkość i responsywność. Źle zaprojektowana będzie wczytywać się wolniej. Może się zacinać, obciążać przeglądarkę użytkowników i spowalniać serwer, przez co strona będzie generować się jeszcze wolniej. Tworząc stronę należy zwróć uwagę także na elementy, które opisujemy w poniższych rozdziałach.

Skalowanie i kompresja zdjęć

Niezoptymalizowane obrazki są często przyczyną długiego czasu ładowania strony. Niestety, nadal mało który właściciel witryny zwraca uwagę na rozmiar i rozdzielczość publikowanych zdjęć. Zdjęcie o wysokiej rozdzielczości (np. 4000 pikseli, prosto z aparatu) nie będzie wcale lepiej wyglądać. Ekran przeciętnego laptopa ma szerokość około 1300-1400 pikseli. Dlatego większe zdjęcia nie są w ogóle potrzebne – dla użytkownika wystarczy zdjęcie o rozdzielczości 1080 pikseli. Dzięki temu zdjęcie, które do tej pory zajmowało 20 MB, po kompresji będzie zajmować 0,5 MB, nie tracąc na jakości. Przejście na mniejsze zdjęcia zapewnia szybsze ładowanie się strony, co będzie korzyścią dla użytkownika, samego serwera i oczywiście transferu.

Unikaj jednak zmniejszania zdjęcia przy użyciu CSS. Jeśli zmienisz format zdjęcia np. na WebP, możesz zaoszczędzić KB i przyśpieszyć ładowanie się strony. Format PNG oszczędza około 26 proc. wagi, a JPEG 25-34 proc. Warto na to zwrócić uwagę, bo przy niektórych zdjęciach można zredukować ich wagę nawet kilkukrotnie. Jeśli chcesz się dowiedzieć więcej o formatach graficznych nowej generacji WebP, zerknij na stronę: https://developers.google.com/speed/webp.

Istnieje kilka sposobów na kompresję zdjęć. Jeśli masz ich niewiele, możesz skorzystać ze strony Tiny PNG. Wystarczy, że wrzucisz zdjęcia, zaczekasz, aż zostaną skompresowane, pobierzesz i wstawisz na swój serwer. Jeśli jednak zdjęć masz już więcej, lepiej będzie skorzystać z wtyczki dla popularnych systemów CMS lub własnego skryptu.

Objętość plików HTML, CSS i JS

Tworząc stronę, warto zadbać, by wszystkie pliki HTML, JS i CSS były stworzone zgodnie z zasadą KISS (Keep It Simple, Stupid), czyli jak najbardziej prosto. Liczba i zagnieżdżanie elementów DOM powinny być optymalne. Warto wiedzieć, że nie wszystkie instrukcje w skryptach JS są używane (z niektórych nie skorzystamy nigdy). Narzędzie Coverage pozwoli znaleźć nieużywane skrypty i je usunąć. Jest to niestety jedna z najżmudniejszych technik, która pozwala zoptymalizować wydajność stron internetowych i aplikacji. Nie potrzebujesz do tego tak naprawdę żadnych szczególnych umiejętności czy narzędzi. Przyda się za to dużo czasu i uwagi. Jeśli jednak usiądziesz do tego sumiennie, to Twoja strona będzie wczytywać się szybciej i działać płynniej. Docenią to użytkownicy: zarówno urządzeń mobilnych, jak i korzystający z klasycznych przeglądarek. Jednocześnie poprawi to pozycjonowanie strony. Usunięcie nieużywanego kodu CSS pozwala uzyskać zielony wynik i 100 punktów w PageSpeed Insights.

Liczba skryptów na stronie, minifikacja

Instalowanie wtyczek i dodatków sprawia, że strona będzie posiadać wiele plików CSS. Żeby nie komplikować oryginalnego kodu CSS i usprawnić instalację, posiadają one swój własny kod. Stronę można stworzyć na podstawie gotowej biblioteki (np. Bootstrap 4), wtedy ich kod CSS będzie umieszczony w osobnym pliku. Jest to bardzo wygodne – niektóre popularne frameworki i fonty mogą być współdzielone między wieloma witrynami. Jednak im więcej plików JavaScript, tym większe opóźnienie strony. Dlatego należy pamiętać, by stosować je z umiarem, a niepotrzebne na bieżąco usuwać. Niezbędne pliki można połączyć w jeden lub wkleić w ciało strony niewielkie pliki. Popularną techniką optymalizacji liczby skryptów na stronie, sklepów i aplikacji jest po prostu minimalizacja lub minifikacja plików z kodem JavaScript, CSS i HTML.

Minimalizację można zastosować w kodzie, który nie jest interpretowany przez komputer. Niektóre znaki kodu komputerowego nie mają znaczenia dla jego zrozumienia, a są dodane po to, by ułatwić programiście czytanie i rozwijanie go. Zaliczamy do nich:

• komentarze,
• spacje,
• znak nowej linii,
• tabulatory.

Usunięcie niepotrzebnych znaków może utrudnić zrozumienie kodu przez programistę – komputer jednak nie zauważy żadnej różnicy. Jeśli więc wiesz, że kod ma być umieszczony na serwerze, postaw przede wszystkim na oszczędzanie miejsca.

Przykład kodu niezminimalizowanego:

.box-strona
    {
     background:color:#333;
     color:#ddd;
     border: 1px solid #666;
    }

.box-strona-strefa
    {
     background-color:#000; 
     color:#333;
     border: 1px solid #aaa;
    }

Przykład kodu zminimalizowanego:

.zpp{ background:color:pink; color:#666; border: 1px solid gold;}.box-strona-strefa{background-color:#000;color:#333;border: 1px solid #aaa;}

Przy zmniejszeniu gotowych plików CSS i JS przydatne mogą się okazać niektóre narzędzia, np. https://www.minifier.org. Użyć można również tych, które wygenerowane są przy audytach w GTMetrix lub PageSpeed Insights. Specjalne narzędzia i edytory stworzone dla Front-Endowców posiadają już standard dla tego typu mechanizmów. Pozwala to na automatyczne skompilowanie plików przed umieszczeniem ich na serwerze.

Asynchroniczne ładowanie plików

Ładować pliki możemy na trzy różne sposoby. Pierwszy z nich to ładowanie synchroniczne, czyli każdy plik ładowany jest jeden po drugim w kolejności, w jakiej pojawią się w kodzie strony. Drugim sposobem jest ładowanie asynchroniczne, czyli takie, które mówi przeglądarce internetowej, aby ładowała wiele plików jednocześnie. Ostatnią
z możliwości jest odroczenie ładowania zasobu z zewnątrz do momentu pełnego załadowania strony. Ten wariant wykorzystywany jest wtedy, gdy plik nie jest istotny dla prawidłowego wyrenderowania strony, np. skrypt modułu z czatem.

Stosowanie serwera plików statycznych i CDN

Jeśli na stronie znajdują się duże ilości plików statycznych, przenieś je na serwer plików lub zintegruj serwis z chmurowymi rozwiązaniami, np. Amazon S3. Dzięki wykorzystaniu ciastek i zoptymalizowaniu plików będą one pobierane szybciej, a dzięki temu Twoja strona będzie się szybciej ładować. Można tutaj rozważyć również zastosowanie CDN  (z ang. Content Delivery Network), czyli usługi, która zainstaluje fragmenty strony w wielu centrach danych. Dzięki temu strona będzie działać szybciej, a serwer będzie dysponował większą przepustowością łączy. Najważniejsze jednak jest to, że lokalizacja serwera nie będzie mieć przełożenia na dodatkowe opóźnienia, które mogłyby wyniknąć z odległości, jaką połączenie internetowe musi pokonać. Skrócenie tej drogi połączenia to tylko jedna z technik, która może przyśpieszyć i usprawnić transmisję statycznych plików.

Korzyścią z zastosowania serwera plików statycznych i CDN może być odciążenie głównego serwera HTTP. Rozłożenie zasobów „cięższej” strony na kilka węzłów przełoży się na jej szybsze działanie. Dlaczego tak się dzieje? Istnieje ograniczenie, które sprawia, że z jednego serwera możemy pobrać kilka plików na raz. Sieć CDN pozwala na pobranie większej liczby plików jednocześnie. Nie używa ona plików cookies, przyśpiesza łącza i optymalizuje wysyłanie statycznych treści. CDN przyśpiesza działanie witryny z jeszcze jednego powodu: w takim przypadku nie istnieją limity transferu w górę i w dół. Na chwilę obecną czołowymi dostawcami usług CDN są:

• Amazon AWS,
• Google Cloud,
• Cloudflare.

Niewątpliwą zaletą stosowania CDN jest ochrona strony przed „zalaniem” serwera nienaturalnymi zapytaniami z zewnątrz. Strona jest uodporniona na najpopularniejsze i najłatwiejsze ataki, które mogą zablokować serwer, wykorzystując jego łącza internetowe.

Chcesz wiedzieć więcej o benefitach zastosowania CDN-a – przeczytaj część dot. optymalizacji serwera.

Unikanie wielokrotnych przekierowań

Przekierowania wydłużają czas ładowania się strony, ponieważ serwer zapytany o adres URL zazwyczaj zwraca adres, na który wskazuje przekierowanie, po czym przeglądarka wysyła kolejne zapytanie: tym razem na adres, który otrzymała
w odpowiedzi. Dlatego też dobrze jest unikać przekierowań ze strony A na stronę B, a ze strony B na stronę C.

Jeśli chcesz sprawdzić przekierowania na swojej stronie, możesz wykorzystać do tego narzędzie HTTP Status: https://httpstatus.io.

Skrypty monitoringu, statystyk – rezygnacja z integracji zewnętrznych/opóźnienie ich ładowania

Popularne przyciski do lajkowania i wyrażania opinii, a także galerie z Instagrama mogą zepsuć działanie nawet najbardziej zoptymalizowanej strony WWW. Usunięcie ich może przełożyć się bezpośrednio na szybsze działanie witryny i user experience. Wszystkie dodatki z social mediów (jak np. Facebook, Twitter, Instagram) użyte w postaci przycisków, liczników czy widgetów mogą znacząco spowolnić wczytywanie się strony. Wszystko przez to, że serwer musi pobierać informacje ze źródeł zewnętrznych (z którymi najpierw musi się połączyć). Należy więc przeanalizować, które z tych elementów są nam niezbędne. Może się okazać, że użytkownicy nie korzystają z niektórych opcji. Może więc zamiast postu i komentarzy z Twittera lepiej będzie podać link odsyłający na docelową stronę?

Kolejnymi problematycznymi z perspektywy czasu ładowania strony elementami są wszelkie skrypty zbierające informacje na stronie. Najczęściej są to wpięte w stronę piksele lub zwykłe skrypty. Nikt nie twierdzi, że takie systemy nie są potrzebne, bo jest wręcz przeciwnie! Zbieranie danych, analizowanie ich, a następnie wdrażanie na stronę nowych strategii opracowanych na podstawie danych to jeden z najlepszych sposobów na rozwój.

Co jest więc złego we wpinaniu zbierających dane skryptów? Przede wszystkim fakt, że chcąc się dowiedzieć wszystkiego, musimy zgromadzić bardzo dużą ilość informacji, które muszą się przesyłać poza stronę, korzystając z mocy komputera oraz internetu klienta odwiedzającego naszą stronę, a co za tym idzie przedłużając łączny czas ładowania strony.

Co możemy z tym zrobić? Pojawia się jedno zasadnicze pytanie: jaki zakres informacji możemy uznać za „wystarczający”? Jeśli będziemy się integrować z 5 systemami i każdy system zajmie podczas ładowania strony 2 sekundy, to jak łatwo policzyć – poświęcamy praktycznie 10 sekund na coś, co z perspektywy klienta nic nie zmienia. Jeśli poświęcimy część danych, ale skupimy się na najlepszym systemie zbierającym te dane, to skrócimy czas do 2 sekund, nie rezygnując z ich zbierania. Wiemy jednak, iż jest to jeden z kompromisów, których bardzo często nie da się osiągnąć, dlatego też prace nad prędkością strony nie są prostym i jednowymiarowym zagadnieniem.

Zastosowanie Google Tag Manager i funkcji server-side tagging

Google Tag Manager (w skrócie GTM) to narzędzie, które umożliwia umieszczanie kodów śledzących, jak np. kod Google Ads, piksel Facebooka czy tag Google Analytics, w kodzie strony. Poza wstawieniem kodu kontenera GTM do kodu strony lub aplikacji nie będzie tutaj niezbędnego udziału programisty. Wszystkie zmiany kodów wykonuje się przy pomocy interfejsu GTM. Wprowadzenie Google Tag Managera znacząco ułatwiło pracę z kodami: przyśpieszyło ich wdrażanie, modyfikowanie, aktualizowanie. Jednocześnie ograniczone zostały błędy w konfiguracji, nie ma już potrzeby usuwania niepotrzebnych kodów, gdyż wszystkie zastępuje jeden skrypt.

W podstawowej wersji GTM kody śledzące uruchamianie są już w przeglądarce. Aktywowane są one w momencie ładowania strony. W wersji server-side parametry i dane wysyłane są np. do Facebooka, Google Ads czy Analytics bezpośrednio z serwera. Komunikacja ze stroną i przesyłanie danych odbywają się przy pomocy nowego elementu systemu. Wszystkie te elementy można znaleźć w zasobach domeny właściciela witryny internetowej: dzięki temu przeglądarki użytkowników interpretują przesyłanie tych danych jako komunikację z serwerem strony. Zastosowanie tego typu rozwiązania poprawia znacząco wydajność. Oznacza to:

• Mniejsze ryzyko utraty danych dzięki zastosowaniu mniejszej liczby tagów śledzących, krótszego kodu na stronie i mniejszej ilości informacji do przetworzenia.
• Zwiększone bezpieczeństwo: dane użytkownika są lepiej chronione, ponieważ
  są przesyłane, np. do serwerów Google, Facebooka, bez pośrednictwa przeglądarki.
• Większa odporność na blokowanie śledzenia: pliki cookies nie są blokowane przez rozwiązania typu Adblock czy Intelligent Tracking Prevention (ITP) w przeglądarce Safari.

Server-side GTM powstał w odpowiedzi na większą potrzebę zapewnienia bezpieczeństwa danych i na zwalczanie ograniczeń działania plików cookies w przeglądarkach.

Jeśli chcesz się dowiedzieć więcej o Google Tag Manager, koniecznie sprawdź poniższy link: https://developers.google.com/tag-manager/serverside/intro.

Cache w warstwie aplikacji

Dobrym rozwiązaniem może być przechowywanie całych, tymczasowych wyrenderowanych stron w systemie plików lub w MySQL. Każdy system CMS ma własne rozwiązania cache: sprawdź więc, jak działa i jakie są skutki jego stosowania.

W praktyce wygląda to w następujący sposób: serwer zamiast ładować za każdym razem funkcje oraz dane w sposób możliwy do wyrenderowania (wyświetlenia) przez przeglądarki, robi to jedynie raz. Pobrane w ten sposób elementy zapisuje w swojej pamięci podręcznej – cache – i przy kolejnej próbie wyświetlenia strony wykorzystuje wcześniej już wykonany statyczny kod HTML (zamiast na nowo pobierać wszystkie wcześniej wymienione dane oraz generować kod zrozumiały dla przeglądarki).

Jeżeli mamy do czynienia z „małą” aplikacją, bardzo dobrze sprawdzi się rozwiązanie przechowywania danych w bazie MySQL. Jest to bardzo dobre rozwiązanie w momencie, gdy strona ma wyświetlać te same treści dla wszystkich użytkowników. Problem pojawia się wtedy, gdy w założeniu ma ona pokazywać dynamicznie zmieniające się informacje dla różnych odbiorców. Stosując pamięć podręczną, niwelujemy też wszelkie istniejące „wąskie gardła” (miejsca, w których dane mogłyby być długo pobierane) oraz znacznie zwiększamy wydajność strony stosunkowo niskim kosztem (oraz – co równie ważne – nie musimy specjalnie przebudowywać struktury aplikacji).

Separacja widoków desktop od mobile – opcjonalne zastosowanie AMP

Jeśli chcesz lepiej dostosować elementy i układ strony do wielkości ekranów użytkowników, skorzystaj z separacji widoków na desktopy i mobile. Wpłynie to bezpośrednio na performance i umożliwi wdrożenie odpowiednich standardów, np. AMP.

Accelerated Mobile Pages (AMP)

AMP to technologia rozwijana przede wszystkim w środowisku open source. Jej zastosowanie umożliwia szybkie ładowanie stron WWW, które posiadają statyczne treści. Do tego pozwala dopasować zawartość serwisu do parametrów technicznych urządzenia, czyli wielkości i rozdzielczości ekranu, z którego korzysta w danym momencie użytkownik. Tym samym przeglądanie stron internetowych będzie szybkie i wygodne.

Technologia AMP składa się z 3 elementów:

• • AMP HTML – zestawu wskazówek i zaleceń dla kodu strony.
  • AMP JS – szybkiej strony uzyskanej dzięki bibliotekom JavaScript.
  • AMP CDN – nieobowiązkowego elementu, który nie musi być wdrożony, aby strona została stworzona zgodnie ze standardami Accelerated Mobile Pages. Warto jednak zdecydować się na jego wykorzystanie: dzięki temu będziemy mogli od razu skorzystać z kodu HTML dla strony w technologii AMP.AMP pozwala na szybkie separowanie widoku mobilnego od desktopowego, jednak należy pamiętać, że domyślne wersje AMP są bardzo proste, więc trzeba przygotować pod nie oddzielne widoki.

Co istotne, AMP nie jest już gwarantem specjalnego traktowania ze strony Google w zakresie oceny jakości strony w widoku mobilnym, ale nadal może pomóc przyśpieszyć naszą stronę, bo ma znaczenie dla efektywności SEO.

Zastosowanie SSR – server-side rendering

SSR jest stosunkowo nowym rozwiązaniem. Pozwala ono na generowanie witryny internetowej od razu po stronie serwera. W praktyce wygląda to tak, że przeglądarka otrzymuje kod od strony WWW, a na ekranie użytkownika od razu widoczna jest cała strona witryny. Aplikacja działa tak samo z włączonym JS, jak i po jego wyłączeniu.

Jeśli po wdrożeniu wszystkich powyższych rozwiązań nie uzyskasz zadowalającego Cię efektu, warto pomyśleć o przejściu na wydajniejszy hosting. Szybszy hosting to szybsze wczytywanie się stron i aplikacji. Zwróć uwagę na cenę hostingu: może być ona wskaźnikiem jego jakości i wydajności. Na szczęście przeniesienie swojej strony na inny hosting nie jest trudnym zadaniem. Sprawdź część poświęconą kwestii serwera / hostingu w kontekście SEO (link).

Czas, który jest potrzebny do pobrania zawartości strony internetowej, jest miarodajnym wyznacznikiem profesjonalizmu webmastera. Nie daj się zmylić: duża ilość treści nie może być wytłumaczeniem dla wolniejszego działania witryny. Istnieją przecież duże portale, które Front-Page pokazują niemal błyskawicznie. Dla porównania – są też strony, które posiadając zaledwie kilka grafik, odpalają się bez końca. Przy sklepie internetowym długie ładowanie się strony może oznaczać stratę klienta.

Jeśli więc inwestujesz w promocję swojej firmy, aplikacji czy strony, nie pozwól, by powolne działanie witryny przyczyniło się do wyrzucenia pieniędzy w błoto. Nowe rozwiązania istnieją po to, by z nich korzystać i by pomogły szybko zwrócić włożone w to środki!