Das leidige Pagespeed-Thema - reloaded

[cayuco]

Hallo Community,
aktuell liege ich bei Pagespeed nur im gelben Bereich. Im 1.06er hatte ich Mobile: 88 und Desktop: 92 erreicht.
Aktuell beim 2.02er liege ich gerade einmal bei: Mobile: 72 und Desktop: 85. Desktop bei Detailansicht geht gerade so, aber Mobile ist nicht ausreichend. Die Startseite erreicht max. 82 (gelb).
Google legt nach eigener Aussage Wert auf ausreichend schnelle Seiten - Minimum 85. Ein gewisser Einfluss beim Ranking "kann" die Folge sein.

Neben Bildoptimierung (bloß nicht mit Google-Tool!) spielt das berühmte "above-the-fold" eine große Rolle.

Hier der Hinweis von Google:

https://www.example.com/…sive_flat/javascript/jquery-1.8.3.min.js
https://www.example.com/…vascript/tpl_plugins.min.js?v=1485785815
Optimieren Sie die CSS-Darstellung für die folgenden URLs:
https://www.example.com/…ive_flat/stylesheet.min.css?v=1486476623
https://www.example.com/…_responsive_flat/css/product_inquiry.css
https://www.example.com/…lat/css/tpl_plugins.min.css?v=1485930183
https://fonts.googleapis.com/…ss?family=Play|Open+Sans:300,400,600,700

Hier nun endlich meine Frage. Ist es problemlos möglich einen Teil der genannten Styles bzw. Javascripts nach unten zu verschieben? Bzw. warum wurden diese oben eingebunden. Es heißt doch immer Styles nach oben, Javascript nach unten?

Bevor über Sinn und Unsinn von Pagespeed diskutiert wird, hier Googles eigene Antwort zum Thema:

Laut Search-Console scheint die Dauer für das Herunterladen einer Seite über 3 Sekunden als hoch zu gelten. Zwischen 1,5 und 3 Sekunden als durchschnittlich. Laut John Mueller  differenziert Google zwischen langsamen und schnellen Websites. Sprich es ist unerheblich ob jemand 85 oder 100 Punkte im Page Speed Insights-Tool erreicht. Google Mitarbeiter Gary Illyes konkretisierte diese Aussage zumindest in Bezug auf Mobile. So sei eine Punktzahl von 85 absolut ausreichend.

2016 gab es eine Aussage von John Mueller bei Twitter, in der er eine Geschwindigkeit zwischen zwei und drei Sekunden als schnell bezeichnet. Zudem verweist er darauf, dass die Anzahl der http-Requests nicht entscheidend ist sondern die Ladezeit.

Linkback: https://www.modified-shop.org/forum/index.php?topic=36632.0

[p3e]

Komisch, bei mir hatte sich die Pagespeed bei Google beim Schritt von 1.06 zu 2.0 deutlich verbessert. 2.02 habe ich noch nicht aktiv.

[cayuco]

Witzig, habe jetzt noch einmal die Parse Time getest:
1. Aufruf Produktdetail: Parse Time: 0.102s .
2. Startseite: Parse Time: 0.124s.
(Bei geleertem Cache etc.)

Also wahnsinnig gute Zeiten, wenn ich das richtig verstehe.
Wenn Google also 3sek mindestens verlangt sollte es ich lieben, oder verwechsele ich Äpfel mit Birnen?

[cplasa]

Meines Wissens gibt die Parse Time doch nur die Zeit bis zur Auslieferung nach Abarbeitung der PHP-Scripte und Datenbankabfragen an. Ob der Browser die Inhalte nun schon komplett geladen hat wird in der Parse Time nicht gemessen.

Ausschlaggebend ist doch die tatsächliche Ladezeit.

Zudem verweist er darauf, dass die Anzahl der http-Requests nicht entscheidend ist sondern die Ladezeit.

Das hängt doch unmittelbar zusammen (meiner Erfahrung nach). Je mehr Requests auf einem Server, umso höher die Ladezeit (Es sei denn, wir arbeiten mit CDN)

Also die Anzahl der http-Requests lässt sich verringern durch:
- CSS Sprites
- (Wo möglich) Zusammenfassen von CSS und Javascript

Einsparungen im Übertragungsvolumen:
- Minify JS
- Minify CSS
- Minify HTML (so, dass es noch lesbar ist und mal überprüfen, ob jeder HTML Kommentar notwendig ist)
- Komprimierung von Grafiken https://tinypng.com/
- Verwendung von GZIP
- Browsercaching aktivieren (mod_expires.c)

Was die GZIP Komprimierung angeht, so greift diese bei einer Aktivierung im modified-Backend nicht bei JS und CSS. Hier muss das ganze also Serverseitig aktiviert werden (z.B. mod_deflate.c).

Modified "Aufräumen" - also unnötige Scripte nicht mehr bereitstellen.

Um nur ein Beispiel zu nennen (und da gibt es viele - je nach Shop und den Bedürfnissen ist das aber sehr individuell)

Boxen die im Template nicht geladen werden, können unter /shoproot/templates/xtc5/source/boxes.php auskommentiert werden. Das spart Zeit beim Rendern (wenn auch minimal).

[Bonsai]

Ist es problemlos möglich einen Teil der genannten Styles bzw. Javascripts nach unten zu verschieben? Bzw. warum wurden diese oben eingebunden. Es heißt doch immer Styles nach oben, Javascript nach unten?

Hängt vom Template ab!

Auch ist es bei HTML5 NICHT mehr notwendig das nach unten zu packen, arbeite einfach damit:
http://www.w3schools.com/tags/att_script_defer.asp

Da hilft nur Testen! Nach meiner erfahrung ist zumindest die jquery base in Head notwendig, weil Dir sonst irgendwelche inline JS wegrauchen (1.06er Erfahrung, habe noch keinen 2.0 optimiert)

Noch Tipps:
gtmetrix.com
Komprimiert Dir die Bilder automatisch und ist generell hilfreich um die Seite zu prüfen

Google mal "Modified on steroids"

Google mal "mod_pagespeed"

[cayuco]

Vielen Dank an Euch beiden, ich schau mir das heute Nacht einmal an.

Apropos cplasa - wirklich tolles Layout Dein Shop. Respekt. Ich "hasse" solche Wettbewerber. 

[cayuco]

Nach einigen Optimierungen habe ich die Padespeed bei Produktseiten auf 89/90 bei Desktop und 74 (hier ist noch zu tun) bei Mobile bekommen. Lt GMetrix erreiche ich bei Produktseiten/Kategorieseiten ca. die 2,5-3 Sekunden-Grenze.
Den Hauptanteil hatte dabei die Bilder-Reduzierung - mit IrfanView gut zu handeln.
Dann gnadenloses minifying von CSS-, und Javasripts. Einige CSS-Dateien (aus installierten Modulen) konnte man zusammenfassen.
BrowserCaching optimieren u.a.

Allerdings muss man sagen, dass Modified bereits sehr gute Ausgangswerte von Haus aus mitbringt - lt. GMetrix.
Nochmals Danke für Eure Tipps.