Sustainability Best Practices
CMSCloudHeartcoreDXP
  • Introduction
  • Infrastructure
    • Infrastructure Overview
    • Hosting
    • Architecture
    • Security and Bots
  • Backend
    • Backend Overview
    • Upgrades and patches
    • Cache responses
    • Sustainable Design Patterns
    • Performance Testing
    • Common pitfalls
    • SOAP, REST and GraphQL
    • SQL optimization
    • JAMstack
    • Monolithic vs. Service based Architecture
    • Async
    • Background tasks
  • Frontend
    • Frontend Overview
    • Page weight budget
    • Image optimization
    • Asset optimization
    • Limit use of 3rd parties
    • Lazyload resources
    • Mobile first
  • Editor
    • Editor Overview
    • Content Types
    • Content Optimization
    • Design Choices
    • Data Management
    • Housekeeping
  • Telemetry
    • Telemetry Overview
    • February 2024
Powered by GitBook
On this page
  • Optimize Fonts
  • Minify and Compress Assets
  • Cache Static Assets

Was this helpful?

Edit on GitHub
Export as PDF
  1. Frontend

Asset optimization

PreviousImage optimizationNextLimit use of 3rd parties

Last updated 1 year ago

Was this helpful?

Optimize Fonts

The fonts that we choose from a design point of view, can have an impact on the downloads required. If we opt for custom fonts, then these will need to be requested before rendering. The more custom fonts that we introduce the bigger the carbon impact. Therefore, it is recommended to use .

If you wish to use custom fonts, then we need to think about how these are loaded. and is the best format in terms of compression, resulting in better file sizes. You could also use only certain subsets and opt for self-hosting, reducing the dependency on a 3rd party and extra HTTP requests. Whilst Google Fonts is widely used, there are General Data Protection Regulation (GDPR) concerns too.

Minify and Compress Assets

For a production build, we should be packaging up our assets. This way we can ensure these are minified to reduce their file size and number of requests needed from the user. We can also compress these using Gzip or Brotli to get them as optimized as possible.

Cache Static Assets

Once we’ve ensured our assets are minified and compressed, we can also help the user by ensuring that these are denoted as cacheable assets. That can be done by headers. These will then be cached by the browser on follow-up requests, reducing the downloads needed.

We can go one step further and . That will opt to use these files first reducing the need for a network request and providing the added benefit of offline access.

system fonts by default
WOFF2 is supported by all modern browsers
using ‘Cache-Control’
introduce service workers