CSS above the fold

Druckbare Version

14.11.2017, 13:57
vfnm

Contao Pagespeed /Javascript zusammenfassen, JS/CSS above the fold

Hallo ihr Lieben!

Ich mache mir derzeit viele Gedanken zur Pagespeed Optimierung für Contao. Derzeit verwende ich noch Version 3.5.

1. Thema => Requests:

Was ich möchte - die Javascripte in ein File zusammenfassen (colorbox, tablesorter, …)
Dafür gibt es ja an und für sich eine suprige Beschreibung von rocksolid:
https://rocksolidthemes.com/de/conta...eit-optimieren

Jetzt dürfte das für eine ältere Version gewesen sein und ich bin zu php unwissend um das für das aktuelle Template umzusetzen. Gibt es dafür eine neuere Beschreibung? Oder kann mir jemand nen Tip geben, wie ich die einzelnen verwendeten Schnipsel verstehen lerne?

2. Thema => Rendering blockierender Javascript und CSS Code:

Theoretisch verstehe ich den Punkt natürlich schon, es sollen Inhalte die für die Darstellung „above the fold“ benötigt werden sofort geladen werden und das eigentlich inline. Allerdings natürlich nur, wenn es nicht zu viel Code ist.

Und hier ist das Problem - in der Praxis ist es meist viel Code zum Beispiel jQuery.
Ist die Verwendung von jQuery & Co also automatisch ein Hindernis um den Google Pagespeed zufrieden zu stellen?
14.11.2017, 16:36
Ling

Hoi,
zu 1: Das ist eigentlich nicht so wild. Solange du dafür sorgst das du nur das JS auf der jeweiligen Seite hast, dass du auf dieser auch wirklich benötigst.
zu 2: Da musst du erst einmal herausfinden was für dich das relevante "Above the fold" ist. JS sollte btw. immer im Footer sein (bis auf wenige Ausnahmen).
15.11.2017, 09:38
vfnm

Zitat:

Zitat von Ling

zu 1: Das ist eigentlich nicht so wild. Solange du dafür sorgst das du nur das JS auf der jeweiligen Seite hast, dass du auf dieser auch wirklich benötigst.

Also ich persönlich bin bisher auch immer diesen Kurs gefahren. Jetzt arbeite ich bei einem Projekt mit einer SEO Firma zusammen die der Kunde extra engagiert hat. Die meinen es wäre sehr gut unter 30 Requests zu sein auf jeder Seite. Nachdem es einige Bilder gibt auf der Seite möchte ich die Requests für die Scripte auf eines reduzieren.

Zitat:

Zitat von Ling

zu 2: Da musst du erst einmal herausfinden was für dich das relevante "Above the fold" ist. JS sollte btw. immer im Footer sein (bis auf wenige Ausnahmen).

Ja klar ist JS vor dem </body> einzubauen.

Mein konkretes Problem ist, kann ich jQuery verwenden, wenn ich wirklich eine richtig superne Bewertung im Google Pagespeed haben möchte. In der Praxis muss ich jQuery immer gleich von Anfang an laden - weil ich alles mit jQuery mache. jQuery ist groß und damit werd ich dieses Pagespeed Kriterium nie erfüllen.

Welchen Weg gehen da andere? Nichts mit jQuery machen?
Nur unkritische Sachen mit jQuery machen den Rest mit purem JavaScript?

Mein derzeitiger Score ist eh nicht schlecht (Mobil 70, Desktop 94) aber ich arbeite zum ersten Mal mit dieser SEO Bude zusammen und möcht die gern beeindrucken um gute Nachrede zu generieren ;).
15.11.2017, 09:46
Spooky

Zitat:

Zitat von vfnm

In der Praxis muss ich jQuery immer gleich von Anfang an laden - weil ich alles mit jQuery mache.

Musst du das? Und was meinst du mit "Anfang"? Wenn du mit "Anfang" den <head> meinst: jQuery musst du nur dann im <head> laden, wenn du auch andere JavaScripts direkt im <head> verwendest, die jQuery brauchen.

Zitat:

Zitat von vfnm

jQuery ist groß und damit werd ich dieses Pagespeed Kriterium nie erfüllen.

Die Größe spielt bei dem von dir angesprochenen PageSpeed "Problem" keine Rolle.
15.11.2017, 10:04
Ling

Zitat:

Zitat von Spooky

Die Größe spielt bei dem von dir angesprochenen PageSpeed "Problem" keine Rolle.

Jau, so kenne ich das auch. Wenn du mutig bist kannste ja die Module zusammklickern die du in jQuery benötigst und schauen was du sparst.

Was die Requests anbelangt, schau das du Schritt 5 der RockSolid Anleitung beachstest. Du musst bei den Requests auch daran denken, dass jede angeforderte Ressource auch einzeln gecached wird, was ja in deinem Interesse ist.
15.11.2017, 10:41
mlweb

Zitat:

Zitat von vfnm

Mein derzeitiger Score ist eh nicht schlecht (Mobil 70, Desktop 94) aber ich arbeite zum ersten Mal mit dieser SEO Bude zusammen und möcht die gern beeindrucken um gute Nachrede zu generieren ;).

Pagespeed ist nicht das einzige Performance-Testtool. Es gibt da noch einige andere. Man sollte m.E. immer mehrere Tools nutzen. Die verschiedenen Tools wichten unterschiedlich, geben unterschiedliche Tipps. Die einzelnen Hinweise muss man bezogen auf das jeweilige Projekt sehen. Nur der Score selbst ist für die Entscheidung, ob/welche weiterführenden Maßnahmen durchgeführt werden sollen, nicht aussagekräftig genug.

Performance einer Seite ist wichtig, sogar sehr wichtig für SEO, aber nur ein Kriterium von sehr sehr vielen.
Eine gute SEO-Agentur sollte m.E. den Schwerpunkt der Suchmaschinenoptimierung an anderer Stelle setzen. Deine Pagespeed Scorewerte zeigen doch, dass es keine gravierenden Mängel gibt. Jetzt kommt es darauf an, was konkret bemängelt wird und wie das Verhältnis Aufwand/Nutzen aussieht. Bei diesem Part sollte immer auch der Kunde mit einbezogen werden.

JS/CSS above the fold ist etwas, was bei vielen Seiten bemängelt wird, weil der Aufwand den man dafür betreiben muss, vergleichsweise hoch ist.

Stutzig macht mich

Zitat:

Zitat von vfnm

Die meinen es wäre sehr gut unter 30 Requests zu sein auf jeder Seite.

So pauschal stimmt das einfach nicht. Für eine Seite ohne Bilder wäre das m.E. viel zu viel. Für eine Fotgrafenseite mit aufwendigen Bildergalerien kommt man damit nicht unbedingt hin. Es ist auch nicht immer förderlich eine Strukturveränderung durchzuführen um dieses Limit einzuhalten. Aber wie gesagt das hängt ganz konkret vom Projekt ab und vom vorhandenen Budget.
21.11.2017, 20:40
mpietsch

Hi,

der auch von Google-Mitarbeitern zu hörende Leitsatz ist: "Erst messen, dann optimieren". Klar, manche Millisekunde lohnt den Aufwand nicht. Aber umso besser, wenn man seinen Workflow gleich darauf ausrichtet.

Absolut spannendes Thema, aber bevor du in die Tiefen absteigst, lass dich ruhig von PageSpeed-Insights führen. Die haben ihren Sinn.

Wichtig für deinen Nutzer ist, schnell etwas zu sehen. Folgender Workflow wäre denkbar:
- Seite in der Entwicklung erstmal ohne JQuery etc. vorbereiten: alles erstmal fertig stylen mit dem vorhandenen Markup und z. B. "überschüssige" Slider-Elemente verbergen.
- dabei CSS schon sortieren auf zwei Stapel: kritsches CSS für die ohne Scrollen sichtbaren Bereiche (Header usw.) und anderes CSS (Footer usw. und z. B. an Slider-Markup angepasstes CSS)
- im HTML-Head das kritische CSS inline einbinden (z. B. im Template zwischen style-Tags die Datei inkludieren)
- alles JavaScript in der benötigten Reihenfolge (Abhängigkeiten!) in einer Datei sammeln und asynchron einbinden
- das sonstige CSS als externe Datei einbinden und so laden, dass es das Rendern nicht aufhält (siehe z. B. https://jakearchibald.com/2016/link-in-body/)
- alle anderen JavaScript- und CSS-Aufrufe entfernen

Beim JS ist das tricky: Wenn du mehrere Dateien asynchron lädst, kannst du nicht sicher sein, dass z. B. JQuery als Abhängigkeit geladen ist vor anderen. Deshalb müsstest du sie selbst aneinanderreihen. Kannst du auch von einem Task-Runner automatisieren lassen. Es gibt auf Github eine Diskussion, ob man das von Haus aus optimieren kann.

Jedenfalls wäre es vorteilhaft, wenn zumindest der obere Teil deiner Seite sehr zügig laden könnte. Etwas verzögert tauchen dann z. B. Slider-Pfeile auf, sobald er geladen ist.

Das macht die Seite für den Nutzer gefühlt schnell. Und das ist eigentlich das Ziel von Google hinter den PageSpeed-Empfehlungen. Und das "doppelte" CSS (z. B. für ohne und mit Slider) braucht man, damit die Seite beim schrittweisen Laden nicht zerschossen aussieht.

Hoffe, das hilft als Überblick. :)

Wegen große Datei und wenig Requests: Soweit ich das verstehe, brauchen größere Dateien länger. Mehrere könnten schon parallel geladen werden. Also im Zweifel mal durchrechnen mit Roundtrips ;) oder probieren und in den DevTools in "Netzwerk" oder "Performance" näher untersuchen.

LG