Prioritize Executable Order of JavaScript , CSS, HTML - Where to look in ZC files?
In line with Google Page Speed I need to prioritize the execution of JavaScript and CSS so that above the fold content loads first. So I need to know what file(s) in ZC would need to be modified to achieve this. From what I understand searching the subject I should be able to change the loading execution order. My intention would to be to combine all the (already minified) JavaScript and CSS into two files (each) with the file containing the required above the fold files to load first followed by the other.
Any assistance will be greatly appreciated.
cheers,
Mike
explanation from Google Page Speed test result
Prioritize visible content
Your page requires additional network round trips to render the above-the-fold content. For best performance, reduce the amount of HTML needed to render above-the-fold content.
The entire HTML response was not sufficient to render the above-the-fold content. This usually indicates that additional resources, loaded after HTML parsing, were required to render above-the-fold content. Prioritize visible content that is needed for rendering above-the-fold by including it directly in the HTML response.
Only about 34% of the final above-the-fold content could be rendered with the full HTML response see screenshot show original.
screenshot showing only 34% load - most obvious omission is header / logo Attachment 17495
screenshot showing fully loaded (original) Attachment 17496
Re: Prioritize Executable Order of JavaScript , CSS, HTML - Where to look in ZC files
The PHP script that gets the HTML page going and fills in all the information present in the <head></head> section is normally
Code:
/includes/templates/YOUR_TEMPLATE/common/html_header.php
Re: Prioritize Executable Order of JavaScript , CSS, HTML - Where to look in ZC files
Quote:
Originally Posted by
lat9
The PHP script that gets the HTML page going and fills in all the information present in the <head></head> section is normally
Code:
/includes/templates/YOUR_TEMPLATE/common/html_header.php
Thank you for your reply Cindy. In that file I have found the lines that appear to give the required instructions and the load sequence is in 'alphabetical' order, e.g.
Code:
/**
* load all site-wide jscript_*.js files from includes/templates/YOURTEMPLATE/jscript, alphabetically
*/
So would I be right in assuming that if I create the files I spoke of, 'above-the-fold' and 'other' and named them in alphabetical priority e.g. abovefold_jscript.js and other_jscript.js that this would work without making any alterations at all to
Code:
/includes/templates/YOUR_TEMPLATE/common/html_header.php
again many thanks,
Mike
Re: Prioritize Executable Order of JavaScript , CSS, HTML - Where to look in ZC files
Mike, it think that's a good plan ... so long as you take into account that page-specific jscript_*.php and .js files can be loaded, along with template-based jscript_*.php ones.
You might find the Zen Cart wiki article on the CSS/JS loading process an interesting read!
Re: Prioritize Executable Order of JavaScript , CSS, HTML - Where to look in ZC files
Quote:
Originally Posted by
lat9
Mike, it think that's a good plan ... so long as you take into account that page-specific jscript_*.php and .js files can be loaded, along with template-based jscript_*.php ones.
You might find the Zen Cart
wiki article on the CSS/JS loading process an interesting read!
Thank you so much Cindy, wonderful advice - great article that gives me the exact solution I needed. Just wondering if that 'on_load' attribute could also be applied to .CSS files?
cheers,
Mike
p.s. I have now managed through minifying .css and .js files and compressing images not handled by IH4 to get my sites to scores of 95% performance rating or higher from levels of between 60 and 75% with load speeds down to less than 1.5s from 4-5s average (tested using pingdom dotcom). Wish I had looked at this a few years ago :ohmy:
