Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Wichtiges SEO-Kriterium: Ladezeit deines Shops

    Godzilla

    • Schreiberling
    • Beiträge: 489
    Re: Wichtiges SEO-Kriterium: Ladezeit deines Shops
    Antwort #180 am: 10. Oktober 2013, 04:28:33
    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.

    Von base64 sprites habe ich ja auch nicht gesprochen (die sind völliger Quatsch) und mit inline meine ich folgendes:

    Code: PHP  [Auswählen]
    <head>
    ...
    <style type="text/css">.abc,.abc2,.abc3,.abc3{background: url(../img/global/cartbox_button_sprite.gif) no-repeat 0 0;}</style>
    </head>

    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;
    }
     

    Klar. Das kannst du nicht nur machen, das solltest du sogar so machen. Sagt auch Google zum Thema CSS. Man soll Regeln die sich widerholen nur einmal angeben, damit die Datei kleiner und übersichtlicher wird.
    Werbung / Banner buchen

    kaisa

    • Schreiberling
    • Beiträge: 365
    Re: Wichtiges SEO-Kriterium: Ladezeit deines Shops
    Antwort #181 am: 10. Oktober 2013, 14:08:33
    prima.

    Aber warum sind base64 sprites quatsch?

    und kann ich teile der background-definition wiederholen, ohne die url, bzw. die base64-Angaben zu wiederholen?
    Beispiel:
    Code: PHP  [Auswählen]
    .abc,abc2{ background: url (link) no-repeat 0 0; }

    .abc2{ background: no-repeat 0 100; }
     

    Godzilla

    • Schreiberling
    • Beiträge: 489
    Re: Wichtiges SEO-Kriterium: Ladezeit deines Shops
    Antwort #182 am: 10. Oktober 2013, 16:41:27
    Zitat
    Aber warum sind base64 sprites quatsch?

    1. Das CSS wird dadurch größer
    2. Die Seite wird langsamer gerendert
    3. Der IE8 kann nur Sprites bis 35kb verarbeiten
    4. Es gibt bessere und einfachere Techniken
    ...

    Zitat
    und kann ich teile der background-definition wiederholen, ohne die url, bzw. die base64-Angaben zu wiederholen?

    Klar. Du kannst da so machen wie z.B. mit Schriften. Du gibst ja auch nicht immer die Schriftart an, sondern manchmal nur die Schriftgröße.

    kaisa

    • Schreiberling
    • Beiträge: 365
    Re: Wichtiges SEO-Kriterium: Ladezeit deines Shops
    Antwort #183 am: 10. Oktober 2013, 19:28:44
    Zitat
    Aber warum sind base64 sprites quatsch?

    1. Das CSS wird dadurch größer
    2. Die Seite wird langsamer gerendert
    3. Der IE8 kann nur Sprites bis 35kb verarbeiten
    4. Es gibt bessere und einfachere Techniken
    1. CSS wird größer, aber man spart einen http-request und das Laden der Datei. Aber man läßt wohl mehr Sprites, als man auf einer Seite braucht.
    2.
    3. Man könnte sich auf kleine Dateien beschränken, was ich bzgl. Request und Ladezeit auch am Sinnvollsten finde. Ich habe 8% Besucher mit IE8. Die sollte man nicht ignorieren.
    4. welche? Mein Ziel ist es, Requests zu vermindern und Ladezeiten zu minimieren.

    Godzilla

    • Schreiberling
    • Beiträge: 489
    Re: Wichtiges SEO-Kriterium: Ladezeit deines Shops
    Antwort #184 am: 10. Oktober 2013, 22:22:28
    Zitat
    1. CSS wird größer, aber man spart einen http-request und das Laden der Datei. Aber man läßt wohl mehr Sprites, als man auf einer Seite braucht.

    Umso größer das CSS ist desto länger dauert das rendern. Du sparst zwar einen http-request aber dafür wird jede Seite langsamer gerendert. Das ist ja nicht Sinn und Zweck dieser Einsparung.

    Zitat
    3. Man könnte sich auf kleine Dateien beschränken, was ich bzgl. Request und Ladezeit auch am Sinnvollsten finde. Ich habe 8% Besucher mit IE8. Die sollte man nicht ignorieren.
    4. welche? Mein Ziel ist es, Requests zu vermindern und Ladezeiten zu minimieren.

    Ich benutze Sprites z.B. folgender Maßen:
    1. Ein Sprite nur für den "above the fold"-Content und das dazugehörige "above the fold"-CSS inline im <head>-Bereich
    2. Ein Sprite für den "below the fold"-Content.
    3. Alles was im "below the fold"-Bereich liegt (Artikelbilder, CSS etc.) lade ich per lazy load nach wenn es benötigt wird.

    Du könntest das ganze auch quick&dirty machen:
    Code: PHP  [Auswählen]
    </body>
    <noscript><link rel="stylesheet" type="text/css" href="below-the-fold-inklusive-hover-sprite.css" /><noscript>

    - So wird die Seite so schnell wie maximal möglich gerendert
    - So wird das Sprite im <head> nochmal 50% kleiner
    ...

    Schicke mir doch mal per PM einen Link zum Shop
    Managed Server
               
    anything