QUOTE Behebung erforderlich:
JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen
Erklärung:
Wenn du eine Webseite öffnest (durch klick auf Link) ist der Scrollbar oben - falls die Seite vertikal länger sein sollte als die höhe des Browserfensters. An der unteren Kante des Browserfensters ist “the fold”. Alles was du diesem Moment siehst ist daher “above the fold”. Fängst du an runter zu scrollen, gehst du also “below the fold”. Wie bei einer Zeitung die in der Mitte gefaltet wird – oben erst mal die Schlagzeilen und was wichtig ist, so sollte deine Website auch sein, mit der Absicht den Besucher zum scrollen zu bringen.
Lösung:
Die Webseite wird von oben nach unten auf den Browser geladen. Oft hat man “Zeug” auf der Webseite, z.B auf meiner Website ist ein Google+ Button, welches etwas länger dauert zu laden und daher den page-speed sehr beeinflusst. Dieser Google+ Button wird durch javascrippt geladen ... Und er sitzt “above the fold”. Ich würde dass nicht als Fehler bezeichnen aber um den Forderungen des Berichts nachzukommen hätte ich hier zwei Möglichkeiten: Entweder ich setz das ganze Element mit Script “below” the fold, oder ich setz nur das Script an das Ende der Website (bevor der html-tag schließt) und verpasse dem Script eine Zeitverzögerung – sodass erst alles Andere geladen werden kann bevor der Button erscheint.
Viele Leute haben z.B. ihren Google-Analytics-Script am Anfang der Seite stehen, welches genauso gut funktioniert wenn es am Ende der Webseite erscheinen würde.
Dasselbe gilt für Skripte die extern geladen werden durch Anweisung im Head. Die meisten von denen würden genauso gut funktionieren wenn sie erst am Ende der Website” laden würden.
Große Werbe-Banner im Querbalkenformat die von Dritten geladen werden, gleich oben auf der Website zu haben, ist wahrscheinlich auch nicht so gut.
Beispiel HTML-Code welches sagen würde “Behebung erforderlich” :
CODE
<!DOCTYPE html>
<html lang="de">
<head>
<title>dein title</title>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
</head>
<body>
Dein Inhalt Anfang
<div id="dateTimeValue"></div>
<script type="text/javascript">
window.onload = function () {
var separator = " - ";
var dateTime = new Date();
var formattedDateTime = dateTime.toLocaleDateString()
var divObject = document.getElementById("dateTimeValue");
divObject.innerHTML = formattedDateTime;
}
</script>
...
Dein Inhalt Ende
</body>
</html>
... und das Resultat der “Behebung”:
CODE
<!DOCTYPE html>
<html lang="de">
<head>
<title>dein title</title>
</head>
<body>
Dein Inhalt Anfang
<div id="dateTimeValue"></div>
...
Dein Inhalt Ende
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
window.onload = function () {
var separator = " - ";
var dateTime = new Date();
var formattedDateTime = dateTime.toLocaleDateString()
var divObject = document.getElementById("dateTimeValue");
divObject.innerHTML = formattedDateTime;
}
</script>
</body>
</html>
Mit dem Thema "above the fold" und was wann wo geladen werden soll, gehen manche Leute in das Extrem in dem Sie z.B. unterteilte stylesheets und andere weird-things benutzen um den obersten Bereich so schnell wie möglich zu laden. So weit würde ich nicht gehen.
Dritte Möglichkeit ist diese Messages einfach zu ignorieren – verschwinden wird deine Website dadurch nicht und auf dein Rankings wird es wohl auch kaum etwas ausmachen wenn der Aufbau der Website nicht zu schlecht ist. In ein paar Monaten kommt Google dann wieder mit anderen Anforderungen – es muss ja immer was neues geben.
