Useful ways to improve website speed in Drupal 8

There’s one thing that can give you better positions in Google, more visitors, and increased conversions in the same “package” — improved website speed. Today, we will discuss what helps you achieve this on a Drupal 8 site.

Drupal is able to power even content-heavy websites — and stay light! The 8th version has plenty of tricks in this area, some of which were newly-introduced in it (like the BigPipe module) and have gained the respect of many developers. So, welcome to our little tour on the ways to improve website speed in Drupal 8.

How fast should a website load in 2020?

The classic recommendation is to keep the website loading speed within 3 seconds. However, every millisecond matters for conversions, so it's better to strive for more. For example, Amazon reports that every 0.1 second of loss in speed causes a 1% loss in sales.

As site speed is officially a ranking factor by Google, it makes sense to consider the scores and recommendations of the Google speed measuring tools. One of these is Google PageSpeed Insights. It can give your site speed one of these scores based on a number of factors (and, of course, you want to get 90+):

• fast (90 or above)
• moderate (50 to 90)
• low (below 50)

Great ways to improve website speed in Drupal 8

These tips approach website speed optimization from different angles to create the perfect picture. Their choice may depend on the site, so consider ordering a Drupal 8 performance audit from our experts. However, the most common and popular ones are as follows.

Drupal 8 caching opportunities

Caching is a known technique to improve website speed. It allows you to store the copies of web pages to serve them quickly to browsers and avoid server overhead. The great news is that the D8 core comes packed with robust built-in caching tools:

The Internal Page Cache

The Internal Page Cache core module improves website speed for anonymous users, serving your web pages to them very fast. It does not work with dynamic content for anonymous users (e.g. a shopping cart).

The Internal Dynamic Page Cache

The Internal Dynamic Page Cache core module does the caching to improve speed both for anonymous and authenticated users. It caches your web pages excluding the personalized parts and turns the latter into placeholders.

The BigPipe

The BigPipe core module was initially created by Facebook to quickly handle dynamic pages. It loads the unpersonalized page elements first and the dynamic ones next, so users can quickly start interacting with the site. Drupal’s creator Dries Buytaert demonstrated how it can improve website speed.

Cacheability metadata

Cacheability metadata in D8 allows for flexible handling of the cache. This data can be provided by all things that are renderable (or used to determine what to render). Here are three 3 properties in cacheability metadata:

• cache tags allow you to refresh the cache when something changes (based on some entity data or configuration values)
• cache contexts allow you to show different content depending on the context (user role, permissions, URL, etc.)
• cache max-age determines how long the item should be cached (0 for uncacheable items), which makes it great for time-sensitive caching scenarios

Caching in Drupal 8 Views

There are fine-grained caching settings offered by modules that deal with content display (such as the core Views module, the contributed Panels module, etc.) For example, the Views allows you to configure tag-based and time-based caching in Advanced settings.

Bandwidth optimization: CSS/JS aggregation in Drupal 8

A useful way to improve website speed in Drupal 8 is to aggregate your CSS and JavaScript files. This reduces the number of HTTP requests needed for the page to load, as well as the amount of data transferred. Out-of-the-box, D8 offers two options that are enabled by default at /admin/config/development/performance.

Contributed modules include AdvAgg (Advanced CSS/JS Aggregation). It comes with a bunch of submodules such as Advanced Aggregates, Advanced Aggregates CDN, Advanced Aggregates CSS/JS Validator, Advanced Aggregates External Minifier, Advanced Aggregates Minify CSS, and many more. They fit every purpose and scenario where you want to improve website speed.

The prefetching technique

According to the link prefetching technique, links in the user's viewport are detected. In order to speed up the delivery of pages that the user might want to click, the content from these links begins to be saved in the cache as soon as the browser goes idle. There is a relatively new but already popular module — Quicklink.

External cache systems

Give your website an extra speed boost by using an external cache system — Redis, Varnish, Memcached, and so on. Drupal 8 offers contributed modules that take care of smooth integration. Examples include Redis, Memcache, Varnish, and more.

Using a CDN to improve website speed

A content delivery network (CDN) can deliver your content to users faster due to being a geographically distributed network of proxy servers. One of the most popular Drupal 8 modules that can help with CDN integration is the CDN module. It changes your website file URLs, so they are downloaded from a CDN instead of your server.

Responsive image styles in Drupal 8

Image optimization is an essential task for anyone who wants to improve website speed. Drupal has a built-in system of image styles to trim images (crop, scale, etc.) to fit every display mode. Moreover, D8 allows you to provide responsive images that will look optimal on every device. In addition to providing user-friendly experiences to your audience, this technique improves website speed because there is no need to load large images on mobiles.

The Responsive Image and Breakpoint module in the core enables you to set up breakpoints in a theme’s or a specific module’s YAML file. According to them, respective image versions will be shown to different resolution devices. See a detailed guide on responsive web design in Drupal 8.

Lazy loading for better performance in Drupal 8

The lazy loading technique is widely popular for images, videos, or other media. Its aim is to save resources and improve website speed. Lazy loading allows you to only load the media that is in the current user’s viewport.

In D8, lazy loading can be applied with the help of contributed modules. The Lazy-load and the Image Lazyloader are very popular ones.

Using the latest version of PHP to improve website speed

Since PHP improves with each new version, it’s reasonable to keep it updated on your website’s server. It will make your site’s code cleaner and more efficient, so it’s a great way to improve your website speed. The current PHP version supported by D8 is PHP 7.3. Our Drupal support experts are always ready to help you with it.

Cleaning up the unnecessary modules

As always, you will greatly improve your site speed by disabling unused modules or replacing heavy ones with better alternatives. In D8, this has become much easier since many of the great modules (or similar capabilities) have been moved into the core.

For example, Drupal creators strive to make the core Layout Builder the one and only module for all layout-related purposes, replacing the very popular contributed one's like Panels, Panelizer, Display Suite, etc. The new Media handling system also eliminates the need for a bunch of contributed modules. Further, examples abound.

That said, to improve your website speed, it’s great to update to the latest D8 version, discover its capabilities, make an audit of modules no longer in need, and configure the new ones, so they meet your needs. You can also entrust this to our Drupal development team.

Integration with JavaScript frameworks

JavaScript frameworks (React, Vue, Angular, Gatsby, and many more) are known for their exceptional capabilities in high loading speeds. They also help you create interactive interfaces that users love.

Today, it’s trendy to integrate them into D8 sites. Roughly speaking, there are two key ways for doing this:

• headless, or decoupled setup where Drupal serves as a backend sending data via an API to a frontend application on React (or other JS framework)
• creating separate interactive elements and embedding them into your particular website’s pages handled by Drupal.

There are numerous libraries, starter kits, and source plugins from the JavaScript framework creators in this sphere.

However, the best news is that D8 is built on an API-first principle and has enhanced integration capabilities. The core modules such as HAL, HTTP Basic Authentication, JSON:API, RESTful Web Services, and Serialization that do everything to provide the perfect data sharing in the right format. There are also very nice contributed modules, for example: 

• REST UI that provides a user interface for managing the core REST resources
• GraphQL that allows you to manage queries using the GraphQL query language
• Subrequests that groups sets of requests together to improve website speed
• RELAXed Web Services provides a generic RESTful API for all nodes and extends the core REST capabilities

Our experts can improve your website speed

We have reviewed the common ways to improve website speed in Drupal 8. There are plenty of other tools out there and steps that can be made based on your site’s review. Ask our Drupal support specialists to give your site an extra performance boost that your business will notice!