Astro – szybkie strony internetowe niższym kosztem

Potrzeby klienta

Z danych statystycznych z początku 2023 r. w Polsce wynika, iż udział przeglądania internetu na urządzeniach mobilnych wyniósł 58,29% (stan na 16.03.2023). W dzisiejszych czasach szybkość ładowania stron internetowych jest jednym z kluczowych czynników wpływających na ich sukces. Już w 2019 roku Amazon opisywał, że każde 100 milisekund opóźnienia ładowania strony generowało spadek wyników sprzedaży o  1%. Zarówno użytkownicy, jak i wyszukiwarki wymagają szybkich stron, które ładują się błyskawicznie. Jednakże, zwiększenie szybkości ładowania stron internetowych wiąże się często z dużymi kosztami, ponieważ wymaga ono czasu i zasobów umożliwiających optymalizację kodu.

W swoim założeniu strony internetowe powinny być szybkie, łatwo dostępne oraz nie powinny przysparzać problemów. Za przykład takiej strony posłużyć może pierwsza strona internetowa w historii. Nawet po 30 latach jest ona wciąż w pełni funkcjonalna i bardzo szybka, ale jednocześnie nie spełnia absolutnie podstawowych sprzedażowych wymogów wizualnych. Jedno jest pewne: pomysł na to, jak stworzyć szybką stronę internetową pozostaje bez zmian – zależy nam na jak najmniejszej wadze wysyłanych plików oraz braku  konieczności korzystania z zasobów zewnętrznych, np. baz danych.

Przepis na niezawodną, szybką i funkcjonalną stronę internetową opracowywany jest od lat. Korzysta się z różnorodnych narzędzi: od frameworków JavaScript do generatorów stron statycznych. Każde z rozwiązań, w zależności od potrzeb klienta, ma swoje wady i zalety. Astro stanowi połączenie tego, co najlepsze.

Czym jest Astro?

Astro to biblioteka umożliwiająca tworzenie szybkich, wydajnych i łatwych w utrzymaniu stron internetowych, a także aplikacji internetowych opartych na komponentach.

W Astro to Ty wybierasz, w jakich technologiach webowych, takich jak frameworki JavaScript (np. React, Vue.js, Svelve), piszesz swój kod. Astro wspiera Cię w zapewnieniu wydajności i skalowalności projektów. Narzędzie to oferuje wiele funkcji, takich jak ładowanie dynamiczne, obsługa stanu globalnego, budowa statyczna i wiele innych, co pozwala na łatwe tworzenie aplikacji internetowych.

Astro jest biblioteką frontendową komunikującą się z systemem bazodanowym po API. Dzięki swojej architekturze pozwala na generowanie stron statycznych wraz z interaktywnymi wyspami. Na start nie jest doładowywany żaden aktualnie niewykorzystywany JavaScript, a wszelkie potrzebne skrypty są doładowywane na zasadzie lazy loadingu (leniwego ładowania czy ładowania on-demand).

To, co wyróżnia Astro na tle klasycznej strategii tworzenia stron, to właśnie innowacyjne podejście headless do ładowania strony. Dzięki niemu oraz metodzie zbierania danych ze źródeł z użyciem API, możliwe było stworzenie strony, w której dane zaciągane są dopiero wtedy, kiedy rzeczywiście są potrzebne. Podobną praktyką jest opóźnianie ładowania zdjęć na stronie do momentu ich wyświetlenia, np. na scrollowaniu strony.  Astro wprowadziło standard, w którym dzieli stronę na mniejsze komponenty (klocki), z których każdy ma swoje dedykowane potrzeby JavaScript doładowywane dopiero po interakcji użytkownika z danym komponentem. Dzięki temu na starcie nie ładujemy więcej JavaScript niż to, czego rzeczywiście potrzebujemy, a to z kolei daje nam olbrzymią przewagę w prędkości załadowywania się strony.

Jak zacząć pracę z Astro?

W pracy z Astro możesz skorzystać z gotowych templatów przygotowanych przez developerów lub zacząć od czystego projektu i wdrożyć do niego kod z Twojej gotowej witryny. Całą dokumentację znajdziesz tutaj: https://docs.astro.build/en/getting-started/, a przykładowe motywy i integracje z innymi frameworkami dostępne są tutaj: https://astro.new/.

Strony zbudowane w zgodzie z architekturą Astro są od początku skoncentrowane na dostarczaniu jak najlepszej jakości i prędkości strony internetowej. Koszt wdrożenia się w nowe podejście jest znikomy, ponieważ jeżeli masz doświadczenie pracy z innymi frameworkami JS, to przejście na Astro nie sprawi Ci żadnych problemów, pozostawiając swobodę korzystania z ulubionych narzędzi.

Czyste dane i podsumowanie

Jeżeli zależy Ci na prędkości ładowania stron, to Astro jest dla Ciebie. Zdobycie ~99 pkt na PageSpeed Insights przy tej architekturze nie sprawia najmniejszych problemów. Oto kilka największych zalet Astro:

• Szybkość - Astro zostało zaprojektowane z myślą o szybkości działania, co oznacza, że aplikacje zbudowane z użyciem tej biblioteki są wydajne i szybko się wczytują.
• Łatwość w utrzymaniu - Astro używa składni JSX, która jest łatwa do zrozumienia i pozwala na nieskomplikowane zarządzanie komponentami.
• Kompatybilność - Astro jest zgodne z wieloma innymi narzędziami JavaScript, w tym z popularnymi frameworkami, takimi jak React i Vue.js, dzięki czemu może być łatwo integrowane z już istniejącymi projektami.
• Budowa statyczna - Astro umożliwia budowanie stron statycznych, co oznacza, że można łatwo generować i publikować statyczne strony internetowe bez konieczności używania serwera.
• Obsługa stanu globalnego - Astro zapewnia łatwą obsługę stanu globalnego, co oznacza, że można łatwo przechowywać i udostępniać stan między różnymi komponentami.
• Rozszerzalność - Astro oferuje wiele pluginów i narzędzi, które można używać do rozszerzania funkcjonalności biblioteki.

W 300.codes jesteśmy w trakcie przenosin naszej strony na Astro. Po zakończeniu prac opublikujemy podsumowanie prac i raporty prędkości stron aktualnej i nowopowstającej.

Stay tuned! 😉