Want to optimize the performance of your site for your visitors?
By default, Wowchemy automatically applies awesome performance optimizations for you, including:
- ✅ Lazy loading images on demand
- ✅ Prefetching pages before a user clicks on their links
- ✅ Prefetching and asynchronously loading assets
- ✅ Bundling and minifying HTML, CSS, and JS to reduce HTTP requests and file sizes
- ✅ Resizing and compressing high-resolution images found in page folders
Wowchemy is a page building framework for Hugo. As such, each site generated is different not just structurally and content-wise, but also in terms of features, third-party plugins, and customizations.
On this page, you’ll find some general tips. For more specific insights relevant to your site, consider running Lighthouse.
Suggestions
- Use the
nativefont option inparams.yaml - Simplify the homepage by moving resource-intensive homepage sections to their own dedicated widget pages (aka landing pages)
- Consider disabling the integrations for code highlighting, math, and diagrams in
params.yamland enabling them on a per-page basis as needed - Consider disabling any other JavaScript or CSS integrations that you may have enabled or added yourself
- Make use of Wowchemy’s image optimization and lazy loading capabilities by uploading images to the page’s folder where possible and using the Figure or Gallery shortcode (rather than uploading images to the
staticfolder) - Appropriately size and optimize any images which aren’t yet automatically optimized, using a service like TinyPNG
- Optimize the format of your images:
- SVG can be optimal for vector images
- WEBP can be optimal for photos and general images
- Disable the Academicons icon pack in
params.yamland just use Font Awesome or emojis for icons
Advanced optimization
Remove any CSS that your site does not need. (A Wowchemy version from 11 Jan 2021 onwards is required for this functionality.)
This can be achieved by using Hugo’s NPM integration if you are familiar with JavaScript and CSS.
You can establish a post processing pipeline by creating a postcss.config.js file in your site root. Refer to the Hugo docs and forums for examples configuring a CSS purging routine in postcss.config.js.
To activate your pipeline, call Hugo like env WC_POST_CSS="true" hugo server and add WC_POST_CSS = "true" to the environment section of your netlify.toml.
Beware that some tools may not detect entirely all styles in use, thus removing styles that your site actually needs, resulting in strange site appearance.
To resolve this, we can explicitly list missing style classes in postcss.config.js or contribute to refactor Wowchemy’s CSS to help the tool recognize styles in use.
