Wichtiges SEO-Kriterium: Ladezeit deines Shops

[rockmartin]

Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.

Das steht immer noch bei mir!

[Matt]

Danach habe ich den Shop mit dieser Konfiguration wieder eine Zeit laufen lassen. Resultat nach ca. 1 Woche. Keinerlei veränderungen am Google Page Speed. Danach habe ich die .htaccess wieder auf Original Stand gebracht.

Mit was testet du denn? Und warum wartest du eine Woche? Ich hab hier 89 von 100 für deinen Shop.

[Trucker05]

Hab ich Ihm eine Seite zuvor auch schon gesagt.

Er testet über Pagespeed Online (einfach mal googeln)...hab ich auch noch nie geschaut...schau immer über Firebug.

Aber da ist es echt wie von Ihm beschrieben

[rockmartin]

So, Google Page Speed Online hat es nun auch mit bekommen das sich was an der Seite getan hat. 81/100 Punkten! Allergings erscheint bei Medium priority immer noch das ich Browser Cache verwenden soll. Für folgende Dateien.

https://developers.google.com/pagespeed/#url=www.hoffrichter-shop.de&mobile=false&rule=LeverageBrowserCaching

Mit was testet du denn? Und warum wartest du eine Woche? Ich hab hier 89 von 100 für deinen Shop.

Ich habe gedacht das Googel manchmal nicht so schnell ist und den Page Speed nicht jede Stunde aktualisiert. Deswegen 

[Matt]

https://developers.google.com/pagespeed/#url=www.hoffrichter-shop.de&mobile=false&rule=LeverageBrowserCaching

Stimmt aber nicht. Siehe beispielsweise http://web-sniffer.net/?url=http%3A%2F%2Fwww.hoffrichter-shop.de%2Flang%2Fenglish%2Ficon.gif

Mit was testet du denn? Und warum wartest du eine Woche? Ich hab hier 89 von 100 für deinen Shop.

Ich habe gedacht das Googel manchmal nicht so schnell ist und den Page Speed nicht jede Stunde aktualisiert. Deswegen 

Page Speed online scheint etwas von Kaffeesatzlesen zu haben. Die Änderungen schlagen nicht sofort durch. Nimm eine Browserextension. Alles andere verbrennt nur Zeit. Page Speed gibt es sowohl für Firefox als auch für Chrome.

[Thomas K.]

Hey,

der Thread ist super, von 61 direkt in die 90er.

Das verringern von Querys funktioniert folgendweise genial einfach. Ersetze alle <script includes or css rels einfach mit include anweisungen:

Code: PHP  [Auswählen]

<script type="text/javascript">
<?php
        include('templates/'.CURRENT_TEMPLATE . '/javascript/jquery.js');
        include('templates/'.CURRENT_TEMPLATE . '/javascript/jquery.hoverIntent.minified.js');
        include('templates/'.CURRENT_TEMPLATE . '/javascript/jquery.fancybox-1.3.2.pack.js');
        include('templates/'.CURRENT_TEMPLATE . '/javascript/jquery-ui-1.8.18.custom.min.js');
        include('templates/'.CURRENT_TEMPLATE . '/javascript/general.js');
?></script>
 

[Matt]

Das verringern von Querys funktioniert folgendweise genial einfach. Ersetze alle <script includes or css rels einfach mit include anweisungen:

Nicht unbedingt im Sinne des Erfinders. Das reduziert zwar deine HTTP-Requests, erhöht aber die Größe der jeweiligen Seite (und jQuery ist eher kein Leichtgewicht) und, was noch wichtiger ist, verhindert das effektive Caching dieser Sachen, der komplette jQuery-Kram wird also jedesmal zwangsweise wieder mit übertragen. Auf jeder Seite.

[web0null]

Hi schneller,

das ist besser (schneller ): http://code.google.com/p/minify/

[Thomas K.]

ahh danke. außerdem bitte bei meiner variante beachten, dass css dateien oft relative pfade zu bildern haben und man für manche server die javascript dateien in einzelne script blöcke packen sollte

[Matt]

für manche server die javascript dateien in einzelne script blöcke packen sollte

Was sollen das für Server sein? Und was genau soll denn der Server kaputt machen, wenn man es nicht tut?

[Thomas K.]

das ist meine erfahrung. lokal kein problem. online muss ich um jede include anweisung einen eigenen skript block packen.

PS:
Wollen wir aus diesem Thread mal eine Anleitung basteln? Die Tipps sind hervorragend, allerdings könnte man die auch gerne in den 1. Post schreiben.
Grüße

[kaisa]

Danke für den Tipp mit Base64 Codierung. Es gibt ja oft kleine Sprites, die man dann direkt in CSS einbauen kann und spart einige http-Requests.

Wie kombiniere ich das nun im Custom Tempalte, wenn so eine Datei mehrfach in den CSS-Dateien auftaucht und nicht mehr ganz so klein ist. Es wäre ja unsinnig, den Code immer zu wiederholen und auch gerade im Bezug auf CSS-Sprites, wo die Datei dann unterschiedlich positioniert wird!?

Hier ein CSS-Beispiel:

Code: PHP  [Auswählen]

/* WARENKORB */
/* keine produkte im warenkorb */
#topnavi_container li#navi_cart_empty{
   background: url(../img/global/cartbox_button_sprite.gif) no-repeat 0 0 !important;
    position: absolute;
    line-height: 50px;
    width: 200px;
    right: 0px;
    top: 0px;
    width: 200px;
    display: none;
    padding-right: 0 !important;
}
#topnavi_container li#navi_cart_empty:hover{
   background: url(../img/global/cartbox_button_sprite.gif) no-repeat 0 -50px !important;
}

/* produkte im warenkorb */
#topnavi_container li#navi_cart_full{
   background: url(../img/global/cartbox_button_sprite.gif) no-repeat 0 -100px !important;
    position: absolute;
    line-height: 50px;
    width: 200px;
    right: 0px;
    top: 0px;
    width: 200px;
    display: none;
    padding-right: 0 !important;
}

[Godzilla]

Danke für den Tipp mit Base64 Codierung. Es gibt ja oft kleine Sprites, die man dann direkt in CSS einbauen kann und spart einige http-Requests.

Wie kombiniere ich das nun im Custom Tempalte, wenn so eine Datei mehrfach in den CSS-Dateien auftaucht und nicht mehr ganz so klein ist. Es wäre ja unsinnig, den Code immer zu wiederholen und auch gerade im Bezug auf CSS-Sprites, wo die Datei dann unterschiedlich positioniert wird!?

Du solltest den CSS-Code dann inline einfügen.
Wenn du das nicht willst, dann mache das wie folgt:

Code: CSS  [Auswählen]

.abc,.abc2,.abc3,.abc3{background: url(../img/global/cartbox_button_sprite.gif) no-repeat 0 0 !important;}

So taucht das ganze nur einmal auf.

[kaisa]

Du solltest den CSS-Code dann inline einfügen.
Wenn du das nicht willst, dann mache das wie folgt:

Code: CSS  [Auswählen]

.abc,.abc2,.abc3,.abc3{background: url(../img/global/cartbox_button_sprite.gif) no-repeat 0 0 !important;}

So taucht das ganze nur einmal auf.

Ich will bestimmt nicht base64 sprites inline im template oder im source einbringen und lass es lieber in der css-datei.

Kann ich dann trotzdem die restlichen Definitionen hinzufügen, also z.B. so:

Code: PHP  [Auswählen]

.abc,.abc2,.abc3,.abc3{background: url(../img/global/cartbox_button_sprite.gif) no-repeat 0 0 !important;}

.abc{    line-height: 50px;
    width: 200px;
}
.abc2 {     line-height: 20px;
    width: 150px;
display: none;
}
 

Und kann ich einfach "background: no-repeat 0 -100 !important;" angeben, ohne die URL zu wiederholen?

also so:

Code: PHP  [Auswählen]

#topnavi_container li#navi_cart_empty li#navi_cart_full {
background: url(../img/global/cartbox_button_sprite.gif) no-repeat 0 0 !important;}

#topnavi_container li#navi_cart_empty{
   position: absolute;
    line-height: 50px;
    width: 200px;
    right: 0px;
    top: 0px;
    width: 200px;
    display: none;
    padding-right: 0 !important;
}
#topnavi_container li#navi_cart_empty:hover{
  background: no-repeat 0 -50px !important;
}
 
/* produkte im warenkorb */
#topnavi_container li#navi_cart_full{
  background: no-repeat 0 -100px !important;
    position: absolute;
    line-height: 50px;
    width: 200px;
    right: 0px;
    top: 0px;
    width: 200px;
    display: none;
    padding-right: 0 !important;
}
 

oder könnte man letzteres nicht auch kürzen, da alles gleich ist außer background no-repeat?

[Godzilla]

Wenn man die Ladezeit wirklich optimieren möchte, sollte auch auf jeden Fall die Anzahl der HTTP-Requests so gering wie möglich gehalten werden. Wenn man dann auch noch mit verschiedenen CSS-Dateien arbeitet und nur 6-8 Produkte auf der Startseite hat, ist auch bei einem modified eCommerce Shopsoftware und den dazugehörigen Apache Konfigurationen eine Pagespeed von 100/100 drin.

Man kann auch eine Startseite oder eine Kategorienseite mit 25 Bildern auf 100/100 bekommen und dies sowohl in der "Desktop"- wie in der "Mobile"-Version.
Wobei 100/100 nichts wirklich aussagekräftig ist. Wenn eine Seite z.B. auf einem Handy mehr als 1 Sekunde! braucht, dann ist sie laut Google langsam. Wobei es eigentlich einfacher ist eine Mobile-Version auf <1 Sekunde zu bekommen als eine Desktopversion.