Front End Engineer

Persona

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

15 patterns

Development

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

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.

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.

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.

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.

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.

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.

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.

Minify web assets

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

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.

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.

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.

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.

Serve images in modern formats

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

Use server-side rendering for high-traffic pages