Laziness is usually not a characteristic of high performers. However, in terms of websites, there is a special type of “laziness” that can magically transform into a better loading speed and improved user experience. It happens thanks to a website speed optimization technique called lazy loading. Check out this article by our Drupal team where we explore why optimizing media, such as images, is important, how image lazy-loading works, and what tools might help you implement it on Drupal websites.

Visual appeal vs speed: why optimize images on your website?

It’s impossible to imagine a website without visual assets such as product images, promotion banners, logos, and so on. Their role is enormous because 90% of information transmitted to the brain is visual. Images draw users’ attention, spark their emotions, stick in their long-term memory, and help you convey your website’s message.

The other side of the coin is that website images usually have a pretty heavy file weight. The long time needed for images to load is one of the top reasons for websites being slow and clunky. So do you have to sacrifice either great visuals or website speed?

Luckily, they can exist in harmony if you rely on image optimization techniques. By boosting your website’s speed, these techniques give you other improvements as a bonus:

• Your website usability goes up. Undoubtedly, browsing a fast-loading website is a pleasant experience and users achieve their goals faster.
• Your bounce rate reduces. According to Google’s data, 53% of visits are abandoned if a mobile website takes longer than 3 seconds to load. If your website loads fast, your visitors stay with you.
• Your SEO improves. Loading speed is a ranking factor for both desktop and mobile searches, which has been officially announced by Google.
• Your conversions grow. The faster your website loads, the more likely your customers are to convert. According to a study by Portant, each additional second of load time causes conversion rates to drop by an average of 4.42%.

Lazy-loading images: what’s the secret?

Lazy-loading images is a technique for loading images only when they appear in a user’s viewport. If a user hasn’t yet reached certain images by scrolling down a page, there is no need to load them. And only if a user keeps scrolling and reaches other images, will they be loaded. This approach is opposed to “eager loading” when all images are loaded from the start. Lazy loading is not limited to images — it can be used with other resources of a web page, including video.

We can use the terms “above the fold” and “below the fold” here. The terms originate from newspaper publishing — newspapers come folded in half horizontally, and a reader instantly sees what’s above the fold before they decide to unfold the newspaper. Similarly, the above-the-fold content of a web page is the content immediately visible to a user while the below-the-fold content requires scrolling. The images in part of the webpage that is “above the fold” need to load instantly while those that are currently “below the fold” can use lazy-loading.  

With proper implementation, lazy-loading images can speed up initial page loading while decreasing bandwidth consumption. Reducing the number of images to load means reducing resource requests and the overall number of bytes that a user’s device must download and process. As a result, a web page becomes visible to a user much sooner.

Lazy-loading images on Drupal websites

First of all, it’s worth mentioning that Drupal is adopting the automatic lazy-loading of images out of the box. However, the feature only became available in the Drupal 9.1 core and is not yet 100% completed. We know that a great many websites are not using Drupal 9 yet, so we definitely need to discuss other options. 

In the next part of the blog post, we will review:

1. the new lazy loading functionality in the Drupal 9 core
2. contributed Drupal modules that will suit both newer and older websites and offer different approaches to lazy-loading

1) How the Drupal core lazy-loads images (as of version 9.1)

Starting with the Drupal 9.1 core version, native lazy loading is enabled for all images by default. The feature automatically adds a loading="lazy" attribute to an tag. The native approach does not require using a third-party JavaScript library or adding custom code.

Mike Herchel, one of the top Drupal core contributors, discusses the pitfalls and fixes of the new functionality in his blog post. The key problem he mentions is that the system does not distinguish between the above-the-fold and below-the-fold images so it lazy-loads everything. The solution comes in the Drupal 9.4 core in the form of a new user interface which gives developers more control of when and where to lazy-load images on a per-field basis. Developers can now choose to lazy-load or not specific image fields or media fields. This is possible with the new “Image loading” element in the field format settings on the Manage display tab of an entity type. Developers can set the “lazy” or “eager” loading for every field. 

This enables them to create view modes for entities — or edit the existing ones — with the knowledge that the images in these view modes need to be rendered above or below the fold (for example, hero image). 

Lazy loading can also be configured in Drupal Views fields. For even more granular control, developers can set the loading attribute when preprocessing the image field or modify it from within the image.html.twig template. Mike Herchel mentions that the lazy-loading functionality in the Drupal core is not 100% there yet — for example, it doesn’t support responsive images. 

2) How contributed Drupal modules lazy-load images

Lazy-load

Lazy-load is the most popular contributed Drupal module for implementing the technique. Developers can rely on it to enable lazy loading for images and iframes. The module uses a third-party library called lazysizes — a high-performance and SEO-friendly loader. Lazysizes is able to detect visibility changes that are triggered through user interaction, CSS, or JavaScript. However, the module also supports native lazy loading via the respective attribute for Chrome browsers.

It’s possible to enable lazy loading in 3 ways — via the text formats, field formatters for view modes, or Form API. For example, the settings page of text formats on the Drupal admin dashboard now has a “Lazy-load images and iframes” filter. You can enable this filter and then choose which elements should use the technique. The available elements are images ( tags) and iframes ( tags). There is no need to modify the existing content after making these settings — it will be lazy-loaded automatically.

OEmbed Lazyload

Embedding third-party videos, photos, or other rich content using the OEmbed format may lead to an unnecessary increase in page weight. OEmbed has the potential to load third-party media even if a user does not have the intention to open them. Luckily, we have the OEmbed Lazyload module to fix this. It is especially useful for websites that have plenty of OEmbed content supported by the Drupal core’s Media system.

The module delays the loading of OEmbed assets until a user clicks “Play” to view them or they enter the viewport. The effect is achieved by delaying the loading of an iframe in which Drupal wraps all OEmbed assets for security reasons. There is a "Lazy load oEmbed video" field formatter that you can enable on the “Manage display” tab of your media type in order to use the feature.

Image Lazy Loader

The Image Lazy Loader module adds a special “Lazy Loader Image” format to the image field settings. You can select this format on the Manage display tab of an entity type. It also enables you to choose the animation effect that will accompany the appearance of the images, as well as how long this effect should last. 

Final thoughts

Lazy-loading images is a useful technique, and there are many tools for implementing it. Our Drupal development team is ready to help you choose the most appropriate ones depending on your website’s Drupal core version, type of images, and specific needs. We can improve your Drupal website performance using image lazy-loading, as well as other best practices and techniques. Let’s discuss how we can speed your site up!

In the last three months of 2022, I built out the Schema.org Blueprints module. As of last week, there are finally two reported installs after hundreds of hours of work and thought. I am unsure if anyone’s using the module or even understands its use case and goals.

The Schema.org Blueprints module has 49 stars, 5 open issues with 33 tickets, and 113 passing tests. The project page is descriptive, with links to documentation. Every sub-module, of which there are many, has an up-to-date README.md file. There are half a dozen screencasts and presentations, with a few other people posting videos and discussions on YouTube. On the Talking Drupal podcast we discussed the module's history, use cases, and its future. My organization is only beginning to plan for a gradual migration to a decoupled Drupal instance using the Schema.org Blueprints module. Lastly, I submitted a session proposal to discuss the module at DrupalCon Pittsburgh.

After all my effort, this project could sit idle on Drupal.org with the nightly automated tests running until an API change or a new version of Drupal core suddenly breaks the tests.

Did I do something wrong, or did I waste my time?

Prior to writing this blog post and everything I mentioned above, I thought a need existed, however, the lack of activity I’m seeing means I need to ask these hard questions. I’m hoping to be able to provide answers, document the module’s status and understand better what has been completed, and ask what is needed to move forward.

As a developer, "wasting...Read More

Please join the Drupal Association in welcoming our new board member:

Rosa Ordinana

“As a passionate advocate for open-source technology in the public sector, I am proud to have been invited to serve on the Drupal association Directors Board,” Rosa shared upon accepting her position. “I am eager to contribute my expertise and experience to help the Drupal community grow, support interoperability, digital sovereignty, and create a safe, secure, and open web for everyone.”

About Rosa
Rosa is currently working in the Informatics directorate of the European Commission in Brussels. Since 2009 she and her team have promoted the use of open source solutions and Drupal as CMS for public websites of the European Commission and other EU institutions.

Today, her multicultural team manages hundreds of Drupal sites and is one of the largest Drupal teams in Europe. Rose also has a master’s degree in Computer Science.

We are thrilled to have Rosa on the Drupal Association Board!

Please join the Drupal Association in welcoming our new board member:

Lynne Capozzi

When accepting her position, Lynne shared: “I’m excited to join the Drupal Association Board, and I’m hopeful that my past experience at Acquia and my nonprofit and marketing experience can benefit the community and help the community to grow!”

About Lynne
Most recently, Lynne was the Chief Marketing Officer (CMO) at Acquia in Boston. Lynne was at Acquia for eight years in this role.

As Acquia’s CMO, Lynne Capozzi oversaw all global marketing functions, including digital marketing, demand generation, operations, regional and field marketing, customer and partner marketing, events, vertical strategy, analyst relations, content, and corporate communications.
Lynne is one of Acquia’s boomerang stories, first serving as Acquia’s CMO in 2009. Lynne left Acquia in 2011 to pursue her nonprofit work full-time and then returned to Acquia in late 2016 to lead the marketing organization into its next growth stage.

Prior to her experience at Acquia, Lynne held various marketing leadership roles in the technology space. She served as CMO at JackBe, an enterprise mashup software company for real-time intelligence applications that Software AG acquired. Before that, Lynne was CMO at Systinet, which Mercury Interactive acquired. Lynne was also a VP at Lotus Development, which IBM later acquired.

Lynne is on the board of directors at the Boston Children’s Hospital Trust and runs a nonprofit through the hospital. She is also on the Advisory Board of Family Services of Merrimack Valley and the Board chair of the West Parish Garden Cemetery and Chapel in Andover, Mass.

We are thrilled to have Lynne on the Drupal Association Board!

Customization touches every part of our lives, from how we take our coffee to the way we style our clothes and beyond. It’s no surprise that users want the same control over their digital experiences. Organizations that offer this control are better able to meet the different – and sometimes conflicting – needs of their various audiences. This is particularly relevant when ensuring your digital platform is accessible to users with disabilities. 

This article explores the concept of customization and why it’s a critical tool for ensuring web accessibility. 

A Quick Recap of Reasons to be Accessible

Before we get stuck into the relationship between customization and accessibility, here’s a refresher on the importance of building digital experiences for everyone.

It’s a Legal Requirement

Web accessibility is the law for many organizations. In Canada, organizations under federal jurisdiction must comply with The Accessible Canada Act, which follows the Web Content Accessibility Guidelines (WCAG.) There are also provincial accessibility acts in Ontario, Manitoba, Nova Scotia, Quebec, and British Columbia.

It’s the Right Thing to Do

People with disabilities deserve equal access to your content. Web accessibility is increasingly vital as more people rely on the internet as their primary gateway to information and services. 

It Widens Your Reach

Over 6.2 million people in Canada are living with a disability. Worldwide, that figure hits around 1.1 billion. If you haven’t made your website accessible, you’re missing out on opportunities to connect with a considerable proportion of the population. 

“I really consider the care that goes into creating an inclusive environment. Opening up about my disability has brought me liberation and support, and has driven me to be more empathetic towards other people living with disabilities – especially disabilities that are unseen.”

– Annabelle*, who lives with a disability. 

*Name has been changed to protect the person’s privacy.

The Issue of a One-Size-Fits-All Approach to Accessibility

While investing in web accessibility is a no-brainer, achieving it is rarely straightforward. One of the biggest challenges is the sheer variety of accessibility needs. 

Consider how many different types of disabilities there are. These generally fall into four categories:

• Visual – such as blindness, low vision or color blindness
• Auditory – such as Deaf/deaf and hard of hearing
• Motor – such as limited fine motor controls or joint pain
• Cognitive – such as dyslexia or autism spectrum disorders

Next, consider the various assistive technologies that may be used to access and navigate your site:

• Screen readers – convert text, links, images, and other digital elements into speech 
• Screen magnifiers – can make elements on a screen bigger
• Head wands and mouth sticks – respond to head, mouth or chin movements to allow users to control their keyboard and cursor 
• Refreshable braille displays – convert information into braille by electronically raising and lowering different combinations of pins

Finally, even within the same disability ‘groups’, people’s needs will vary due to factors such as:

• Different levels of disability 
• Different combinations and overlaps of disabilities 
• If the disability is situational, temporary, or changing over time 

Content that’s understandable to one person may be too complex for another. The same colour can be clearly visible for one person but blend into the background for someone else. The colour pink is distinguishable for some, but it can look like a shade of blue for a person with protanopia. And a menu that’s easily navigable for one user may be a frustrating experience for the next. Some people can click linked text without a second thought, but users with fine motor difficulties often need a larger target. 

Someone with colour blindness sees colours differently to other people. They may not be able to see green, red, blue, or (rarely) any colour.

The issue of conflicting accessibility needs means it’s impossible to build a one-size-fits-all platform. Unfortunately, what often ends up happening is organizations focus on a select few disabilities and neglect the rest. This isn’t true accessibility and it further marginalizes certain groups of people. 

“What I need is for someone to listen to my challenges and consider my unique situation. Organizations must be open to understanding the social, economic, and environmental factors that people who live with a disability face every day.”

– Katy*, who lives with a disability. 

*Name has been changed to protect the person’s privacy. 

Providing Customization to Meet Diverse Accessibility Needs

If one size can’t fit all, how can a single platform meet the varied needs of users with disabilities? The answer is customization – allowing users to select options for how digital information is displayed, organized and communicated to them. 

For example, you could give users the option to:

• Adjust the brightness or colours to something they can see better
• Change the font style to something they can read more easily 
• Turn on captions so they don’t have to rely on audio, or turn off captions to reduce visual distractions 

Customization empowers users with disabilities because it gives them control over their digital experience. After all, who better to decide what each individual user needs and prefers than the user themself?

Video captions are often useful for people who can’t hear the voiceover. But they may be distracting for other users, such as those with autism spectrum disorder. Credit: W3C.

Using WAI-Adapt to Let Users Shape Their Experience 

The Web Accessibility Initiative (WAI) develops standards and support materials to help people understand and implement accessibility. Its WAI-Adapt series of technical specifications enables content authors to provide customization with minimal work. Authors can add extra semantic information using a collection of new attributes and values, usually with taxonomies. 

You can use WAI-Adapt to provide better support to users who require:

• Familiar and consistent symbols, iconography, or graphics
• On-demand help, tooltips, or clues
• Language that’s easier for them to understand
• The ability to limit or hide features
• Clearer distinctions between native and third-party content
• Custom keyboard shortcuts

Tailoring Your Platform for Assistive Technologies

People with disabilities may customize their digital experiences by using assistive technology. Your platform needs to work hand-in-hand with these technologies to ensure accessibility. 

The WAI Accessible Rich Internet Application (ARIA) is a technical specification that allows you to specify how assistive technology should treat certain HTML elements. For example, you can use it to tell screen readers how to prioritize updates to live regions. 

Screen readers convert information on a screen into speech or braille for people with a visual impairment. Credit: Photo by Sigmund on Unsplash.

An easy way for non-technical people to quickly build and update accessible web pages is to use Acquia Site Studio. It includes built-in ARIA support for menus, buttons, sliders, accordions, and modals. Technical team members can also add additional syntax to elements in the Markup tab within Site Studio to support the latest standards.

Expand Your Web Accessibility Expertise

Our Drupal Web Accessibility training course guides you through accessibility fundamentals and common issues. You’ll get hands-on experience of testing and troubleshooting to meet accessibility standards. And you’ll come away with a deeper understanding of topics mentioned in this article, including WAI-ARIA.