Latest News: (loading..)
tgely

234BS - Speed Improvements

48 posts in this topic

@@Gergely - for sure.

 

hanced speed up

modified:

 

 

1. template_top.php

 

modified:

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2014 osCommerce

  Released under the GNU General Public License
*/

  $oscTemplate->buildBlocks();

  if (!$oscTemplate->hasBlocks('boxes_column_left')) {
    $oscTemplate->setGridContentWidth($oscTemplate->getGridContentWidth() + $oscTemplate->getGridColumnWidth());
  }

  if (!$oscTemplate->hasBlocks('boxes_column_right')) {
    $oscTemplate->setGridContentWidth($oscTemplate->getGridContentWidth() + $oscTemplate->getGridColumnWidth());
  }
?>
<!DOCTYPE html>
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta charset="<?php echo CHARSET; ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo tep_output_string_protected($oscTemplate->getTitle()); ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">

<!--<link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">-->
<style>
<?php
      ob_start();
      include('ext/bootstrap/css/bootstrap.min.css');
      $template = ob_get_clean();
      print($template);
?>
</style>

<script>
/*!
loadCSS: load a CSS file asynchronously.
[c]2014 @scottjehl, Filament Group, Inc.
Licensed MIT
*/
function loadCSS( href, before, media ){
"use strict";
// Arguments explained:
// `href` is the URL for your CSS file.
// `before` optionally defines the element we'll use as a reference for injecting our <link>
// By default, `before` uses the first <script> element in the page.
// However, since the order in which stylesheets are referenced matters, you might need a more specific location in your document.
// If so, pass a different reference element to the `before` argument and it'll insert before that instead
// note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
var ss = window.document.createElement( "link" );
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
var sheets = window.document.styleSheets;
ss.rel = "stylesheet";
ss.href = href;
// temporarily, set media to something non-matching to ensure it'll fetch without blocking render
ss.media = "only x";
// inject link
ref.parentNode.insertBefore( ss, ref );
// This function sets the link's media back to `all` so that the stylesheet applies once it loads
// It is designed to poll until document.styleSheets includes the new sheet.
function toggleMedia(){
var defined;
for( var i = 0; i < sheets.length; i++ ){
if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){
defined = true;
}
}
if( defined ){
ss.media = media || "all";
}
else {
setTimeout( toggleMedia );
}
}
toggleMedia();
return ss;
}
//loadCSS('ext/bootstrap/css/bootstrap.min.css');
loadCSS('custom.css');
loadCSS('user.css');
</script>
<!--
<link href="custom.css" rel="stylesheet">
<link href="user.css" rel="stylesheet">-->

<!--[if lt IE 9]>
   <script src="ext/js/html5shiv.js"></script>
   <script src="ext/js/respond.min.js"></script>
   <script src="ext/js/excanvas.min.js"></script>
<![endif]-->
 
<!--<script src="ext/jquery/jquery-1.11.1.min.js"></script>-->
<script>
<?php
      ob_start();
      include('ext/jquery/jquery-1.11.1.min.js');
      $template = ob_get_clean();
      print($template);
?>
</script>

<!-- font awesome -->
<!--<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">-->
<script>loadCSS('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');</script>

<?php echo $oscTemplate->getBlocks('header_tags'); ?>
</head>
<body>

  <?php echo $oscTemplate->getContent('navigation'); ?>
  
  <div id="bodyWrapper" class="<?php echo BOOTSTRAP_CONTAINER; ?>">
    <div class="row">

      <?php require(DIR_WS_INCLUDES . 'header.php'); ?>

      <div id="bodyContent" class="col-md-<?php echo $oscTemplate->getGridContentWidth(); ?> <?php echo ($oscTemplate->hasBlocks('boxes_column_left') ? 'col-md-push-' . $oscTemplate->getGridColumnWidth() : ''); ?>">

2. ht_grid_list_view.php

 

change:

          $oscTemplate->addBlock('<script src="ext/jquery/cookie.js"></script>' . "\n", $this->group);

to:

          ob_start();
          include('ext/jquery/cookie.js');
          $template = ob_get_clean();

          $oscTemplate->addBlock('<script>' . $template . '</script>' . "\n", $this->group);

Note: not clean code

 

3. bootstrap.min.css

 

change:

url(../

to:

url(ext/bootstrap/

4. .htaccess

 

added to appache server:

# a jpeg formatum direkt kihagyva a captcha miatt
<FilesMatch "\.(ico|jpg|png|gif|js|css|swf)$">
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 30 days"
</IfModule>
Header unset ETag
FileETag None
</FilesMatch>

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

Note: not clean code

 

This is not the final optimatization but we could step forward.

Edited by Gergely
missed / in code

Share this post


Link to post
Share on other sites

@@Gergely thanks for this, looks interesting. We're absolutely not changing any external library code (eg the change you need in bootstrap.min.css) - with that in mind, does it negate the rest of the changes ?

 

I know the htaccess change can still be used, the deflate of code, no problem.

 

What happens if .js is turned off (eg in a screen reader, or on kindle etc)...

Share this post


Link to post
Share on other sites

@@burt  the first version was seated in template_top between noscript tags but forget to put last.

<!--
<link href="custom.css" rel="stylesheet">
<link href="user.css" rel="stylesheet">-->

to:

<noscript>
<link href="custom.css" rel="stylesheet">
<link href="user.css" rel="stylesheet">
</noscript>

and

<!--<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">-->

to:

<noscript>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</noscript>

If you dont change the library code the base path will be false and fonts not loading. I tested under SSL and catalog folder so I can put off from catalog/bootsrap/font mappa but its not the best. Other solution could be load file content from remote URL. example from CDN https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.css

This example patterns are not a gold code now so everybody could test. Some other solutions are possible I have just started to think about speed problem.

Share this post


Link to post
Share on other sites

rather modify bootstrap_min.css than insert into .htaccess rewrite rules
 

Redirect 301 /fonts/glyphicons-halflings-regular.woff2 /ext/bootstrap/fonts/glyphicons-halflings-regular.woff2
Redirect 301 /fonts/glyphicons-halflings-regular.woff /ext/bootstrap/fonts/glyphicons-halflings-regular.woff
Redirect 301 /fonts/glyphicons-halflings-regular.ttf /ext/bootstrap/fonts/glyphicons-halflings-regular.ttf
Redirect 301 /fonts/glyphicons-halflings-regular.eot /ext/bootstrap/fonts/glyphicons-halflings-regular.eot
Redirect 301 /fonts/glyphicons-halflings-regular.svg /ext/bootstrap/fonts/glyphicons-halflings-regular.svg

but the best would be just use awesome font icons only.

Share this post


Link to post
Share on other sites

It's possible to include to minify the code like HTMl, js, css.

 

For example :

 

create a class call MinifyCode.php in Classes directory (catalog)

  Class MinifyCode {


// HTML Minifier
    function minifyHtml($input) {

      if (trim($input) === "") return $input;
// Remove extra white-space(s) between HTML attribute(s)
      $input = preg_replace_callback('#<([^\/\s<>!]+)(?:\s+([^<>]*?)\s*|\s*)(\/?)>#s', function ($matches) {
        return '<' . $matches[1] . preg_replace('#([^\s=]+)(\=([\'"]?)(.*?)\3)?(\s+|$)#s', ' $1$2', $matches[2]) . $matches[3] . '>';
      }, str_replace("\r", "", $input));

      // Minify inline CSS declaration(s)
      if (strpos($input, ' style=') !== false) {
        $input = preg_replace_callback('#<([^<]+?)\s+style=([\'"])(.*?)\2(?=[\/\s>])#s', function ($matches) {
          return '<' . $matches[1] . ' style=' . $matches[2] . $this->minifyCss($matches[3]) . $matches[2];
        }, $input);
      }

      return preg_replace(
        array(
// t = text
// o = tag open
// c = tag close
// Keep important white-space(s) after self-closing HTML tag(s)
          '#<(img|input)(>| .*?>)#s',
// Remove a line break and two or more white-space(s) between tag(s)
          '#(<!--.*?-->)|(>)(?:\n*|\s{2,})(<)|^\s*|\s*$#s',
          '#(<!--.*?-->)|(?<!\>)\s+(<\/.*?>)|(<[^\/]*?>)\s+(?!\<)#s', // t+c || o+t
          '#(<!--.*?-->)|(<[^\/]*?>)\s+(<[^\/]*?>)|(<\/.*?>)\s+(<\/.*?>)#s', // o+o || c+c
          '#(<!--.*?-->)|(<\/.*?>)\s+(\s)(?!\<)|(?<!\>)\s+(\s)(<[^\/]*?\/?>)|(<[^\/]*?\/?>)\s+(\s)(?!\<)#s', // c+t || t+o || o+t -- separated by long white-space(s)
          '#(<!--.*?-->)|(<[^\/]*?>)\s+(<\/.*?>)#s', // empty tag
          '#<(img|input)(>| .*?>)<\/\1\x1A>#s', // reset previous fix
          '#( ) (?![<\s])#', // clean up ...
// Force line-break with `
` or `
`
          '#&\#(?:10|xa);#',
          // Force white-space with ` ` or ` `
          '#&\#(?:32|x20);#',
// Remove HTML comment(s) except IE comment(s)
          '#\s*<!--(?!\[if\s).*?-->\s*|(?<!\>)\n+(?=\<[^!])#s'
        ),

        array(
          "<$1$2</$1\x1A>",
          '$1$2$3',
          '$1$2$3',
          '$1$2$3$4$5',
          '$1$2$3$4$5$6$7',
          '$1$2$3',
          '<$1$2',
          '$1 ',
          "\n",
          ' ',
          ""
        ),
        $input);
    }

// CSS Minifier => http://ideone.com/Q5USEF + improvement(s)
    function minifyCss($input)  {
      if (trim($input) === "") return $input;
      // Force white-space(s) in `calc()`
      if (strpos($input, 'calc(') !== false) {
        $input = preg_replace_callback('#(?<=[\s:])calc\(\s*(.*?)\s*\)#', function ($matches) {
          return 'calc(' . preg_replace('#\s+#', "\x1A", $matches[1]) . ')';
        }, $input);
      }
      return preg_replace(
        array(
          // Remove comment(s)
          '#("(?:[^"\\\]++|\\\.)*+"|\'(?:[^\'\\\\]++|\\\.)*+\')|\/\*(?!\!)(?>.*?\*\/)|^\s*|\s*$#s',
          // Remove unused white-space(s)
          '#("(?:[^"\\\]++|\\\.)*+"|\'(?:[^\'\\\\]++|\\\.)*+\'|\/\*(?>.*?\*\/))|\s*+;\s*+(})\s*+|\s*+([*$~^|]?+=|[{};,>~+]|\s*+-(?![0-9\.])|!important\b)\s*+|([[(:])\s++|\s++([])])|\s++(:)\s*+(?!(?>[^{}"\']++|"(?:[^"\\\]++|\\\.)*+"|\'(?:[^\'\\\\]++|\\\.)*+\')*+{)|^\s++|\s++\z|(\s)\s+#si',
          // Replace `0(cm|em|ex|in|mm|pc|pt|px|vh|vw|%)` with `0`
          '#(?<=[\s:])(0)(cm|em|ex|in|mm|pc|pt|px|vh|vw|%)#si',
          // Replace `:0 0 0 0` with `:0`
          '#:(0\s+0|0\s+0\s+0\s+0)(?=[;\}]|\!important)#i',
          // Replace `background-position:0` with `background-position:0 0`
          '#(background-position):0(?=[;\}])#si',
          // Replace `0.6` with `.6`, but only when preceded by a white-space or `=`, `:`, `,`, `(`, `-`
          '#(?<=[\s=:,\(\-]|&\#32;)0+\.(\d+)#s',
          // Minify string value
          '#(\/\*(?>.*?\*\/))|(?<!content\:)([\'"])([a-z_][-\w]*?)\2(?=[\s\{\}\];,])#si',
          '#(\/\*(?>.*?\*\/))|(\burl\()([\'"])([^\s]+?)\3(\))#si',
          // Minify HEX color code
          '#(?<=[\s=:,\(]\#)([a-f0-6]+)\1([a-f0-6]+)\2([a-f0-6]+)\3#i',
          // Replace `(border|outline):none` with `(border|outline):0`
          '#(?<=[\{;])(border|outline):none(?=[;\}\!])#',
          // Remove empty selector(s)
          '#(\/\*(?>.*?\*\/))|(^|[\{\}])(?:[^\s\{\}]+)\{\}#s',
          '#\x1A#'
        ),
        array(
          '$1',
          '$1$2$3$4$5$6$7',
          '$1',
          ':0',
          '$1:0 0',
          '.$1',
          '$1$3',
          '$1$2$4$5',
          '$1$2$3',
          '$1:0',
          '$1$2',
          ' '
        ),
        $input);
    }

    // JavaScript Minifier
    function minifyJs($input) {
      if (trim($input) === "") return $input;
      return preg_replace(
        array(
          // Remove comment(s)
          '#\s*("(?:[^"\\\]++|\\\.)*+"|\'(?:[^\'\\\\]++|\\\.)*+\')\s*|\s*\/\*(?!\!|@[member='CC']_on)(?>[\s\S]*?\*\/)\s*|\s*(?<![\:\=])\/\/.*(?=[\n\r]|$)|^\s*|\s*$#',
          // Remove white-space(s) outside the string and regex
          '#("(?:[^"\\\]++|\\\.)*+"|\'(?:[^\'\\\\]++|\\\.)*+\'|\/\*(?>.*?\*\/)|\/(?!\/)[^\n\r]*?\/(?=[\s.,;]|[gimuy]|$))|\s*([!%&*\(\)\-=+\[\]\{\}|;:,.<>?\/])\s*#s',
          // Remove the last semicolon
          '#;+\}#',
          // Minify object attribute(s) except JSON attribute(s). From `{'foo':'bar'}` to `{foo:'bar'}`
          '#([\{,])([\'])(\d+|[a-z_]\w*)\2(?=\:)#i',
          // --ibid. From `foo['bar']` to `foo.bar`
          '#([\w\)\]])\[([\'"])([a-z_]\w*)\2\]#i',
          // Replace `true` with `!0`
          '#(?<=return |[=:,\(\[])true\b#',
          // Replace `false` with `!1`
          '#(?<=return |[=:,\(\[])false\b#',
          // Clean up ...
          '#\s*(\/\*|\*\/)\s*#'
        ),
        array(
          '$1',
          '$1$2',
          '}',
          '$1$3',
          '$1.$3',
          '!0',
          '!1',
          '$1'
        ),
        $input);
    }
  }

In includes/classes/sosc_template.php

 

Add at this end

/*
 * Minify HTML code
 *
 * @[member='param'] string module name
 * @[member='Return'], return the minify code
 * @[member='access'] public
 */
    function getMinifyTemplateBlockModule($template_module) {

      if (CONFIGURATION_MINIFY_TEMPLATE == 'true') { // activate or not the minifycode
        $minifyCode = new MinifyCode();
        $str = $this->getBlocks($template_module);
        $minify = $minifyCode->minifyHtml($str); // minify the only the html code
      } else {
        $minify = $this->getBlocks($template_module);
      }

      return $minify;
    }


function getMinifyTemplateBlockContent($template_module) {

if (CONFIGURATION_MINIFY_TEMPLATE == 'true') { // activate or not the minifycode
$minifyCode = new MinifyCode();
$str = $this->getBlocks($template_module);
$minify = $minifyCode->minifyHtml($str); // minify the only the html code
} else {
$minify = $this->getBlocks($template_module);
}

return $minify;
}

  }

Database:

INSERT INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) VALUES ('Do you want to minify the html code in the shop catalog', 'CONFIGURATION_MINIFY_TEMPLATE', 'false', 'Minify the HTML code to improve site speed' , '1', '5', 'osc_cfg_select_option(array(\'true\', \'false\'), ', now());

Now change inside the code these elements in all files.

 

$oscTemplate->getContent('account') by by $oscTemplate->getMinifyTemplateBlockContent('account')

$oscTemplate->getBlocks('account') by $oscTemplate->getMinifyTemplateBlockModule('account')

 

Must work.

Edited by Gyakutsuki

Share this post


Link to post
Share on other sites

Thanks @@Gyakutsuki

Minified codes could be cached from work directory with expired time control.

Share this post


Link to post
Share on other sites

@GergelyYes it's better, you can optimise the code with only one modiification inside template and osc code.

 

delete this line

function getMinifyTemplateBlockContent($template_module) {

if (CONFIGURATION_MINIFY_TEMPLATE == 'true') { // activate or not the minifycode
$minifyCode = new MinifyCode();
$str = $this->getBlocks($template_module);
$minify = $minifyCode->minifyHtml($str); // minify the only the html code
} else {
$minify = $this->getBlocks($template_module);
}

return $minify;
}

update this line

    public function getBlocks($group) {
      if ($this->hasBlocks($group)) {

        if (CONFIGURATION_MINIFY_TEMPLATE == 'false') {
          $getblock = implode("\n", $this->_blocks[$group]);
        } else { 
          require ('includes/classes/MinifyCode');
          $minifyCode = new MinifyCode();
          $str = implode("\n", $this->_blocks[$group]);
          $getblock = $minifyCode->minifyHtml($str);
        }

        return $getblock;
      }
    }

That's all.

Share this post


Link to post
Share on other sites

@burt

 

The speed depends on your addon on you website, for example you insert a banner rotative in responsive, there is an influence on the speed, you don't minify the js, there is an influence. Depends on the server configuration, there also is an influence.

 

I think the speed is not the best indicator to compare with your sytem but the code must respect the criterias by google.

 

Concerning this code, I use only for html code but the code is also make for css and js.

And it must developped with a cache system appropriate or with the cache developped inside Osc.

That's I noted, my page is downloaded more fastest than before without cache.

 

Note :You must adapte to content page the code.

Edited by Gyakutsuki

Share this post


Link to post
Share on other sites

Google ad tag is a :poop: for speed..
 

//www.googleadservices.com/pagead/conversion.js

Mobile site page speed decrease approx 20% by google codes. Assyncron mode dosnt work.

Share this post


Link to post
Share on other sites

@@Gyakutsuki what I am asking is this:

 

what is the before and after on a new install of Responsive

Share this post


Link to post
Share on other sites
burt The both normal or BS are the same,

I think you talk about the code.

One classe (see below)

Just a little modification inside the template. It's not intrusive.

 

For example, the addblock is change like this

    public function getBlocks($group) {
      if ($this->hasBlocks($group)) {

        if (CONFIGURATION_MINIFY_TEMPLATE == 'false') {
          $getblock = implode("\n", $this->_blocks[$group]);
        } else { 
          require ('includes/classes/MinifyCode');
          $minifyCode = new MinifyCode();
          $str = implode("\n", $this->_blocks[$group]);
          $getblock = $minifyCode->minifyHtml($str);
        }

        return $getblock;
      }
    }

You must just recopy the code for addcontent.

 

No other modifications.

After concerning the cache it's an another problem, don't include for the moment.

 

the best way is to test.

Edited by Gyakutsuki

Share this post


Link to post
Share on other sites

@@Gyakutsuki you might make an addon out of it so that anyone who wants to test it can more easily do so ?

Share this post


Link to post
Share on other sites

@@Gyakutsuki :thumbsup:

In the addon you have misspelled __construct()

 

Tested on latest edge which scores 100/75/91 out of the box

 

Installed (and turned on) your addon:

100/74/90

 

Turned off:

100/75/91

 

Conclusion:

Minifying the HTML in this way slows down the site according to Googles tool.

Edited by burt
I also mis-spelled construct in this post

Share this post


Link to post
Share on other sites

Tk for correction.

Like I said, Google propose in their criteria to minify html, css, js. After that the speed is for me a relative indicator and depends the contribution what do you have.

For me the speed is increased.

Edited by Gyakutsuki

Share this post


Link to post
Share on other sites

Yes, it seems strange (and incorrect) that minified HTML scores less than unminified HTML.

This was on a virgin installation of Edge, perhaps others can try it on their shops and report back the Before and After.

Edited by burt

Share this post


Link to post
Share on other sites

@@Gyakutsuki

Hi

 

I must be so thick but where do I find, the following to change(hope that makes sense)

 

$oscTemplate->getContent('account') by by $oscTemplate->getMinifyTemplateBlockContent('account')

$oscTemplate->getBlocks('account') by $oscTemplate->getMinifyTemplateBlockModule('account')

 

many thanks

Cheers

Grandpa

Share this post


Link to post
Share on other sites

@grandpaj

 

this code does'nt exist now; It was before, just apply the contribution in download, that's all.



$oscTemplate->getContent('account') by by $oscTemplate->getMinifyTemplateBlockContent('account')

$oscTemplate->getBlocks('account') by $oscTemplate->getMinifyTemplateBlockModule('account')

Share this post


Link to post
Share on other sites

@@Gyakutsuki

Hi Loic

 

Again I must be thick, but in admin where is the module switched on. I have checked like Header tags, Content. But obviously not the right place.

 

Cheers

Grandpa

Edited by grandpaj

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now