Lesser known web performance pitfalls

Images should be the right size and in next gen formats - we know that. But here are some pitfalls present and undetected in many modern websites.

1. Translucent CSS slows scrolling

Translucent CSS is a CSS property that makes the background of an element translucent. This can be achieved using the opacity property or translucent colours, such as #00000080 or rgba(0, 0, 0, 0.5). This requires the browser to compute the colour over the background and noticeably slow down scrolling.

I associate this performance pitfall especially with the "glassmorphism" trend, where a container's background is translucent. This is particularly slow because the effect requires a blur filter - even slower than translucent background/borders. This effect looks great - but don't overuse it.

2. CSS filters

CSS filters are a great way to add effects to images and text. However, they can be slow. The most common filters are blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, and sepia. The pitfall is in applying these filters to images that won't be animated - just serve images with the filters already applied.

3. Long critical render path

When you visit a website, your browser requests the page's HTML. The HTML requires requests for CSS, JavaScript, and images. But resources can be linked from the CSS and Javascript - which means that the browser has to wait for the CSS and Javascript to load before it can request more resources. The best practice is to embed critical resource requests in the HTML.

So

It's important to look after your website's performance. Search engines notice.