Drupal: Effective Pagespeed and Performance Optimizations

Besides content, hardly anything is more important for a high ranking on Google than a page's performance. Drupal 8 is anything but slow out-of-the-box, but with certain techniques and tuning tricks, you can still extract a lot of speed. Here we present the most important ones:

Tailwind

Modern CSS frameworks like Bootstrap or Foundation take a lot of work off your hands but can also negatively impact a page's performance. Because of their "all-in-one" approach, both solutions are relatively large (Bootstrap approx. 120kb, Foundation approx. 65kb), and of course, there's also the self-written CSS necessary for the site's design, which often adds another 100 – 200kb.

Tailwind CSS offers relief: With a new "utility first" approach, most of the time, no own CSS is necessary, which is reflected in the amount of data transferred: Stylesheets under 10kb are not uncommon with Tailwind. Especially in the mobile area, this directly affects the page's loading speed.

Vanilla JavaScript

It's similar to the CSS frameworks with the well-known JavaScript frameworks. A few years ago, there was no way around jQuery, but nowadays, "pure" JavaScript ("vanilla") is on the same level usability- and feature-wise. By foregoing jQuery, you save about 30kb, and the runtime performance of Vanilla JS is significantly better as well.

Images

A picture speaks more than a thousand words: On modern websites, many images are indispensable. But this can quickly affect the page's loading speed. The higher the resolution of an image, the more data needs to be transferred. Techniques like Lazy Loading and Responsive Image Styles provide help here. The former ensures that images are only loaded when they are supposed to be displayed. Normally, the visitor's browser loads all images on the page, regardless of whether they are visible or not. With Lazy Loading, only the images in the viewport are loaded. As the user scrolls further, the rest of the images are gradually loaded. Another problem can be posed by different devices. On a mobile phone, it makes no sense to deliver images in the same quality as on a desktop computer or a tablet, as they are displayed much smaller and you can save a lot of bandwidth here. Responsive Image Styles offer a solution by delivering the appropriate image for each device. However, only one version needs to be uploaded, and Drupal takes care of the scaling.

Drupal Caching

To ensure that dynamic content does not have to be recalculated with every page request, Drupal has several caching mechanisms: Depending on the content type, either the Page Cache or the Dynamic Page Cache is used. The Page Cache is responsible for static content, such as landing pages or articles - here, the fully calculated page is cached so that an access time of about 50ms is possible. It is more challenging with dynamic elements, like comments and shopping carts. This is handled by the Dynamic Page Cache, which ensures that all static elements of a page are cached and the dynamic content is loaded via a placeholder system. Compared to the Page Cache, the Dynamic Page Cache, with access times of around 250ms, is slower but still significantly faster than an uncached page (around 2-3s).

Fastly

Drupal is fastest when it doesn't have to do anything at all. This is possible with the help of a CDN (Content Delivery Network) like Fastly: Drupal takes care of calculating the page once, Fastly retrieves the result and caches it on their servers. The site visitor receives the fully calculated page directly from Fastly. Fastly has servers all over the world, and the one closest to the visitor is automatically selected. The integration of Drupal and Fastly works smoothly, ensuring that the pages cached by Fastly are automatically updated when the content in Drupal changes.