Mobile Websites » Frage 9

23. November 2019 Kategorie(n): Google Schlagwörter: Alte Google Fragen

Google Prüfung

Google Mobile Websites » Frage 9

Wie können Sie dem Browser „die Arbeit erleichtern“?

Mehr übergeordnete Elemente hinzufügen
Den Selektor in eine Klasse umwandeln
Den Styleguide befolgen
Komplexeren CSS-Code erstellen

Begründung:

So funktioniert AMP

Da AMP speziell darauf abzielt, kostenintensive Stil-Neuberechnungen und Layouts im Browser zu vermeiden, wird das Layout beim Laden der Ressourcen nicht neu erstellt.

Alle Ressourcen statisch bemessen

Bei externen Ressourcen wie Bildern, Anzeigen oder iFrames muss deren Größe im HTML-Code angegeben sein, damit AMP vor dem Download den Umfang und die Position aller Elemente erfassen kann. AMP lädt das Seitenlayout, ohne auf den Download jeglicher Ressourcen zu warten.
AMP trennt das Dokument-Layout vom Ressourcen-Layout. Es ist nur eine HTTP-Anfrage erforderlich, um das Layout des gesamten Dokuments (inklusive Schriftarten) zu erstellen. Da AMP speziell darauf abzielt, kostenintensive Stil-Neuberechnungen und Layouts im Browser zu vermeiden, wird das Layout beim Laden der Ressourcen nicht neu erstellt.

Alle CSS inline und größengebunden

CSS blockieren das gesamte Rendering und das Laden der Seite. Außerdem neigen sie dazu, überladen zu werden. Bei AMP HTML-Seiten sind nur Inline-Styles zulässig. Dies reduziert den kritischen Rendering-Pfad im Vergleich zu den meisten Webseiten um eine und oft auch mehrere HTTP-Anfragen.

Außerdem darf das Inline-Stylesheet höchstens 50 Kilobyte groß sein. Diese Größe ist ausreichend, um anspruchsvolle Seiten zu gestalten, zwingt den Autor der CSS aber auch zu sauberer Programmierarbeit.

Alter Link zur Lösung von Google: https://support.google.com/google-ads/answer/7336293?hl=de