Auf dieser Seite
[-]
-
Mit Bootstrap 5 jQuery Anteile verringern und hochperformante Webseiten bauen
-
Was versteht man unter Bootstrap?
-
Warum Bootstrap verwenden?
-
Zu Ihrem Bootstrap Update
-
Was beinhaltet Bootstrap?
-
Was sind die Vorteile von Bootstrap 5?
-
Was muss man für einen Relaunch mit Bootstrap 5 beachten?
-
Wieso möchte man überhaupt die jQuery Funktionen verringern?
-
Unsere Erfahrung mit Bootstrap:
Mit Bootstrap 5 jQuery Anteile verringern und hochperformante Webseiten bauen
Mit Bootstrap lassen sich hochperformante, responsive Webseiten bauen. Was Bootstrap eigentlich ist, welche Vorteile Bootstrap 5 mit sich bringt und auf was man bei einem Projekt mit Bootstrap 5 achten muss, erfahren Sie in diesem Artikel.
Was versteht man unter Bootstrap?
Bootstrap ist ein kostenloses CSS Frontend-Framework, das für eine schnellere und einfachere Webentwicklung entwickelt wurde. Es basiert auf CSS-Grid und Flexbox. Mit ihm lassen sich auf Basis von CSS und HTML5 responsive Webseiten erstellen. HTML- und CSS-Designs wie Typografie, Formulare, Schaltflächen, Tabellen, Navigation oder Image-Carousels lassen sich durch vorhandene Designvorlagen leicht gestalten. Für die responsive Gestaltung von Webseiten gibt es JavaScript-Plugins. Wobei die Notwendigkeit für die Verwendung von JavaScript durch die neueren Updates stetig reduziert und zunehmend mehr CSS verwendet wird. Ursprünglich wurde Bootstrap von Twitter entwickelt.
Warum Bootstrap verwenden?
Mit Bootstrap lassen sich schnell und relativ einfach responsive Seiten erstellen, ohne dass man sich tiefgreifend mit CSS auseinandersetzen muss. Das CSS passt sich automatisch an Smartphones, Tablets und PCs an. Das Frontend-Framework ist mit allen gängigen Browsern kompatibel. Ein weiterer Vorteil ist die große Vielfalt an vorgefertigten Themes, Templates und Elementen. Außerdem lässt sich das Framework erweitern und anpassen. Bootstrap ist ein Open-Source-Framework und kostenlos.
Was beinhaltet Bootstrap?
Bootstrap besitzt mit einem Graphic User Interface eine gute Benutzeroberfläche. Ebenso gibt es vorgefertigte Layouts und JS-Tools. Das Framework gibt es entweder vorkompiliert oder als Quellcode. Wer auf Bootstrap setzt, kann auf eine hervorragende Dokumentation, große Community, JS-Plugins, Build Tools sowie viele andere Features zurückgreifen.
Was sind die Vorteile von Bootstrap 5?
Bootstrap 5 ist die aktuellste Version des Frameworks und bringt neue Features, neue Möglichkeiten und eine freiere Gestaltungsmöglichkeit mit sich. Folgende Änderungen finden wir besonders wertvoll.
- Bootstrap 4 hatte bspw. eine limitierte Farbwahl, die bei Bootstrap 5.
- Elemente wie Buttons wurden in Bootstrap 4 je nach Browser teilweise unterschiedlich ausgespielt. Bei Bootstrap 5 bleiben diese immer gleich.
- Aufgrund eigener integrierter SVG Icons wird Font-Awesome nicht mehr benötigt.
- Static Site Generator mit Hugo statt mit Jekyll Software
- RTL (Right to Left) switching zwischen Seiten ist nun möglich
- Supported Offcanvas Komponenten
- Es wird kein jQuery mehr verwendet. Stattdessen kann man auf vanilla JS zurückgreifen, mit einigen Plugins.
Was muss man für einen Relaunch mit Bootstrap 5 beachten?
In der Regel kann man mit einem auf Bootstrap 5 basierten Framework fast alle Vorteile des Frameworks nutzen und noch bessere und leistungsstärkste, responsive Web Applikationen entwickeln. Je nach Komplexität, alten Techsteck, Funktionen, die übernommen werden sollen, kann es jedoch sein, dass man beispielsweise nicht alle jQuery Funktionen loswird. Bei unserem Kunden Genialokal konnten wir bei einem Relaunch jedoch die jQuery Funktionen um 80 % reduzieren und unter anderem hierdurch die Google Lighthouse Scores deutlich verbessern.
Wieso möchte man überhaupt die jQuery Funktionen verringern?
JQuery versucht die Browserkompatibilität zu allen gängigen Browsern und deren Versionen herzustellen. Früher war das DER Grund für die Verwendung von jQuery. Heute bauen die meisten Browser jedoch auf der gleichen Engine auf, daher wird jQuery aus Kompatibilitätsgründen nicht mehr benötigt. Man kann Probleme deshalb auch direkt mit nativen JS lösen. Ebenso unterstützt jQuery kein passives Eventlisting, was häufig der Grund für längere Ladezeiten ist. Dies ist auch einer der Gründe, wieso Bootstrap versucht, komplett auf jQuery zu verzichten.
Unsere Erfahrung mit Bootstrap:
Bootstrap ist ein sehr praktisches Frontend Framework. Vor allem die stetige Weiterentwicklung und Verbesserung des Frameworks bringt viele nützliche Funktionen mit sich. Für Individualentwicklungen lassen sich hiermit super performante und responsive Webseiten entwickeln. Wer auf vorgefertigte Templates oder Themes zurückgreift, muss hier ein paar Abstriche machen. Aber auch die neuen Templates und Themes, die auf Bootstrap 5 basieren, performen unserer Erfahrung nach im Schnitt super und besser als die Bootstrap 4 basierten Templates. Natürlich gibt es auch hier immer Ausnahmen. Bootstrap 5 ist sehr schlank und wirft viele Altlasten ab. Durch das Reduzieren und Streichen von jQuery sind Bootstrap 5 basierte Seiten zwar nicht mehr mit allen alten Browserversionen kompatibel, dafür auf neueren umso schneller. Wer auf ein vorgefertigtes Design zurückgreifen möchte, kann unnötiges CSS und JS entweder selbst entfernen oder eine Softwareagentur wie uns beauftragen. Wir entschlacken die Templates und passen Sie an die jeweiligen Bedürfnisse und Anforderungen an Hierdurch werden die Seiten deutlich schneller und die Google Lighthouse Scores verbessern sich merklich. Was wiederum Geld bei Google ADS spart und auch für SEO nicht zu vernachlässigen ist.
Über Uns
Wir sind eine Digitalagentur aus Freiburg im Breisgau und haben uns unter anderem auf individuelle Entwicklungen im Bereich Webapplikationen spezialisiert. Wir bieten in diesem Bereich sowohl Beratung, Umsetzung & Entwicklung als auch den Betrieb Ihrer Anwendungen an. Kontaktieren Sie uns für ein unverbindliches und kostenloses Erstgespräch.