Mobile Websites » Frage 66

27. September 2019 Kategorie(n): Google Schlagwörter: Alte Google Fragen

Google Prüfung

Google Mobile Websites » Frage 66

Warum beinträchtigen CSS @imports die Leistung?

Sie können unerwünschte Abhängigkeiten herbeiführen.
Sie führen zu einem weniger effizienten CSSOM.
@import lädt Dateien weniger effizient als „link“.
Sie erfordern zusätzliche CPU-Zeit zum Parsen.

Begründung:

Medienabfragen können dazu verwendet werden, Stile auf Grundlage von Gerätecharakteristiken anzuwenden.

Verwenden Sie min-width statt min-device-width, um möglichst viele Breiten abzudecken.
Verwenden Sie relative Größen für Elemente, damit das Layout harmonisch bleibt.
Beispielsweise können Sie alle Stile, die zum Drucken notwendig sind, in eine Druckmedienabfrage einfügen:

< link rel = " stylesheet " href = " print.css " media = " print " >

Lang ausgeführten JavaScript-Code vermeiden
Lang ausgeführter JavaScript-Code hindert den Browser an der Erstellung des DOM und des CSSOM und am Rendern der Seite. Deshalb sollte sämtliche Initialisierungslogik und Funktionalität, die nicht unbedingt für das erste Rendern benötigt wird, auf später verschoben werden.

Zusätzlich zur Nutzung des Attributs media im Stylesheet-Link gibt es zwei weitere Möglichkeiten, Medienabfragen anzuwenden, die in eine CSS-Datei eingebettet werden können: @media und @import. Aus Leistungsgründen werden die ersten beiden Methoden statt der @import-Syntax empfohlen, siehe CSS-Importe vermeiden.

Alter Link zur Lösung von Google: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/page-speed-rules-and-recommendations