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.Continue reading “Accessibility and Performance”
alt attribute provides an alternative description for a non-text element1 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 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:Continue reading “Create custom and accessible tooltip”
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.Continue reading “How to fix defer offscreen images”
If your website uses quite a lot of images then this may impact the page loading speed as well as the page rendering.Continue reading “8 tips to speed up image loading”
Continue reading “Definitive guide to indeterminate state of a checkbox”
<input /> elements of type checkbox represents a state or option that can be toggled. A well known states are called
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.
<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.