Optimize performance

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.

Suggestions

  • Use the native font option in params.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.yaml and 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 static folder)
  • Appropriately size and optimize any images which aren’t yet automatically optimized (such as widget backgrounds), using a service like TinyPNG
  • Optimize the format of images: for example, SVG can be optimal for vector images
  • Disable the Academicons icon pack in params.yaml and 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.

Known limitations

  • Hugo does not yet support next-generation (webp) image processing, but you can upvote or contribute to the open issue
Previous
Next