Skip to main content

Front End Engineer

Persona

Develops lightweight, optimized client-side code that minimizes device energy consumption and network resource usage.

15 patterns

Development

Avoid an excessive DOM size

The greater the amount of nodes that are defined in HTML, the greater the time spent processing and rendering each element.

  • size:medium
  • web
Avoid chaining critical requests

Most web experiences require a lot of work from the user's browser. The greater the length of the chains and the larger the download sizes, the more significant the impact on page load performance and the energy required to render a page.

  • size:medium
  • web
Avoid tracking unnecessary data

User tracking, user data collection and targeting in things like advertisements are responsible for significant energy use in many digital products, and services.

  • size:small
  • storage
Cache static data

From an energy-efficiency perspective, it's better to reduce network traffic by reading the data locally through a cache rather than accessing it remotely over the network. Shortening the distance a network packet travels means that less energy is required to transmit it. Similarly, from an embodied carbon perspective, we are more efficient with hardware when a network packet traverses through less computing equipment.

  • networking
  • size:small
Compress transmitted data

From an energy-efficiency perspective, it's better to minimise the size of the data transmitted so that less energy is required because the network traffic is reduced.

  • networking
  • size:small
Defer offscreen images

Web pages offer a lot of images that aren't displayed on the first loaded screen and can thus be loaded dynamically.

  • size:small
  • web
Deprecate GIFs for animated content

One direct replacement of the GIF is the MP4 video format which provides much smaller file sizes and higher quality at the same time.

  • size:small
  • web
Keep request counts low

Accessing a web page usually retrieves a HTML file from the web server. The HTML may then reference additional resources that the browser has to download.

  • size:medium
  • web
Minify web assets

Minification removes unnecessary or redundant data without affecting how the resource is processed by the web browser.

  • size:small
  • web
Minimize main thread work

Long-running JavaScript on the browser's main thread underutilises multi-core CPUs; offloading heavy computations to Web Workers or server-side implementations reduces energy consumption and improves efficiency.

  • compute
  • size:small
  • web
Optimize image size

Ideally, the stored pixel dimensions are exactly the same, or smaller, as the display size in pixels so that no bandwidth or storage space is wasted.

  • size:medium
  • web
Reduce transmitted data

From an energy-efficiency perspective, it's better to minimize the size of the data transmitted so that less energy is required because the network traffic is reduced.

  • networking
  • size:small
Remove unused CSS definitions

CSS files are very complex and need energy intensive parsing and processing. Each added CSS definition increases the amount of time and processing power needed in this process.

  • size:small
  • web
Serve images in modern formats

Modern image formats can help to reduce bandwidth, storage and computing requirements on the displaying device.

  • size:small
  • web
Use server-side rendering for high-traffic pages

Use server-side rendering for high-traffic pages

  • web