Version: v0.8.0 - Beta.  We welcome contributors & feedback.

Asset Optimization

Overview 

THT automatically applies optimizations to speed up the overall page response:

Responses 

By default, HTML and other text responses will be GZip compressed, which will reduce the response size by up to 70%.

This can be configured in your compressOutput config.

Assets 

THT will scan your output for URLs of JavaScript and CSS assets, and then optimize the files.

Optimizations:

This can be configured in your optimizeAssets config.

Client-Side Caching 

To significantly speed up page load times, it is best to cut down on the total number of requests the browser has to make for assets.

THT will append asset URLs with a v query param that contains the Last Modify timestamp of the asset file.

As long as the file is unchanged, the browser will use its cached copy. When the asset is updated, the browser will see it as a new URL and send a new request.

Example:

/css/app.css?v=162352352

This can be configured in your optimizeAssets config.

Images 

THT will automatically optimize your image files, saving 30% to 70% of the total size, usually without any perceptible difference in quality.

Thumbnails

To auto-generate a thumbnail of an image, add _thumb(size) to the filename.

<img src="/images/some_image_thumb250.png">

//= Creates a 250px wide thumbnail of '/images/some_image.png'

Skipping Files

To skip an individual file from being optimized, add _asis (“as is”) to the filename.

<img src="/images/some_image_asis.png">

This can be configured in your optimizeAssets config.

Lazy Loading 

THT automatically adds loading="lazy" to images and iframes within HTML and Litemark templates.

This causes the browser to delay loading of the asset until it is within the visible viewport.

This can significantly speed up the initial page load time, and save on network load overall.

See Also