Results 1 to 5 of 5
  1. #1
    Join Date
    Jan 2011
    Location
    Adelaide, Australia
    Posts
    944
    Plugin Contributions
    1

    Default 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 Click image for larger version. 

Name:	index above fold first render.jpg 
Views:	14 
Size:	12.5 KB 
ID:	17495
    screenshot showing fully loaded (original) Click image for larger version. 

Name:	index original.jpg 
Views:	9 
Size:	11.1 KB 
ID:	17496
    Last edited by shags38; 29 Nov 2017 at 07:12 AM.

  2. #2
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    6,982
    Plugin Contributions
    63

    Default 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

  3. #3
    Join Date
    Jan 2011
    Location
    Adelaide, Australia
    Posts
    944
    Plugin Contributions
    1

    Default Re: Prioritize Executable Order of JavaScript , CSS, HTML - Where to look in ZC files

    Quote Originally Posted by lat9 View Post
    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

  4. #4
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    6,982
    Plugin Contributions
    63

    Default 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!

  5. #5
    Join Date
    Jan 2011
    Location
    Adelaide, Australia
    Posts
    944
    Plugin Contributions
    1

    Default Re: Prioritize Executable Order of JavaScript , CSS, HTML - Where to look in ZC files

    Quote Originally Posted by lat9 View Post
    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

 

 

Similar Threads

  1. Don't understand. Where are the HTML files?
    By Kolusion in forum Templates, Stylesheets, Page Layout
    Replies: 16
    Last Post: 31 Aug 2011, 03:13 AM
  2. Product Sort Order - Can I prioritize?
    By Feznizzle in forum Basic Configuration
    Replies: 6
    Last Post: 25 Jun 2010, 08:41 PM
  3. Suture CSS or JavaScript Files Together
    By skipwater in forum General Questions
    Replies: 0
    Last Post: 22 Nov 2008, 06:39 PM
  4. Where should I put my php/javascript files?
    By seifer987 in forum General Questions
    Replies: 5
    Last Post: 10 Nov 2008, 08:10 AM
  5. Where to put css/js files?
    By superprg in forum General Questions
    Replies: 2
    Last Post: 7 Mar 2008, 02:35 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR