Kryptronic Software Support Forum

You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.

#1 05-18-2013 05:09:21

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 869

Defer parsing of JavaScript

We want to improve the page loading speeds. One item highlighted was "defer parsing of JavaScript".

Can this be done with some simple mod? If this is not an easy fix can you add it to your next update and look at any other speed improvements.

Also, which css and js files can we safely combine without affecting the carts operation and which version of PHP5 is best to run (currently 5.2.17 but 5.4.15 is available))

And lastly when is the next update likely to arrive?

Last edited by sdn (05-19-2013 16:41:59)


Simon

Offline

 

#2 05-20-2013 04:47:53

hypnobesity14
Member
Registered: 05-20-2013
Posts: 1

Re: Defer parsing of JavaScript

You can search google that give you a good answer

Last edited by hypnobesity14 (05-20-2013 04:49:38)

Offline

 

#3 05-20-2013 04:56:16

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 869

Re: Defer parsing of JavaScript

Thanks for your advice. I have already read many of the very good resources online but I was looking for CCP8 specific advice.

On piece of advice given was to create a static html version of a webpage to test you server speed. So I created a dummy 404 page at wwwquasarelectronics.co.uk/404-ccp.html. This gives us a decent time to first byte of 0.148 seconds (total load time under 1sec) compared to just over 0.3 (load time 1.86s) for a similar CCP8 PHP generated page (I used Wishlist as this page has very similar page content).

Another option is to use CDN for static content but again not sure how to implement this with CCP.

Last edited by sdn (05-20-2013 05:23:20)


Simon

Offline

 

#4 05-20-2013 10:19:27

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19723
Website

Re: Defer parsing of JavaScript

So what you're saying is that the time to present the page in CCP (full on PHP) versus a static HTML page is about .15 seconds.  That sounds about right.  Pretty good actually.


Nick Hendler

Offline

 

#5 05-20-2013 10:57:52

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 869

Re: Defer parsing of JavaScript

Yes that is correct although I have redone the test with a static copy of our home page as that is a bit more realistic. The CCP PHP generated home page is about 0.25s slower but a vast improvement over last week when we had 0.6-0.7s average TTFB.

Do you have any suggestions on my first post i.e. defering js, php version to run and if an update is in the pipeline?


Simon

Offline

 

#6 05-21-2013 07:37:39

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19723
Website

Re: Defer parsing of JavaScript

(1)  I'm not sure what you mean by deferring parsing of JS.  Please explain.

(2) I'd stay away from combining the JS - most of that is loaded on demand and should remain in separate files to reduce load times (ie not loading everything when you don't need it).  As far as combining CSS, the skin's CSS files could be combined if you wanted to do that - right now they're separate to provide easier editing.

(3) An update is in the works right now.  It's a small one with very few enhancements.  Should be ready this month.


Nick Hendler

Offline

 

#7 05-21-2013 07:57:07

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 869

Re: Defer parsing of JavaScript

Our home page gets a 71% score from Google using their pagespeed tool. The critical issue for our site is listed as the server response time but our server is not that tardy.

You can see the results at https://developers.google.com/speed/pag … bile=false

Google have a page at https://developers.google.com/speed/doc … rLoadingJS that described the factors they use to analyse the page including details on Defer loading of JavaScript.

Last edited by sdn (05-21-2013 09:34:32)


Simon

Offline

 

#8 05-22-2013 08:48:03

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19723
Website

Re: Defer parsing of JavaScript

Interesting.  As we use a lot of events like:

Code:

jQuery(document).ready(function(){});
jQuery(window).load(function(){});

These calls can have JS code appended to them by in the program (anywhere within the code) by simple global assignment.  As you can't predict what is going to be called for on document.ready or window.load we load all of the required scripts in the <head> to prevent failures.

You may possibly be able to move some scripts to the end of the body tag.  To do so, in {private}/core/CORE/includes/jslib.php, anywhere you see a script you want to delay loading of, ie:

Code:

     print '<script src="media/cloudzoom/cloudzoom.js" type="text/javascript"></script>' . $eol;

Change to:

Code:

     $body_insertafter .= '<script src="media/cloudzoom/cloudzoom.js" type="text/javascript"></script>' . $eol;

This will effectively move the script call from the <head> to right above the </body> tag, as your example suggests.  I would highly recommend leaving at least these in the <head>:

Code:

<script type="text/javascript" src="media/jquery/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
jQuery.noConflict();
<script type="text/javascript" src="media/scripts/common.js"></script>
<script type="text/javascript" src="media/scripts/backend.js"></script>
<script type="text/javascript" src="media/scripts/frontend.js"></script>
<script type="text/javascript" src="media/scripts/mobile.js"></script>

As well as anything backend-related.  The last three load conditionally depending on interface and display type.


Nick Hendler

Offline

 

#9 05-22-2013 17:13:09

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 869

Re: Defer parsing of JavaScript

I am pleased you found it interesting.

My understanding is that Google are giving more weight to how fast a site is. I think this makes sense if you look at it from Googles perspective of aiming to provide their users with the very best search results. A slow site is given a lower ranking because it reflects poorly on them. No one will thank Google for being directed to a slow website.

I will play around with your code suggestions. However, I am just tinkering and you are the experts so If you could also look at ways to optimise CCP out of the box I am sure all users would appreciate the benefits.


Simon

Offline

 

#10 05-23-2013 13:24:39

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 869

Re: Defer parsing of JavaScript

The code "$body_insertafter" is moving them below the opening body tag and not just above the closing body tag.


Simon

Offline

 

#11 05-24-2013 07:41:45

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19723
Website

Re: Defer parsing of JavaScript

To put it at the end of the body, change $body_insertafter to $js_footer.


Nick Hendler

Offline

 

#12 05-24-2013 08:02:41

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 869

Re: Defer parsing of JavaScript

I have already tried that but it just made the statement disappear altogether. The code is:

$js_footer .= '<script type="text/javascript" src="media/qtip2/jquery.qtip2.min.js"></script>' . $eol;


Simon

Offline

 

#13 05-27-2013 09:33:03

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19723
Website

Re: Defer parsing of JavaScript

It should be printed right before the closing <body> tag when using js_footer.


Nick Hendler

Offline

 

#14 05-27-2013 11:06:39

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 869

Re: Defer parsing of JavaScript

In other words just above </body>. But, it is not there for some reason. I assume this code is correct:

$js_footer .= '<script type="text/javascript" src="media/qtip2/jquery.qtip2.min.js"></script>' . $eol;

The variable is defined at the top as:

$js_footer        = $this->globals('core.js_footer');

You can see it has not appeared if you look at the source of http://www.quasarelectronics.co.uk/Item … driver-kit

If I change it to:

$body_insertafter .= '<script type="text/javascript" src="media/qtip2/jquery.qtip2.min.js"></script>' . $eol;

It appears just below the opening <body> tag. You can see some of the other js files there that are written like the above.


Simon

Offline

 

#15 05-28-2013 08:25:55

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19723
Website

Re: Defer parsing of JavaScript

I'm seeing this code show up where js_footer is being injected.  Perhaps you overrode the global somewhere?

Code:

<script type="text/javascript">//<![CDATA[
(function(){var e=encodeURIComponent,f=window,g=document,h="documentElement",k="length",l="prototype",n="body",p="&ci=",q="&oh=",r=",",s="Content-Type",t="Microsoft.XMLHTTP",u="Msxml2.XMLHTTP",v="POST",w="application/x-www-form-urlencoded",x="img",y="input",z="load",A="on",B="pagespeed_url_hash",C="url=";f.pagespeed=f.pagespeed||{};var D=f.pagespeed,E=function(a,b,c){this.e=a;this.c=b;this.d=c;this.b=this.f();this.a={}};E[l].f=function(){return{height:f.innerHeight||g[h].clientHeight||g[n].clientHeight,width:f.innerWidth||g[h].clientWidth||g[n].clientWidth}};E[l].i=function(a){a=a.getBoundingClientRect();return{top:a.top+(void 0!==f.pageYOffset?f.pageYOffset:(g[h]||g[n].parentNode||g[n]).scrollTop),left:a.left+(void 0!==f.pageXOffset?f.pageXOffset:(g[h]||g[n].parentNode||g[n]).scrollLeft)}};E[l].g=function(a){if(0>=a.offsetWidth&&0>=a.offsetHeight)return!1;a=this.i(a);var b=JSON.stringify(a);if(this.a.hasOwnProperty(b))return!1;this.a[b]=!0;return a.top<=this.b.height&&a.left<=this.b.width};E[l].h=function(a){var b;if(f.XMLHttpRequest)b=new XMLHttpRequest;else if(f.ActiveXObject)try{b=new ActiveXObject(u)}catch(c){try{b=new ActiveXObject(t)}catch(d){}}if(!b)return!1;b.open(v,this.e);b.setRequestHeader(s,w);b.send(a);return!0};E[l].k=function(){for(var a=[x,y],b={},c=0;c<a[k];++c)for(var d=g.getElementsByTagName(a[c]),m=0;m<d[k];++m)d[m].hasAttribute(B)&&(d[m].getBoundingClientRect&&this.g(d[m]))&&(b[d[m].getAttribute(B)]=!0);b=Object.keys(b);if(0!=b[k]){a=C+e(this.c);a+=q+this.d;a+=p+e(b[0]);for(c=1;c<b[k];++c){d=r+e(b[c]);if(131072<a[k]+d[k])break;a+=d}D.criticalImagesBeaconData=a;this.h(a)}};D.j=function(a,b,c){if(a.addEventListener)a.addEventListener(b,c,!1);else if(a.attachEvent)a.attachEvent(A+b,c);else{var d=a[A+b];a[A+b]=function(){c.call(this);d&&d.call(this)}}};D.l=function(a,b,c){var d=new E(a,b,c);D.j(f,z,function(){f.setTimeout(function(){d.k()},0)})};D.criticalImagesBeaconInit=D.l;})();pagespeed.criticalImagesBeaconInit('/mod_pagespeed_beacon','http://www.quasarelectronics.co.uk/Item/velleman-k8096-1-channel-usb-bipolar-unipolar-stepper-motor-driver-kit','djXhA43tBd');
//]]></script>

Nick Hendler

Offline

 

#16 05-28-2013 09:32:47

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 869

Re: Defer parsing of JavaScript

I changed it back to $body_insertafter yesterday as I realised you would probably not look for 24 hours and I did not want to leave it out all that time.

The other code you mention only appeared since yesterday afternoon so that is not the cause. It is possible that we corrupted a php file with all the changes we have made. Where would be a good place to start checking?


Simon

Offline

 

#17 05-29-2013 09:28:44

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19723
Website

Re: Defer parsing of JavaScript

The js_footer variable is set and saved in {private}/core/CORE/includes/jslib.php, then printed to the final output by {private}/core/CORE_Display/CORE_Display.php.  Those would be the two places I'd look first.  Then I'd look at the skin to be sure you didn't inadvertently reset the js_footer variable in there anywhere.


Nick Hendler

Offline

 

#18 06-07-2013 08:37:16

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 869

Re: Defer parsing of JavaScript

We have moved to a new server and found a modest increase in the sites performance. I asked them if moving to a more expensive hosting package would improve the sites performance still further and they were honest enough to say no (you are not pushing the current package).

They say the problem is the software. I have retested the static and CCP versions of the home page and the difference between the two times is much greater than before.

TTFB for static page is now just 0.19sec compared to the mid 0.35sec mark for the CCP generated page.

What is causing this lag and how can we improve the carts performance? I tried again with all of the products removed from the database and it was marginally faster but not by much.

I have optimised images, stylesheets, JS but gave up on deferred parsing of the js. Rather than just putting it at the bottom of the page you can use code like this in the head:

Code:

<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "jquery.min.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>

Last edited by sdn (06-07-2013 08:38:53)


Simon

Offline

 

#19 06-10-2013 08:04:25

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19723
Website

Re: Defer parsing of JavaScript

The difference between serving up the static page (HTML) and the dynamic page (CCP) is approximately .14 seconds.  This is excellent performance for a PHP-generated page from a database.  Everything in the software is fully optimized for db calls, memory consumption, cpu usage, etc.  About the only additional savings I can think of that you can attain would be to remove all of the skin widget calls from your skin and hardcode them (ie. your category lists, menus, etc.). Remove the mini shopping cart and rewrite the search form as static HTML in the skin as well.  Basically strip functionality from the skin.  Doing all of that COULD save you .02 seconds.


Nick Hendler

Offline

 

#20 06-20-2017 04:21:14

geraldz
Member
Registered: 09-27-2011
Posts: 251

Re: Defer parsing of JavaScript

It looks like all of the JS moved to the bottom in V9?  Why can't that be done in V8?

Offline

 

#21 06-20-2017 07:43:57

zanart
Member
From: bedford
Registered: 04-02-2008
Posts: 1679

Re: Defer parsing of JavaScript

It probably can, but I expect it would be alot cheaper to upgrade to V9.


- Euorpacart 8

Offline

 

#22 06-20-2017 08:13:42

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19723
Website

Re: Defer parsing of JavaScript

I'm pretty sure Gerald already has K9 ready to go, and is just waiting on getting offers on Amazon as he's got a custom line that requires the items be listed directly on Amazon to get ASINs directly.  Anyway, to answer the question, this functionality could be back-ported from K9 to V8, but I really don't see the point of it.  This is just one small piece of what was done in K9 as far as SEO improvements.


Nick Hendler

Offline

 

Board footer