Defer Non-Critical Styles

[Nick1973]

I've been trying to defer non-critical styles to improve page load speed time, as instructed here.

https://web.dev/defer-non-critical-css/

I am trying to deliver stylesheets with 'preload' as shown in the example on the above link like this

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

The Zen Cart PHP code for delivering stylesheets is this

<?php    /**     * load all template-specific stylesheets, named like "style*.css", alphabetically     */    $directory_array = $template->get_template_part($template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css'), '/^style/', '.css');    foreach ($directory_array as $key => $value) {      echo '<link href="' . $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/' . $value . '" rel="stylesheet">' . "\n";    }    /**     * load stylesheets on a per-page/per-language/per-product/per-manufacturer/per-category basis. Concept by Juxi Zoza.     */    $manufacturers_id = (isset($_GET['manufacturers_id'])) ? $_GET['manufacturers_id'] : '';    $tmp_products_id = (isset($_GET['products_id'])) ? (int)$_GET['products_id'] : '';    $tmp_pagename = ($this_is_home_page) ? 'index_home' : $current_page_base;    if ($current_page_base == 'page' && isset($ezpage_id)) {      $tmp_pagename = $current_page_base . (int)$ezpage_id;    }    $sheets_array = array('/' . $_SESSION['language'] . '_stylesheet',      '/' . $tmp_pagename,      '/' . $_SESSION['language'] . '_' . $tmp_pagename,      '/c_' . $cPath,      '/' . $_SESSION['language'] . '_c_' . $cPath,      '/m_' . $manufacturers_id,      '/' . $_SESSION['language'] . '_m_' . (int)$manufacturers_id,      '/p_' . $tmp_products_id,      '/' . $_SESSION['language'] . '_p_' . $tmp_products_id    );    foreach ($sheets_array as $key => $value) {      //echo "<!--looking for: $value-->\n";      $perpagefile = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . $value . '.css';      if (file_exists($perpagefile)) {        echo '<link href="' . $perpagefile . '" rel="stylesheet">' . "\n";      }    }
    /**     *  custom category handling for a parent and all its children ... works for any c_XX_XX_children.css  where XX_XX is any parent category     */    $tmp_cats = explode('_', $cPath);    $value = '';    foreach ($tmp_cats as $val) {      $value .= $val;      $perpagefile = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/c_' . $value . '_children.css';      if (file_exists($perpagefile)) {        echo '<link href="' . $perpagefile . '" rel="stylesheet">' . "\n";      }      $perpagefile = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/' . $_SESSION['language'] . '_c_' . $value . '_children.css';      if (file_exists($perpagefile)) {        echo '<link href="' . $perpagefile . '" rel="stylesheet">' . "\n";      }      $value .= '_';    }
    /**     * load printer-friendly stylesheets -- named like "print*.css", alphabetically     */    $directory_array = $template->get_template_part($template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css'), '/^print/', '.css');    sort($directory_array);    foreach ($directory_array as $key => $value) {      echo '<link href="' . $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/' . $value . '" media="print" rel="stylesheet">' . "\n";    }
    require($template->get_template_dir('stylesheet_zca_colors.php', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/stylesheet_zca_colors.php');
    /** CDN for jQuery core * */    ?>
    <!--<script>window.jQuery || document.write(unescape('%3Cscript src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"%3E%3C/script%3E'));</script>-->    <script>window.jQuery || document.write(unescape('%3Cscript src="<?php echo $template->get_template_dir('.js', DIR_WS_TEMPLATE, $current_page_base, 'jscript'); ?>/jquery.min.js"%3E%3C/script%3E'));</script>
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>-->
    <?php    /**     * load all site-wide jscript_*.js files from includes/templates/YOURTEMPLATE/jscript, alphabetically     */    $directory_array = $template->get_template_part($template->get_template_dir('.js', DIR_WS_TEMPLATE, $current_page_base, 'jscript'), '/^jscript_/', '.js');    foreach ($directory_array as $key => $value) {      echo '<script src="' . $template->get_template_dir('.js', DIR_WS_TEMPLATE, $current_page_base, 'jscript') . '/' . $value . '"></script>' . "\n";    }
    /**     * load all page-specific jscript_*.js files from includes/modules/pages/PAGENAME, alphabetically     */    $directory_array = $template->get_template_part($page_directory, '/^jscript_/', '.js');    foreach ($directory_array as $key => $value) {      echo '<script src="' . $page_directory . '/' . $value . '"></script>' . "\n";    }
    /**     * load all site-wide jscript_*.php files from includes/templates/YOURTEMPLATE/jscript, alphabetically     */    $directory_array = $template->get_template_part($template->get_template_dir('.php', DIR_WS_TEMPLATE, $current_page_base, 'jscript'), '/^jscript_/', '.php');    foreach ($directory_array as $key => $value) {      /**       * include content from all site-wide jscript_*.php files from includes/templates/YOURTEMPLATE/jscript, alphabetically.       * These .PHP files can be manipulated by PHP when they're called, and are copied in-full to the browser page       */      require($template->get_template_dir('.php', DIR_WS_TEMPLATE, $current_page_base, 'jscript') . '/' . $value);      echo "\n";    }    /**     * include content from all page-specific jscript_*.php files from includes/modules/pages/PAGENAME, alphabetically.     */    $directory_array = $template->get_template_part($page_directory, '/^jscript_/');    foreach ($directory_array as $key => $value) {      /**       * include content from all page-specific jscript_*.php files from includes/modules/pages/PAGENAME, alphabetically.       * These .PHP files can be manipulated by PHP when they're called, and are copied in-full to the browser page       */      require($page_directory . '/' . $value);      echo "\n";    }
// DEBUG: echo '<!-- I SEE cat: ' . $current_category_id . ' || vs cpath: ' . $cPath . ' || page: ' . $current_page . ' || template: ' . $current_template . ' || main = ' . ($this_is_home_page ? 'YES' : 'NO') . ' -->';    ?>

So how would I implement 'preload' to defer non-critical styles please?

I'd also like to do the same with JS files

[lindasdd]

I don't know the answer to your question.

Based on GtMetrix though your stylesheets are not having much impact on your speed so to speed things up you may want to focus on other things first such as getting rid of loading multiple versions of jscript, not minifying your CSS and JS assets, and optimizing your images even more.

I don't always use it, but one tool for CSS/JS minifying within Zen-Cart is Numinix's free tool: https://www.numinix.com/zen-cart-plu.../css-js-loader

Lastly, your site is already very fast. At this point, I would be surprised if an increase in speed would impact sales.

[DrByte]

I don't always use it, but one tool for CSS/JS minifying within Zen-Cart is Numinix's free tool: https://www.numinix.com/zen-cart-plu.../css-js-loader

FWIW that "free tool" always causes upgrade nightmares and troubleshooting headaches. It's the first thing I rip out whenever I'm asked to work on a site. Don't bloat your site with it.

[DrByte]

Based on GtMetrix though your stylesheets are not having much impact on your speed so to speed things up you may want to focus on other things first such as getting rid of loading multiple versions of jscript, ... , and optimizing your images even more.

...

Lastly, your site is already very fast. At this point, I would be surprised if an increase in speed would impact sales.

Agreed.

[Nick1973]

Agreed.

it's mainly the mobile speed that is much slower.

And i don't like using the numinix plugin for similar reasons to you. I've found it can quite easily break a site. There are other ways to improve efficiency.

I realise there will always be arguments on if speed actually improves sales. However, certainly in some cases, it does improve page rank, which in turn improves sales. I know this as I have worked on speed on many sites and have seen a big improvement on the quality of traffic and the quantity of traffic getting through to the sites and customers purchasing. And it also depends on the target search that the website is aiming at. It is naturally harder to get a good page rank for a hugely popular search. So, in that case, every possible way to improve where the site ranks in searches has to be covered. Which also includes page speed. I agree that there might be sites that are slower that are already ranking high. However, if you're going to be serious about trying to improve where your site ranks in relation to the competition, then page speed improvement combined with on page SEO is an issue which has to be looked at. All I have been trying to do is squeeze out every last bit of speed that I can possibly squeeze out. Which is why I asked the question in the first place.

[balihr]

I won't go into discussion about optimizing other content or any other speed optimization since this was not your question (I'm pretty sure you know about optimizing images and minifying static content). I will, however, agree that anything that *can* be optimized, *should* be optimized. Even if it's a 0.5% improvement, it's an improvement and it can get you slightly above your competition, which can ultimately result in a huuuuge difference between 10th and 11th position in generic search results (aka page 1 vs page 2), which then actually does result in potential sales increase.

From my understanding, and I might be wrong, the optimal result would be achieved by splitting the stylesheet.css into numerous files, basically one css file for each individual page. For example, you don't need to load #shoppingCart or #shippingEstimatorContent styles on your home page, or .categoryListBoxContents styles on your product_info page, and which are usually located in the main stylesheet file. The end result can be loading 15.5kB instead of 17kB, which seems irrelevant, but at the end of the day, every byte counts.

So, IMHO, first step would be to separate styles into individual css files (of course, there will always be a need for a "shared" css file).
The next step would be exactly as described in the tutorial - you would manually extract the critical styles and this is where I would go for the fun part. In the html_header.php file, you could replace

foreach($sheets_array as $key => $value) {
    //echo "<!--looking for: $value-->\n";
    $perpagefile = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . $value . '.css';
    if (file_exists($perpagefile)) echo '<link rel="stylesheet" type="text/css" href="' . $perpagefile .'" />'."\n";
  }

with

foreach($sheets_array as $key => $value) {
    //echo "<!--looking for: $value-->\n";
    $perpagefile = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . $value . '.css';
    $perpagefile_critical = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . $value . '_critical.css';

    if (file_exists($perpagefile_critical)) {
        echo '<style>' . file_get_contents(DIR_FS_CATALOG.$perpagefile_critical) . '</style>';
    }
    if (file_exists($perpagefile)) echo '<link rel="preload" href="' . $perpagefile .'" as="style" onload="this.onload=null;this.rel=\'stylesheet\'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>'."\n";
  }

Now, this code is looking for 2 files instead of one: for example, product_info.css and product_info_critical.css. The critical one will be loaded as inline css, and the non-critical would be loaded asynchronously.

Please note this is NOT a ready-made solution and probably needs A LOT of work before it can be used in production mode, but it should help you get started. Also, I doubt this can be automated, meaning it's a lot of really painful work involved on a per-site basis... Good luck!

[DrByte]

I have no objection to improving speed.

With everything there are tradeoffs.

Splitting the CSS into separate smaller files means more maintenance complexity, and increases the number of "hits" required to load associated files on different pages where it could have already been cached if it was all in one file.

Minifying has its benefits for sure. Pushing the compiled/minified assets to production after running a local build process is even more efficient than minifying on-the-fly.

Deferring certain parts to load "later" has merit, but again this assumes that you always know what needs deferring. But what if the customer's first "hit" is actually to the page whose assets were configured to be deferred? There's more to deferring than just delaying loading. Injecting placeholders is also important to help minimize the sudden "Layout Shift" when late-loaded styles are finally applied.

HTTP/2 stream loading of assets allows for concurrency and reduced traffic "hits" in order to do the loading of assets. This requires a bunch of server-side configuration and coding.

Specifying which CSS and JS assets to load in the page "head" vs later in the footer also has merit, but again one must discern which assets are indeed needed for "display" and "page drawing" and keep them loaded early, vs pushing less-important ones to load later (including those that you might want the browser to cache so the next page loads quickly).

Again, once the browser has cached the assets all the "defer" issues become moot. Some will say that "size" issues also become moot then, and they wouldn't be wrong.

Bloat is another issue: sending stuff to the browser that is never used on any of your site's pages, is a waste of download bandwidth and a waste of CPU processing, both which contribute to slowing things down. Culling unused JS and CSS will help, but you need to know what is and isn't used/needed.

CSS "size" is less frequently a performance issue unless it's bloated or contains syntax errors. More frequently it's JS that's large or never used or could be avoided.

[Nick1973]

Just a thought, I have asked this before as well. And I don't even know if it would lead to speed improvement. I suppose that would be something that would have to be tested.

What about using https://www.litespeedtech.com on Zen Cart?

They have a plugin for another BIG CMS you will see on their site. It provides a fast caching and optimisation solution, which improves speed and efficiency. I use this on 'that' CMS and there can be quite big differences.
I don't know if it would do the same for Zen Cart, but perhaps an optional switch in the admin to use it or not would be good.

And it is just a suggestion!!! I have no idea if that would improve speed and efficiency for Zen Cart.