it-swarm.com.de

Google Pagespeed bittet Sie, "über dem Falz" -Dateien zu entfernen, die zum Rendern der Seite erforderlich sind

Ich habe meine Website in Google Pagespeed gestartet und sie ist zurückgekehrt

"Beseitigen Sie JavaScript und CSS, die das Rendern blockieren, in Inhalten, die über der Klappe liegen"

Das Problem besteht darin, dass für das Rendern diese "Renderblockierungs" -Elemente erforderlich sind. Wie in:

  • Google Fonts CSS (Google CDN)
  • BootStrap CSS (MaxCDN)
  • Site-CSS (lokal)

Ich bin verwirrt. Wie kann ich meine Seite ohne meine css.css-Datei, die bootstrap -Dateien und die Google-Schriftarten rendern?

5
Bar Akiva

Zeitverschwendung ... meistens ... Einsicht ... nicht erforderlich.

Die Pagespeed Insights von Matrix und Google sind nicht obligatorisch und belohnen Sie nicht mit geheimen Google-Rankings der Eichhörnchen-Stufe 9.

Google, Bing und Ihre Nutzer interessieren sich nicht für Seitenbewertungsmatrizen, denn warum sollten sie? Letztendlich kommt es darauf an, wie schnell die Seite geladen wird und wofür Benutzer und Suchmaschinen Websites belohnen.

Die größte Auswirkung der Website-Geschwindigkeit ist angemessenes Hosting ...

Gutes Hosting hat den größten Einfluss auf die Seitengeschwindigkeit, vorausgesetzt, Sie haben keine grundlegenden Probleme ... Dinge wie das Blockieren von Rendering, das Ablaufen und andere häufig gemeldete Probleme sind keine grundlegenden Probleme. Die meisten reduzieren die Seitengeschwindigkeit nicht auf ein inakzeptables Maß.

Wenn Sie sich die Top-100-Websites der Welt ansehen, sind sie zwar SCHNELL, erzielen aber in Bezug auf PageSpeed-Erkenntnisse nur äußerst geringe Ergebnisse.

Verwenden Sie ein Testwerkzeug mit echter Bedeutung ...

Ich empfehle die Verwendung eines geeigneten Testtools und WebPagetest die Verwendung mehrerer Durchläufe mit mehreren Servern in Ihrer Zielregion. Streben Sie weniger als 2 Sekunden an, idealerweise weniger als 1,5 Sekunden, und weniger als 1 Sekunde ist extrem gut.

Was ist Render Blocking?

Beim Blockieren des Renderns wird eine Ressource benötigt, bevor der eigentliche Inhalt heruntergeladen werden kann. Das Warten auf den Download einer Ressource kann den Test der Seite verlangsamen. Dies wird häufig als Laden von Ressourcen über dem Falz bezeichnet und durch Beheben des Problems wird diese Ressource platziert. unter der Falte '(nach dem Inhalt).

Um dieses Problem zu umgehen, müssen Sie die Schriftarten asynchron laden, dh nicht innerhalb von <head> </head>. Eine Lösung finden Sie im nächsten Kapitel.

Auflösen der Renderblockierung für Google-Schriftarten

Wenn Sie innerhalb von Google Insight oder anderen Matrix-basierten Websites eine maximale Trefferquote von 100/100 erzielen möchten, können Sie das Problem der Renderblockierung bei Google-Schriftarten mithilfe des Webfont Loader beheben.

Was ungefähr so ​​aussieht:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Andere CSS-Dateien

Wenn Sie über andere Ressourcen wie CSS- oder JS-Dateien verfügen, die entweder intern oder extern geladen werden, müssen diese am Ende der Seite geladen werden. Dazu gehören keine wesentlichen JavaScripts (z. B. modernizr oder main Basis-CSS für Ihre Site (z. B. style.css): Die meisten Anbieter stellen eine API zum Laden von CSS über JavaScript unter dem Falz bereit.

Leider verfügen nicht alle CSS-Anbieter über eine API oder bieten eine elegante Lösung. Daher müssen Sie normalerweise Ihr eigenes JavaScript entwickeln und bereitstellen, das die CSS-Ressource unten auf der Seite lädt.

Beispiel für das Laden von CSS-Dateien am Ende der Seite mit JavaScript

Unten ist ein Skript, das so ziemlich jede CSS-Datei lädt, die Sie unten haben möchten. Sollte es intern oder extern sein, ist dies kein Problem. Stelle es vor </body>

<script type='text/javascript'>
//<![CDATA[ 
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("path/to/font-awesome/css/font-awesome.min.css");
//]]> 
</ Script>
4
Simon Hayter