Asset Optimization
Overview
THT automatically applies optimizations to speed up the overall page response:
- GZip compression of text responses
- Minification and compression of text assets (JS & CSS)
- Client cache URL query params
- Image optimization & thumbnail generation
- Lazy loading of images and iframes
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:
- Minification (mainly whitespace and comments)
- GZip compression
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.
public directory is configured to add a “Far Future” Expires header (about a month) to any URL that has the v timestamp.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.