Quelle: Shutterstock / Rawpixel.com
Static Site-Generator Gatsby 03.12.2020, 07:42 Uhr

The Great Gatsby

Der auf React basierende statische Site-Generator Gatsby vereinfacht die Erstellung professioneller und performanter Webseiten.
Eine Webseite zu erstellen ist im Prinzip einfach, mit HTML und CSS ist so etwas relativ unkompliziert realiserbar. Aber wenn eine Website wirklich gut und Professionell werden soll, ist das alles andere als banal. Eine gute Website sollte performant sein, das heißt, schnell laden, sie sollte grundlegende SEO-Techniken berücksichtigen und barrierearm sein. Und was dafür alles nötig ist, macht die Sache schon ziemlich komplex.
Beispiel Performance: für die wahrgenommene Performance ist Critical CSS wichtig, d.h. dass der CSS-Code für den Abschnitt der Seite, die am Anfang zu sehen ist, direkt inline geladen wird – und danach zeitversetzt der restliche Code. Klicks auf interne Links sollen ohne Verzögerung auf die neuen Seiten führen (prefetch). Und dann wäre da noch das Problem mit Bildern: Sie sollen in den richtigen Größen für alle Viewportgrößen bereitgestellt werden, sinnvoll sind neue Formate wie Webp, für die es eine Fallbacklösung braucht, und der Ladevorgang sollte optimiert sein.
Diese und viele weitere Probleme lassen sich mithilfe des Static-Site-Generators Gatsby (Bild 1) lösen. Static Site-Generatoren haben gegenüber Content-Management-Systemen die Besonderheit, dass die Seiten vor dem Publizieren erstellt werden, also nicht erst auf Anforderung zusammengebastelt, was schon einmal einen Performance-Gewinn bringt.

Jetzt 1 Monat kostenlos testen!

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
  • + Digitales Kundenkonto,
  • + Zugriff auf das digitale Heft,
  • + Zugang zum digitalen Heftarchiv,
  • + Auf Wunsch: Weekly Newsletter,
  • + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar