Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

HTTP/2 JS and CSS aggregation

 
Reply
   X-Cart forums > X-Cart 5 > General questions (X-Cart 5)
 
Thread Tools Search this Thread
  #1  
Old 07-20-2017, 06:23 AM
 
xgarb xgarb is offline
 

eXpert
  
Join Date: Jul 2004
Location: UK
Posts: 263
 

Default HTTP/2 JS and CSS aggregation

We've just had HTTP2 enabled on our server and it seems to have made things faster.

I'm wondering if we should switch off the aggregation for JS and/or CSS files to help with the usual render blocking elements problem?


PS: Another Google webpage tester: https://developers.google.com/web/tools/lighthouse/?hl=en
__________________
Core version: 5.5.xx
Reply With Quote

The following user thanks xgarb for this useful post:
PhilJ (07-20-2017)
  #2  
Old 07-20-2017, 06:52 AM
  cflsystems's Avatar 
cflsystems cflsystems is offline
 

Veteran
  
Join Date: Apr 2007
Posts: 14,190
 

Default Re: HTTP/2 JS and CSS aggregation

I don't think it is a good idea to not use aggregation. XC5 has tons of css/js files so even if you do not see some page speed difference think of it as
- loading 100 files vs loading 1 file

As for the Lighthouse project regarding css/js - while XC5 loads some css/js files based on page being shown there is still tons of css/js that load based on module. So if Module A loads css/js files only because it is active they will be included regardless the page and of course if it is not Module A page will be reported as "unused". But you cannot do anything about it unless rewriting the module...
Oversized images will be reported almost all the time as XC5 loads image and shrinks it due to improper css - product images, category images, etc. The image container has a border and if you set image size to 200px for example (in admin) the image being loaded is 200px, its container is 200px but usable space is 196px (depending on border width) - image is shrinked down to 196px....
__________________
Steve Stoyanov
CFLSystems.com
Web Development
Reply With Quote
  #3  
Old 07-20-2017, 07:08 AM
 
xgarb xgarb is offline
 

eXpert
  
Join Date: Jul 2004
Location: UK
Posts: 263
 

Default Re: HTTP/2 JS and CSS aggregation

I did some tests with Lighthouse and it seems to suggest that leaving aggregation on is faster.

My thinking was with HTTP/2 you don't need to aggregate but I guess if the server and the browser are still dealing with 30 odd JS and CSS files it will slow things down.

Maybe outside of the test environment it would be quicker as the individual files are cached and can be used on any subsequent pages. As it is now.. sometimes the big aggregated files can be used on a subsequent page and other times it's another big aggregated file that has to be downloaded.


Re images.. when I design a site I use 'View Image Info' in the right click menu in Firefox to find out the actual size my images are being displayed at and then set the image creation script to make them that size.

There's an image CDN that can serve the correct image size based on the container size at the current pixel width of the page. I think mod_pagespeed does this as well. We are waiting for our host to implement this.
__________________
Core version: 5.5.xx
Reply With Quote
  #4  
Old 08-01-2017, 02:55 AM
 
xgarb xgarb is offline
 

eXpert
  
Join Date: Jul 2004
Location: UK
Posts: 263
 

Default Re: HTTP/2 JS and CSS aggregation

A question on CSS being loaded..

This code:
Code:
namespace XLite\Module\XC\CrispWhiteSkin\Module\Amazon\PayWithAmazon\View; /** * @Decorator\Depend ("Amazon\PayWithAmazon") */ class AmazonCheckout extends \XLite\Module\Amazon\PayWithAmazon\View\AmazonCheckout implements \XLite\Base\IDecorator { public function getCSSFiles() { $list = parent::getCSSFiles(); $list[] = [ 'file' => 'css/less/checkout.less', 'media' => 'screen', 'merge' => 'bootstrap/css/bootstrap.less', ]; return $list; } }
Does this add the LESS file to the list when in checkout only or (as I imagine) it's added to the giant CSS file for all pages?

I want to reduce the size on the general CSS file. It's way to big. On the X-cart demo page...



some is probably because it's the demo page but... wow! Way too much.
__________________
Core version: 5.5.xx
Reply With Quote
  #5  
Old 08-02-2017, 05:59 AM
 
xgarb xgarb is offline
 

eXpert
  
Join Date: Jul 2004
Location: UK
Posts: 263
 

Default Re: HTTP/2 JS and CSS aggregation

I've discovered the figures above are after deflation so the browser doesn't actually download those huge numbers.

https://github.com/zenorocha/browser-calories/issues/17
__________________
Core version: 5.5.xx
Reply With Quote
Reply
   X-Cart forums > X-Cart 5 > General questions (X-Cart 5)


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 02:46 PM.

   

 
X-Cart forums © 2001-2020