Logo

Astro JS

Extrem schnelles Framework zur Erstellung von Websites mit hybrider Islands-Architektur und intelligenter Hydration

Ein neuer Held
in der Webentwicklung

Unternehmen setzen zunehmend auf ihn, um Websites schneller, leichter und moderner zu machen.

Das untenstehende Foto zeigt den Quellcode der Porsche-Website mit den Astro.js-Dateien. Wir gehen davon aus, dass dort hochqualifizierte IT-Expertinnen und -Experten tätig sind und wohlüberlegte Entscheidungen getroffen haben.

Viele führende Unternehmen aus verschiedenen Branchen setzen bei ihren Projekten auf moderne Frameworks der nächsten Generation.

Es handelt sich um technologisch ausgereifte Teams mit hohen Leistungsanforderungen — ihre Expertinnen und Experten wählen Werkzeuge, mit denen sie schnelle, zuverlässige und skalierbare Lösungen entwickeln können.

  • Ikea.com
  • Netlify.com
  • Proton.me
  • Firebase.blog
  • ai.cloudflare.com
  • nordvpn.com
  • theguardian.engineering
  • limpbizkit.com

State of JavaScript 2024: Meta-Frameworks ist eine umfangreiche jährliche Studie, bei der Entwickler weltweit befragt werden. Ziel ist es, zu erkennen, welche Technologien, Bibliotheken und Ansätze im JavaScript‑Ökosystem an Bedeutung gewinnen oder verlieren. Sie ist mehr als eine Umfrage – sie bildet den Puls der gesamten Frontend‑Community ab. 2024 nahmen 14.015 Personen teil.

Kurzbefunde zu Astro und Next.js

Viele Nutzer wenden sich von Next.js ab. Auch wir ziehen in Erwägung, darauf zu verzichten, da es oft unerwartet reagiert und Probleme verursacht.

Bei Astro treten solche Probleme nicht auf

Der Nutzeranteil wächst und liegt mittlerweile auf dem zweiten Platz.

Und die positivste Bewertung

Maximale Ladegeschwindigkeit

Mit Astro erstellen wir Websites, die sofort geöffnet werden — unabhängig von ihrer Komplexität. Möglich wird das durch die Islands-Architektur und intelligente Hydration, die nur die tatsächlich benötigten Teile der Seite lädt.

Wir erreichen zudem konstant 100 Punkte im Google LightHouse.

Ganz einfach! Hier sehen Sie unsere jüngsten Arbeiten, die 100 Punkte erreicht haben.

LCP - 0.2 s!

Finanzmakler unter NDA. 2000 Entwicklungsstunden.

IT-Unternehmen aus London

LCP 0.3 s!

Reiseportal. NDA vereinbart.

Google Lighthouse ist ein Tool zur Analyse von Leistung und Qualität von Websites. 'Maximale Punktzahl' bezeichnet in der Regel sehr hohe Bewertungen in unterschiedlichen Kategorien wie Performance, Zugänglichkeit, SEO usw.

Die Höchstpunktzahl in Google Lighthouse ist aus mehreren Gründen wichtig:

  1. Benutzererfahrung: Eine hohe Bewertung steht für eine exzellente Nutzererfahrung. Schnelle Ladezeiten, Zuverlässigkeit und eine optimierte Darstellung auf verschiedenen Geräten machen Ihre Website für Besucher attraktiver.
  2. SEO: Suchmaschinen wie Google berücksichtigen viele Signale für das Ranking. Verbesserungen in Google Lighthouse können die Sichtbarkeit und Position Ihrer Website in den Suchergebnissen verbessern.
  3. Wettbewerbsfähigkeit: In einem Umfeld mit großer Auswahl hilft eine hohe Lighthouse-Punktzahl, Ihre Website gegenüber der Konkurrenz hervorzuheben und mehr Besucher anzuziehen.
  4. Umsatz und Conversions: Schnellere und benutzerfreundlichere Websites erhöhen Conversion-Raten und Umsatz. Finden Nutzer schnell, was sie suchen, und können unkompliziert kaufen oder Formulare ausfüllen, führt das zu mehr Abschlüssen.

Das Erreichen der Höchstpunktzahl in Google Lighthouse kann somit die Effizienz, Wettbewerbsfähigkeit und den Erfolg Ihrer Website nachhaltig steigern.

In unserem jüngsten Projekt hat eine Überarbeitung den Traffic vervierfacht und die durchschnittliche Suchposition in nur einem Monat von Platz 30 auf Platz 10 verbessert.

Jeder E‑Commerce‑Experte bestätigt, dass die Ladegeschwindigkeit einer Website ein entscheidender Faktor für Conversions, SEO und die Markenwahrnehmung ist. Wir haben eine eigene Studie durchgeführt: Vergleich der Download-Geschwindigkeit von Websites, die mit Bitrix, Tilda, WordPress und Gatsby erstellt wurden

Nachfolgend sehen Sie einen Beispielbericht aus Google Analytics für eine typische PHP‑Website, bei dem der Traffic in zwei Segmente aufgeteilt ist: Das erste Segment umfasst Nutzer mit Mikro-Konversionen auf der Website (In den Warenkorb legen, Chat schreiben, Klick auf Anruf), das zweite Segment enthält alle Besucher.

In diesem Bericht tätigt das erste Segment Käufe und weist eine durchschnittliche Download-Geschwindigkeit von 1,16 Sekunden auf. Das zweite Segment kauft nicht und hat eine durchschnittliche Download-Geschwindigkeit von 2,98 Sekunden.

Anschließend haben wir die Verteilung der Download-Zeiten unter den Nutzern mit einem Histogramm analysiert.

Hier sieht man, dass die Mehrheit der Nutzer mehr als 1 Sekunde zum Laden benötigte. Und 25 Prozent benötigten mehr als 3 Sekunden!

Wir haben diesen Rechner entwickelt, um eine einfache, aber wichtige Tatsache zu veranschaulichen — die Conversion Ihrer Website wirkt sich unmittelbar auf Ihre Einnahmen aus. Geschäftsinhaber unterschätzen häufig, wie stark bereits kleine Verbesserungen der Conversion das Finanzergebnis beeinflussen können.

Mit unserem Rechner sehen Sie die tatsächlichen Zahlen: wie viele Anfragen und Abschlüsse Ihre Website heute liefert und welche Ergebnisse Sie erzielen können, wenn Sie die Conversion um nur wenige Prozent steigern. Geben Sie Ihre Daten ein und sehen Sie selbst, wie sich die Zahlen in zusätzliche Einnahmen verwandeln.

Mehr erfahren

Partielle Hydration und Islands-Architektur

Bei klassischen Websites lädt der Browser das gesamte JavaScript auf einmal, selbst wenn es beim Start nicht benötigt wird. Das verlangsamt das Laden und verschlechtert das Nutzererlebnis.

Astro löst dieses Problem mittels einer «Islands»-Architektur. Zuerst lädt die Website nur HTML und CSS — die Seite wird sofort sichtbar. JavaScript wird nur für jene Bereiche nachgeladen, in denen es wirklich benötigt wird, und genau dann.

Das macht die Website leicht, schnell und besonders benutzerfreundlich.

Astro unterstützt alle gängigen Rendering-Methoden:

  • Statische Generierung (SSG)
  • Server-Side-Rendering (SSR)
  • Client-Side-Rendering (CSR)

Auch hybride Ansätze sind möglich, sodass sich verschiedene Verfahren auf derselben Seite kombinieren lassen und damit hohe Flexibilität bieten.

Astro erhöht automatisch die Navigationsgeschwindigkeit Ihrer Website durch Prefetching. Das bedeutet: Astro lädt verwandte Inhalte vorab, wenn Sie den Mauszeiger über einen Link bewegen oder wenn der Link in den sichtbaren Bereich gescrollt wird. Wenn Sie dann tatsächlich zu einer neuen Seite wechseln, erscheint sie sofort, sodass sich das Laden unmittelbar anfühlt.

Dieser Ansatz ist besonders wichtig für moderne Websites, bei denen Ladegeschwindigkeit und flüssige Interaktionen die Nutzererfahrung maßgeblich beeinflussen.

Astro ist eines der wenigen Frameworks, mit dem Sie Komponenten aus unterschiedlichen Ökosystemen innerhalb desselben Projekts kombinieren können. Möchten Sie einen Teil der Website mit React, einen anderen mit Vue und einen dritten mit Svelte umsetzen — kein Problem! Das ist besonders praktisch bei Migrationen und ermöglicht Teams, für jede Aufgabe die besten Werkzeuge einzusetzen, ohne sich auf einen einzigen Technologie-Stack festlegen zu müssen.

Mit Astro lassen sich Bilder problemlos in moderne WebP- und AVIF-Formate konvertieren, wodurch ihre Dateigröße ohne Qualitätsverlust deutlich reduziert wird.

Die Plattform erzeugt automatisch mehrere Versionen in unterschiedlichen Größen für verschiedene Geräte, um für jeden Bildschirm die bestmögliche Qualität und Ladegeschwindigkeit sicherzustellen. Sie können auch die Komprimierungsstufe anpassen, um das Verhältnis zwischen Qualität und Dateigröße zu steuern.

Alles wurde so einfach und komfortabel wie möglich umgesetzt und bietet Entwicklern leistungsstarke Tools, mit denen sie ihre Bilder mühelos optimieren können.

Mit Astro lassen sich alle Arten von Webprojekten umsetzen – von einfachen Webseiten bis hin zu komplexen Anwendungen. Möglich wird das durch die Unterstützung verschiedener Rendering-Methoden: statisches Rendering (SSG), serverseitiges Rendering (SSR) sowie hybride Ansätze.

Astro eignet sich hervorragend für die Entwicklung von:

  • Firmenwebsites
  • Nachrichtenportale und Medienwebsites
  • E-Commerce-Projekte und Online-Shops

Benötigen Sie eine vollwertige Single-Page-Anwendung (SPA) oder eine Progressive Web App (PWA), können Sie Vite und React mit Astro kombinieren, um die nötige Interaktivität und dynamische Funktionalität bereitzustellen.

Astro ist ein flexibles Werkzeug, mit dem sich Projekte jeder Komplexität realisieren lassen.

Die Zielsetzung der Chunks in Next.js und der Inseln in Astro.js ist ähnlich, dennoch gibt es wichtige Unterschiede.

In Next.js wird ein Chunk entlang der Route geladen, während Astro.js mehrere Hydration-Inseln pro Komponente nutzt. Das bedeutet, dass eine Seite viele kleine Dateien enthalten kann, die je nach der für jede Insel definierten Logik geladen werden.

In Next.js kann ein Chunk per dynamischem Import in Teile zerlegt werden, allerdings wird die jeweilige Komponente dann nur auf dem Client ausgeführt.

Bei Astro.js funktioniert es anders: Der Server liefert zunächst HTML (und CSS) aus, JavaScript wird separat nachgeladen, sodass nicht das gesamte JavaScript geladen werden muss.

Wir gestalten elegantes Design

Wir entwickeln Identitäten und Interfaces nach höchsten UI/UX-Standards — ansprechend, nutzerfreundlich und durchdacht.

Beste Content-Management-Systeme

Wir implementieren einige der modernsten und besten CMS.

Wir verwenden die Logik eines Lego-Baukastens beim Erstellen von Seiten. Das bedeutet, dass jede Seite aus Bausteinen — „Komponenten“ — besteht, die sich sehr einfach befüllen lassen. Dafür sind keine besonderen Fähigkeiten erforderlich. Jede auf der Website vorhandene Komponente kann an einer anderen Stelle mit anderem Inhalt wiederverwendet werden.

Unter einem CMS versteht man in der Regel ein System, mit dem Inhalte einer Website bearbeitet werden können — gleichzeitig laufen darin aber auch alle weiteren Funktionen der Website ab: Frontend-Rendering, Geschäftslogik, Interaktionen mit anderen Systemen usw. Klassische Content-Management-Systeme sind oft wahre Frankensteins, die alles auf einmal leisten wollen. Dieses ‚Alles-in-einem‘-Konzept hat jedoch erhebliche Nachteile.

Dieser Ansatz bringt einige Einschränkungen mit sich. Wenn Sie sich dafür entscheiden, werden Sie schnell abhängig vom gewählten CMS und müssen dessen Beschränkungen oder Leistungsengpässe hinnehmen. So nutzt WordPress etwa eine veraltete, langsame MySQL-Datenbank, und bei Bitrix treten ebenfalls häufig Probleme auf. Deshalb entstanden Konzepte, die Content-Management und andere Website-Funktionen entkoppeln. Dadurch lassen sich veraltete Komponenten leichter ersetzen und das Gesamtsystem wird flexibler, unabhängiger und sicherer. Die einzelnen Teile kommunizieren über REST-APIs oder GraphQL, wodurch externe Integrationen erleichtert werden. Genau das ist das Prinzip des Headless-Ansatzes.

Moderne Entwicklung setzt auf Headless-CMS und die freie Wahl des Frontend-Frameworks - z. B. Next.js, Gatsby usw.

Es gibt viele CMS-Lösungen auf dem Markt. Man unterscheidet zwei Hauptgruppen: Cloud-basierte (Cloud) und Self-hosted-Systeme (Self-hosted).

Ein Cloud‑CMS (in der Cloud) ist eine Lösung, bei der der Anbieter Betrieb, Sicherheit und Updates übernimmt. Das ist praktisch: Sie müssen sich nicht um Server oder technischen Support kümmern. Den Systemcode können Sie jedoch nicht verändern, sodass Sie von den Entscheidungen und Richtlinien des Anbieters abhängig sind. In der Praxis haben wir dabei selten schwerwiegende Einschränkungen festgestellt.

Self-hosted‑CMS werden auf Ihren eigenen Servern betrieben und bieten volle Kontrolle: Sie können den Code anpassen, Funktionen erweitern und Integrationen implementieren. Allerdings liegen Wartung, Sicherheit und die Verantwortung für einen stabilen Betrieb bei Ihrem Team.

Je nach Projektanforderung lohnt es sich, die passende Lösung auszuwählen. Hier einige Beispiele:

Prismic ist ein cloudbasiertes CMS. Es lässt sich sehr einfach integrieren und eignet sich für kleine Projekte, die keine komplexe Logik oder aufwändige Anpassungen erfordern.

Strapi — ein Self-hosted‑CMS. Geeignet für große Projekte und Anforderungen beliebiger Komplexität.

Contentstack ist ein cloudbasiertes CMS — ideal für größere Projekte und Teams, bei denen Zusammenarbeit und Skalierbarkeit im Vordergrund stehen.

Keystatic — ein Self-hosted‑CMS für kleine Projekte mit überschaubaren Anforderungen.

Directus ist self-hosted oder als Cloud-Lösung verfügbar. Ein universelles Headless‑CMS, das sich besonders für Unternehmensprojekte eignet, bei denen eine vorhandene Datenbank und individuelle Logik integriert werden müssen.

JSON — manchmal genügt für kleine Projekte eine einfache JSON-Datei als Inhaltsquelle.

Auf den jeweiligen Websites können Sie sich einen Eindruck davon verschaffen, wie die CMS‑Oberfläche aussieht.

Wir nutzen keine klassischen CMS wie WordPress und ähnliche Systeme, da diese oft nicht mehr den aktuellen Anforderungen an Sicherheit, Performance und Benutzerfreundlichkeit entsprechen.

Gern unterstützen wir Sie bei der Auswahl des CMS, das am besten zu den Anforderungen Ihres Projekts passt.

Unser Arsenal

Klick auf den Chip

PWA
Conversion-Vorhersage
Gitlab
Code Review
Test-Driven Development
CI/CD
SCRUM
Komponentenansatz
Überwachung und Protokollierung

PWA

Unsere Websites werden leicht in PWA-Anwendungen umgewandelt, die über einen Browser auf dem Desktop Ihres Telefons oder Computers installiert werden können, ohne die offiziellen App-Stores zu umgehen.

Unsere Prozesse

Wir möchten erläutern, wie wir heute arbeiten und welche Ziele wir täglich verfolgen.

Diese Grundsätze sind unser Maßstab: Sie helfen uns, die Arbeit kontinuierlich zu verbessern, ein leistungsfähiges Team zu formen und überzeugende Projekte zu liefern.

Wir sind überzeugt: Für ein erfolgreiches Projekt braucht es mehr als Ideen — es braucht eine klare, nachvollziehbare Arbeitsorganisation. Deshalb arbeiten wir nach Agile- und Scrum-Prinzipien und pflegen eine Kultur der kontinuierlichen Verbesserung.

Uns ist ein ausgewogenes Verhältnis zwischen Struktur und Freiraum wichtig: Das Team soll gern arbeiten und der Kunde jederzeit den Projektstand verstehen.

Unsere Projektmanagementkultur bewegt sich zwischen den Ansätzen von Netflix und Google. Netflix fördert radikale Eigenverantwortung und Entscheidungsfreiheit; Google arbeitet mit klaren Prozessen, die planbares, systematisches Vorgehen ermöglichen. Wir kombinieren das Beste aus beiden Welten, damit unsere Prozesse zugleich flexibel und verlässlich sind.

Wir wissen, dass sich nicht alle Details von Anfang an exakt festlegen lassen. Deshalb erwarten wir vom Kunden kein perfektes Lastenheft. Wir unterstützen bei der Aufgabenformulierung, klären Ziele und erarbeiten Lösungen im laufenden Prozess.

Wir stellen Teams zusammen und arbeiten bevorzugt mit Kunden, die diese Werte teilen. In dieser Atmosphäre entstehen die besten Projekte — und die Arbeit macht Freude.

Zu unseren bewährten Praktiken gehören:

Prozess-Debatte

Das ist eine Teamveranstaltung im Debattenformat zur Analyse von Führungsentscheidungen. Zwei Teilnehmer erhalten eine Problemsituation und haben jeweils eine Minute Vorbereitungszeit. Der erste präsentiert seine Managementlösung, der zweite bietet anschließend eine alternative, nicht wiederholbare Lösung an. Danach diskutiert das Team beide Vorschläge, tauscht Einschätzungen aus und stimmt über die überzeugendste Option ab. Das Format zeigt, dass Probleme auf vielfältige Weise gelöst werden können und fördert durch kollektiven Austausch Erfahrung und Perspektiven. Findet alle zwei Wochen statt.

Anerkennungs-App

Wir haben einen internen Mini-Service eingerichtet, über den sich Kollegen für Ideen, Initiative oder Unterstützung bedanken können. Dadurch entsteht eine Kultur der Wertschätzung und gegenseitigen Unterstützung.

Lernportal

Im Lernportal finden sich Textsimulationen, Spiele und Tests zu unterschiedlichen Fachthemen. So lassen sich Fähigkeiten in einem interaktiven Format gezielt weiterentwickeln.

Öffentliche Code-Reviews

In der IT erhält jede Woche ein Entwicklerteam ein Code-Snippet, das in 15 Minuten analysiert wird. Anschließend diskutiert die Gruppe vorgeschlagene Änderungen. Dieser Ansatz schafft ein gemeinsames Qualitätsverständnis und fördert eine konstruktive Feedbackkultur.

Früher Feierabend am Freitag

Die letzte Arbeitsstunde am Freitag gehört Teamspielen und lockerem Austausch – etwa GeoGuessr, Codenames, Gartic Phone oder andere Aktivitäten. Sie helfen beim Durchatmen, fördern das Kennenlernen und sorgen für eine gute Stimmung.

Marketing-Toolkit

Das Marketing-Team setzt sich regelmäßig mit den konkreten Aufgaben und Strategien der Markenförderung auseinander. Das fördert Kreativität und praktische Kompetenzen.

Bibliothek

Wir unterhalten eine interne Fachbibliothek. Neue Teammitglieder lesen jeden Monat ein Buch und durchlaufen anschließend Übungen, um das Gelesene zu verankern und praktisch anzuwenden – etwa Kleingruppendiskussionen, Tests oder aufgabenbezogene Übungen.

Scrum-Praktiken

Wir folgen den zentralen Scrum-Ritualen: tägliche Stand‑ups zur Synchronisation, Planning Poker zur Schätzung von Aufgaben, Demo‑Sessions zum Präsentieren von Fortschritten und Einholen von Feedback sowie regelmäßige Retrospektiven zur Verbesserung von Prozessen und Zusammenarbeit. Dieser Ansatz hilft uns, flexibel, transparent und effizient zu arbeiten.

Wir nutzen dedizierte Server für internationale Projekte. Dadurch ist auf jedem Kontinent eine stabile Verbindung sichergestellt.

Die Website ist nur in Europa gut erreichbar

Die Website ist weltweit gut erreichbar

In der Marketingabteilung von Amitiso geht es nicht um Manipulation oder wohlklingende Slogans, sondern darum, Menschen, Zahlen und die tatsächlichen Bedürfnisse Ihres Unternehmens zu verstehen.

Wir arbeiten mit wissenschaftlichen Methoden und erprobten Verfahren. Wir wenden keine "Zigeunertechniken« an und folgen keinem »YouTube-Guru". Unser Team baut auf fundiertes Wissen, seriöse Fachliteratur, Forschung und belastbare Daten.

Wenn ein Projekt Marketinganalysen oder die Arbeit mit Zielgruppen erfordert, binden wir unsere Spezialisten ein. Sie führen Recherchen durch, helfen Ihnen, Ihre Zielgruppe zu verstehen, und formulieren eine klare, ehrliche Botschaft, die tatsächlich wirkt und nicht nur gut klingt.

Daten und Forschung dienen uns nicht nur zum Verständnis von Markt und Publikum, sondern auch als Inspirationsquelle. Die Auswertung von Zahlen, Einsichten und Verhaltensmustern ermöglicht es uns, ungewöhnliche Ideen und kreative Lösungen zu entwickeln, die auf Fakten und nicht auf Vermutungen basieren.