Teraz z AI - twórz strony przez serwer MCP
Wydajnosc

Perfekcyjne wyniki Lighthouse z Cmssy - bo to Twoja aplikacja Next.js

Jak headless Cmssy osiaga 100/100 Accessibility, Best Practices i SEO. Twoje bloki to React Server Components z ~0 client JS, tresc jest ISR-cache'owana z delivery API, a wdrazasz na wlasnym hostingu - wiec kontrolujesz wydajnosc od poczatku do konca.

Z
Zespol Cmssy
4 min read
Wyniki audytu Lighthouse dla cmssy.io - Accessibility 100, Best Practices 100, SEO 100
Wyniki audytu Lighthouse dla cmssy.io - trzy perfekcyjne wyniki 100

Last updated: 7 czerwca 2026

Wyniki

Uruchomilismy Google Lighthouse na cmssy.io - naszej wlasnej stronie marketingowej, aplikacji Next.js, ktorej tresc pochodzi z Cmssy. Wyniki mowia same za siebie:

  • Accessibility: 100/100
  • Best Practices: 100/100
  • SEO: 100/100
  • TTFB: 64ms
  • Waga strony: 332KB

Dlaczego headless Cmssy jest szybkie

Najwazniejsze do zrozumienia: strona Cmssy to standardowa aplikacja Next.js (App Router), ktora posiadasz i wdrazasz sam. Budujesz bloki jako komponenty React z @cmssy/react i @cmssy/next, pobierasz tresc z delivery API Cmssy i wdrazasz na wlasnym hostingu (Vercel itp.). Cmssy przechowuje tresc i daje edytorom wizualny edytor obejmujacy Twoja wdrozona strone - nie hostuje jej za Ciebie. To znaczy, ze kazdy mechanizm wydajnosci Next.js jest w Twoich rekach, a te wyniki biora sie z dobrego ich wykorzystania.

Server Components wysylaja ~0 client JS

Bloki Cmssy to komponenty React, a w App Routerze sa to domyslnie Server Components. Blok renderowany po stronie serwera wysyla HTML i praktycznie zero JavaScriptu do przegladarki. Tylko bloki wymagajace interaktywnosci wlaczaja "use client", wiec bundle kliencki pozostaje maly - i to glownie dlatego wyniki Performance i Best Practices sa wysokie. Zobacz budowanie blokow oraz zaawansowane bloki.

Cache'owana tresc z ISR

Tresc jest pobierana z delivery API Cmssy i w pelni cache'owalna. Z Next.js SSG lub ISR renderujesz strony z wyprzedzeniem i rewalidujesz wedlug harmonogramu, wiec uzytkownicy dostaja pre-renderowany HTML serwowany z edge/CDN Twojego hostingu - te 64ms TTFB to Twoja cache'owana odpowiedz, nie render per request.

Optymalizacja obrazow z next/image

Uzywaj next/image dla kazdego obrazu w blokach, a dostaniesz automatyczne skalowanie, nowoczesne formaty, lazy-loading ponizej zalamania i poprawne width/height bez layout shift - wszystko z frameworka, ktory juz kontrolujesz.

Dane strukturalne, meta i sitemapy

SEO kontrolujesz w swojej aplikacji Next.js: dane strukturalne JSON-LD, API metadata dla meta i Open Graph oraz generowana sitemapa. Konfigurujesz to raz i kazda strona je renderuje - bez pluginow.

Fonty i resource hints

Self-hostuj fonty z next/font, aby usunac render-blokujace zadanie i uniknac layout shift, oraz dodaj hinty preconnect/preload dla krytycznych zasobow. Te drobne zyski przekladaja sie wprost na wyniki Accessibility i Best Practices.

Dlaczego to ważne

Większość page builderów poświęca wydajność na rzecz elastyczności. Dostajesz edytor drag-and-drop, ale wynik Lighthouse spada do 60-70, bo runtime wysyła ciężki client JavaScript. Headless Cmssy unika tego kompromisu: edytorzy dostają wizualne edytowanie z AI, a Twoja strona to lekka aplikacja Next.js, gdzie sam decydujesz, co działa na serwerze, a co trafia do klienta.

Przetestuj sam

Postepuj wedlug przewodnika instalacji, aby podlaczyc @cmssy/react i @cmssy/next do swojej aplikacji Next.js, zbuduj kilka blokow, zarzadzaj trescia w edytorze lub przez MCP, wdroz na hostingu i uruchom Lighthouse na wyniku.