Yslow: Grade C on Put JavaScript at bottom

rattatui · 4. November 2011 um 20:29

Hallo, Yslow nörgelt immer, dass Javascript mit als erstes geladen wird: [quote]JavaScript scripts block parallel downloads; that is, when a script is downloading, the browser will not start any other downloads. To help the page load faster, move scripts to the bottom of the page if they are deferrable.[/quote] Jetzt ist natürlich die Frage, ob das bei Shopware systembedingt eben einfach so sein muss oder ob man da tatsächlich abhilfe schaffen kann? …Würde einen ja erstens eine bessere Ladezeit verschaffen und zweitens eine bessere Bewertung… EDIT: z.B in der frontend/index/index.tpl ganz unten? da gibt es ja den Abschluss [code]

[/code] Gibt es dazu Lösungen oder eine Erklärung, warum das so ist wie es derzeit ist und wie man das ändern könnte? Zumindest für optionale JavaScript Dateien? Eine weitere Möglichkeit ist ja, per CDN die Javascript-dateien auf verschiedene domains zu verteilen - bei CSS Dateien klappt das, bei .js hat das bisher bei mir nicht funktioniert bzw. führte nur zu längeren Ladezeiten. Grüße rattatui

avenger · 5. November 2011 um 05:03

[/code] Gibt es dazu Lösungen oder eine Erklärung, warum das so ist wie es derzeit ist und wie man das ändern könnte? Zumindest für optionale JavaScript Dateien? Eine weitere Möglichkeit ist ja, per CDN die Javascript-dateien auf verschiedene domains zu verteilen - bei CSS Dateien klappt das, bei .js hat das bisher bei mir nicht funktioniert bzw. führte nur zu längeren Ladezeiten. Grüße rattatui[/quote] Die Ursache dürfte sein, dass alles, schön w3c-standard-konform, im HEAD-Bereich geladen wird… Interessant, dass dieser „Standard“ das Ladeverhalten der Seiten negativ beeinflusst. (Hab’ ja schon immer gesagt, dass man diesen Standard ignorieren kann, so lange die Browser richtig arbeiten…) Technisch kann man die Javascripte problemlos ans Ende (vor ) legen, die Browser können das ab. Der W§C-Validator wird dann zwar meckern, aber wen juckt’s, außer den W3C-Standrad-Junkies?

rattatui · 5. November 2011 um 14:54

Hallo Avenger, das sind interessante neuigkeiten - und W3C: Warum wird etwas zum Standard erklärt, was kontraproduktiv ist und vermutlich vielerorts umgangen wird? Man weiß es nicht… …dazu kommt noch, dass soweit ich weiss die Javascripte nicht nur blocken, sondern sowieso selber auch noch warten, bis die Seite geladen ist… Kann man folgendermaßen vorgehen?: 1. Alle betreffenden Blöcke aus der /templates/_default/frontend/index/header.tpl in der eigenen /templates/meintemplate/frontend/index/header.tpl leeren… 2. …diese dann unten in die eigene /templates/meintemplate/frontend/index/index.tpl einzubauen… 3. Eigene Javasripte aus der /templates/meintemplate/frontend/index/header.tpl löschen und in die /templates/meintemplate/frontend/index/index.tpl kopieren 3.1 Alle entsprechenden Blöcke, die mit “append” in der eigenen /templates/meintemplate/frontend/index/header.tpl erweitert wurden, die zusätzlichen Einträge jetzt “manuell” in den entsprechenden Blöcken in der /templates/meintemplate/frontend/index/index.tpl eintragen. Weil das “append” bezog sich ja aus der /meintemplate/index/header.tpl auf die _default/index/header.tpl, richtig? Sind hier Denkfehler vorhanden? -Gibt es eigentlich innerhalb des Java-Abschinttes bestimmte Reihenfolgen der Blöcke und ggf. vorhandener Scripte? …Dann hatte ich das hier gefunden - da diese “Javascript-CDN Anleitung” offenbar vor 3.5.4/3.5.5 geschrieben wurde, müßte man schauen ob sich was in der header.tpl geändert hat? Grüße rattatui

rattatui · 6. November 2011 um 05:00

Hi, ich glaube ich habs jetzt. Yslow ist zwar Punktemäßig nicht gestiegen, aber „Grade A“ und das wird beim nächsten Punkt helfen, wenn man wieder an anderer Stelle schraubt denke ich. …Dafür hat aber Google Pagespeed zugelegt - wenn das intern bei Google auch gewichtet wird, ist das eigentlich noch wichtiger als Yslow. Allgemeinhin „flutscht“ der Seitenaufbau jetzt subjektiv besser. War auch noch etwas in für die detail Seite zu beachten… Gehe jetzt erstmal schlafen. Grüße rattatui

rattatui · 6. November 2011 um 15:21

So, hier nochmal im detail was ich gemacht habe. Wie Du schon sagtest, die Browser machen das mit (zumindest eben kurz getestet: FF 7; IE9; Chrome (akt.)). Erstmal zu den Dateien: /meintemplate/index/header.tpl …hierüber befinden sich die weiteren Inhalte, die man in der header.tpl stehen hat - in der header.tpl bleibt von Java garnichts mehr… {\* jquery nach index.tpl verschoben \*} {block name="frontend\_index\_header\_javascript\_jquery\_lib"}{/block} {\* javascript nach index.tpl verschoben \*} {block name="frontend\_index\_header\_javascript"}{/block} /meintemplate/index/index.tpl (auch hier wieder: unter dem letzten Block angesetzt, gleich mit CDN von hier und weiteren Javadateien/Scripten) [code]{block name=„frontend_index_header_javascript“} {if smarty.server.SERVER\_PORT == "443"} <script type="text/javascript" src="https://static1.domain.de/templates/_default/frontend/_resources/javascript/jquery-1.4.2.min.js"></script><script type="text/javascript"> //<![CDATA[ {block name="frontend_index_header_javascript_inline"} var timeNow = {time() nocache}; jQuery.controller = {ldelim} 'ajax_cart': '{url controller="checkout" appendSession}', 'ajax_search': '{url controller="ajax_search" fullPath=false}', 'ajax_login': '{url controller="account" action="ajax_login"}', 'register': '{url controller="register" appendSession}', 'checkout': '{url controller="checkout" appendSession}', 'ajax_logout': '{url controller="account" action="ajax_logout" appendSession}', 'ajax_validate': '{url controller="register" appendSession}' {rdelim}; {/block} //]]> </script> {block name="frontend\_index\_header\_javascript\_jquery"} <script type="text/javascript" src="https://static.domain.de/templates/_default/frontend/_resources/javascript/jquery.shopware.js"></script><script type="text/javascript" src="https://static1.domain.de/templates/meintemplate/frontend/_resources/javascript/jquery.nivo.slider.js"></script><script type="text/javascript" src="https://static.domain.de/templates/meintemplate/frontend/_resources/javascript/jquery.socialshareprivacy.js"></script> {/block} {else} <script type="text/javascript" src="http://static1.domain.de/templates/_default/frontend/_resources/javascript/jquery-1.4.2.min.js"></script><script type="text/javascript"> //<![CDATA[ {block name="frontend_index_header_javascript_inline"} var timeNow = {time() nocache}; jQuery.controller = {ldelim} 'ajax_cart': '{url controller="checkout" appendSession}', 'ajax_search': '{url controller="ajax_search" fullPath=false}', 'ajax_login': '{url controller="account" action="ajax_login"}', 'register': '{url controller="register" appendSession}', 'checkout': '{url controller="checkout" appendSession}', 'ajax_logout': '{url controller="account" action="ajax_logout" appendSession}', 'ajax_validate': '{url controller="register" appendSession}' {rdelim}; {/block} //]]> </script> {block name="frontend\_index\_header\_javascript\_jquery"} <script type="text/javascript" src="http://static.domain.de/templates/_default/frontend/_resources/javascript/jquery.shopware.js"></script><script type="text/javascript" src="http://static1.domain.de/templates/meintemplate/frontend/_resources/javascript/jquery.nivo.slider.js"></script><script type="text/javascript" src="http://static.domain.de/templates/meintemplate/frontend/_resources/javascript/jquery.socialshareprivacy.js"></script> {/block} {/if} {literal}<script type="text/javascript"> var pkBaseURL = (("https:" == document.location.protocol) ? "https://www.domain.de/piwik/" : "http://www.domain.de/piwik/"); document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E")); </script><script type="text/javascript"> try { var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1); piwikTracker.trackPageView(); piwikTracker.enableLinkTracking(); } catch( err ) {} </script><noscript><p><img src="http://www.domain.de/piwik/piwik.php?idsite=1" style="border:0" alt=""></p></noscript><script type="text/javascript"> jQuery(document).ready(function(){
if(('#socialshareprivacy').length > 0){ (’#socialshareprivacy’).socialSharePrivacy({
services : {
facebook : {
‚status‘ : ‚on‘,
‚app_id‘ : ‚0123456789‘,
‚dummy_img‘ : ‚https://static1.domain.de/templates/meintemplate/frontend/_resources/images/socialshareprivacy/dummy_facebook.png‘
},
twitter : {
‚status‘ : ‚on‘,
‚dummy_img‘ : ‚https://static1.domain.de/templates/meintemplate/frontend/_resources/images/socialshareprivacy/dummy_twitter.png‘
},
gplus : {
‚status‘ : ‚on‘,
‚language‘ : ‚de‘,
‚dummy_img‘ : ‚https://static1.domain.de/templates/meintemplate/frontend/_resources/images/socialshareprivacy/dummy_gplus.png‘
},
‚uri‘ : ‚getURI‘
}
});
}
});
{/literal} {/block}

[/code] Diese Änderungen allein führten aber zu Fehlern auf der Artikeldetailseite, während die Startseite, Kategorieseiten und Shopseiten gleich funktionierten. Das Problem war ein Javascript in der /_default/frontend/detail/header.tpl, was jetzt natürlich in der header.tpl nach Java gesucht hat. Das lies sich dann (nachdem ich es endlich begriffen hatte ) relativ einfach abstellen: 1. Eine eigene header.tpl in /meintemplate/detail/ erstellt und den Javascript-Block komplett gelöscht. 2. Den Java-Block dann komplett oben in die /meintemplate/detail/index.tpl eingefügt und schon findet das gesuchte Script das Java, welches sich ja nun in der index.tpl befindet. …diese beiden Maßnahmen (Javascript ans Ende von HTML und per CDN auf eine Static) brachten bei Google Pagespeed ca 3 Punkte. Weitere Optimierungen Im nächsten Schritt habe ich dann die Java-Dateien, die ja zuerst sequentiell von einer Static-Domain geladen wurden, auf zwei Static-Domains verteilt, so das meine Sripte parallel geladen werden. Dies allein brachte einen weiteren Punkt bei Google Pagespeed. Davon angeregt, probierte ich dass gleiche mit den CSS Dateien, was auch funktioniert, aber weder bei YSlow noch Pagespeed zu höheren Ergebnissen führt. Aber subjektiv scheint das parallele Laden der CSS-Dateien auch zu einem besseren Seitenaufbau zu führen. Möglich auch, das Pagespeed und YSlow nicht die richtigen Messwerkzeuge für diese Optimierung ist - oder „Doc Placebo“ hat mich hier getäuscht Was jetzt möglicherweise der Fall sein könnte - ich weiss nicht ob es Plugins mit Javscript gibt, die auf die header.tpl zeigen - würde das zu einer Java-Fehlfunktion des Plugins führen. Sofern das aber im Plugin genauso funktioniert wie bei den hier angesprochenen Dateien, ist eine Umstellung auf die index.tpl ja kein Problem. …Was derzeit noch nicht passt: - Bei den Modalboxen passt offenbar das CSS nicht mehr zum Box-Inhalt - auf der Bestellabschluss- Seite (Vielen Dank für Ihre Bestellung bei…") wird ein Zahlarten-Abschlag dreimal aufgeführt und berechnet Ich hoffe, dass lässt sich ähnlich lösen wie in der header.tpl der Artikeldetailseite. Weitere Ideen dazu? Wäre schade wenn sich das nicht umsetzen ließe. Grüße rattatui

rattatui · 6. November 2011 um 19:05

…also folgendes Problem ließ sich durch das komplette leeren (vorsichtshalber) aller Caches lösen: [quote]- auf der Bestellabschluss- Seite (Vielen Dank für Ihre Bestellung bei…") wird ein Zahlarten-Abschlag dreimal aufgeführt und berechnet[/quote] bleibt jetzt eigentlich nur noch die Sache mit den Modalboxen, und zwar ist das die AGB-Modalbox sowie zwei Modalboxen im Checkout-Bereich von mir, wo das Problem auftritt. Also in der checkout/confirm.tpl steht ja ganz oben (auch in der _default) drin: {extends file="frontend/index/index.tpl"} {\* Javascript \*} {block name="frontend\_index\_header\_javascript" append}<script type="text/javascript"> //<![CDATA[ if(top!=self){ top.location=self.location; } //]]> </script>{/block} {\* Hide breadcrumb \*}...usw. …und weiter unten in Zeile 169 wohl der Aufruf der ABG Modalbox: <label for="sAGB" class="chklabel modal_open {if $sAGBError}instyle_error{/if}">{s name="ConfirmTerms"}{/s}</label> Die Modalboxen sind im CSS auf “width: 800px” gesetzt -funktionierte bisher auch problemlos. Jetzt ist der Inhalt ca. 500px breit und der Rest der Box (Scrollbalken usw. 800px breit). Hängt ja irgenwie damit zusammen, dass Java jetzt komplet in der index/index.tpl ist… aber wie muss das geändert werden? Da weiss ich nicht mehr weiter…:wtf:

rattatui · 6. November 2011 um 20:59

Okay… ich konnte das jetzt ändern durch: [quote](function ($) { //Default settings var config = { animationSpeed: 500, frameHeight: ‚500px‘, textClass: ‚‘, textContainer: ’

', overlay: ‚#lbOverlay‘, overlayOpacity: ‚0.6‘, useOverlay: true, width: 800 };[/quote] in der jquery.shopware.js …aber wieso ist das jetzt nötig? lokale config-Angaben bei Modalboxen die vorher funktionierten wurden seit der Umstellung ignoriert - ich meine eben haben alle meine Boxen 800px, ist also nicht so schlimm, aber ganz korrekt ist das ja eigentlich nicht so wie ich es grade gemacht habe… Auf jeden Fall scheint jetzt alles zu funktionieren. Grüße rattatui