Is adding a page loader to a website necessary?
Speed is critical when loading a website. It significantly influences user experience, engagement, and satisfaction. Website speed impacts search engine rankings as Google incorporates page load time into its algorithm.
Providing users with feedback, like loading indicators, is essential to manage their expectations and retain their attention during load times. However, is this really essential at all times?
Page loaders are not explicitly recommended or prohibited by Web Content Accessibility Guidelines (WCAG). However, there are some guidelines that must be considered to ensure accessibility on websites are maintained when it comes to the use of page loaders.
- WCAG 2.1 Success Criterion 4.1.3 Status Messages: This success criterion requires that any visual indicator that content is loading or the page is busy be accompanied by a programmatic notification that is accessible to assistive technologies. This means that if a page loader is used, it must also be accompanied by a text-based notification that is accessible to screen readers and other assistive technologies. This text may not necessarily be visually visible to everyone, but must be visible to screen readers for sure.
- WCAG 2.1 Success Criterion 2.4.2 Focus Order: This success criterion requires that all focusable elements on a page have a predictable order in which they can be focused. This means that if a page loader is used, it must not prevent users from focusing on other elements on the page.
- WCAG 2.1 Success Criterion 2.5.4 Interruptions: This success criterion requires that users be able to interrupt a long running task, such as a page loading, by pressing the Escape key. This means that if a page loader is used, it must not prevent users from interrupting the loading process by pressing the Escape key.
Are page loaders really required?
Consider the fact that a website must load quickly to maintain good user experience. Google measures Largest Contentful Paint (LCP), First Contentful Paint (FCP) and Time to First Byte (TTFB) as metrics to measure the speed of a website.
To provide a good user experience, sites should strive to have an LCP of 2.5 seconds or less for at least 75% of page visits - learn more about metric from Google's Web Dev.
When a website is built strategically, utilizing concepts such as:
- Preload CSS
- Lazy loading for images
- Semantic HTML elements
- The use of a cache system
- Utilizing a CDN
- Deferring JavaScript
... there is a fair chance you will acheive a good value towards your LCP. There are other factors to consider from a backend perspective as well - such as DNS lookup time, speed of your server's, location of your servers, backend query processing time etc that will contribute towards the load time of your website.
However, if you are able to load your webpage progressively by achieving a 2.5 seconds LCP, the need for a page loader may be redundant.
Using loaders on sections, and not on a page
As much as we developers want our websites to load as quickly as possible, there are times when a lot of data needs to be rendered on the page. It may therefore cause a higher loading time.
This is where a modular approach comes in handy. Identifying what parts of the web page cause the highest load time, and separating that section to load in an asynchronous manner can significantly improve the overall page load time. When you do such a thing, the loading state needs to be applied only on the asynchronous loading element.
A skeleton screen is an animated placeholder that simulates the layout of a website while data is being loaded. Consider this approach to provide visual feedback rather than blocking the entire page.
This method, although user-friendly, must not be over used. Consider larger blocks of elements to be loaded rather that those at granular levels. For example, you may load the featured news and blog articles together as a block rather that individually loading each article.
Accessibility considerations
It is important to carefully consider the specific WCAG guidelines that apply to page loaders and to design page loaders in a way that is accessible to all users.
Here are some additional tips for making page loaders accessible to all users:
- Use a simple and unobtrusive page loader. A complex or animated page loader can be distracting and difficult to see for users with visual impairments.
- Make sure the page loader does not prevent users from focusing on other elements on the page. This includes elements such as the Back button, the Reload button, and the Search bar.
- Make sure the page loader does not prevent users from interrupting the loading process by pressing the Escape key.
- Ensure the load is unobstructive - which means, the user can still start interaction with the page even though something is loading.
Page loaders, splash screens, loading icon - although useful can sometimes prove to be nuisance. Focus on clean, clear and well structured code that can load your page faster than adding a page loader.
Remember, the objective is to load the website faster, not to add a page loader to a slow loading website.
