"Beseitigen Sie Render-blockierendes CSS in über dem Falz liegenden Inhalten"

153

Ich habe Google PageSpeed ​​Insights verwendet, um die Leistung meiner Website zu verbessern. Bisher hat sich dies als äußerst erfolgreich erwiesen. Dinge wie das Aufschieben von Skripten funktionierten wunderbar, da ich bereits eine .ready()interne Version von jQuery hatte , um Skripte aufzuschieben, bis die Seite vollständig geladen war. Alles, was ich tun musste, war, diese bestimmte Funktion zu integrieren und die vollständigen Skripte an das Ende der Seite zu verschieben. Das hat super geklappt.

Aber jetzt schaue ich auf den verbleibenden gelben Punkt auf der Checkliste: "Beseitigen Sie Render-blockierendes CSS in über dem Falz liegenden Inhalten".

Mein CSS wird so eingerichtet, dass eine globale _.cssDatei Stile enthält, die für die Seitenstruktur im Allgemeinen gelten oder an mehr als einer oder zwei Stellen auf der Site verwendet werden. Die meisten Seiten haben dann eine zugehörige CSS - Datei (zum Beispiel party.phphat party.css) Arten spezifisch auf die jeweilige Seite enthält. Alle CSS-Dateien werden unbegrenzt zwischengespeichert, da ich /t=FILEMTIMEan Dateinamen anhänge (und sie später mit .htaccess entferne), um sicherzustellen, dass Dateien aktualisiert werden, wenn sie geändert werden.

Auf jeden Fall empfiehlt Google, kritische Stile einzufügen, die für überdurchschnittliche Inhalte erforderlich sind. Das Problem ist ... nun, schauen Sie sich diesen Screenshot an: http://prntscr.com/1qt49e

Wie Sie sehen können ... Der gesamte Inhalt ist über dem Falz! Die Leute hassen das Scrollen, besonders bei einem Spiel, bei dem viele Seiten geladen werden. Deshalb habe ich die Site so gestaltet, dass sie auf einen Bildschirm passt (unter der Annahme einer ausreichend guten Auflösung). Das heißt also ... ALLE Stile gelten für Inhalte über dem Falz! Also ... gibt es eine Lösung? Oder stecke ich mit dieser gelben Markierung in einer ansonsten nahezu perfekten Punktzahl fest?

Niet the Dark Absol
quelle
Es ist ironisch, dass das Laden des über dem Falz liegenden Inhalts für den Screenshot lange dauert :) Tatsächlich wurde der Screenshot für mich nie geladen
Anupam
@ Anupam Wurde wahrscheinlich gelöscht. Prntscr ist nicht genau für Dauerhaftigkeit gemeint, und ich habe nicht erwartet , diese Frage zu sein , ganz so beliebt.
Niet the Dark Absol
Ja, alles gut, war nur ein leichter Kommentar
Anupam

Antworten:

182

Eine verwandte Frage wurde bereits gestellt: Was ist "über dem Falz liegender Inhalt" in Google Pagespeed?

Zunächst muss man beachten, dass es sich um " mobile Seiten " handelt.
Wenn ich Ihre Frage und Ihren Screenshot richtig interpretiert habe, ist dies nichts für Ihre Website!

Im Gegenteil: Wenn Sie einige der von Google in den Richtlinien empfohlenen Maßnahmen ergreifen, wird dies für "normale" Websites schlimmer als besser.
Und nicht alles, was von Google kommt, ist der "heilige Gral", nur weil es von Google kommt. Und sie selbst sind kein gutes Vorbild, wenn Sie sich ihr HTML-Markup ansehen.

Der beste Rat, den ich Ihnen geben kann, ist:

  • Stellen Sie Breite und Höhe für ersetzte Elemente in Ihrem CSS ein, damit der Browser die Elemente gestalten kann und nicht auf den ersetzten Inhalt warten muss!

Warum verwenden Sie außerdem andere CSS-Dateien als nur eine?
Die zusätzliche Anforderung ist schlechter als das geringe Datenvolumen. Und nach der ersten Anfrage wird die CSS-Datei trotzdem zwischengespeichert.

Die Dinge, um die man sich immer kümmern sollte, sind:

  • Reduzieren Sie die Anzahl der Anfragen so weit wie möglich
  • Halten Sie das Gesamtseitengewicht so gering wie möglich

Und rätseln Sie nicht, wie Sie 100% von Googles PageSpeed ​​Insights-Tool erhalten ...! ;-);

Ergänzung 1: Hier ist die Seite, auf der Google uns zeigt, was sie zur Optimierung der CSS-Bereitstellung empfehlen .

Wie gesagt, ich denke nicht, dass dies weder realistisch ist noch dass es für eine "normale" Website Sinn macht! Denn vor allem, wenn Sie ein responsives Webdesign haben, ist es am sichersten, dass Sie Medienabfragen und andere Layoutstile verwenden. Wenn Sie Ihr CSS also nicht zuerst und blockierend laden, erhalten Sie einen FOUT ( Flash Of Unstyled Text ). Ich glaube wirklich nicht, dass dies "besser" ist als mindestens einige Millisekunden mehr, um die Seite zu rendern!

Imho Google startet einen neuen "Hype" (wenn ich mir die ganze Frage hier auf Stackoverflow ansehe) ...!

Netsurfer
quelle
9
Gute Antwort. Das Problem ist, dass Google Sie zu bestrafen scheint, wenn Sie eine langsamere Seite haben. Daher zwingen sie dich, an ihren Ideen festzuhalten, sei es großartig oder absolut dumm. :(
Steve Horvath
10
@Netsurfer nicht alles, was von Google kommt, ist der "Heilige Gral" LOL. Ich kratzte mir am Kopf, um 100 zu erreichen, hörte aber nach dem Lesen dieses Kommentars bei 92 auf.
Kiranking
44
Sie sollten mehr betonen, dass Google sich nicht an seine eigenen Vorschläge hält .
Mr. Smith
2
Zusätzliche Anfragen werden mit HTTP / 2 und SPDY von Wikipedia weniger problematisch. "Zusätzliche Leistungsverbesserungen im ersten Entwurf von HTTP / 2 (eine Kopie von SPDY) ergeben sich aus dem Multiplexen von Anfragen und Antworten, um den Kopf zu vermeiden." Online-Blockierungsproblem in HTTP 1 (auch wenn HTTP-Pipelining verwendet wird), Header-Komprimierung und Priorisierung von Anforderungen. "
RationalDev mag GoFundMonica
3
Ich habe versucht, meine Seite von 72 Mobilgeräten und 80 Desktops aufzurufen, hatte aber das gleiche Problem. Ich weigere mich, mein CSS an einem niedrigeren Ort zu platzieren und verschlechtere möglicherweise die Benutzererfahrung, indem ich FOUT zeige!
publicknowledge
14

Wie ich eine 99/100 auf Google Page Speed ​​bekam (für Handys)

TLDR: Komprimieren Sie Ihr gesamtes CSS-Skript und binden Sie es zwischen Ihren <style></style>Tags ein.


Ich verfolge diese schwer fassbare 100/100-Punktzahl seit ungefähr einer Woche. Wie Sie war das letzte verbleibende Element das Entfernen von "Render-Blocking-CSS über dem Falzinhalt".

Sicher gibt es eine einfache Lösung? Nee. Ich habe die loadCSS- Lösung der Filament Group ausprobiert . Zu viel .js für meinen Geschmack.

Was ist mit asyncAttributen für CSS (wie js)? Sie existieren nicht.

Ich war bereit aufzugeben. Dann dämmerte es mir. Wenn das Verknüpfen des Skripts das Rendern blockiert hat, was ist, wenn ich stattdessen mein gesamtes CSS in den Kopf eingebettet habe? Auf diese Weise gab es nichts zu blockieren.

Es schien absolut FALSCH, 1263 Zeilen CSS in mein Style-Tag einzubetten. Aber ich habe es gewirbelt. Ich habe es zuerst komprimiert (und vorangestellt), indem ich Folgendes verwendet habe:

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ Siehe das NPM-Postcss-Paket .

Jetzt war es nur noch eine lange Zeile raumloser CSS. Ich habe das CSS in <style>your;great-wall-of-china-long;css;here</style>Tags auf meiner Homepage abgelegt . Dann habe ich mit Einsichten in die Seitengeschwindigkeit erneut analysiert.

Ich bin von 90/100 auf 99/100 auf dem Handy gegangen !!!

Das geht gegen alles in mir (und wahrscheinlich in dir). Aber es hat das Problem gelöst. Ich verwende es vorerst nur auf meiner Homepage und füge das komprimierte CSS programmgesteuert über ein PHP-Include hinzu.

YMMV (Ihr Kilometerstand kann variieren) hängt von der Länge Ihres CSS ab. Google kann Sie für zu viel über dem Falzinhalt dingen. Aber nimm nicht an; Prüfung!

Anmerkungen

  1. Ich mache das momentan nur auf meiner Homepage, damit die Leute auf meiner wichtigsten Seite ein SCHNELLES Rendering erhalten.

  2. Ihr CSS wird nicht zwischengespeichert. Ich mache mir aber keine allzu großen Sorgen. Die zweit sie eine andere Seite auf meiner Seite getroffen, die .css wird zwischengespeichert erhalten (siehe Anmerkung 1).

Ellenbogenlobstercowstand
quelle
4
Vielen Dank für Ihr Engagement und Ihre Recherche, aber ich persönlich werde nicht davon träumen: D
Niet the Dark Absol
2
Was ist der Sinn, außer zu versuchen, eine Punktzahl zu erreichen, die nichts wirklich hilft?
LarryBud
Schön, dass Sie Ihre Punktzahl erhöht haben, aber jetzt hat jede Seite auf Ihrer Website mehr Gewicht. Trotzdem ein guter Fund.
EdwardM
@ EdwardM Danke! Siehe meine Anmerkung 2 in der Post. Sobald sie eine zweite Seite aufrufen, wird das CSS zwischengespeichert und das Gewichtsproblem verschwindet.
Ellenbogenlobstercowstand
1
@ LarryBud Der Punkt der höheren Punktzahl? Mehr Geld für mich. Je höher meine Website in Google ist, desto wahrscheinlicher ist es, dass jemand darauf klickt und Kunde wird. Da Google die Seitengeschwindigkeit verwendet, um das Ranking zu bestimmen , habe ich beschlossen, meine Punktzahl zu verbessern.
Ellenbogenlobstercowstand
9

Einige Tipps, die helfen können:

  • Ich bin gestern in der CSS-Optimierung auf diesen Artikel gestoßen: CSS-Profilerstellung für ... Optimierung
    Viele nützliche Informationen zu CSS und welche CSS die meisten Leistungseinbußen verursachen.

  • Ich habe die folgende Präsentation auf jQueryUK über "versteckte Geheimnisse" in Googe Chrome (Canary) Dev Tools gesehen: DevTools können das . Lesen Sie die Abschnitte zu Time to First Paint , Repaints und kostspieligem CSS.

  • Wenn Sie einen Loader wie requireJS verwenden, können Sie sich auch eines der CSS-Loader-Plugins mit dem Namen require-CSS ansehen , das CSSO verwendet - einen Optimierer, der auch strukturelle Optimierungen durchführt, z. Zusammenführen von Blöcken mit identischen Eigenschaften. Ich habe es ein paar Mal benutzt und es kann von Fall zu Fall ziemlich viel CSS sparen.

Aus der Frage: Ich habe @Enzino beim Erstellen eines Sprites für alle kleinen Symbole, die Sie laden, unterstützt. Die Dateigrößen sind so klein, dass nicht wirklich ein Server-Roundtrip für jedes Symbol erforderlich ist. Beachten Sie auch die Gesamtzahl der gleichzeitigen http-Anforderungen, die der Browser ausführen kann. Anfragen nach einer größeren Anzahl kleiner Symbole blockieren also auch das Rendern. Obwohl eine leere Seite mit Ihrer verglichen wird, gefällt mir zum Beispiel , wie duckduckgo geladen wird .

häufig
quelle
Scheint duckduckgo kümmert sich auch nicht um ihre Seitenbewertung, überprüfen Sie hier
Chetabahana
6

Bitte schauen Sie auf der folgenden Seite https://varvy.com/pagespeed/render-blocking-css.html nach . Dies hat mir geholfen, "Render Blocking CSS" loszuwerden . Ich habe den folgenden Code verwendet, um " Render Blocking CSS " zu entfernen . Jetzt in Google Page Speed ​​Insight bekomme ich kein Problem mit Render Blocking CSS.

<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      function loadCSS(href){
        var ss = window.document.createElement('link'),
            ref = window.document.getElementsByTagName('head')[0];

        ss.rel = 'stylesheet';
        ss.href = href;

        // temporarily, set media to something non-matching to ensure it'll
        // fetch without blocking render
        ss.media = 'only x';

        ref.parentNode.insertBefore(ss, ref);

        setTimeout( function(){
          // set media back to `all` so that the stylesheet applies once it loads
          ss.media = 'all';
        },0);
      }
      loadCSS('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>
Amuk Saxena
quelle
1
Wenn ich die erwähnte Funktion benutze, reduziert es die pageSpeed-Punktzahl. Die Funktion, die ich geschrieben habe, ist: jsfiddle.net/kvfzbxxo Können Sie mir helfen?
Arsho
Ich habe dieselbe Funktion in der folgenden URL implementiert und bitte sehen Sie sich die Geschwindigkeit hier an. " Whitecashback.in " Sie können sich die Quell-URL ansehen und die Funktion "loadCSS" in der Fußzeile finden. Dies hilft Ihnen zu verstehen, wie ich den Code implementiert habe. Die Seitengeschwindigkeit sollte sich erhöhen, wenn CSS nach der Seite geladen wird.
Amuk Saxena
Ich habe diesen Code verwendet: jsfiddle.net/sbpa1hun. Jetzt wird das CSS nicht auf der Website geladen.
Arsho
Ich erwähnte, dass meine Website nach dem Hinzufügen dieses Codes: jsfiddle.net/sbpa1hun , der auf Ihrer Website verwendet wird, alle Stile verloren hat. Es erhöht die Seitengeschwindigkeit, aber das CSS funktioniert nicht mehr! Kannst du mir irgendwie helfen? Ich bekomme ungefähr 40 Seitengeschwindigkeit. Aber wenn ich Ihren Code hinzufüge, bekomme ich ungefähr 70. Aber das CSS konnte nicht funktionieren.
Arsho
1
Wenn Sie versuchen, dies in jsfiddle zu tun, funktioniert dies nicht. Bitte versuchen Sie diesen Code auf Ihrer Website. Jsfiddle blockiert das Laden von CSS für externe Websites. Weil Sie CSS von externen Quellen mit Javascript laden. Versuchen Sie dies bitte auf Ihrer Website. Versuchen Sie auch, JQuery-Dateien einzuschließen, da diese in Ihrem Skript fehlen. Nach dem Einfügen von js-Dateien funktioniert dies möglicherweise. Bitte beachten Sie auch, dass https-Sites möglicherweise in jsfiddle funktionieren. Es wird folgende Fehlermeldung angezeigt: "Blockiertes Laden gemischter aktiver Inhalte". Sie müssen dies zuerst beheben.
Amuk Saxena
4

Auch ich habe mit dieser neuen Seitengeschwindigkeitsmetrik zu kämpfen.

Obwohl ich keinen praktischen Weg gefunden habe, meine Punktzahl wieder auf 100% zu bringen, habe ich einige Dinge als hilfreich empfunden.

Das Kombinieren aller CSS in einer Datei hat sehr geholfen. Alle meine Websites sind wieder auf% 95 -% 98 eingestellt.

Das einzige andere, woran ich denken konnte, war, alle notwendigen CSS (was anscheinend das meiste davon ist - zumindest für meine Seiten) auf der ersten Seite einzubinden, um den süßen Highscore zu erzielen. Obwohl dies Ihrer Geschwindigkeitsbewertung helfen kann, wird Ihre Seite wahrscheinlich langsamer geladen.

Glipt
quelle
2
Smashing Magazine hat 100% Punktzahl in Seitengeschwindigkeitstest Entwickler.google.com/speed/pagespeed/insights/…
Mo.
1

Die optimale Lösung für 2019 ist HTTP / 2 Server Push .

Sie benötigen keine hackigen Javascript-Lösungen oder Inline-Stile. Sie benötigen jedoch einen Server, der HTTP 2.0 unterstützt (jede moderne Serverversion wird dies tun), für den Ihr Server SSL ausführen muss. Mit Let's Encrypt gibt es jedoch keinen Grund, SSL ohnehin nicht zu verwenden.

Meine Website https://r.je/ hat eine 100/100-Punktzahl für Mobilgeräte und Desktops.

Der Grund für diese Fehler ist, dass der Browser den HTML-Code erhält und dann warten muss, bis das CSS heruntergeladen wurde, bevor die Seite gerendert werden kann. Mit HTTP2 können Sie sowohl HTML als auch CSS gleichzeitig senden.

Sie können HTTP / 2-Push verwenden, indem Sie den Link-Header festlegen.

Apache-Beispiel (.htaccess):

Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"

Für NGINX können Sie den Header in der Serverkonfiguration zu Ihrem Standort-Tag hinzufügen:

location = / {
    add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}

Wenn dieser Header festgelegt ist, empfängt der Browser gleichzeitig HTML und CSS, wodurch verhindert wird, dass das CSS das Rendern blockiert.

Sie sollten es so optimieren, dass das CSS nur bei der ersten Anforderung gesendet wird. Der Link-Header ist jedoch die vollständigste und am wenigsten hackige Lösung für "Eliminate Render Blocking Javascript and CSS".

Eine ausführliche Diskussion finden Sie in meinem Beitrag hier: Beseitigen Sie das Blockieren von Rendering-CSS mithilfe von HTTP / 2 Push

Tom B.
quelle
Ich könnte falsch verstehen, aber würde Server Push nicht dazu führen, dass das CSS jedes Mal gesendet wird, wenn Sie die Seite laden, und nicht nur einmal, bevor sie zwischengespeichert wird?
Niet the Dark Absol
Ja, es gibt einige Techniken wie Cookies, mit denen dies vermieden werden kann. Werfen
Tom B
-1

Hallo für jQuery Sie können nur so verwenden

Verwenden Sie nur asynchron und geben Sie = "text / javascript" ein

Rajeev
quelle