Category: Tech

Web performance is all about making websites fast: loading, rendering, and interacting. When pages load slowly or have a lot of content to load then the experience can be very clunky and unpleasant for all users. More resources to download mean also more data that needs to be transferred through the network and processed. Let’s explore user and business impact and how this could be improved.

The alt attribute provides an alternative description for a non-text element¹ and normally is not presented to the user but will be available under certain circumstances. The following is the most general guideline to follow while creating an alternate text:

A single-page application (known as SPA) is a web app implementation that loads only a single page, and then updates the content of that single document dynamically using JavaScript.

A tooltip – widely used feature across the web. Hundred of different approaches and implementations. The ARIA Authoring Practices Guide (APG) defines the tooltip in following way:

The declaration is classified as significant by a ! (exclamation mark) delimiter and the important keyword. The !important flag alters the rules selecting declarations inside the cascade. A declaration that is not important is called normal.

The browser loads all the files necessary for the page to render the site as you expect. This implies that all items, including those images that aren’t visible and haven’t got the lazy loading technique, will be requested.

If your website uses quite a lot of images then this may impact the page loading speed as well as the page rendering.

<input /> elements of type checkbox represents a state or option that can be toggled. A well known states are called checked and unchecked. However, in addition to the checked and unchecked states, there is a third state of a checkbox: indeterminate. In most cases, it is represented by a horizontal line in the box instead of a check/tick.

The <select> HTML element represents a control that provides a menu of options. When used with an attribute multiple then it allows selecting multiple options at once. However, the current implementation for multiple selections is not optimal on a desktop device so we need to find a different way. The goal would be to build multiple selections that are accessible to everyone.

Every single HTTP request decreases loading performance. For a simple image, the attribute loading="lazy" can be used in order to defer the loading of off-screen images until the image appears on the screen. Using lazy-loading we achieve at least 2 benefits over the traditional embedding in HTML.