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”Best practices for writing good alt text
The 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:
What is a Single Page Application?
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.
Continue reading “What is a Single Page Application?”Create custom and accessible tooltip
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”Why using rule important in CSS is bad?
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.
How to fix defer offscreen images
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”8 tips to speed up image loading
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”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 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.
How to implement multiple selection with check boxes in an HTML without external libraries
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.
Lazy loading CSS background images for better website loading performance
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.