Drupal Speed Optimization: Mastering PageSpeed Insights

Updating Drupal and its modules regularly positively affects the website’s performance. Unfortunately, website owners often neglect the importance of installing updates.

Each new Drupal release delivers several performance fixes, code optimizations, and other improvements that aim to increase your page load speed etc. The update creators strive to ensure the new version is compatible with current standards and technologies.

The same applies to contrib modules that you use on your website. The module creators make sure they are adapted to applicable standards. The Drupal community can also submit their comments, so not only the authors have an impact on the development and security of the modules. Update Manager module is a tool that allows you to keep your website in a safe condition. Its functions include:

• Update management – the tool automatically checks the availability of new versions of Drupal Core, modules and themes. It allows the site admins to track and apply these updates;
• Notifications about the availability of updates – the module informs site admins about the availability of updates via the user interface and e-mail messages. This allows you to update your website quickly;

• Management from the user interface – Update Manager offers a simple user interface that allows you to browse available updates, select the ones you want to install and apply them without having to use the command line;

• Availability of update reports – the module allows generating update reports, which contain information about the availability of updates and the status of installed modules and themes.

Every installed module, even if you do not use it, can burden your website. Modules can have their scripts, CSS styles and code that is loaded when the page is displayed. If they are unused, it is an unnecessary burden that you can eliminate. Uninstalling such modules can improve your Google PageSpeed score on the Drupal website because it reduces the number of database queries and the amount of code and resources to load.

To go to the list of all modules, click Extend on the admin toolbar in Drupal. The list includes all modules that are available on your website. Modules with a marked checkbox are those currently installed.

To uninstall a module, click the Uninstall tab.

Check the checkboxes next to the names of the modules you want to uninstall, and then click the Uninstall button located below the list. At the end, confirm whether you want to continue. Thanks to this quick process, you can remove modules that may be the cause of slow Drupal sites and affect their performance.

Cache is a mechanism that significantly impacts the operation of websites, including those based on Drupal.

The cache allows you to store previously generated versions of pages and resources. It makes loading pages more efficient because they do not have to be regenerated each time. It significantly increases the Google page speed of the Drupal site. Well-managed cache reduces server load, which is particularly important when there’s high website traffic or when you use a server with limited resources.

The cache is a very complex mechanism. Advanced configuration requires specialized knowledge, so it is worth consulting experts to optimize Drupal performance. You should take care of the proper use of the cache at the stage of creating your website. Many tools help with cache optimization, but using them effectively requires specialized skills.

The Internal Page Cache module can be a very good solution for those who do not have specialized knowledge about cache memory. This module stores the page content in the cache, eliminating the need to load it every time you visit it. It is recommended for websites of various sizes. Moreover, it does not require a complicated configuration, so it can be used by every Drupal user, regardless of their level of advancement.

Images are an important part of most websites. Apart from their proper selection or arrangement on the page, their optimization is an important issue. Placing large graphic files can significantly affect the Drupal website loading speed.

The Image style mechanism, which allows for flexible management of images, is available in the Drupal core. Its main applications include:

• Image size management – adjusting the size of images added to the website’s content is one of the main uses of this mechanism. From the admin panel, you can create styles that will crop or scale images added to the website. Thanks to this, you are sure that even HD graphics will be displayed correctly. This helps with page loading speed optimization;
• Changing the appearance of images – apart from changing the size, it is also possible to change the appearance of images. You can create styles thanks to which the added graphics will be displayed in black and white, cropped to specific sizes or rotated by a specific angle;
• Image conversion – you can convert the images on your website to other formats, such as WebP, which are more optimized for web performance.

Responsive image styles are an extension of the mechanism described above. It allows you to use different image styles, depending on the device’s resolution.

You can scale or reduce the same image to different sizes, depending on the device it is displayed on. Using such a solution effectively reduces the amount of transferred data, optimizing Drupal performance.

Responsive styles can not only boost Drupal speed but also facilitate managing the content on your website. The person responsible for it adds only one image to the content, and the system ensures that various devices correctly display it.

Lazy loading is a technique of delaying the loading of resources such as images on the website until they are needed by the user.

This technique has many advantages that positively affect Drupal speed optimization. These include:

• Shortening page loading time – lazy loading allows loading only those resources that are visible on the user’s screen or in its close vicinity. This ensures a fast-loading Drupal website, which improves the browsing experience,
• Saving the network’s bandwidth – resources such as images are not loaded immediately, which reduces network bandwidth consumption, which is particularly important on mobile devices or with a slow Internet connection,
• Saving hardware devices – lazy loading reduces the load on browsers and user devices because they do not have to load all resources at once,
• Improved SEO – the improvement of page performance that is provided by lazy loading can result in a better position in SERPs, as performance is a ranking factor in search engine algorithms.

In the case of images that are placed statically, e.g. in templates from modules or skins, the developers who create the code take care of the use of this technique. They must remember to add the lazy value to the tags, for example:

<img src="logo-smartbees.svg" alt="Logo Smartbees" width="400" height="200" loading="lazy">

For photos added as part of content creation, you can enable delayed resource loading support via the Drupal admin panel. To do this, go to the display management page of the media type you want to enable the feature for. To do this, select Structure -> Media types -> Select media type (e.g. Image)-> Manage display.

Then head to advanced settings of the field displaying the image by clicking the settings icon. Within these settings, you can specify the value of the loading attribute.

File aggregation is a process of combining and minimizing JS and CSS files on the website. Its use allows you to reduce and minimize the number of these files on the page. Instead of loading many separate files, aggregation allows you to load several smaller files.

Saving the network’s bandwidth helps with page load optimization, reduces data transfer costs for users (especially on mobile devices), and increases overall website performance. Enabling CSS and JS file aggregation in Drupal is very simple. Head to Configuration ->Development->Performance, and then check the Konfiguracja -> Development -> Wydajność, a następnie zaznaczyć pola Aggregate CSS files and Aggregate JavaScript files boxes in the Bandwidth optimization tab.

The Drupal 9 library system is a mechanism that allows you to manage and organize JavaScript and CSS resources used on a website. The system not only facilitates the organization and control of the resources but also has a significant impact on the loading speed and website performance.

Using the library system, you can group various JS and CSS files into one library. It simplifies management and control over the resources used on a specific page or view. Thanks to the library system, styles and scripts used by the element to which the library has been attached, the files will be downloaded only on the subpages where the element is located.

The implementation of the library system takes place during the development process. Programmers responsible for creating modules and skins create libraries and then assign them to specific elements: blocks, views or paragraphs.