Was ist "über dem Falz liegender Inhalt" in Google Pagespeed?

Bis vor kurzem erzielte meine Website (www.heatexchangers.ca) bei Google Page Speed ​​98%. Es gab ein paar Dinge, gegen die ich nichts tun konnte, wie die Abfragezeichenfolge von Web-Schriftarten. Ich war sehr zufrieden damit, da dies alles darstellte, was ich tun konnte.

Kürzlich hat Google noch etwas hinzugefügt, das sich auf die Seitengeschwindigkeit auswirkt. Jetzt erhalte ich nur noch 89% der Seitengeschwindigkeit und erhalte diesen Vorschlag:

• Beseitigen Sie externes JavaScript und CSS, die das Rendern blockieren, in Inhalten, die über dem Falz liegen.

Der Vorschlag, dies zu beheben, scheint darin zu bestehen, alle meine CSS- und JS-Dateien zu durchsuchen, einige Teile davon zu trennen und sie inline zu meinem HTML-Code hinzuzufügen. Dies führt zu Verwirrung, da ich den Eindruck hatte, dass wir so viel JS und CSS wie möglich aus dem HTML-Code heraushalten müssen.

Was genau ist der Inhalt von "Above the Fold"? Wenn es sich um einige Stile wie Schriftart, Hintergrundfarbe usw.; dann kann ich sehen, dass es nicht zu groß ist, Inline einzuschließen. Ich konnte keine genaue Liste finden.

Dies liegt daran, dass Google kürzlich das Tool für die Seitengeschwindigkeit geändert hat, um ein zunehmend mobiles Web besser widerzuspiegeln. Mobile Datennetze weisen andere Leistungsmerkmale auf als Kabel oder WLAN. Daher müssen Sie verschiedene Maßnahmen ergreifen, um sie zu optimieren.

Über der Falte (ATF) ist einfach der erste Bildschirm wert - alles, was Sie nicht scrollen müssen, um zu sehen. Dies hängt natürlich vom Gerät und seiner Ausrichtung ab. Daher müssen Sie möglicherweise einige praktikable allgemeine Optionen verallgemeinern und finden, z. B. eine für Smartphones, eine für Tablets und eine für größere Desktops.

Was das CSS betrifft, über das sie sprechen, beabsichtigen sie wirklich alles CSS, das benötigt wird, um den ATF-angezeigten Inhalt vollständig zu gestalten. Um die Ladezeit Ihres ATF-Inhalts zu bestimmen, machen sie einen Screenshot der endgültigen Version und vergleichen diesen visuell mit der Seite beim Laden. Wenn er ähnlich genug ist, betrachten sie diesen Punkt als den Punkt, an dem der ATF-Inhalt vorhanden ist wird geladen.

Dies ist eine Videopräsentation von Google zu diesem Thema:

http://www.youtube.com/watch?v=YV1nKLWoARQ

Der Schwerpunkt liegt darauf, den Benutzern innerhalb der ersten Sekunde etwas zu tun zu bringen. Die Gründe für das direkte Einfügen des CSS für den ATF-Inhalt in den HTML-Code spiegeln die Untersuchungen zur Leistung mobiler Daten wider, die zeigen, dass das CSS, wenn es nicht vorhanden ist, nicht früh genug geladen wird, um innerhalb der ersten Sekunde zu sein.

Sie enthalten auch Links zu Tools, mit denen einige davon möglicherweise automatisiert werden können. Ich habe sie und YMMV nicht ausprobiert.

Google Page Insights zeigt Ihnen deutlich, wie viele Prozent der CSS-Dateien, die auf den Inhalt über dem Falz verweisen, zu spät geladen werden und die Seite möglicherweise früher gerendert wurde. Dann könnten Sie Teile von CSS verschieben, um ein grünes Ergebnis zu erzielen. Ich kann es für Sie tun: goo.gl/GsRxNc

Ein Link von Google, der "über der Falte" beschreibt: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Über dem Falz befindlicher Inhalt ist der Teil der Webseite, der beim ersten Laden der Seite in einem Browserfenster angezeigt wird. Google möchte, dass Inline-CSS aus Ihrer CSS-Hauptdatei extrahiert und in das Head-Tag eingefügt wird, sodass alles, was Sie zuerst sehen, zuerst geladen wird.

Quelle - https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~:text=Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20loaded%20first .

Sie beziehen sich auf Render-Blocking-Js wie Analytics oder Tracking-Code, weshalb sie vorschlagen, diese Skripte "Lade mich vor allem anderen" in die Fußzeile zu setzen, da sie dann geladen werden, sobald der Benutzer die Site auf dem Bildschirm hat.