Asset Caching in 5.7
Permalink 1 user found helpful
I didn't fully understand how the asset management worked in 5.7. Since I always have CSS and JavaScript Cache turned off in concrete5 5.7 during development - my code was littered with bits of CSS and JS. After enabling CSS and JavaScript Cache, I got to see that it does a very good job of cleaning it all up.
The cache system combines and minifies files into a new file with a data-source tag that lists the source files used. To use the cache system, you need to tell it what files to use. For custom block templates, it appears that they are automatically combined and minified without being registered.
http://www.concrete5.org/documentation/5.7/developers/themes/regist...
If you care about site performance, you will want to combine (reduce HTTP requests) and minify (reduce file size) files. Also, if you aren't using gzip - run, don't walk, to your server and enable it.
https://developers.google.com/web/fundamentals/performance/optimizin...
In seeing how it worked, I used a custom block template for the search block. It used a view.css, two SVG images used as backgrounds, and three JavaScript files.
- view.php
- view.css
- images folder with 2 images
- js folder with 3 javascript files
Javascript Files
Example: js without asset caching
Example: js with asset caching - now one file
CSS files
Example: css without asset caching
Example: css with asset caching - now one file
The cache system combines and minifies files into a new file with a data-source tag that lists the source files used. To use the cache system, you need to tell it what files to use. For custom block templates, it appears that they are automatically combined and minified without being registered.
http://www.concrete5.org/documentation/5.7/developers/themes/regist...
If you care about site performance, you will want to combine (reduce HTTP requests) and minify (reduce file size) files. Also, if you aren't using gzip - run, don't walk, to your server and enable it.
https://developers.google.com/web/fundamentals/performance/optimizin...
In seeing how it worked, I used a custom block template for the search block. It used a view.css, two SVG images used as backgrounds, and three JavaScript files.
- view.php
- view.css
- images folder with 2 images
- js folder with 3 javascript files
Javascript Files
Example: js without asset caching
<script type="text/javascript" src="/concrete5/concrete/js/legacy.js"></script> <script type="text/javascript" src="/concrete5/concrete/blocks/autonav/templates/responsive_header_navigation/view.js"></script> <script type="text/javascript" src="/concrete5/application/blocks/search/templates/slide_out/js/1_classie.js"></script> <script type="text/javascript" src="/concrete5/application/blocks/search/templates/slide_out/js/2_uisearch.js"></script> <script type="text/javascript" src="/concrete5/application/blocks/search/templates/slide_out/js/3_activate.js"></script> <script type="text/javascript" src="/concrete5/concrete/blocks/image_slider/view.js"></script>
Example: js with asset caching - now one file
<script type="text/javascript" src="/concrete5/application/files/cache/js/77516de1e4832bc4bde77006fea16880f6573b5b.js" data-source="/concrete5/concrete/js/legacy.js /concrete5/concrete/blocks/autonav/templates/responsive_header_navigation/view.js /concrete5/application/blocks/search/templates/slide_out/js/1_classie.js /concrete5/application/blocks/search/templates/slide_out/js/2_uisearch.js /concrete5/application/blocks/search/templates/slide_out/js/3_activate.js /concrete5/concrete/blocks/image_slider/view.js"></script>
CSS files
Example: css without asset caching
<link rel="stylesheet" type="text/css" href="/concrete5/concrete/blocks/autonav/templates/responsive_header_navigation/view.css"></link> <link rel="stylesheet" type="text/css" href="/concrete5/application/blocks/search/templates/slide_out/view.css"></link> <link rel="stylesheet" type="text/css" href="/concrete5/concrete/blocks/image_slider/view.css"></link> <link rel="stylesheet" type="text/css" href="/concrete5/concrete/blocks/page_list/templates/thumbnail_grid/view.css"></link> <link rel="stylesheet" type="text/css" href="/concrete5/concrete/blocks/page_list/view.css"></link>
Example: css with asset caching - now one file
<link rel="stylesheet" type="text/css" href="/concrete5/application/files/cache/css/076317fea1f5bb374d099bd023970f2c80ee3ddf.css" data-source="/concrete5/concrete/blocks/autonav/templates/responsive_header_navigation/view.css /concrete5/application/blocks/search/templates/slide_out/view.css /concrete5/concrete/blocks/image_slider/view.css /concrete5/concrete/blocks/page_list/templates/thumbnail_grid/view.css /concrete5/concrete/blocks/page_list/view.css"></link>
