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?

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) ...!

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).

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 .

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>

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.

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

Verwenden Sie ein Paket, um automatisch Inline-Stile aus Ihren CSS-Dateien zu generieren. Ein guter ist Grunt Critical oder Critical CSS für Laravel .

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

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