Proposed Enhancement for Page Load Time
Permalink
HI,
I could not find a good fit for this proposed enhancement, so I am sticking it.
I am fairly new to C5, and like it quite a bit excluding its lack of developer docs and it is SLOW. Enabling full page caching helps A LOT, but I have one more step that would be great. It has to do with the "feature" that all blocks and templates include their own CMS and JS folder automatically, but as individual files. The extra trips to the server can be extremely relevant to overall page load time when using a page with lots of blocks.
Hence my optimization suggestion:
As part of Full Page Caching (and possibly just in general), C5 should create a single combined JS and a single combined CSS file for all C5 content on the page and replace all the <link> and <script> tags for them with those 2 files.
I could not find a good fit for this proposed enhancement, so I am sticking it.
I am fairly new to C5, and like it quite a bit excluding its lack of developer docs and it is SLOW. Enabling full page caching helps A LOT, but I have one more step that would be great. It has to do with the "feature" that all blocks and templates include their own CMS and JS folder automatically, but as individual files. The extra trips to the server can be extremely relevant to overall page load time when using a page with lots of blocks.
Hence my optimization suggestion:
As part of Full Page Caching (and possibly just in general), C5 should create a single combined JS and a single combined CSS file for all C5 content on the page and replace all the <link> and <script> tags for them with those 2 files.
Thanks for the reply MrKD.
Clearly it was a good idea, glad you guys took care of it before I asked!
I hate it when some efficiency snob chews up one of my pages like this, but I am throwing it out for discussion. I am thinking/hoping that a few fairly simple changes could help with the load time of EVERY C5 page.
My current sites main page does not score well for server requests. I see bootstrap.css by itself, not from a cdn (-2) then my themes css file by itself (0) . Then font-awesome.css by itself, not from the bootstrap CDN (-2). Then a custom jquery.js (-1). Then font-awesome.css again (-2 it would be cached but this one is combined with the block's css) with all the block css files as 1 (+2). Then bootstrap.js by iteslf (-1 combine with jquery?). The total score is not great.
Shouldn't all the "standard" C5 CSS and JS (Bootstrap, Font Awesome and jquery) be in 2 single loads on every page, which could also allow for better browser caching? We already have our own copy of jquery and bootstrap preventing CDN usage. It seems like a simple thing to combine this stuff implement since it is a fixed bundle. Am I missing something?
I am beating on the service provider to get a better time-to-first-byte (with full C5 caching), but after that initial html load, the time to visible document is stuff we can tweak.
Thanks.
Sean
Clearly it was a good idea, glad you guys took care of it before I asked!
I hate it when some efficiency snob chews up one of my pages like this, but I am throwing it out for discussion. I am thinking/hoping that a few fairly simple changes could help with the load time of EVERY C5 page.
My current sites main page does not score well for server requests. I see bootstrap.css by itself, not from a cdn (-2) then my themes css file by itself (0) . Then font-awesome.css by itself, not from the bootstrap CDN (-2). Then a custom jquery.js (-1). Then font-awesome.css again (-2 it would be cached but this one is combined with the block's css) with all the block css files as 1 (+2). Then bootstrap.js by iteslf (-1 combine with jquery?). The total score is not great.
Shouldn't all the "standard" C5 CSS and JS (Bootstrap, Font Awesome and jquery) be in 2 single loads on every page, which could also allow for better browser caching? We already have our own copy of jquery and bootstrap preventing CDN usage. It seems like a simple thing to combine this stuff implement since it is a fixed bundle. Am I missing something?
I am beating on the service provider to get a better time-to-first-byte (with full C5 caching), but after that initial html load, the time to visible document is stuff we can tweak.
Thanks.
Sean
@SeanDevoy
Your bootstrap.css can be combined with your theme CSS file using Less importing. This would involve changing your theme CSS and bootstrap.css file name extensions to .less, importing bootstrap.less into your theme Less file, and then using $html->css($view->getStylesheet('your_theme_stylesheet.less')) in your page template head. This will allow concrete5 to use its built-in Less parser to generate a combined CSS file.
Example: Elemental
- The theme uses a main.less file that uses @import to import other .less files.
https://github.com/concrete5/concrete5/blob/develop/concrete/themes/...
- The main.less file needs to be compiled, so it is not linked to directly, instead it uses getStylesheet() to compile the file and return it to the page as a CSS file link.
https://github.com/concrete5/concrete5/blob/develop/concrete/themes/...
The files you mention, are you "requesting" or "providing" any of them in your theme page_theme.php? If you provide them, you are telling concrete5 that you are supplying those assets. This allows you to use a CDN to load them and combine them however you choose.
I recommend reviewing the documentation on assets.
JavaScript and CSS Asset System
https://documentation.concrete5.org/developers/assets/overview...
A side note, as HTTP/2 becomes the standard, some of these performance optimizations will not be necessary and may even lead to slower performance.
Getting Ready For HTTP2: A Guide For Web Designers And Developers
https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/...
Your bootstrap.css can be combined with your theme CSS file using Less importing. This would involve changing your theme CSS and bootstrap.css file name extensions to .less, importing bootstrap.less into your theme Less file, and then using $html->css($view->getStylesheet('your_theme_stylesheet.less')) in your page template head. This will allow concrete5 to use its built-in Less parser to generate a combined CSS file.
Example: Elemental
- The theme uses a main.less file that uses @import to import other .less files.
https://github.com/concrete5/concrete5/blob/develop/concrete/themes/...
- The main.less file needs to be compiled, so it is not linked to directly, instead it uses getStylesheet() to compile the file and return it to the page as a CSS file link.
https://github.com/concrete5/concrete5/blob/develop/concrete/themes/...
The files you mention, are you "requesting" or "providing" any of them in your theme page_theme.php? If you provide them, you are telling concrete5 that you are supplying those assets. This allows you to use a CDN to load them and combine them however you choose.
I recommend reviewing the documentation on assets.
JavaScript and CSS Asset System
https://documentation.concrete5.org/developers/assets/overview...
A side note, as HTTP/2 becomes the standard, some of these performance optimizations will not be necessary and may even lead to slower performance.
Getting Ready For HTTP2: A Guide For Web Designers And Developers
https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/...
concrete5 currently offers this feature if you enable CSS and JavaScript Cache.
Dashboard > System & Settings > Optimization > Cache & Speed Settings
A description of how CSS and JavaScript Cache works can be found here:
http://www.concrete5.org/community/forums/5-7-discussion/asset-cach...