Skip to main content

Google Mobile Websites » Frage 66

Warum beinträchtigen CSS @imports die Leistung?

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.

Hinweis:

Diese Frage wird nicht mehr aktualisiert, weil Google die Prüfung aus dem Partner Programm genommen hat.

Wenn du auf das Bild klickst, siehst du die Lösung. Hättest Du es gewußt?


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

Begründung damals:

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.


Warum beinträchtigen CSS @imports die Leistung?


▷ Nächste Frage


Willst Du die aktuellen Google Prüfungen bestehen?

Lernhilfe mit Fragen, Antworten ✚ Lösungen als PDF-Datei

Willst du Zeit & Nerven sparen?

Jetzt Klicken, Lernhilfe aussuchen, PDF sofort per Mail:

Google Prüfungen PDF Lernhilfen mit Fragen und Antworten


Google Mobile Websites Fragen

▷ Liste der Prüfungsfragen

➟ Google Mobile Websites Fragen