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.toml
  • 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.toml 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 static/media/)
  • 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 static/media/ folder
    • For example, SVG may work well for vector images
  • Disable the Academicons icon pack in params.toml 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