Swoboda projektowania w Webflow ma swoją cenę w wydajności, która daje o sobie znać w Core Web Vitals i pozycjach w wynikach wyszukiwania miesiące po starcie strony. Sprawdzamy, skąd się to bierze.
Key takeaways
- Każda interakcja w Webflow (parallax, animacje przy scrollowaniu, slidery) to dodatkowy JavaScript, niezależnie od tego, czy urządzenie odwiedzającego udźwignie go płynnie, i to on najbardziej psuje wyniki Core Web Vitals na stronach z ciężkimi szablonami.
- Test w Lighthouse na spokojnym serwerze z rozgrzaną pamięcią podręczną często wypada lepiej niż to, czego realnie doświadczają odwiedzający na danych mobilnych, co maskuje prawdziwą różnicę w wydajności.
- Astro domyślnie nie dokłada żadnego JavaScriptu i dodaje go tylko tam, gdzie komponent naprawdę tego potrzebuje, czyli dokładnie odwrotnie niż w page builderach.
Webflow reklamuje się swobodą projektowania i jego szablony faktycznie to dają. Czego nie reklamuje, to koszt wydajnościowy, jaki ta swoboda ze sobą niesie: taki, który daje o sobie znać w Core Web Vitals i pozycjach organicznych miesiące po starcie strony, gdy urok nowego designu już zblaknie, a Google zdąży ją dokładnie przeskanować.
JavaScript, o który nikt nie prosił
Każda interakcja w Webflow, czy to parallax, animacja odsłaniana przy scrollowaniu, efekt hover czy slider, to JavaScript, który przeglądarka musi wczytać i uruchomić, niezależnie od tego, czy urządzenie odwiedzającego poradzi sobie z tym płynnie. Strony oparte na ciężkich szablonach dokładają te efekty sekcja po sekcji, a suma tego wszystkiego realnie zaniża Largest Contentful Paint i Interaction to Next Paint, czyli dwa wskaźniki Core Web Vitals, którym Google przykłada największą wagę przy rankingu.
Obrazy, które wyglądają dobrze, ale nie są zoptymalizowane
Webflow faktycznie generuje automatycznie responsywne zestawy obrazów, co samo w sobie jest więcej, niż potrafi wiele platform. Nie kompresuje ich jednak agresywnie, nie zawsze domyślnie serwuje nowoczesne formaty w każdym szablonie, a projektant wrzucający zdjęcia w pełnej rozdzielczości do sekcji hero bez zastanowienia to bardzo częsty sposób na to, żeby strona ważyła kilka megabajtów więcej, niż powinna.
Dlaczego w PageSpeed Insights wygląda to lepiej, niż jest naprawdę
Jednorazowy test w Lighthouse na spokojnym serwerze z rozgrzaną pamięcią podręczną wygląda zwykle lepiej, niż to, czego realnie doświadcza odwiedzający na telefonie ze średniej półki i mobilnym internecie. Właśnie w tej różnicy między wynikiem z testu a realnym doświadczeniem po cichu ucieka ruch organiczny: strona jest wystarczająco wolna, żeby zaszkodzić pozycji, ale nie na tyle, żeby ktoś wprost się na to poskarżył.
Co naprawdę naprawia przebudowa strony
Astro domyślnie nie dokłada żadnego JavaScriptu i dodaje go z powrotem tylko tam, gdzie komponent naprawdę potrzebuje interaktywności, czyli dokładnie odwrotnie niż page builder, który wysyła kod gotowy do animacji wszędzie, niezależnie od tego, czy jest używany. W parze z porządną optymalizacją obrazów to zwykle największa dźwignia, jaką migracja daje dla Core Web Vitals, i to bez względu na to, czy celem jest statyczny eksport, czy pełna przebudowa na nowym CMS-ie.
Zobacz konkretne liczby w naszym porównaniu Webflow kontra Astro, albo wyślij nam swoją stronę, a pokażemy Ci, gdzie dokładnie tkwi ten zbędny ciężar.