PageSpeed optimieren (jQuery / CSS Fragen)

[Blackbenji]

Hallo zusammen,

ich beschäftige mich im Moment mit dem PageSpeed Tool von Google: https://developers.google.com/speed/pagespeed/insights/

Für Mobile erhalte ich aktuell 70 / 100 und für den Desktop 88 / 100.
Kritisiert wird mir:
- JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen

Ich stolpere noch über die Lösungsansätze.
Ich nutze das Twitter Bootstrap und jQuery für meine Seite.

Javascript Dateien soll man mit "async" optimieren - nur funktioniert jQuery dann nicht mehr, da es nicht zuerst geladen wurde.

CSS Dateien soll man am Ende includieren und in den Header eine non kritische inline CSS einbinden.

Das macht sich etwas schwierig, da ich hier als Basis auf das Twitter Bootstrap setze und dann mit einer personalisierten CSS überschreibe.

Hat dazu jemand brauchbare Tipps?
Vor allem das jQuery ist echt ein Problem.

 

[Tumbleweed]

Musst doch nur nach "jquery include async" googeln:

http://stackoverflow.com/questions/14811471/load-jquery-asynchronously-before-other-scripts

Ansonsten würde ich mir da keine großen Gedanken um solche Mikrooptimierungen machen. Wenn du die CDN-Versionen benutzt, haben die meisten Leute das ohnehin im Browser-Cache.

 

[Teisi]

above the fold: ist so eine sache. Da ist das netz aktuell ein wenig zweigespalten.
Ich bin z.B. ein gegner, ich mags nicht und ich werds auch nicht einsetzten <- da kann google sich auf den Kopf stellen.
Wegen einer oder zwei millisekunden, mach ich mir nicht den Aufwand - zahlt ja auch kein Mensch.

Und es ist generell zweischneidig:
Die einzelladezeit einer einzlenen Seite ist zwar schneller, aber auch nur wenn die Seite nicht schon im cache liegt.
Außerdem ist die gesamt Ladezeit langsamer. Weil jede Seite ein eigenes CSS hat und dadurch bei jeder Seite (wenns noch nicht gecached ist) runtergeladen werden muss.

Wenn du aber das gesamte CSS in eine Datei auslagerst, hast du zwar beim aller ersten mal Laden der Webseite (einer einzelnen Seite der gesamten Webseite), zwar eine etwas höhere Ladezeit. Da auch das CSS File größer ist, dafür liegt es dann bei allen anderen Seiten der Webseite im Cache des Browser - womit die Ladezeit wieder schneller ist.

Deshalb bin ich gegen dieses above the fold, schmarn.



Google PageSpeed Test Tool - ist auch nur ein Indikator, wo noch etwas vielleicht zu verbessern wäre. <- mehr aber auch nicht. Wenn die Ladezeiten gut sind - interessiert mich Google Pagespeed eigentlich nicht.

 

[ayngush]

Wie sich Googles "above the fold" pack doch inline CSS in jeden Seitenkopf dann mit
Content-Security-Policy "verbiete aus Sicherheitsgründen alle Inline-Scripte (inklusive CSS)" verträgt...

Haben sich auch einige schon mal zum dead lock hin optimiert

PS: Bin auch kein freund von diesen ganzen above the fold / async nachladen. Killt leider häufig den Cache.

 

[###Zaunpfahl###]

ich würde auch sagen, mach dir da nicht so einen Kopf.
Und handle logisch.

Css immer komplett die paar kB da....
Am besten alle JS und CSS zusammenführen, komprimieren und nur einmal einbinden lassen.

Und alles was nicht überlebensnotwendig ist asynchron einbinden.

Wenn jquery esentiell genutzt wird, dann binde es synchron ein... ist ja logisch.


Ansonten solltest du eher gucken wieviel Power die Webseite braucht. Hab letztens herausgefunden das der Browser auf dem Handy um einiges langsamer ist als der am Desktop (hätte ich nicht gedacht). Besonders Firefox ist ja wirklich schrecklich. Ich würde mir lieber mal ein 1-2 jahre altes Mittelklasse Smartphone holen und gucken ob das Gerät die Webseite überhaupt packt.
Ich denke da ist viel mehr potenzial drin. Außerdem gehts ja um Mobile oder? Weil für den Desktop für Zuhause mit 6000 Internet bringt dir sowas 0,nichts.