CSS am Ende des Body-Tags

[Sioweb]

Hi all,

PageSpeed Insights hat mir einige Tipps gegeben wie ich meine Seite optimieren kann. Aber bei einem Punkt würde ich gerne weitere Meinungen lesen.

Laut Googles PageSpeed Insights ist es gut, wenn die CSS-Dateien nicht im Header, sondern ggf. am Ende des Body-Tags definiert werden, so wie die Script-Daten. Mit HTML5 ist es ja durchaus valide. Der Nachteil wäre ja, dass die Seite kurzzeitig ohne Design dastehen könnte.

Meine Frage ist jetzt, was haltet ihr davon?

Insight behauptet dass es besser wäre, wenig Style in einen Style-Tag zu laden, statt in eine externe Datei. In diesem Tag könnten einfache Layout-Definitionen stehen, damit das Layout nicht zu crapy ausgegeben wird auf langsamen Rechnern.

Zur Umsetzung: Ich würde den Style ggf. in eine Art before.css packen und die einfach als include/text im Template ausgeben. Da kann dann auch mit Sass und Less gearbeitet werden. Wichtig ist dabei, dass alle LINK-Tags dazu ein weiteres Attribut brauchen, um valide zu bleiben.

  …
  <link rel="stylesheet" property="stylesheet" href="…">
</body>

Ich hab für meine Seite eine kleine Erweiterung geschrieben, die das Attribut auch in die von Contao generierten Link-Tags einfügt.

Was haltet ihr davon?

Vielen Dank

[tab]

Prinzipiell finde ich das nicht schlecht, auch wenn Google Pagespeed mir mit seinem ewigen Gejammere langsam auf den Geist geht . Vielleicht schreibe ich mal ne Erweiterung, damit "above the fold" automatisch nur noch der Hinweis steht, dass man doch bitte weiter runter scrollen soll, um den eigentlichen Inhalt der Seite zu sehen . Pagespeed wäre damit zufrieden, die Kunden wahrscheinlich nicht.

[Spooky]

Laut Googles PageSpeed Insights ist es gut, wenn die CSS-Dateien nicht im Header, sondern ggf. am Ende des Body-Tags definiert werden, so wie die Script-Daten. Mit HTML5 ist es ja durchaus valide. Der Nachteil wäre ja, dass die Seite kurzzeitig ohne Design dastehen könnte.

Der Sinn der Sache ist nicht, dass du das Ganze CSS an das Ende des Body-Tags geben sollst, sondern alle CSS Definitionen, die nur den Inhalt "below the fold" betreffen.

[tab]

Ja, das macht durchaus Sinn. Ist aber m.E. leider oft nur sehr schwer machbar. Der Sinn der Sache ist ja, diesen Bereich ("above the fold", wer legt eigentlich fest, wo der "fold" liegt? Google?!? Mein "fold" auf meinem Desktop-PC liegt wesentlich weiter unten als der bei Google Pagespeed angezeigte) mit den Daten aus der ersten HTML-Antwort möglichst komplett rendern zu können. Und wenn das nicht geht, dann damit wenigstens möglichst viel möglichst früh bereits anzeigen zu können (Stichwort: kritischer Pfad). Natürlich klappt das nicht immer, wie man am Beispiel google.de / google.com sehen kann. Vor allem nicht, wenn man für so eine eigentlich eher mickrige Seite erst mal 10 Pfund Javascript inline in mehrere script-Tags reinschreibt. Das wird Google dann auch von Google Pagespeed bescheinigt. Zum Glück ist Google nicht auf Google Pagespeed angewiesen, wenn es ums Ranking geht .

[andreasisaak]

Das mit dem CSS ist sinnlos und bringt dir nur sehr wenige Punkte. Wenn du es aber doch nutzen willst, dann würd ich ein Grunt/Gulp Plugin nutzen um die entsprechenden CSS-Regeln zu ermitteln. Aber du musst abwägen ob dir der Aufwand das wert ist.

https://developers.google.com/speed/...www.louis.info

Wir haben 100/100 und es war nicht in 2 Std erledigt

[andreasisaak]

Zum Glück ist Google nicht auf Google Pagespeed angewiesen, wenn es ums Ranking geht .

Das stimmt so nicht. Google Pagespeed hat einen immer höheren Stellenwert im Google Index. Nur halt nicht so krass wie man fürchten könnte. Jemand mit 90/100 wird nicht zwangsläufig unter jemanden mit 100/100 stehen. Aber wenn du 0/100 hast (selber schon mehrfach gesehen bei manchen Agenturwebsiten) dann wird das definitiv dein Ranking beeinflussen. Das Google ja selber schon bestätigt mit dem letzten Update.

[Sioweb]

Sinnlos ist es sicher nicht wenn es Punkte bringt außerdem denke ich nicht dass es besser ist CSS und Javascript einfach im Quelltext unterzubringen - das ist meiner Einschätzung nach für Bots und nicht für Besucher optimiert.

Für den Above the Fold habe ich den Style-Tag vorgeschlagen, könnte aber ebenfalls extern liegen - wenn Pagespeed dann nicht meckert.

Ich denke es wäre ohnehin nicht verkehrt wenn die Seite auch ohne Style schon ein wenig nach etwas aussieht, von daher hätte ich kein Problem damit die Seite so aufzubauen.

@tab Die Besucher werden dich lieben für dieses Plugin Am besten die ersten 500px nur Hinweise und Warnungen.

[tab]

Das stimmt so nicht.

Stimmt so schon. Die Website "https://www.google.de" ist nicht darauf angewiesen einen superhohen Wert von Google Pagespeed zu bekommen. Warum sollte sie auch? Wer sucht schon bei Google die Google-Startseite? Am besten noch über die Startseite selbst . Ihr Pagespeed-Wert ist auch alles andere als schlecht, über 90, aber eben trotzdem nicht perfekt und Google Pagespeed spricht da so einige Empfehlungen aus, die ich eben auch immer wieder bei meinen Sites zu lesen bekomme. Dass ich da mit einem Wert zwischen 90 und 97 wohl nicht unbedingt abgestraft werde, denke ich auch. so wie ich auch deinen weiteren Ausführungen - für Websites die auf Google angewiesen sind - durchaus zustimme.

Einen Wert von 18 habe ich auch schon bei einer von einer Agentur erstellten Website gesehen, 0 fehlt mir noch in der Sammlung. Aber die haben sich auch wirklich alle Mühe gegeben. Bilder, die eigentlich relativ klein (z.B. 1.027px × 680px (Skaliert zu 300px × 150px)) dargestellt werden und auch nicht in einer Lightbox oder per Link in größer angezeigt werden können mit fast 700 KB . Und es wird ja nicht nur das eh schon (von der Bildgröße und der Datenmenge her) viel zu große Bild runterskaliert, es wird auch gleich noch verzerrt ausgegeben, was man auch deutlich sieht. Zu alledem wird es in einem Slider mit weiteren ebenso toll optimierten Bildern verwendet. Da frage ich mich manchmal schon, wie eine Agentur, die sowas als Endergebnis ausliefert, überleben kann. Ok, die machen auch anderes, vielleicht sind sie da besser.

[tab]

Für den Above the Fold habe ich den Style-Tag vorgeschlagen, könnte aber ebenfalls extern liegen - wenn Pagespeed dann nicht meckert.

Ist mir schon klar, macht durchaus Sinn, wenn man den letzten Punkt noch rauskitzeln will von 99 auf 100. Extern wird wohl auch angemeckert werden, eventuell etwas weniger heftig. Denn auch wenn das Stylesheet dadurch vielleicht früher verfügbar ist, als wenn es "normal" im Header eingebunden wäre, ganz am Anfang fehlt es eben trotzdem. Es kann erst gerendert werden, wenn das Stylesheet runtergeladen ist. Um das zu vermeiden hilft eben nur das Style-Tag.

@tab Die Besucher werden dich lieben für dieses Plugin Am besten die ersten 500px nur Hinweise und Warnungen.

Was kümmern mich die Besucher, Hauptsache Pagespeed ist zufrieden!

[andreasisaak]

http://searchengineland.com/google-n...g-factor-39708

Du nimmst Pagespeed Insights zu genau. Ich bezog mich auf die dort vorgeschlagenen Optimierungen. Du kannst sagen was du willst aber wer nur 30/100 hat, der hat krasse Defizite und keine sau schnelle Website. Und damit hat das Einfluss im Ranking. Ließ dir den Artikel durch. Ich meinte nicht das man im Ranking bestraft wird wenn man nur 90/100 hat.

[tab]

Ich schreib doch auch nichts anderes