Also habe ich meine Website über die PageSpeed Insights von Google geführt und mir gesagt, dass ich die CSS-Bereitstellung verbessern könnte indem das Laden nicht kritischer Ressourcen verzögert wird. Insbesondere bezog es sich auf die Einbeziehung von font awesome:
%Vor%Ich dachte mir, ich könnte seine Ladung verzögern, indem ich sie einfach vor die Skripts vor dem schließenden body-Tag setze:
%Vor%Aber! In der Dokumentation zur Liefergeschwindigkeit von Google habe ich zwei verschiedene Lösungen gefunden.
In meiner Muttersprache (Niederländisch; Sie können die Sprache der Dokumentation in der rechten unteren Ecke ändern) besagt die Dokumentation, dass ich nicht-essenzielle css unter das schließende html-Tag platzieren soll. Das erscheint mir merkwürdig seltsam. Wäre das nicht kompliziert, wenn Sie versuchen, über JS auf die Datei zuzugreifen? Warum sollten Sie es nicht vor dem abschließenden body-Tag platzieren?
%Vor%In der englischen Dokumentation werden die Dinge jedoch komplizierter und erfordern JavaScript:
%Vor%Warum sollte JS benötigt werden? Ist das nicht ein bisschen übertrieben?
Was ist falsch an meinem Ansatz? Warum können Sie nicht vor dem abschließenden body-Tag nicht-kritische CSS laden?
Ein externes Stylesheet blockiert das Rendern der Seite, bis sie vollständig geladen ist. Google empfiehlt, den Stil, der für den anfänglich sichtbaren (kritischen, über dem Falz liegenden) Teil des Dokuments benötigt wird, innerhalb von <style> -Tags in den Kopf zu platzieren ( die einzige Stelle, an der Sie Nicht-Inline-Stil definieren können). strike>) um dieses Render-Blocking zu vermeiden. Der nicht kritische Stil (was Sie nicht direkt sehen, wenn Sie auf der Seite landen) wird als externes Stylesheet innerhalb des Kopfes hinzugefügt nachdem der HTML-Code gelesen wurde. Auf diese Weise wird es zuerst gerendert und erst dann werden alle anderen Stile geladen. Alles um dem Besucher den Inhalt so schnell wie möglich zu zeigen und ihn nicht länger als nötig warten zu lassen.
In den meisten Fällen ist es übertrieben, was Google empfiehlt, und sie sind nur ein paar Millisekunden lang freakig - ihr Ansatz macht nur dann einen Sinn, wenn das CSS riesig ist. Aber ich denke, es ist schwer, wenn nicht fast unmöglich, mit den zur Verfügung stehenden Werkzeugen zu bestehen. Was zum Beispiel, wenn es sich um einen wiederkehrenden Besucher handelt, der zu einem früheren Zeitpunkt die Seite heruntergescrollt hat und automatisch dort landen wird (Opera ist ein Browser, der sehr stur ist)? Dafür braucht man mehr JS und evtl. Jonglier mit den Styles. Das kann kein guter Weg sein. Und selbst für die anfängliche Anzeige müssten Sie einige Medienabfragen direkt in den Kopf stopfen, um zu versuchen, die richtigen Dinge zu finden, ohne auf ganze Bildschirmabschnitte zurückgreifen zu müssen. Das ist alles ziemlich kontraproduktiv und überkompliziert.
Das Einfügen von <style> oder <link> Tags außerhalb des Kopfbereichs funktioniert möglicherweise, ist aber falsch. Ich bin sicher, Google ist nicht mehr auf diesem Standpunkt und die englische Version ist die einzige gültige Dokumentation.
Edit - siehe Kommentare für eine Nuance auf diesem.
Selbst wenn man den Google-Weg macht und eine gute Bewertung auf PageSpeed Insights erhält, ist das nicht gleichbedeutend. Sie können die ganze Seite immer noch ausblenden und nur anzeigen, wenn alles geladen wurde (was nicht ungewöhnlich ist), ohne dass dies Auswirkungen auf das Ergebnis hat.
Ich habe persönlich beschlossen, das zu ignorieren, bis sie eine Funktion implementiert haben, mit der CSS asynchron geladen werden kann (wie Sie es mit JavaScript und async bereits können), wie in der Dokumentation angekündigt. Es würde immer noch einen speziellen Anwendungsfall erfordern, aber zumindest könnte man einen Rahmen dafür aufbauen. Nicht ein Fan von Plugins für etwas eher Triviales selbst.
Eine wichtige Sache fehlt in der Google-Dokumentation - es bietet einen Fallback, wenn JavaScript deaktiviert wurde. Glücklicherweise mit HTML5, <noscript> -Tags können dafür verwendet werden:
Hinweis: Google Analytics-Skript verhindert einen perfekten PageSpeed-Score aufgrund des (logisch) schnellen Cache-Ablaufs, den sie festgelegt haben. Stellen Sie das dar.
Ich schlage vor, dass Sie sich dieses Repository ansehen: Ссылка
LoadCSS ist ein sehr ausgeklügeltes Skript der Leute von Filament Group, um Stylesheets so zu laden, dass die meisten Browser gut mitspielen. Wenn Javascript deaktiviert ist oder aus irgendeinem Grund das Skript nicht funktioniert, sind auch Fallbacks enthalten.
Um Ihre spezifischen Fragen zu beantworten:
Javascript ist NICHT erforderlich, um zu erreichen, was Sie wollen. Es gibt mehrere Methoden zum Laden von CSS auf nicht blockierende Weise. Manche sind auf JS angewiesen, andere nicht. Die LoadCSS der Filamant Group ist eine JS-Option. Critical Paths CSS-Generator ist eine Nicht-JS-Methode. Der Prozess des Erstellens des kritischen CSS kann auch mithilfe von Gulp oder Grunt
Während Ihre Methode funktioniert, wird sie nicht empfohlen. Google empfiehlt, die nicht kritischen CSS-Dateien mit Javascript zu laden, damit das CSS nach dem Laden der Seite in den head geladen wird.
Es gibt zwei Möglichkeiten, um Ihre aktuelle Implementierung zu verbessern.
Es klingt, als ob Sie gerade 2 CSS-Dateien laden - das CSS Ihrer Website und font-awesome.min.css . Dies erfordert 2 HTTP-Anfragen und verursacht eine kleine Verzögerung. Kombinieren Sie das CSS aus den 2 Dateien in einer einzigen CSS-Datei.
Wie die anderen darauf hingewiesen haben, empfiehlt Google, das kritische CSS in das head der Seite einzufügen und das restliche CSS blockfrei zu laden. Eine alternative Option, die ich als nützlich empfunden habe, ist das Laden des gesamten Inhalts des CSS in die head der Site innerhalb eines style -Tags. Ich empfehle dieses only , wenn Ihre CSS-Datei relativ klein und minimiert ist.
Ich denke, Sie konzentrieren sich auf den falschen Teil ihrer (verwirrenden) Dokumentation. Ich denke, was sie wirklich teilen möchten, ist, dass Sie Ihr kritisches CSS in Ihren HTML-Code einfügen sollten. Schau dir die blaue Klasse im Style-Tag an
%Vor%Ich lese die gleiche Dokumentation auf Französisch, die so veraltet zu sein scheint wie deine holländische Version und auch hier haben sie die blaue Klasse inline platziert
%Vor%Was sie zu sagen versuchen, ist, dass kritisches CSS direkt in HTML geschrieben werden kann, ohne die gesamte CSS-Datei zu laden. In ihrem Beispiel ist die blaue Klasse kritisch, da sie die einzige ist.
In Bezug auf die Außenseite des HTML-Tags, Es ist tatsächlich ungültig HTML, aber Browser scheint es trotzdem zu erlauben. Für den JS-Code-Teil denke ich, dass sie versuchen, das Stylesheet in der Kopfzeile hinzuzufügen, aber nur, wenn JS ausgeführt wird, was bedeutet, dass am Ende der Seite geladen wird. An dieser Stelle möchten Sie vielleicht über die Lesbarkeit von Code über die Leistung hinaus nachdenken.
Nun, es gibt drei Hauptbereiche, wo Sie
platzieren könnenist der erste Körper, der zweite ist der Kopf und der dritte ist überall in html, versuche damit zu arbeiten
Tags und Links css performance pagespeed