Improving Performance and Accessibility

The famous computer scientist Donald Knuth once said, “Early optimization is the root of all evil.” And he is probably right. Trying to write the best code from the beginning could lead to wasting time.

As you approach the end of the initial implementation phase, you must begin thinking about optimizing your work. In frontend development, the most important optimizations are related to performance, accessibility, and search engine optimization (SEO).

In this chapter, we’ll turn our attention to these topics:

• Performance
• Accessibility

Technical requirements

To run the examples in this chapter, make sure to follow the instructions in Chapter 1, Setting Up a Local Environment.

You can find the code for this chapter in the GitHub repository: https://github.com/PacktPublishing/Modernizing-Drupal-10-Theme-Development.

Performance

To start measuring the performance of the demo website, we should again enable all the optimizations that we disabled in Chapter 1, Setting Up a Local Environment. To do so, simply comment on the inclusion of settings.local.php in the web/sites/default/settings.php file:

if (file_exists($app_root . '/' . $site_path . '/settings.local.php') && getenv('IS_DDEV_PROJECT') == 'true') {
  //include $app_root . '/' . $site_path . '/settings.local.php';
}

Clear the cache, and the demo website now runs with the production configuration.

There are different ways to measure a website’s performance, but the most used one is the suite provided by Google.

Google Lighthouse

Google Lighthouse is an open source tool developed by Google that provides developers and website owners with valuable insights into the performance, accessibility, SEO, and best practices of their websites. It is an...

Accessibility

Scrolling down the Lighthouse report, we come to an Accessibility section. The score is quite good; the only issues are caused by some poor color contrasts:

Figure 14.11 – Accessibility audit from Google Lighthouse

Usually, markup produced by Drupal is pretty accessible; the community behind the CMS is very sensitive about this topic. Main issues are usually added by our custom templates.

This is not a book about accessibility; that is a huge topic, and there are many resources about it – for example, in the Mozilla Web Docs: https://developer.mozilla.org/en-US/docs/Web/Accessibility. In the next sections, we’ll discuss the features that Drupal provides us with to implement some of the techniques required to make a website as accessible as possible.

One of the best forms of help that you can give to your users is to correctly set the attributes defined by the Accessible Rich Internet Applications (ARIA) specifications...

Summary

In this chapter, we’ve talked about Google Lighthouse and how to use its report to find and resolve performance and accessibility issues.

You’ve learned how to provide images tailored to different devices and how to configure Drupal to serve images that the browser will lazy-load; we’ve then discussed why not all images should be loaded lazily.

We talked about critical CSS and how its usage can speed up the perceived performance of a page.

Lastly, we saw some techniques that are useful to make our pages accessible to users who use assistive technologies to navigate the web.