• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Page Speed Insights - Above the fold JS und CSS beseitigen

Aaron3219

Senior HTML'ler
Hey liebes Forum,

normalerweise übernimmt ein 'Kollege' immer die Suchmaschinenoptimierung, doch ich fand es mal ganz interessant, den Kram auch mal selber zu können. Bilder Kompressieren ist kein Problem, dass HTML zu reduzieren ebenfalls. Das einzige Problem auf das ich stoße ist,
'JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen'
Nun bin ich ja des Googlens mächtig und habe mich auch schon direkt an die Arbeit gemacht und nun wirklich viele Stunden investiert, die verschiedensten Varianten ausprobiert usw., doch es klappt einfach nicht.

Was above the fold nun bedeutet leuchtet mir bereits ein und ich habe mir auch die Empfehlungen von Google selber angeschaut, doch die haben mich bei CSS-Dateien schonmal nicht nach vorne gebracht.

Bei JS wird es sogar noch etwas lustiger. Ich habe bei allen Unterseiten den gleichen Aufbau, jedoch im Main-Part nur anderen Inhalt. Dementsprechend sind überall die gleichen Scripte eingebunden (+ Jquery 3.2.1). Nun zeigt mir Google auf mancher dieser Unterseiten an, dass NUR CSS-Files above the fold sind, bei anderen Unterseiten blockt nur das Jquery-Script und auf wiederum anderen Seiten zeigt es nicht nur Jquery, sondern auch noch 1-2 andere JS-Script an. Es gibt auch noch ein paar mehr Konfigurationen, die Google da raus schmeißt, aber das sollte erstmal genügen.

Noch ein Teil wäre, dass ich das Browser-Caching für folgende Scripte aktivieren soll:
Also ausschließlich externe JS-Scripte.
Hinzu kommt der Punkt "Bilder optimieren":
also ebenfalls nur externe Bilder.

Nun meine Frage:
Was zur Hölle ist das und wie kann man es beseitigen?

Ich bedanke mich schon für jegliche Antworten!
 
Werbung:
Wenn Du 100 Punkte bei PageSpeed haben willst, müsstest Du eine statische HTML-Datei ohne externes CSS und JS erstellen :)

Wenn Du in Richtung 100 Punkte kommen willst, könntest Du jegliches CSS und JS inline in den Code einbinden - also nicht als externe Dateien. Bei manchen Dateien wie von Google Analytics macht das natürlich nur begrenzt Sinn, weshalb ich eigentlich dazu raten würde das nur zu machen wenn dir Punkte bei PageSpeed wichtiger sind als eine updatefähige Webseite. Wenn ich bei über 90 Punkten bin lasse ich auch die Finger vom Rest :)
 
All mein CSS inline einfügen o_O. Das ist ne Menge Code :D. Also da muss ich mal ganz ehrlich sagen, dass Google da ein bisschen kleinlich ist... Es muss doch nun wirklich genügen, EINE CSS-Datei mit all dem Code zu machen und diese minified hochzuladen. Damit legt man den Entwicklern ja einen Strick um den Hals :mad:!

Gibt es eine Möglichkeit Browser Caching bei externen Scripten zu aktivieren?

Edit:
Was ich mal gelesen habe ist folgendes:
Code:
<link rel="preload" href="css/all.css" as="style" onload="this.onload = null;this.rel = 'stylesheet'">
<noscript><link rel="stylesheet" href="../css-all/grid.css"></noscript>
Das funktioniert beim Computer alles wunderbar, doch auf IOS dann wieder nicht... Da wird einfach gar kein CSS geladen. Kennt da vielleicht jemand einen fix für, denn da meckert Google auch nicht.

Edit 2:
Wenn ich bei über 90 Punkten bin lasse ich auch die Finger vom Rest
Ja seh ich auch so. Doch ich komme beim mobilen nur auf 77, da eben das Browser-Caching-Problem der recaptcha, Analytics und Map-Scripte besteht.
Wie kann ich denn lösen, dass bei manchen Unterseiten JQuery als above the fold angezeigt wird und bei manchen nicht?
 
Zuletzt bearbeitet:
Werbung:
Wie kann ich denn lösen, dass bei manchen Unterseiten JQuery als above the fold angezeigt wird und bei manchen nicht?

Moderne Webseiten sind AJAX-basiert und laden beim navigieren lediglich neue Inhalte in die index.html. JavaScript-Libs werden dabei einmalig aufgerufen und gecached. Insofern stellt sich das Problem mit den Unterseiten nicht.

Wenn dich das Thema PageSpeed so sehr interessiert, leite mobile Browser doch mal eine AMP-Seite weiter.
https://www.ampproject.org

Ich persönlich ignoriere AMP, weil mich das zu sehr einschränken würde. Mein Anspruch ist es eher, dass der Seitenaufbau, zumindest hinsichtlich des initial im Browser sichtbaren Contents (Stichwort: lazy loading) bei einer normalen Internetverbindung nicht länger als 1s dauert.

Spannender als Geschwindigkeitsoptimierungen bei existierender Internet-Verbindung finde ich die allerdings Frage, wie sich Requests handeln lassen, falls der User (zeitweilig) offline ist - z.B. weil er gerade in der U-Bahn sitzt.
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp
 
Moderne Webseiten sind AJAX-basiert und laden beim navigieren lediglich neue Inhalte in die index.html
Ist mir bekannt, doch ich kenne gar nicht so viele Seiten die das machen. Zumindest nicht offensichtlich. Doch können dann die verschiedenen 'Unterinhalte' bei Google indexiert werden?
Ich z.B., finde es durchaus sinnvoll, eine Kontaktseite bei Google gelistet zu haben.

AMP kenn ich bereits und ich war auch schon auf ihrer Seite, das war es dann aber auch schon. Damit werde ich mich mal befassen.

Spannender als Geschwindigkeitsoptimierungen bei existierender Internet-Verbindung finde ich die allerdings Frage, wie sich Requests handeln lassen, falls der User (zeitweilig) offline ist - z.B. weil er gerade in der U-Bahn sitzt.
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp
Hört sich erstmal interessant an, aber ich werde mich erstmal mit den anderen Themen befassen :)
Vielen Dank für die Links
 
Zurück
Oben