JTL 3.19 - Google: Browser-Caching nutzen

[bigloopfan]

Hallo zusammen,

ich habe bei google mal PageSpeed Insights aufgerufen und mir wurde folgende Meldung ausgegeben:

Browser-Caching nutzen
Das Festlegen eines Ablaufdatums oder eines Höchstalters in den HTTP-Headern für statische Ressourcen weist den Browser an, zuvor heruntergeladene Ressourcen über die lokale Festplatte anstatt über das Netzwerk zu laden.Nutzen Sie Browser-Caching für die folgenden cachefähigen Ressourcen:
...
...
...

Ich habe im Forum gelesen es muss etwas an der .htaccess Datei geändert werden muss, allerdings steht nicht dabei was geändert werden muss.

Habt Ihr Lösungsvorschläge?

VG
Stefan


PS: Shop Version 3.19.5

 

[okh]

AW: JTL 3.19 - Google: Browser-Caching nutzen

kommt 1. auf dein Hosting an (Webspace, Root)
2. was dein Apache so an modulen installiert und aktiviert hat.
3. Fremdresourcen wie (jquery, ga, usw.) lassen sich nicht (bei dir) cachen.

Sollte die Liste bei dir länger als 3 Einträge in Google Pagspeed Insights sein, probiere einen von diesen Methoden (nicht beide zusammen) aus.

Leverage Browser caching

 

[deepblue]

AW: JTL 3.19 - Google: Browser-Caching nutzen

Hallo,

das gleiche Problem haben wir bei unserem Standard-Template Tiny auch. Wir verwenden die Shop-Version 3.19 Build: 5

Man sagte mir bei JTL das wäre normal und es gibt kein Grund da irgend etwas zu ändern oder anzupassen.
Wir haben 23 Einträge bei Google PageSpeed Insights mit der Fehlermeldung:

[h=4]Browser-Caching nutzen[/h]Das Festlegen eines Ablaufdatums oder eines Höchstalters in den HTTP-Headern für statische Ressourcen weist den Browser an, zuvor heruntergeladene Ressourcen über die lokale Festplatte anstatt über das Netzwerk zu laden.


Nutzen Sie Browser-Caching für die folgenden cachefähigen Ressourcen.


Es sind aber alles Dateien die auf .js enden. Wir nutzen das JTL-Shop Hosting.

 

[okh]

AW: JTL 3.19 - Google: Browser-Caching nutzen

ganz sicher 23?

bei mir sinds noch drei (externe). Ohne die Einbindung vom mobilen Template komme ich mit Komproimierung auf satte 95 Points.

 

[bigloopfan]

AW: JTL 3.19 - Google: Browser-Caching nutzen

Ich habe 27 (inkl. 2 externe).

 

[okh]

AW: JTL 3.19 - Google: Browser-Caching nutzen

bitte mal die URL´s posten. ich schau mir das mal an. Am besten per pn.

 

[okh]

AW: JTL 3.19 - Google: Browser-Caching nutzen

Ich habe 27 (inkl. 2 externe).

tja, auf den ersten bLick schleppst du da ganz schöne Klötze durchs Web.

1. livezilla und piwik sind alleine schon für 0,85 sek. Ladezeit zuständig.

2. die 0,6 sek. ladezeit für die Startseite deuten auf eine fehlende Minifizierung der .js und .css dateien hin. Könnte auch eine falsche Object Cache Einstellung sein.

Zumindest hältst du locker den 2. Platz in unserer Liste der meisten Serverrequests.

 

[martinwolf]

AW: JTL 3.19 - Google: Browser-Caching nutzen

Google empfiehlt eine Cachingdauer von mindestens einer Woche. Entsprechend die Werte für die betroffenen Datentypen hochziehen.

Beispiel:

   <filesMatch "\\.(css)$">
      Header set Cache-Control "max-age=[COLOR=#ff0000][B]604800[/B][/COLOR], public"
   </filesMatch>
   <filesMatch "\\.(js)$">
      Header set Cache-Control "max-age=[COLOR=#ff0000][B]604800[/B][/COLOR], private"
   </filesMatch>

 

[deepblue]

AW: JTL 3.19 - Google: Browser-Caching nutzen

@martinwolf

Vielen Dank für deine Antwort. Ok, dann werde ich das mal in meiner .htaccess Datei ändern.

Bekommt man noch diese Sachen irgendwie in den Griff?

JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen
Ihre Seite enthält 6 blockierende Skript-Ressourcen und 6 blockierende CSS-Ressourcen. Dies verursacht eine Verzögerung beim Rendern Ihrer Seite.
Keine der Seiteninhalte "above the fold" (ohne Scrollen sichtbar) konnten ohne Wartezeiten für das Laden der folgenden Ressourcen gerendert werden. Versuchen Sie, blockierende Ressourcen zu verschieben oder asynchron zu laden, oder laden Sie kritische Bereiche dieser Ressourcen direkt inline im HTML.
Entfernen Sie JavaScript, das das Rendering blockiert:

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
http://ajax.googleapis.com/…ax/libs/jqueryui/1.10.3/jquery-ui.min.js
http://code.jquery.com/jquery-migrate-1.2.1.min.js
http://www.domain.de/…udes/libs/minify/index.php?g=jtl3.js&319
http://www.domain.de/…ajax_0.5_standard/xajax_js/xajax_core.js
http://www.domain.de/…d/js/up.activesearch.js?v=102-20131227-0

 

[martinwolf]

AW: JTL 3.19 - Google: Browser-Caching nutzen

Ich hab mir dafür eine footer_js.tpl angelegt mit folgendem Inhalt und diese anschließend in der footer_custom.tpl inkludiert:

{if $Einstellungen.template.general.use_minify == 'N'}
    {foreach from=$cJS_arr item="cJS"}
        <script type="text/javascript" src="{$cJS}"></script>
    {/foreach}
{else}
    <script type="text/javascript" src="{$PFAD_MINIFY}/index.php?g=jtl3.js&amp;{$nTemplateVersion}"></script>
{/if}

{if $bMobilMoeglich}
    <script type="text/javascript"> 
        var message = $("<div/>").html('{lang key="switchToMobileTemplate"}');
        if (confirm(message.text()))
            //window.location.href = '{$ShopURL}/index.php?mt=1';
            window.location.href = window.location.href+'?mt=1';
    </script>
{/if}

{$xajax_javascript}

{if $Einstellungen.global.global_google_analytics_id}
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', '{$Einstellungen.global.global_google_analytics_id}']);
        _gaq.push(['_gat._anonymizeIp']);
        _gaq.push(['_trackPageview']);

        (function() {ldelim}
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        {rdelim})();
    </script>
{/if}

footer_custom.tpl

        ...
        {include file="tpl_inc/footer_js.tpl"}
        
        {if $smarty.now % 10 == 0}<img src="includes/cron_inc.php" width="0" height="0" alt="" />{/if}

        <!-- time: {$nZeitGebraucht|truncate:6:''} seconds -->
    
    </body>
    
</html>

Sämtliches JS kommt dann über die template.xml mit Ausnahme von JQuery selbst. Dieses wird über die header_custom.tpl eingebunden, da zwischendurch bereits Funktionen aufgerufen werden die das vorassetzen, wie etwa set_overlay.

<script type="text/javascript" src="{$currentTemplateDir}js/jquery.min.js"></script>

Damit die minify Funktion des Shop Admins auch tadellos funktioniert, sind sämtliche JS-Dateien als non-min vorhanden.

 

[martinwolf]

AW: JTL 3.19 - Google: Browser-Caching nutzen

Nachtrag: Die global.js müsste ebenfalls über die header_custom.tpl eingebunden werden, da dort einige Funktionen definiert sind, die bereits vor dem Footer gefeuert werden.

 

[deepblue]

AW: JTL 3.19 - Google: Browser-Caching nutzen

@martinwolf

So habe das jetzt bei mir in der .htaccess Datei so drin stehen:

<ifModule mod_deflate.c>
   <FilesMatch "\\.(js|css|html|htm|php|xml)$">
      SetOutputFilter DEFLATE
   </FilesMatch>
</ifModule>

<ifModule mod_headers.c>
   Header unset ETag
   FileETag None

   <filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|jpe)$">
      Header set Cache-Control "max-age=2592000, public"
   </filesMatch>
   <filesMatch "\\.(css)$">
      Header set Cache-Control "max-age=604800, public"
   </filesMatch>
   <filesMatch "\\.(js)$">
      Header set Cache-Control "max-age=604800, private"
   </filesMatch>
   <filesMatch "\\.(xml|txt)$">
      Header set Cache-Control "max-age=216000, public, must-revalidate"
   </filesMatch>
   <filesMatch "\\.(html|htm|php)$">
      Header set Cache-Control "max-age=1, private, must-revalidate"
   </filesMatch>
</ifModule>

 

[martinwolf]

AW: JTL 3.19 - Google: Browser-Caching nutzen

@deepblue

Wenn Du jetzt noch für html|htm|php das max-age von 1 auf 604800 setzt, dann greift das Caching auch für die minified URLs

 

[deepblue]

AW: JTL 3.19 - Google: Browser-Caching nutzen

@martinwolf

habe die Änderung aus post #13 umgesetzt.

Aus Post #10: Hier komme ich irgendwie nicht weiter. Habe die Datei footer_js.tpl angelegt.

Jetzt soll ich die footer_custom.tpl mit dem hier ergänzen. Ist das Richtig?

{**
 * @copyright (c) 2006-2010 JTL-Software-GmbH, all rights reserved
 * @author JTL-Software-GmbH (www.jtl-software.de)
 *
 * use is subject to license terms
 * http://jtl-software.de/jtlshop3license.html
 *}

   {if !$bExclusive}
   </div>
      <div id="sidepanel_left">{load_boxes type="left" assign="cBoxLeft"}{eval var=$cBoxLeft}</div>
      <div id="sidepanel_right">{load_boxes type="right" assign="cBoxRight"}{eval var=$cBoxRight}</div>
   </div>
   {/if}
 
   </div>
   <div class="clear"></div>

   {if $smarty.now % 10 == 0}
      <img src="includes/cron_inc.php" width="0" height="0" alt="" />
   {/if}
   
   {if !$bExclusive}
   <div id="footer_wrapper">      
      {if $Einstellungen.template.general.ext_footer != "Y"}
         <div id="footer" class="page_width {if $Einstellungen.template.general.page_align == 'L'}page_left{else}page_center{/if}">
            <ul class="hlist">
               <li class="p50">
                  <p><small>
                  &copy; {$meta_copyright}
                  {if $smarty.session.Linkgruppen->Fuss}
                     {foreach name=fusslinks from=$smarty.session.Linkgruppen->Fuss->Links item=Link}
                        | <a href="{$Link->URL}"{if $Link->cNoFollow == "Y"} rel="nofollow"{/if} title="{$Link->cLocalizedName[$smarty.session.cISOSprache]}">{$Link->cLocalizedName[$smarty.session.cISOSprache]}</a>
                     {/foreach}
                  {/if}
                  </small></p>
               </li>
               <li class="p50 tright">
                  <p class="jtl">
                     {if $Einstellungen.global.global_fusszeilehinweis|strlen > 0}{$Einstellungen.global.global_fusszeilehinweis}{/if}
                     {if $Einstellungen.global.global_fusszeilehinweis|strlen > 0 && $Einstellungen.global.global_zaehler_anzeigen=="Y"}|{/if}
                     {if $Einstellungen.global.global_zaehler_anzeigen=="Y"}{lang key="counter" section="global"}: {$Besucherzaehler}{/if}
                  </p>
               </li>
            </ul>
         </div>
      {else}
         <div id="footer" class="page_width {if $Einstellungen.template.general.page_align == 'L'}page_left{else}page_center{/if}">
<ul class="hlist clearall">
              {if $smarty.session.Linkgruppen->Fuss1}
              <li class="p20" id="ftr_lnkgrp">
                  <p class="footer-heading">{$smarty.session.Linkgruppen->Fuss1->cLocalizedName[$smarty.session.cISOSprache]}
                  {get_navigation type="Fuss1" class="lnkgroup"}</p>
               </li>
               {/if}
               {if $smarty.session.Linkgruppen->Fuss2}
               <li class="p20" id="ftr_lnkgrp">
                  <p class="footer-heading">{$smarty.session.Linkgruppen->Fuss2->cLocalizedName[$smarty.session.cISOSprache]}
                  {get_navigation type="Fuss2" class="lnkgroup"}</p>
               </li>
               {/if}
               {if $smarty.session.Linkgruppen->Fuss3}
               <li class="p20" id="ftr_lnkgrp">
                  <p class="footer-heading">{$smarty.session.Linkgruppen->Fuss3->cLocalizedName[$smarty.session.cISOSprache]}
                   {get_navigation type="Fuss3" class="lnkgroup"}</p>
               </li>
               {/if}

<a href="http://www.it-recht-kanzlei.de/Service/pruefzeichen.php?sid=1e411-d602" rel="nofollow"><img width="70" height="70" style="position:relative; left: 60px;" title="Geprüfter Onlineshop" alt="Geprüfte Präsenz - BUEROARTIKEL24" src="/mediafiles/Bilder/shop-gold3-01.png"/></a>

    {if $Einstellungen.template.general.ext_newsletter_footer == "Y" || $Einstellungen.global.global_fusszeilehinweis|strlen > 0}
               <li class="p35 right" id="ftr_newsletter">
                   {if $Einstellungen.template.general.ext_newsletter_footer == "Y"}
                      <div class="footer_box">
                         <h2>{lang key="newsletter" section="newsletter"} {lang key="newsletterSendSubscribe" section="newsletter"}</h2>
                         <form method="post" action="newsletter.php" class="form">
                            <fieldset class="newsletter">
                               <input type="hidden" name="abonnieren" value="1" />
                               <input type="hidden" name="{$session_name}" value="{$session_id}" />
                               <ul class="input_block">
                                  <li class="clear">
                                     <input type="text" name="cEmail" id="newsletter_email" class="placeholder" title="{lang key="emailadress"}" />
                                     <button type="submit" ><span>{lang key="newsletterSendSubscribe" section="newsletter"}</span></button>
                                     <p class="info"><em>*</em> {lang key="unsubscribeAnytime" section="newsletter"}</p>
                                  </li>
                               </ul>         
                            </fieldset>
                         </form>
                      </div>
                  {/if}
                  
                  {if $Einstellungen.global.global_fusszeilehinweis|strlen > 0}
                     <p class="box_info container">
                        {$Einstellungen.global.global_fusszeilehinweis}
                     </p>
                  {/if}
               </li>
               {/if}
               
            </ul>
        
            <div class="master clearall">
               <div class="first">
                  <p>&copy; {$meta_copyright}</p>
                  <p>{if $Einstellungen.global.global_zaehler_anzeigen=="Y"}{lang key="counter" section="global"}: {$Besucherzaehler}{/if}</p>
               </div>
               <div class="last">
                  <p class="jtl">Powered by <a href="http://www.jtl-software.de/Onlineshop-Software-JTL-Shop" title="JTL-Shop3" rel="nofollow">JTL-Shop3</a></p>
               </div>
            </div>
         </div>
      {/if}
      {if $Einstellungen.global.global_google_analytics_id}
         <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', '{$Einstellungen.global.global_google_analytics_id}']);
            _gaq.push(['_gat._anonymizeIp']);
            _gaq.push(['_trackPageview']);

            (function() {ldelim}
               var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
               ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
               var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            {rdelim})();
         </script>
      {/if}
   </div>
   {/if}
{if !$bExclusive}
</div>
{/if}

{include file="tpl_inc/inc_trustedshops.tpl"}

<!-- time: {$nZeitGebraucht|truncate:6:''} seconds -->

</body>
</html>

An welcher Stelle der header_custom.tpl, soll ich das hinzufügen?

<script type="text/javascript" src="{$currentTemplateDir}js/jquery.min.js"></script>

 

[martinwolf]

AW: JTL 3.19 - Google: Browser-Caching nutzen

Die footer_js.tpl ganz ans Ende in die footer_custom.tpl einbinden, aber noch vor dem geschlossenen Body Tag.

        [B]{include file="tpl_inc/footer_js.tpl"}[/B]
    
    </body>

JQuery am Besten kurz vor Ende des head Tags einbinden, Auszuag aus meiner header_custom.tpl

        ...
        [B]<script type="text/javascript" src="{$currentTemplateDir}js/jquery.min.js"></script>[/B]

        {* Pagination *}
        {if $Suchergebnisse->Seitenzahlen->maxSeite>1 && isset($oNaviSeite_arr) && $oNaviSeite_arr|@count > 0}
            {if $Suchergebnisse->Seitenzahlen->AktuelleSeite>1}
                <link rel="prev" href="{$oNaviSeite_arr.zurueck->cURL}" />
            {/if}
            {if $Suchergebnisse->Seitenzahlen->AktuelleSeite < $Suchergebnisse->Seitenzahlen->maxSeite}
                <link rel="next" href="{$oNaviSeite_arr.vor->cURL}" />
            {/if}
        {/if}

    </head>

 

[deepblue]

AW: JTL 3.19 - Google: Browser-Caching nutzen

Vielen Dank für deine Geduld. So habe es nun so eingebaut. Hast du eine Möglichkeit das zu testen?

Mir nun im Quelltext der Startseite aufgefallen ist, dass ein Absatz nun doppelt vorhanden ist.

Ich meine ganz genau dieses hier:

<script type="text/javascript" charset="UTF-8"> /* <![CDATA[ */ xajax_aenderKundenformularPLZ = function() { return xajax.request( { xjxfun: 'aenderKundenformularPLZ' }, { parameters: arguments } ); }; xajax_suchVorschlag = function() { return xajax.request( { xjxfun: 'suchVorschlag' }, { parameters: arguments } ); }; xajax_tauscheVariationKombi = function() { return xajax.request( { xjxfun: 'tauscheVariationKombi' }, { parameters: arguments } ); }; xajax_suggestions = function() { return xajax.request( { xjxfun: 'suggestions' }, { parameters: arguments } ); }; xajax_setzeErweiterteDarstellung = function() { return xajax.request( { xjxfun: 'setzeErweiterteDarstellung' }, { parameters: arguments } ); }; xajax_fuegeEinInWarenkorbAjax = function() { return xajax.request( { xjxfun: 'fuegeEinInWarenkorbAjax' }, { parameters: arguments } ); }; xajax_loescheWarenkorbPosAjax = function() { return xajax.request( { xjxfun: 'loescheWarenkorbPosAjax' }, { parameters: arguments } ); }; xajax_gibVergleichsliste = function() { return xajax.request( { xjxfun: 'gibVergleichsliste' }, { parameters: arguments } ); }; xajax_gibPLZInfo = function() { return xajax.request( { xjxfun: 'gibPLZInfo' }, { parameters: arguments } ); }; xajax_ermittleVersandkostenAjax = function() { return xajax.request( { xjxfun: 'ermittleVersandkostenAjax' }, { parameters: arguments } ); }; xajax_billpayRates = function() { return xajax.request( { xjxfun: 'billpayRates' }, { parameters: arguments } ); }; xajax_setSelectionWizardAnswerAjax = function() { return xajax.request( { xjxfun: 'setSelectionWizardAnswerAjax' }, { parameters: arguments } ); }; xajax_resetSelectionWizardAnswerAjax = function() { return xajax.request( { xjxfun: 'resetSelectionWizardAnswerAjax' }, { parameters: arguments } ); }; xajax_checkVarkombiDependencies = function() { return xajax.request( { xjxfun: 'checkVarkombiDependencies' }, { parameters: arguments } ); }; xajax_gibFinanzierungInfo = function() { return xajax.request( { xjxfun: 'gibFinanzierungInfo' }, { parameters: arguments } ); }; xajax_gibRegionzuLand = function() { return xajax.request( { xjxfun: 'gibRegionzuLand' }, { parameters: arguments } ); }; xajax_generateToken = function() { return xajax.request( { xjxfun: 'generateToken' }, { parameters: arguments } ); }; /* ]]> */ </script>

 

[deepblue]

AW: JTL 3.19 - Google: Browser-Caching nutzen

Das Google-Analytics habe ich nun auch 2 mal im Quelltext stehen.

Das eine mal steht das in der footer_custom.tpl und dann noch mal in der footer_js.tpl

Das kann so aber auch nicht richtig sein.

 

[martinwolf]

AW: JTL 3.19 - Google: Browser-Caching nutzen

Das Google-Analytics habe ich nun auch 2 mal im Quelltext stehen.

Das eine mal steht das in der footer_custom.tpl und dann noch mal in der footer_js.tpl

Das kann so aber auch nicht richtig sein.

Das muss da natürlich aus der footer_custom.tpl raus

Nochamal meine footer_custom.tpl im Beispiel als ganzes:

        {if !$bExclusive}
                            </div>
                            {get_box_layout}
                            {if !isset($smarty.get.exclusive_content)}
                                {if $layout.sidebar.right !== ""}
                                    <div class="col-md-{$layout.sidebar.right}">
                                        <aside class="sidebar">
                                            {load_boxes type="right" assign="cBoxRight"}{eval var=$cBoxRight}
                                        </aside>
                                    </div>
                                {/if}
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
            <footer class="footer">
                ...
            </footer>
            
            {include file="tpl_inc/inc_trustedshops.tpl"}
        
        {/if}
        
        [B]{include file="tpl_inc/footer_js.tpl"}[/B]
        
        {if $smarty.now % 10 == 0}<img src="includes/cron_inc.php" width="0" height="0" alt="" />{/if}

        <!-- time: {$nZeitGebraucht|truncate:6:''} seconds -->
    
    </body>
    
</html>

Und die footer_js.tpl so wie ich vorher schon gepostet hatte.

 

[deepblue]

AW: JTL 3.19 - Google: Browser-Caching nutzen

Hallo martinwolf,

habe noch einmal probiert deine Änderungen in meinem Template umzusetzen, aber leider funktionieren dann divere Sachen an meinem Shop nicht mehr.
Entweder fehlt dann meine komplette Navigationsleiste, der Footer wird nicht mehr angezeigt oder eine Anmeldung ist nicht mehr möglich.

Schade hatte wirklich gedacht mit ein paar Tricks konne man die Onlineshop optimieren. Aber wenn dann hinterher garnichts mehr geht, ist das schon wirklich ärgerlich.

Vielleicht liegt es ja auch an meinem Template oder an mir! =)

 

[casim]

AW: JTL 3.19 - Google: Browser-Caching nutzen

wäre es wirtschaftlich betrachtet nicht günstiger gewesen wenn du Martin beauftragt hättest?!