Want to optimize the performance of your homepage?
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.
- Use the
nativefont option in
- 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.tomland enabling them on a per-page basis as needed
- 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
- Appropriately size and optimize any images in your
static/media/folder, such as by using the TinyPNG service
- Optimize the format of any images in your
- For example, SVG may work well for vector images
- Disable the Academicons icon pack in
params.tomland just use Font Awesome or emojis for icons
Remove any CSS that your site does not need. (A Wowchemy version from 11 Jan 2021 onwards is required for this functionality.)
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
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
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.
- Hugo does not yet support next-generation (webp) image processing, but you can upvote or contribute to the open issue