Skip to main content

Improve the performance of your web applications by adding one attribute

Images are critical for every website and web application today. As images can be quite large, they can have a big impact on the percieved performance (and than I don't even mention the bandwith cost).

Before you start converting all your images to the webp format or implementing all kind of crazy javascript and css hacks, I’ll learn you a simple trick that could help you a lot…

You can lazy load your images using the loading attribute.  By using lazy loading, the images in your application or site will only be loaded when they become in reach of the visible are of your website. So as long as a user doesn’t scroll, only what is visible at that moment will be loaded.

Here is a simple example:

<img src="example.jpg" loading="lazy" alt="..." />

The following values are supported by the loading attribute:

  • lazy - Deferring the loading of assets till it reaches a certain distance from the viewport.
  • eager - loading the assets as soon as the page loads, irrespective of where they are placed on the page, whether above or below the page fold.
  • auto - This value triggers default lazy loading. Basically, it's the same as not including the loading attribute.

This feature is supported on most browsers (check caniuse) and if your browser doesn’t know this attribute it will just be ignored and your image will load immediatelly(which I think is an OK fallback).

 

Remark: If you want the remaining content from reflowing when a lazy-loaded image is downloaded, you can set the height and width attributes to the <img> element up front.

Labels:

Popular posts from this blog

.NET 8–Keyed/Named Services

A feature that a lot of IoC container libraries support but that was missing in the default DI container provided by Microsoft is the support for Keyed or Named Services. This feature allows you to register the same type multiple times using different names, allowing you to resolve a specific instance based on the circumstances. Although there is some controversy if supporting this feature is a good idea or not, it certainly can be handy. To support this feature a new interface IKeyedServiceProvider got introduced in .NET 8 providing 2 new methods on our ServiceProvider instance: object? GetKeyedService(Type serviceType, object? serviceKey); object GetRequiredKeyedService(Type serviceType, object? serviceKey); To use it, we need to register our service using one of the new extension methods: Resolving the service can be done either through the FromKeyedServices attribute: or by injecting the IKeyedServiceProvider interface and calling the GetRequiredKeyedServic...
Read more

Azure DevOps/ GitHub emoji

I’m really bad at remembering emoji’s. So here is cheat sheet with all emoji’s that can be used in tools that support the github emoji markdown markup: All credits go to rcaviers who created this list.
Read more

Kubernetes–Limit your environmental impact

Reducing the carbon footprint and CO2 emission of our (cloud) workloads, is a responsibility of all of us. If you are running a Kubernetes cluster, have a look at Kube-Green . kube-green is a simple Kubernetes operator that automatically shuts down (some of) your pods when you don't need them. A single pod produces about 11 Kg CO2eq per year( here the calculation). Reason enough to give it a try! Installing kube-green in your cluster The easiest way to install the operator in your cluster is through kubectl. We first need to install a cert-manager: kubectl apply -f https://github.com/cert-manager/cert-manager/releases/download/v1.14.5/cert-manager.yaml Remark: Wait a minute before you continue as it can take some time before the cert-manager is up & running inside your cluster. Now we can install the kube-green operator: kubectl apply -f https://github.com/kube-green/kube-green/releases/latest/download/kube-green.yaml Now in the namespace where we want t...
Read more