Sie sind auf Seite 1von 13

Bootstrap vs. w3.

css vs AMP

Inhalt

1. Bootstrap ......................................................................................................................................... 2
2. W3.CSS ........................................................................................................................................... 4
3. AMP ................................................................................................................................................ 9
Bibliographie ......................................................................................................................................... 13

1
1. Bootstrap

 Bootstrap ist ein kostenloses Frontend-Framework für eine schnellere und einfachere
Webentwicklung
 Bootstrap enthält HTML- und CSS-basierte Designvorlagen für Typografie,
Formulare, Schaltflächen, Tabellen, Navigation, Modale, Bildkarusselle und viele
andere sowie optionale JavaScript-Plugins
 Bootstrap gibt Ihnen auch die Möglichkeit, responsive Designs zu erstellen

Vorteile von Bootstrap:


 Einfach zu bedienen: Jeder, der nur über Grundkenntnisse in HTML und CSS verfügt,
kann Bootstrap verwenden
 Responsive Funktionen: Das responsive CSS von Bootstrap passt sich an Telefone,
Tablets und Desktops an
 Mobile-First-Ansatz: In Bootstrap gehören Mobile-First-Stile zum Kern-Framework
 Browserkompatibilität: Bootstrap 4 ist mit allen modernen Browsern kompatibel
(Chrome, Firefox, Internet Explorer 10+, Edge, Safari und Opera).
Bootstrap, ursprünglich als Twitter Blueprint bezeichnet, wurde von Mark Otto und Jacob
Thornton bei Twitter als Rahmen für die Konsistenz interner Tools entwickelt. Vor Bootstrap
wurden verschiedene Bibliotheken für die Schnittstellenentwicklung verwendet, was zu
Inkonsistenzen und einem hohen Wartungsaufwand führte. Laut Twitter-Entwickler Mark Otto:
"Eine sehr kleine Gruppe von Entwicklern und ich haben uns zusammengetan, um ein neues
internes Werkzeug zu entwerfen und zu bauen, und sahen eine Gelegenheit, noch mehr zu tun.
Durch diesen Prozess haben wir gesehen, dass wir etwas wesentlich umfangreicheres aufgebaut
haben als ein anderes internes Werkzeug. Monate später endeten wir mit einer frühen Version
von Bootstrap, um gängige Entwurfsmuster und -ressourcen innerhalb des Unternehmens zu
dokumentieren und gemeinsam zu nutzen. “
Nach einigen Monaten Entwicklung durch eine kleine Gruppe begannen viele Entwickler bei
Twitter als Teil der Hack Week, einer Hackathon-Woche für das Twitter-Entwicklungsteam,
mitzuwirken. Es wurde von Twitter Blueprint in Bootstrap umbenannt und am 19. August 2011
als Open Source-Projekt veröffentlicht. Es wurde weiterhin von Mark Otto, Jacob Thornton
und einer kleinen Gruppe von Kernentwicklern sowie einer großen Gemeinschaft von
Mitwirkenden gepflegt.

Am 31. Januar 2012 wurde Bootstrap 2 veröffentlicht, das ein zweispaltiges responsives Grid-
Layout-System, integrierte Unterstützung für Glyphicons, mehrere neue Komponenten sowie
Änderungen an vielen vorhandenen Komponenten hinzufügte. Am 19. August 2013 wurde
Bootstrap 3 veröffentlicht, das Komponenten für ein flaches Design und einen mobilen ersten
Ansatz umgestaltete. Am 29. Oktober 2014 gab Mark Otto bekannt, dass sich Bootstrap 4 in
der Entwicklung befindet. Die erste Alpha-Version von Bootstrap 4 wurde am 19. August 2015
veröffentlicht. Die erste Beta-Version wurde am 10. August 2017 veröffentlicht. Die stabile

2
Version von Bootstrap 4 wurde am 18. Januar 2018 veröffentlicht. Grundsätzlich wurden
Druckstile und Border-Utilities verbessert und die Flexbox besser gesteuert. Bootstrap 4
unterstützt die neuesten Versionen von Google Chrome, Firefox, Internet Explorer, Opera und
Safari (außer Windows). Darüber hinaus werden IE8 und das neueste Firefox Extended Support
Release (ESR) unterstützt, jedoch nicht einschließlich. Seit 2.0 unterstützt Bootstrap
responsives Webdesign. Dies bedeutet, dass das Layout von Webseiten dynamisch angepasst
wird, wobei die Eigenschaften des verwendeten Geräts (Desktop, Tablet, Mobiltelefon)
berücksichtigt werden. Ab Version 3.0 hat Bootstrap eine Mobile-First-Designphilosophie
eingeführt, die standardmäßig auf responsives Design Wert legt. Version 4.0 fügte
Unterstützung für Sass und Flexbox hinzu.
Bootstrap ist modular aufgebaut und besteht aus einer Reihe von Less (oder Sass in Version 4
und höher), die die verschiedenen Komponenten des Toolkits implementieren. Diese
Stylesheets werden im Allgemeinen zu einem Bundle zusammengefasst und in Webseiten
eingebunden. Es können jedoch auch einzelne Komponenten hinzugefügt oder entfernt werden.
Bootstrap bietet eine Reihe von Konfigurationsvariablen, die die Farbe und das Auffüllen
verschiedener Komponenten steuern.
Seit Bootstrap 2 enthält die Bootstrap-Dokumentation einen Anpassungsassistenten, der eine
angepasste Version von Bootstrap basierend auf den angeforderten Komponenten und
verschiedenen Einstellungen generiert.
Ab Bootstrap 4 wird Sass anstelle von Less für Stylesheets verwendet.
Jede Bootstrap-Komponente besteht aus einer HTML-Struktur, CSS-Deklarationen und in
einigen Fällen begleitendem JavaScript-Code.
Das Rastersystem und das responsive Design werden standardmäßig mit einem Raster von 1170
Pixeln geliefert. Alternativ kann der Entwickler ein Layout mit variabler Breite verwenden. In
beiden Fällen bietet das Toolkit vier Varianten, um unterschiedliche Auflösungen und
Gerätetypen zu verwenden: Mobiltelefone, Hoch- und Querformat, Tablets und PCs mit
niedriger und hoher Auflösung. Jede Variation passt die Breite der Spalten an.
Bootstrap bietet eine Reihe von Stylesheets, die grundlegende Stildefinitionen für alle
wichtigen HTML-Komponenten bereitstellen. Diese bieten ein einheitliches, modernes
Erscheinungsbild für die Formatierung von Text, Tabellen und Formularelementen.
Bootstrap enthält neben den regulären HTML-Elementen weitere häufig verwendete
Oberflächenelemente. Die Komponenten sind als CSS-Klassen implementiert, die auf
bestimmte HTML-Elemente auf einer Seite angewendet werden müssen.
Bootstrap enthält mehrere JavaScript-Komponenten in Form von jQuery-Plugins. Sie bieten
zusätzliche Elemente der Benutzeroberfläche wie Dialogfelder, QuickInfos und Karussells. Sie
erweitern auch die Funktionalität einiger vorhandener Oberflächenelemente, z. B. eine
Funktion zum automatischen Ausfüllen von Eingabefeldern. In Version 1.3 werden die
folgenden JavaScript-Plugins unterstützt: Modal, Dropdown, Scrollspy, Tab, QuickInfo,
Popover, Alert, Button, Collapse, Carousel und Typeahead.
Am 29. Oktober 2014 gab Mark Otto bekannt, dass sich Bootstrap 4 in der Entwicklung
befindet. Am 6. September 2016 stellte Mark die Arbeit an Bootstrap 3 ein, um Zeit für die

3
Arbeit an Bootstrap 4 zu schaffen. Bisher wurden über 17.500 Commits für die Bootstrap 4-
Codebase festgelegt.

Die stabile Version von Bootstrap 4, die am 18. Januar 2018 veröffentlicht wurde, ist eine
wichtige Neuentwicklung von Bootstrap 3. Zu den wesentlichen Änderungen gehören:
 Umstellung von Less auf Sass.
 Neustart anstelle von normalise css gestartet.
 Unterstützung für IE8, IE9 und iOS 6 gestrichen.
 Flexbox-Unterstützung wurde hinzugefügt und die Nicht-Flexbox-Unterstützung wurde
eingestellt.
 Zusätzliche Navigationsanpassungsoptionen.
 Zusätzliche Dienstprogramme zur Anpassung von Abständen und Größen.
 Von Pixeln zu Root-Ems gewechselt.
 Globale Schriftgröße von 14px auf 16px erhöht.
 Das Panel, die Miniaturansicht und die Vertiefungskomponenten wurden zugunsten von
Karten gelöscht.
 Die Glyphicons-Symbolschrift wurde gelöscht.
 Die Pager-Komponente wurde gelöscht.
 Zahlreiche Dienstprogrammklassen hinzugefügt.
 Verbesserte Formulargestaltung.
 Verbesserte Schaltflächen und Dropdowns.
 Verbesserte Medienobjekte und Bildklassen.
 Schreiben Sie fast alle Komponenten, jQuery-Plugins und Dokumentation neu.

2. W3.CSS

W3.CSS ist ein modernes CSS-Framework mit integrierter Reaktionsfähigkeit. Es unterstützt


standardmäßig Responsive Mobile First Design und ist kleiner und schneller als ähnliche CSS-
Frameworks.
W3.CSS kann die Webentwicklung auch beschleunigen und vereinfachen, da sie einfacher zu
erlernen und einfacher zu verwenden ist als andere CSS-Frameworks.
W3Schools ist eine Bildungswebsite für das Online-Lernen von Webtechnologien. Der Inhalt
beinhaltet Tutorials und Referenzen zu HTML, CSS, JavaScript, JSON, PHP, Python,
AngularJS, SQL, Bootstrap, Node.js, jQuery, XQuery, AJAX, XML und kürzlich auch Java.
Der 1998 gegründete Name stammt aus dem World Wide Web, ist jedoch nicht mit dem W3C
(World Wide Web Consortium) verbunden. Es wird von Refsnes Data in Norwegen betrieben.
W3Schools präsentiert Tausende Codebeispiele. Mit dem TryIt-Editor können Leser Beispiele
bearbeiten und den Code in einer Sandbox ausführen. Die Beispiele von W3Schools wurden
als "hässlich und schlecht formatiert" kritisiert, ihre Seiten wurden jedoch als "schnell"
bezeichnet und ordnungsgemäß verlinkt.

4
Einige der wichtigsten Merkmale sind wie folgt:
 Eingebautes responsives Design
 Standard-CSS
 Inspiriert von Google Material Design
 Kostenlose Nutzung
Sich anpassendes Design
 W3.CSS verfügt über ein integriertes responsives Design, so dass sich die mit W3.CSS
erstellte Website entsprechend der Gerätegröße neu gestaltet.
 W3.CSS verfügt über ein 12-Säulen-Mobile-First-Fluidgitter, das responsive Klassen
für kleine, große und mittlere Bildschirmgrößen unterstützt.
 W3.CSS-Klassen werden so erstellt, dass die Website für jede Bildschirmgröße
geeignet ist.
 Die mit W3.CSS erstellten Websites sind vollständig kompatibel mit PCs, Tablets und
Mobilgeräten.
Standard-CSS
 W3.CSS verwendet nur Standard-CSS und ist sehr einfach zu erlernen.
 Es besteht keine Abhängigkeit von externen JavaScript-Bibliotheken wie jQuery.
Material Design
 W3.CSS wurde von Google Material Design inspiriert.
 Es unterstützt papierähnliches Design.
 Es unterstützt Schatten und kräftige Farben.
 Die Farben und Schattierungen bleiben auf verschiedenen Plattformen und Geräten
gleich.
Und vor allem ist es absolut kostenlos zu benutzen.

Wie verwende ich W3.CSS?

Es gibt zwei Möglichkeiten, W3.CSS zu verwenden -

 Lokale Installation - Sie können die W3.CSS-Datei auf Ihrem lokalen Computer
herunterladen und in Ihren HTML-Code einfügen.
 CDN-basierte Version - Sie können die W3.CSS-Datei direkt aus dem Content
Delivery Network (CDN) in Ihren HTML-Code einfügen.

HTML5 enthält die folgenden Containerelemente -

 <div> - Stellt einen generischen Container für HTML-Inhalte bereit.


 <header> - Stellt den Header-Abschnitt dar.

5
 <footer> - Stellt den Fußzeilenabschnitt dar.
 <article> - Stellt Artikel dar.
 <section> - Stellt einen generischen Container für verschiedene Arten von Abschnitten
bereit.

W3.CSS stellt w3-container als primäre Klasse für die Gestaltung aller oben genannten
Container bereit. W3.CSS bietet auch andere Klassen wie w3-border, w3-red, w3-teal und w3-
padding-32, um den Containern weitere Stilattribute hinzuzufügen.
W3.CSS hat mehrere spezielle Klassen, um Container als papierähnliche Karten mit Schatten
anzuzeigen.
1. w3-card: Formatiert einen Container für jeden HTML-Inhalt mit Rahmen.
2. w3-card-2: Formatiert einen Container für jeden HTML-Inhalt mit 2px-Schatten
3. w3-card-4: Formatiert einen Container für HTML-Inhalte mit 4px-Schatten
4. w3-card-8: Formatiert einen Container für HTML-Inhalte mit 8px-Schatten
5. w3-card-12: Formatiert einen Container für jeden HTML-Inhalt mit 12px-Schatten

W3.CSS verfügt über mehrere spezielle Klassen, um ein responsives Design zu erstellen.
1. w3-half: Legt fest, dass der Container bei Geräten mit mittlerem oder großem Bildschirm 1/2
des Fensters einnimmt. Wenn ein Bildschirm kleiner als 601 Pixel ist, ändert sich die Größe
des Containers auf 100%.
2. w3-third: Legt fest, dass der Container bei Geräten mit mittlerem oder großem Bildschirm
ein Drittel des Fensters belegt. Wenn ein Bildschirm kleiner als 601 Pixel ist, ändert sich die
Größe des Containers auf 100%.
3. w3-Quartal: Legt fest, dass der Container bei Geräten mit mittlerem oder großem Bildschirm
1/4 des Fensters einnimmt. Wenn ein Bildschirm kleiner als 601 Pixel ist, ändert sich die Größe
des Containers auf 100%.
4. w3-col: Bestimmt eine Spalte in einem 12-Spalten-Raster.
5. w3-row: Gibt einen auffüllfreien Container an, der für responsive Klassen verwendet werden
soll. Diese Klasse ist obligatorisch, damit responsive Klassen voll reagieren können.

W3.CSS bietet ein auf 12 Säulen reagierendes Fluid.


Es verwendet die Klassen w3-row und w3-col, um Zeilen bzw. Spalten zu definieren.
1. w3-row: Gibt einen auffüllfreien Container an, der für responsive Spalten verwendet werden
soll. Diese Klasse ist obligatorisch, damit responsive Klassen voll reagieren können.
2. w3-col: Gibt eine Spalte mit Unterklassen an.
w3-col hat mehrere Unterklassen für verschiedene Arten von Bildschirmen.
6
W3.CSS hat ein sehr schönes und ansprechendes CSS für das Formulardesign. Folgende CSS
werden verwendet -
1. w3-group: Stellt einen umrandeten Container dar. Kann verwendet werden, um ein Label
und eine Eingabe zu gruppieren.
2. w3-input: Verschönert eine Eingabesteuerung.
3. w3-label: Verschönert ein Label.
4. w3-Kontrollkästchen w3-Kontrollkästchen: Verschönern Sie ein Kontrollkästchen /
Optionsfeld.

W3.CSS verfügt über ein sehr schönes und ansprechendes CSS zum Anpassen des Aussehens
einer Schaltfläche. Folgende CSS werden verwendet -
1. w3-btn: Stellt eine Standardschaltfläche dar. Kann verwendet werden, um einen Link auch
als Schaltfläche zu gestalten.
2. w3-btn-floating: Stellt eine Floating-Schaltfläche dar, die im Design kreisförmig ist.
3. w3-btn-floating-large: Stellt eine große schwebende Schaltfläche dar.

W3.CSS kann verwendet werden, um ein anpassbares modales Dialogfeld anstelle der
Standard-JavaScript-Warnung anzuzeigen.
Es verwendet die Klassen w3-row und w3-col, um Zeilen bzw. Spalten zu definieren.
1. modal-dialog: Stellt das übergeordnete Hauptfenster dar, um ein Dialogfeld zu definieren.
2. w3-modal-dialog: Repräsentiert den Dialoginhaltscontainer.
3. w3-modal-content: Stellt Dialoginhalte dar.

W3.CSS kann verwendet werden, um verschiedene Tabellentypen mit verschiedenen Stilen


über w3-table anzuzeigen.
1. w3-table: Stellt eine Basistabelle ohne Rand dar.
2. w3-striped: Zeigt eine entfernte Tabelle an.
3. W3-Rahmen: Zeichnet eine Tabelle mit einem Rahmen über Zeilen.
4. w3-border: Zeichnet eine Tabelle mit Rändern.
5. W3-Karte: Zeichnet einen Tisch als Karte.
6. w3-responsive: Zeichnet eine responsive Tabelle mit einer horizontalen Bildlaufleiste, wenn
der Bildschirm zu klein ist, um den Inhalt anzuzeigen.

7
7. w3-tiny: Zeichnet eine Tabelle mit sehr kleiner Schrift.
8. w3-small: Zeichnet eine Tabelle mit kleiner Schrift.
9. w3-large: Zeichnet eine Tabelle mit großer Schrift.
10. w3-xlarge: Zeichnet eine Tabelle mit besonders großer Schrift.
11. w3-xxlarge: Zeichnet eine Tabelle mit sehr großer Schrift.
12. w3-xxxlarge: Zeichnet eine Tabelle mit sehr hoher Schriftgröße.
13. W3-Jumbo: Zeichnet eine Tabelle mit einer großen Schrift.

W3.CSS bietet Optionen zur Darstellung von Bildern auf schöne und interessante Weise, wobei
w3-image als Hauptklasse verwendet wird.
1. W3-Bild: Stellt ein einfaches Stilbild ohne Rand dar.
2. w3-circle: Zeigt ein Bild innerhalb eines Kreises an.
3. w3-title: Wird verwendet, um Text über ein Bild zu setzen.
4. W3-Karte: Zeichnet ein Bild als Karte.

W3.CSS verfügt über mehrere spezielle Klassen, um eine Navigationsleiste oder ein Menü auf
einer Website schnell anzuzeigen.
1. w3-topnav: Formatiert eine Liste als horizontale Menü- / Navigationsleiste.
2. w3-sidenav: Formatiert eine Liste als vertikale Menü- / Navigationsleiste.

W3.CSS verfügt über mehrere Dienstprogrammklassen, die für die tägliche Planung von
Anforderungen sehr nützlich sind.
• Farb-Utility-Klassen - Beispiele: w3-rot, w3-gelb
• Hilfsklassen zum Auffüllen - Beispiele: w3-padding-jumbo, w3-padding-16
• Margin-Utility-Klassen - Beispiele: w3-margin-8, w3-margin-64
• Border-Dienstprogrammklasse - Beispiele: w3-border-left, w3-border-right
• Dienstprogramme für Größen - Beispiele: w3-tiny, w3-small
• Kreisdienstklasse - Beispiel: w3-Kreis
• Center Utility-Klasse - Beispiel: w3-center

Um ein Symbol zu verwenden, geben Sie den Namen des Symbols in die Klasse eines HTML-
Elements <i> ein. Um die Größe eines Symbols zu steuern, können Sie die folgenden Klassen
verwenden:
8
1. w3-tiny: Zeichnet ein Symbol von sehr geringer Größe.
2. w3-small: Zeichnet ein kleines Symbol.
3. w3-large: Zeichnet ein großes Symbol.
4. w3-xlarge: Zeichnet ein besonders großes Symbol.
5. w3-xxlarge: Zeichnet ein Symbol von sehr großer Größe.
6. w3-xxxlarge: Zeichnet ein Symbol von sehr großer Größe.

3. AMP

AMP ist eine Open-Source-Bibliothek, die eine unkomplizierte Möglichkeit zum Erstellen von
Webseiten bietet, die für den Benutzer sofort attraktiv und flüssig sind. AMP-Seiten sind nur
Webseiten, zu denen Sie einen Link erstellen können und von Ihnen kontrolliert werden.
AMP baut auf Ihren vorhandenen Fähigkeiten und Frameworks auf, um Webseiten zu erstellen.
AMP wird von vielen verschiedenen Plattformen unterstützt und ist mit allen Browsern
kompatibel.
Das Ökosystem von AMP umfasst 25 Millionen Domains, über 100 Technologieanbieter und
führende Plattformen, die die Bereiche Publishing, Werbung, E-Commerce, lokale und kleine
Unternehmen und mehr umfassen.
JavaScript ist mächtig. Es kann nahezu jeden Aspekt der Seite ändern, es kann jedoch auch die
DOM-Konstruktion blockieren und das Seiten-Rendering verzögern (siehe auch Interaktivität
mit JavaScript hinzufügen). Um zu verhindern, dass JavaScript das Seitenrendern verzögert,
lässt AMP nur asynchrones JavaScript zu.
AMP-Seiten können kein vom Autor geschriebenes JavaScript enthalten. Anstelle von
JavaScript werden interaktive Seitenfunktionen in benutzerdefinierten AMP-Elementen
behandelt. Die benutzerdefinierten AMP-Elemente verfügen möglicherweise über JavaScript
unter der Haube, sie werden jedoch sorgfältig entwickelt, um sicherzustellen, dass sie keine
Leistungseinbußen verursachen.
JS von Drittanbietern ist zwar in Iframes zulässig, kann jedoch das Rendern nicht blockieren.
Wenn JS von Drittanbietern beispielsweise die API "super-bad-for-performance" für
"document.write" verwendet, wird das Rendern der Hauptseite nicht blockiert.
Externe Ressourcen wie Bilder, Anzeigen oder Iframes müssen ihre Größe im HTML-Code
angeben, damit AMP die Größe und Position jedes Elements bestimmen kann, bevor
Ressourcen heruntergeladen werden. AMP lädt das Layout der Seite, ohne auf den Download
von Ressourcen zu warten.
AMP entkoppelt das Dokumentenlayout vom Ressourcenlayout. Für das Layout des gesamten
Dokuments (+ Schriftarten) ist nur eine HTTP-Anforderung erforderlich. Da AMP so optimiert
ist, dass teure Stil-Neuberechnungen und Layouts im Browser vermieden werden, gibt es keine
neuen Layouts, wenn Ressourcen geladen werden.
9
AMP lässt das Seiten-Rendering nicht durch Erweiterungsmechanismen blockieren. AMP
unterstützt Erweiterungen für Dinge wie Leuchtkästen, Instagram-Einbettungen, Tweets usw.
Obwohl diese zusätzliche HTTP-Anforderungen erfordern, blockieren diese Anforderungen
das Seitenlayout und -wiedergabe nicht.
Jede Seite, die ein benutzerdefiniertes Skript verwendet, muss dem AMP-System mitteilen,
dass es eventuell ein benutzerdefiniertes Tag gibt. Das Amp-iframe-Skript teilt dem System
beispielsweise mit, dass es einen Amp-iframe-Tag gibt.
JS von Drittanbietern verwendet gerne synchrones JS-Laden. Sie möchten auch mehr Sync-
Skripts dokumentieren. Wenn Sie beispielsweise fünf Anzeigen auf Ihrer Seite haben und jede
von ihnen drei synchrone Ladevorgänge mit jeweils 1 Sekunde Latenzverbindung verursacht,
ist die Ladezeit nur für das Laden von JS in 15 Sekunden.
AMP-Seiten lassen JavaScript von Drittanbietern zu, jedoch nur in Sandbox-Iframes. Durch die
Beschränkung auf iframes können sie die Ausführung der Hauptseite nicht blockieren. Selbst
wenn sie mehrere Stilreberechnungen auslösen, haben ihre kleinen Iframes sehr wenig DOM.
Die Zeit, die erforderlich ist, um Stil-Neuberechnungen und Layouts durchzuführen, wird durch
die DOM-Größe eingeschränkt. Daher sind die Neuberechnungen des Iframes sehr schnell,
verglichen mit der Neuberechnung von Stilen und Layout der Seite.
SS blockiert das gesamte Rendering, blockiert das Laden von Seiten und neigt dazu, aufgebläht
zu werden. In AMP-HTML-Seiten sind nur Inline-Stile zulässig. Im Vergleich zu den meisten
Webseiten werden 1 oder häufig mehr HTTP-Anforderungen aus dem kritischen
Wiedergabepfad entfernt.
Das Inline-Stylesheet hat eine maximale Größe von 50 Kilobyte. Obwohl diese Größe für sehr
anspruchsvolle Seiten groß genug ist, muss der Autor der Seite dennoch gute CSS-Hygiene
anwenden.
Webfonts sind sehr groß, daher ist die Optimierung der Webfonts entscheidend für die Leistung.
Auf einer typischen Seite mit einigen Synchronisationsskripten und einigen externen
Stylesheets wartet der Browser und wartet, bis er diese riesigen Schriftarten heruntergeladen
hat, bis dies alles passiert.
Das AMP-System deklariert null HTTP-Anforderungen, bis der Download von Schriftarten
beginnt. Dies ist nur möglich, weil alle JS in AMP das async-Attribut haben und nur Inline-
Stylesheets zulässig sind. Es gibt keine HTTP-Anforderungen, die den Browser daran hindern,
Schriftarten herunterzuladen.
Jedes Mal, wenn Sie etwas messen, werden Style-Neuberechnungen ausgelöst, die teuer sind,
da der Browser die gesamte Seite gestalten muss. Auf AMP-Seiten werden alle DOM-
Lesevorgänge vor allen Schreibvorgängen zuerst ausgeführt. Dies stellt sicher, dass pro Frame
maximal eine Neuberechnung von Stilen möglich ist.
Die einzige Möglichkeit für schnelle Optimierungen besteht darin, sie auf der GPU
auszuführen. GPU kennt sich mit Layern aus, sie weiß, wie man einige Dinge auf diesen Layern
ausführt, sie kann sie verschieben, sie kann sie ausblenden, aber sie kann das Seitenlayout nicht
aktualisieren. es wird diese Aufgabe an den Browser übergeben, und das ist nicht gut.

10
Die Regeln für animationsbezogenes CSS stellen sicher, dass Animationen GPU-beschleunigt
werden können. Insbesondere ermöglicht AMP nur das Animieren und Umsetzen bei
Transformation und Deckkraft, sodass kein Seitenlayout erforderlich ist.
AMP steuert alle Ressourcendownloads: Es priorisiert das Laden von Ressourcen, lädt nur das,
was benötigt wird, und ruft faul geladene Ressourcen vor.
Wenn AMP Ressourcen herunterlädt, werden die Downloads optimiert, sodass zuerst die
aktuell wichtigsten Ressourcen heruntergeladen werden. Bilder und Anzeigen werden nur
heruntergeladen, wenn sie wahrscheinlich vom Benutzer über der Falz gesehen werden oder
wenn der Benutzer wahrscheinlich schnell zu ihnen blättert.
AMP holt auch faul geladene Ressourcen vor. Ressourcen werden so spät wie möglich geladen,
aber so früh wie möglich vorabgerufen. Auf diese Weise werden die Dinge sehr schnell geladen,
die CPU wird jedoch nur verwendet, wenn den Benutzern tatsächlich Ressourcen angezeigt
werden.
Die neue Prefonnect-API wird intensiv verwendet, um sicherzustellen, dass HTTP-
Anforderungen so schnell wie möglich sind, wenn sie gemacht werden. Auf diese Weise kann
eine Seite gerendert werden, bevor der Benutzer explizit angibt, dass er zu dieser Seite
navigieren möchte. Die Seite ist möglicherweise bereits zu dem Zeitpunkt verfügbar, zu dem
der Benutzer sie tatsächlich auswählt, was zum sofortigen Laden führt.
Das Prerendering kann zwar auf alle Webinhalte angewendet werden, verbraucht jedoch auch
viel Bandbreite und CPU. AMP wurde optimiert, um beide Faktoren zu reduzieren. Beim
Prerendering werden nur Ressourcen über den Rand heruntergeladen und durch das
Prerendering werden nicht die Dinge angezeigt, die in Bezug auf die CPU teuer sein könnten.
Wenn AMP-Dokumente für das sofortige Laden vorgerendert werden, werden tatsächlich nur
Ressourcen oberhalb der Falte heruntergeladen. Wenn AMP-Dokumente für das sofortige
Laden vorab gerendert werden, werden Ressourcen, die viel CPU-Ressourcen benötigen (z. B.
Iframes von Drittanbietern), nicht heruntergeladen.
Die AMP-HTML-Bibliothek stellt Komponenten bereit, die als klassifiziert sind:
 eingebaut: Komponenten, die in der Basisbibliothek enthalten sind, z. B. amp-img und
amp-pixel.
 extended: Erweiterungen der Basisbibliothek, die explizit als benutzerdefinierte
Elemente im Dokument enthalten sein müssen (z. B. <script async custom-element =
"amp-audio" ...).
 experimentell: Komponenten, die veröffentlicht werden, aber noch nicht für den breiten
Einsatz bereit sind.
Mit der Amp-Layout-Komponente können Sie responsive Layouts auf Seitenverhältnis für
jedes Element anwenden. Die Amp-Layout-Komponente arbeitet ähnlich wie das Layout-
Attribut vorhandener AMP-Komponenten, unterstützt jedoch HTML-Markup als
untergeordnete Elemente. Andere unterstützte Layouts arbeiten alle mit dem Amp-Layout (z.
B. feste Höhe, feste Größe usw.).

11
Diese Zusatzkomponente bietet schöne, einfache Share-Schaltflächen. Machen Sie es Ihren
Website-Besuchern leicht, Inhalte auf über 200 soziale Kanäle auszutauschen, darunter
Messenger, WhatsApp, Facebook, Twitter, Pinterest und vieles mehr.
AddThis wird von über 15.000.000 Websites mit über 2 Milliarden Unique Usern, die Inhalte
auf der ganzen Welt in mehr als 60 Sprachen teilen, vertraut.

12
Bibliographie

1. Bootstrap: https://getbootstrap.com/
2. AMP: https://www.ampproject.org/
3. W3.CSS: https://www.w3schools.com/w3css/

13