Neu Google Pagespeed Optimierung -

tevin

Aktives Mitglied
14. August 2017
23
2
Danke für die schnelle Rückantwort. Kannst Du mir einen Tipp geben wie ich den Shop über PageSpeed optimeiren kann? Die aktuelle Ladezeit ist nicht gut.
 

Stephan K.

Sehr aktives Mitglied
14. Mai 2014
1.183
269
Du kannst - als Beispiel - die Ressourcen runterladen und selbst hosten, musst dann natürlich die Pfade ändern, von wo aus sie aufgerufen/geladen werden.
Gerade shopvote ist nicht optimiert und auf die Schnelle recht einfach, da es klein ist und nur an wenigen Stellen vorkommt. Runterladen, komprimieren/minify und auf den Server damit, Adresse ändern, fertig. Ebenso das javascript davon.

Dabei entgehen dir natürlich updates. Aber die kannst du mit einer Routine prüfen. Aber das ist nicht so wichtig bei shopvote.
 

elevennerds.de

Sehr aktives Mitglied
23. September 2015
1.214
188
Runterladen und selbst hosten wird das Problem nicht lösen, da die Ressourcen dann immer noch das Rendern blockieren.

Die JS-Dateien könnten asynchron geladen werden - dies kann jedoch die Funktion der Seite beeinträchtigen. Bei den CSS Dateien müssen alle CSS Definitionen aus dem First-View-Bereich inline eingebunden werden.
 

Stephan K.

Sehr aktives Mitglied
14. Mai 2014
1.183
269
Runterladen und selbst hosten wird das Problem nicht lösen, da die Ressourcen dann immer noch das Rendern blockieren.
Ja, das ist richtig. Es wird aber die Anzahl der requests auf alle möglichen externen Seiten reduziert, die - oh Wunder - eben auch blockieren können. Und er könnte sie alle in seine custom.css reinklatschen und eine css draus machen. Nur so als Beispiel.
Die Schriftarten kann man laden lassen, sofern irgendein Element sie benötigt. Wäre ebenso eine leichte Korrektur.

Wenn er das rendering-Problem lösen möchte, muss er die jtl3.js korrigieren. Aber die ist dermaßen alt und betrifft so ziemlich den ganzen Shop, dass das eine lange Arbeit werden wird.

Bei den CSS Dateien müssen alle CSS Definitionen aus dem First-View-Bereich inline eingebunden werden.
Oder eben nur eine header.css machen, die nicht inline eingebunden wird, da sie ja so gut wie alle Seiten betrifft.
 

elevennerds.de

Sehr aktives Mitglied
23. September 2015
1.214
188
Es wird aber die Anzahl der requests auf alle möglichen externen Seiten reduziert
Darum geht es in diesem Post gar nicht, die Frage hier dreht sich um blockierende Ressourcen beim Rendern einer Webseite.

Und er könnte sie alle in seine custom.css reinklatschen .
Unnötiges CSS ist ebenfalls ein Bewertungskriterium in Google-Pagespeed, keine gute Idee.

Einfach irgendwas reinklatschen hilft hier nicht weiter. Wenn man einen Shop wirklich bei Pagespeed hochbringen will, muss man das Template grundlegend überarbeiten, da Shoptemplates meist überhaupt nicht unter solchen Gesichtspunkten entwickelt werden.
 

Stephan K.

Sehr aktives Mitglied
14. Mai 2014
1.183
269
"blockieren" ist hier gleichbedeutend mit "Computer muss auf Eingaben warten", richtig? Dann sind requests oder zigfache .css-Öffnungen ...

Wenn man 5 .css zu einer .css macht, die mit ihren paar KB im Cache liegt, statt einmalig fünf Mal mit Minify komprimiert und übertragen zu werden...?
 

elevennerds.de

Sehr aktives Mitglied
23. September 2015
1.214
188
"blockieren" ist hier gleichbedeutend mit "Computer muss auf Eingaben warten", richtig? Dann sind requests oder zigfache .css-Öffnungen ...

Wenn man 5 .css zu einer .css macht, die mit ihren paar KB im Cache liegt, statt einmalig fünf Mal mit Minify komprimiert und übertragen zu werden...?

Nein, du liegst völlig falsch, es geht hier einzig und allein um den Bereich einer Webseite, der als erstes ohne scrollen sichtbar ist. Für diesen Bereich sollten alle CSS Ressourcen inline verfügbar sein, um diesen Bereich so schnell wie möglich rendern zu können.

Ob Du dann später noch css nachlädst, spielt für diesen Punkt der Bewertung in Google Pagespeed keine Rolle.
 

Stephan K.

Sehr aktives Mitglied
14. Mai 2014
1.183
269
Die Frage war ja, wie man die Ladezeit verbessern kann.

1. Selbst hosten und maschinell komprimieren sind da durchaus angebrachte Dinge, solange wir uns nicht standardmäßig bei http/2 bewegen.
2. Ein Request blockiert sehr wohl das rendering, denn er muss ja die externe, in diesem Fall sogar nicht optimierte .css laden und sofort ausführen. Hier gibst du durch den eigentlich 'bad practice' inline-Vorschlag ja selbst zu, dass das eine Rolle spielt. Das kann beim JTL- Shop je nach Template durchaus einiges an Kilobyte mit sich bringen, wenn man für 5 Ansichten (responsive) das .css inline einfügen möchte. Hier die Prioritäten auf above-the-field zu legen ist richtig, aber das gilt nur für ein paar Zeilen Code. Ich glaube pauschal sagen zu können, dass das beim JTL-Shop nicht der Fall ist; es sei denn, die Startseite ist nur ne simple Landing-Page. Für alle anderen Fälle wäre die externe.css von Vorteil, da sie dann im Cache liegt und nicht bei jedem einzelnen Aufruf der Seite/browsing jedes Mal unnötig neu geladen wird. Daher ja auch 'bad practice'.
3. Ich glaube, dass es durchaus sinnvoll ist und gängige Praxis, so wenig .css oder .js-Dateien wie möglich zu haben und sie alle in eine Datei zu bringen, wo thematisch zugehörig. Daran hält sich so ziemlich jeder.
 

Xantiva

Sehr aktives Mitglied
28. August 2016
1.787
314
Düsseldorf
Wenn Du den Hinweis weg haben möchtest "blocking above the fold", dann kannst Du das nur mit inline CSS erreichen. So wie Google das auch selber vorschlägt:

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
If the external CSS resources are small, you can insert those directly into the HTML document, which is called inlining. Inlining small CSS in this way allows the browser to proceed with rendering the page. Keep in mind if the CSS file is large, completely inlining the CSS may cause PageSpeed Insights to warn that the above-the-fold portion of your page is too large via Prioritize Visible Content. In the case of a large CSS file, you will need to identify and inline the CSS necessary for rendering the above-the-fold content and defer loading the remaining styles until after the above-the-fold content.

Aber ...

... es gibt kaum etwas aufwendigeres, als ein Template für einen Online- Shop, mit seinen vielen verschiedenen Arten von Seiten: unterschiedliche Produktlisten, aufwendige Produktdetails, Checkoutseiten, Contentseiten, usw. Dazu soll natürlich alles auch noch responsive und günstig sein. Mit günstig meine ich hier leicht wartbarer Code für Entwickler, gut strukturiert und gekapselt. Ein simples Blog braucht neben der Startseite noch ein Layout für die Artikel und ggf. statische Seiten.

Sollte der Shop jetzt das benötigte "above the fold" CSS inline ausliefern und den Rest dann als CSS-Datei einbinden, muss die ganze Kapselung aufgebrochen werden. Bei einer Produktdetailseite sieht man z. B. schon das Produktfoto, also muss der Code dafür inline mit ausgeliefert werden. Die Bewertungen, Beschreibung, etc. sieht man noch nicht, also sollte das extern eingebunden werden. Das würde die Komplexität eines Templates deutlich erhöhen, es wäre kaum wartbar (= teuer). Und der Shop müsste überhaupt erst mal in die Lage versetzt werden, je nach Art der Seite noch individuelles CSS Inline mit auszugeben.

Zur Performancesteigerung kannst Du noch das Preloader Plugin verwenden: https://forum.jtl-software.de/threads/performancesteigerung-durch-preloader-plugin.102907/
Damit bekommt der Browser beim ersten Aufruf gleich im Header die Information mit, welche Dateien er als nächstes benötigt, ohne den Quellcode der Seite komplett zu laden und zu parsen.
 

elevennerds.de

Sehr aktives Mitglied
23. September 2015
1.214
188
1. Selbst hosten und maschinell komprimieren sind da durchaus angebrachte Dinge,
Hast Du Dir mal überlegt, dass es sehr viel wahrscheinlicher ist, dass der Browser eine Datei von jquery.com bereits im Cache hat? Eben weil sich "alle" solcher Techniken bedienen.

2. Ein Request blockiert sehr wohl das rendering
Nein, muss nicht sein. Versuch bitte einmal zu verstehen, was "above the fold" bedeutet. Dann wirst du auch erkennen, dass inline css nicht per se "bad practice" ist.
 

Xantiva

Sehr aktives Mitglied
28. August 2016
1.787
314
Düsseldorf
Hast Du Dir mal überlegt, dass es sehr viel wahrscheinlicher ist, dass der Browser eine Datei von jquery.com bereits im Cache hat? Eben weil sich "alle" solcher Techniken bedienen.

Das spare ich mir und hoste selber, nachdem genau jQuery vor ein paar Tagen versucht hat die Dateien mit einem falschen Zertifikat auszuliefern: https://forum.jtl-software.de/threads/jquery-cdn-funktioniert-nicht-falsches-ssl-zertifikat.110222/

Da war der Shop einige Zeit komplett ohne Bilder und es hat vieles nicht mehr funktioniert ...
 

Stephan K.

Sehr aktives Mitglied
14. Mai 2014
1.183
269
Hast Du Dir mal überlegt, dass es sehr viel wahrscheinlicher ist, dass der Browser eine Datei von jquery.com bereits im Cache hat? Eben weil sich "alle" solcher Techniken bedienen.
Ja, das ist richtig. Nun kann man abwägen, ob man kein http/2 benutzt und wie wahrscheinlich es ist, eine relativ alte jQuery Version zu nutzen, die beim Client im Cache liegt, oder eben nicht und ob man den zusätzlichen request mit vielen weiteren Optimierungen einspart. Neben den vielen jQuery-Versionen, die man, der Wahrscheinlichkeit nach im Cache zu haben, trifft oder nicht, gibt es ebenso noch viele weitere Hoster dieser Dateien, die ggf. ohne Hash quasi individuelle Dateien darstellen. Macht dann mal eben 300 jQueries, die es Pi mal Daumen geben könnte.

Nein, muss nicht sein. Versuch bitte einmal zu verstehen, was "above the fold" bedeutet. Dann wirst du auch erkennen, dass inline css nicht per se "bad practice" ist.
Also du antwortest auch nur auf das, wo du Recht hast, richtig? Und was ist mit den geschätzt 20 KB für das kritische stylesheet im responsive JTL- Shop? Willst du das alles inline einbinden und im Header für jede Seite laden lassen?
Unnötiges CSS ist ebenfalls ein Bewertungskriterium in Google-Pagespeed, keine gute Idee.
Du ignorierst vieles, was gesagt wurde. Und widersprichst dir selbst. 20 KB ist unnütz und viel zu viel für inline. Gerade, da ab 14 KB per request im Prinzip Schluss ist.
Ich hab mir seinen Shop jetzt nicht angeschaut, aber ich gehe davon aus, dass das, was mit JTL standardmäig auf die Beine gestellt wird, keine simple landingpage ist, die sofort lädt, aber außer Text keinen Inhalt hat.

Sag uns doch mal bitte, wie genau du vorgehen würdest, um beispielsweise das Shopvote-Plugin, das er auf seiner Seite hat und sowohl zweifach extern nicht optimiertes .css sowie zweifach extern nicht optimierte .js (die jeweils 1-2 weitere, im code liegende externe Requests stellen) als Server-Request rausschickt, zu implementieren ? Da es sich als externe Ressource nicht kompimiert und mit minify angewendet wird und noch dazu 4 requests insgesamt sind. Ja, man kann es asynchron laden lassen. Das war dein ganzer Vorschlag. Und weiter?
Wenn man schon optimiert, kann man doch gleich Nägel mit Köpfen machen.
Thematisch zusammengehörig? Check.
Multiple sheets und scripts? Check.
Non-Minified? Check.
Nicht asynchron? Check.
Also mit http/1.x und insbesondere dem JTL-Shop kann man durchaus einiges optimieren.
Mit http/2 kann man sich vieles sparen, weil die Technik mehr kann. Trotzdem ist es verschenkte Effizienz, wenn man es ignoriert.
Nicht umsonst wirbt solutions360 mit nem "rasend schnellen" Template, weil das eben keine Stärke von JTL-Shop ist.

Bisher höre ich von dir immer nur: wird das Problem nicht lösen, hilft nicht weiter, etc. pp. und du sprichst dich nur für deine Vorschläge aus. Anstatt hier vielleicht mal Lösungen zu kombinieren? Ich sage dir auch, wenn du recht hast.

@Xantiva jQuery lässt sich auch von anderen CDNs beziehen, z.B. Google oder Microsoft, wenn man das möchte. Kann man ein wenig vom Standort und den Ping-Zeiten abhängig machen.

Ich denke, dass @tevin erstmal der Schädel brummt, weil ja nun viel spezielle Materie erwähnt wurde.
Da ist es für den Anfang ausreichend, wenn er das verzögerte Laden implementiert. Ist ja auch das einfachste.
 
Ähnliche Themen
Titel Forum Antworten Datum
Neu Google Enhanced Conversion Tracking Email JTL Datalayer Technische Fragen zu Plugins und Templates 2
Neu Google shopping JTL SHOP 4 - "geht" nicht mehr Allgemeine Fragen zu JTL-Shop 1
Neu JTL Google Shopping Plugin - Bilder Updaten Plugins für JTL-Shop 3
Neu Wie andere Länder und Sprachen vom Google Shopping Plugin mit dem Merchant Center verbinden Plugins für JTL-Shop 5
Neu Cookies für Google Ads User helfen Usern - Fragen zu JTL-Wawi 0
Neu Google Shopping Plugin - Artikel filtern Plugins für JTL-Shop 3
Neu Google Pay ohne Funktion Plugins für JTL-Shop 0
Neu Google - Vaterartikel und Kinderartikel Smalltalk 4
Neu Konfigurator Einzelteile in Google und im Shop sichtbar Plugins für JTL-Shop 6
Neu Google Bilder Bot Zugriff auf /dbeS/bild.php?a=1375538&n=1&url=0&s=0 Allgemeine Fragen zu JTL-Shop 3
Neu Google reCaptcha v2 Plugins für JTL-Shop 1
Google Workspace und JTL Hosting / Bestätigung der Domain Einrichtung JTL-Shop5 1
Neu JTL Google Shopping Plugin - Farbe und Größe bei mehreren Sprachen Plugins für JTL-Shop 1
Neu Meta-Daten vom Artikel werden von Google nicht genutzt Allgemeine Fragen zu JTL-Shop 3
Neu Umsatz Unterschiede zwischen JTL Shop und Google Analytics Allgemeine Fragen zu JTL-Shop 0
google shopping plugin - Grundpreis + Sonderpreis Gelöste Themen in diesem Bereich 10
In Bearbeitung Workflow-Management Optimierung/Filterung JTL-Workflows - Ideen, Lob und Kritik 4
Neu Merkmalfilter mit unterschiedlichen Ergebnissen? Optimierung für SEO Betrieb / Pflege von JTL-Shop 10

Ähnliche Themen