"Eliminiere CSS, die das Rendering blockiert, in Inhalten, die über den Haufen liegen"

Habe ich mit Google PageSpeed insights, um zu versuchen und zu verbessern mein Website-performance, und so weit es nachweislich äußerst erfolgreich. Dinge wie das zurückstellen der Scripte funktionierte wunderbar, da hatte ich schon eine in-house-version von jQuery .ready() zu verschieben, Skripts, bis die Seite geladen hatte, vollständig, alles, was ich tun musste, war die inline -, die Besondere Funktion und bewegen Sie die vollständige Skripte am Ende der Seite. Das hat Super funktioniert.

Aber jetzt finde ich mich starrte die verbleibenden gelben Punkt auf der Checkliste: "Eliminate render-blocking CSS in above-the-fold content".

Übrigens mein CSS ist eingerichtet ist, um eine Globale _.css - Datei mit Stilen für die Struktur der Seite im Allgemeinen, oder sind in mehr als einer oder zwei stellen auf der gesamten Website. Die meisten Seiten haben dann eine entsprechende CSS-Datei (zum Beispiel party.php hat party.css), die Stile der einzelnen Seite. Alle CSS-Dateien zwischengespeichert werden, auf unbestimmte Zeit, wie ich anfügen /t=FILEMTIME zu Dateinamen (und später nehmen Sie Sie mit .htaccess), um zu garantieren, dass die Dateien aktualisiert werden, wenn Sie geändert werden.

So jedenfalls empfiehlt Google, inlining kritischen Stile benötigt für above-the-fold content. Problem ist... gut, nehmen Sie einen Blick auf diesen screenshot: http://prntscr.com/1qt49e

Wie Sie sehen können... ALLE der Inhalte above-the-fold! Menschen hassen es zu scrollen, besonders auf ein Spiel, das beinhaltet das laden von vielen Seiten. So habe ich die Website auf einen Bildschirm passen (vorausgesetzt, eine ausreichend gute Auflösung). Das bedeutet also, dass... ALLE die Stile gelten für above-the-fold content! Also... gibt es eine Lösung? Oder bin ich stecken mit, dass die gelbe Markierung auf einer ansonsten nahezu perfekte Punktzahl?

InformationsquelleAutor der Frage Niet the Dark Absol | 2013-09-12

css pagespeed

176

Einer ähnlichen Frage wurde vorher gefragt: Was ist "above-the-fold content" in Google Pagespeed?

Erstens müssen Sie feststellen, dass dies alles über 'mobile Seiten'.

Also, wenn ich interpretiert Ihre Frage und die Abbildung korrekt ist, dann ist dies nicht für Ihre Website!

Im Gegenteil - das tun einige der Dinge, die, beraten durch Google in Ihren Richtlinien werden die Dinge noch schlimmer machen als besser für "normale" websites.

Und nicht alles, das kommt von Google ist der "Heilige Gral", nur weil es von Google. Und Sie sind selbst kein gutes Vorbild, wenn Sie einen Blick auf Ihre HTML-markup.

Den besten Rat, den ich Ihnen geben könnte ist:
- Legen Sie Breite und Höhe auf die ausgetauschten Elemente in der CSS, so dass der browser das layout der Elemente und nicht warten müssen, für den ersetzten Inhalt!
Außerdem, warum verwenden Sie unterschiedliche CSS-Dateien, statt nur einer?

Die zusätzliche Anforderung ist schlimmer als die geringen Datenmengen. Und nach dem ersten request die CSS-Datei zwischengespeichert sowieso.

Sachen sollte man immer aufpassen:
- reduzieren die Anzahl der Anfragen so viel wie möglich
- halten Sie Ihre gesamte Seite Gewicht so gering wie möglich
Werden und nicht puzzle, das Ihr Gehirn über, wie man zu 100% von Google ' s PageSpeed Insights-tool ...! 😉

Zusatz 1: Hier ist die Seite, auf der Google zeigt uns, was Sie empfehlen für Optimieren Sie die CSS-Lieferung.

Wie gesagt, ich glaube nicht, dass dies ist weder realistisch, noch macht es Sinn für eine "normale" website! Denn vor allem, wenn Sie eine responsive web design es ist den meisten sicher, dass Sie media queries und andere layout-Stile. Also, wenn Sie sind nicht gonna laden Sie Ihre CSS-ersten und in einer blockierenden Weise erhalten Sie eine FOUT (Flash Of Unstyled Text). Ich weiß wirklich nicht glauben, dass dies "besser" als mindestens einige weitere Millisekunden zum Rendern der Seite!

Imho Google startet einen neuen "hype" (wenn ich einen Blick auf die Frage, über die es hier auf Stackoverflow) ...!

InformationsquelleAutor der Antwort Netsurfer
13

Wie ich einen 99/100 auf Google Page Speed (für mobile)

TLDR: Komprimieren und einbetten der gesamte css-Skript zwischen Ihre <style></style> tags.

Ich habe die Jagd nach schwer zu findenden 100/100 Partitur für etwa eine Woche jetzt. Wie Sie, ist das Letzte Verbleibende Element war die Beseitigung der "render-blocking css above the fold content."

Sicherlich gibt es eine einfache Lösung?? NÖ. Ich habe versucht, aus Filament group loadCSS Lösung. Zu viel .js für meinen Geschmack.

Was async - Attribute für css (z.B. js)? Sie nicht existieren.

Ich war bereit, aufzugeben. Dann dämmerte es mir. Wenn Verknüpfung das Skript wurde blockiert, die machen, was, wenn ich stattdessen embedded-meine gesamte css in den Kopf statt. So gab es nichts zu blockieren.

Schien es absolut FALSCH einbetten 1263 Zeilen CSS-Code in meiner style-tag. Aber ich gab es einen Wirbel. Ich habe es komprimiert (und Präfix) der ersten Verwendung:

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

Nun war es nur eine LANGE Zeile von Raum, weniger css. Ich plopped die css-Datei in <style>your;great-wall-of-china-long;css;here</style> tags auf meiner Homepage. Dann ich re-analysiert mit page speed insights.

Ich ging von 90/100 auf 99/100 auf mobile!!!

Das geht gegen alles, was in mir (und wahrscheinlich auch Sie). Aber es hat das problem GELÖST. Ich verwende es auf meiner Homepage und einschließlich der komprimierten css programmgesteuert über ein PHP-include.

YMMV (your mileage may vary) bis auf die Länge des css. Google ding Sie zu viel above the fold content. Aber nicht davon ausgehen, testen!

Hinweise
1. Ich bin nur tun dies auf meine Homepage, damit die Leute SCHNELL Rendern auf meiner wichtigsten Seite.
2. Dein css wird nicht zwischengespeichert. Ich bin nicht allzu besorgt, wenn. Die zweite Sie schlug eine andere Seite auf meiner Website, die .css wird zwischengespeichert (siehe Anmerkung 1).
InformationsquelleAutor der Antwort elbowlobstercowstand
8

Paar Tipps, die helfen können:
- Stieß ich auf diesen Artikel in CSS-Optimierung von gestern:
  CSS-profiling für die Optimierung ...
  
  Eine Menge nützlicher Informationen auf CSS und was CSS bewirkt, dass die meisten performance-Kanalisation.
- Sah ich die folgende Präsentation auf jQueryUK auf "hidden secrets" in Googe Chrome (Kanaren) Dev-Tools:
  DevTools Können tun, dass.
  Prüfen Sie die Abschnitte Die Zeit bis zur Ersten Farbe, neu und teuer CSS.
- Auch, wenn Sie einen loader wie requireJS haben, könnten Sie einen Blick auf eine der CSS-loader-plugins, genannt erfordern-CSSdie verwendet CSSO - optimzer, der auch nicht strukturelle Optimierung, zB. Zusammenführen von Blöcken mit identischen Eigenschaften. Ich habe es ein paar mal und es kann sparen Sie eine ganze Menge von CSS-von Fall zu Fall.
Abseits der Frage:
Ich schließe mich @Chucky bei der Erstellung eines Sprites für alle kleinen Symbole geladen werden. Die Dateigrößen sind so klein, dass er nicht wirklich garantieren ein server-roundtrip für jedes Symbol. Beachten Sie auch die Anzahl der gleichzeitigen http-Anforderungen-browser tun können. Also Anfragen nach einer größeren Anzahl von kleinen icons sind "render-blocking". Obwohl eine leere Seite zu vergleichen, zu dir, ich mag, wie duckduckgo lädt zum Beispiel.

InformationsquelleAutor der Antwort frequent

Bitte haben Sie einen Blick auf die folgende Seite https://varvy.com/pagespeed/render-blocking-css.html .
Dies hat mir geholfen, um loszuwerden, "Render-Blocking CSS". Ich verwendete den folgenden code, um die zu entfernen "Render-Blocking CSS". Jetzt in der google page speed insight bin ich nicht immer 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>

InformationsquelleAutor der Antwort Amuk Saxena

3

Auch ich habe gekämpft, mit diesem neuen pagespeed Metrik.

Obwohl ich fand keine praktische Möglichkeit, um meine Punktzahl zurück bis zu %100 es gibt ein paar Dinge, die ich hilfreich gefunden habe.

Kombiniert alle css in eine Datei hat mir sehr geholfen. Alle meine Seiten sind wieder bis zu %95 - %98.

Die einzige andere Sache, die ich denken konnte, war zu inline alle notwendigen css (die angezeigt wird, werden die meisten es - zumindest bei meinen Seiten) auf der ersten Seite zu bekommen, die süße hohe Punktzahl. Obwohl es kann helfen, Ihre Geschwindigkeit, Punktzahl dies wird wahrscheinlich machen Sie Ihre Seite zu laden langsamer, obwohl.

InformationsquelleAutor der Antwort Glipt
0

Überlegen, ein Paket automatisch zu erzeugen inline-styles aus den css-Dateien. Ein guter ist Grunt Kritisch oder Kritische css für Laravel.

InformationsquelleAutor der Antwort tsveti_iko

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Wie ich einen 99/100 auf Google Page Speed (für mobile)

Hinweise