Combined & Compiled Assets

Combined & Compiled Assets

Why Combine & Compile Assets?

The reason for combining and compiling static assets is for speed and efficiency.

Timber-Boot uses the most current methods for combining and compiling static assets such as CSS, JS (javascript), fonts and icons.  Images, which are considered static assets, are handled separately in Timber-Boot by the functions that handle image optimization, as explained here.

When we refer to compiling these assets, we really mean “minifying” them by removing white space, thus reducing the size of the files. When we talk about combining assets, we are talking about putting all similar files in 1 or more larger files.

These assets rarely change and can be cached by the visitor’s browser for up to a year. Now that is a general rule of thumb, but the cache max-age setting really depends on how often those static assets are changed or modified.

Following this procedure, the visitor’s browser will load unchanged static assets from the local cache, instead of requesting the files again on subsequent visits. This means a faster load time on the visitor’s return visits.

Following this procedure “blindly” does have costs associated with it.  For example, if we were to take all the CSS and JS libraries that are included in their respective libraries, and then include all variations of the CSS and JS to support older browsers, we would end up with 2 enormous files.  One for CSS and the other for JS.  Compiling the files does help enormously, but still, it would significantly increase page load times.

Optimized for Speed: The tools used to achieve optimal static assets starts with “Laravel Mix“. Laravel Mix provides a clean, fluent API for defining basic webpack build steps for your web application. Mix supports several common CSS and JavaScript pre-processors.”  Now to explain that in “non-techy” terms.

We tell Laravel Mix which libraries are needed for CSS and JS. We define variables for default colors and backgrounds. The pre-processors will add CSS and JS code so it is compatible with all browsers defined in the setup file.

During the development phase of your custom Timber-Boot theme, no assets are compiled, but they are combined.  As changes are made to the static assets, the browser automatically reloads the page so the changes can be seen immediately and any errors can be detected early.

Once the development phase is completed, the magic begins.  We will tell Laravel Mix to process the static assets for the production site.  During this process, this is where the assets get combined and compiled, but the processors come into play to optimize the files even more.  Any CSS or JS that is in the libraries, but never used, can be removed.  So once the file is compiled, there is a significant reduction in the CSS and JS file sizes.  Files that were once 750k have been reduced to 24k.

The assets used currently for Timber-Boot are:

  • Laravel Mix
  • BootStrap 4.3.1 SCSS and JS
  • jQuery 3.3.1
  • Popover JS
  • Popper JS
  • AOS SCSS and JS
  • Required pre-processors and dependencies