Top 10 best practices for designing a perfect UX for your mobile app

You could have the most powerful server with memory in heaps but is that enough to ensure a high-performing website? With Drupal, scaling the website in harmony with your business growth is easy. In fact, that is what Drupal is great at. However, a sudden rise in web pages, functionality and content could impact its performance. Drupal 9 is here now and is all geared-up to take on this challenge like a pro! It comes with the goodness of Drupal 8 minus the old code which makes it leaner, cleaner and more powerful. Explore more on Drupal 9 performance improvement techniques that absolutely work.

Performance of the website is the key to business success. Slow loading websites could be harmful for businesses. A website with better performance helps in better SEO, improve visitor’s conversion rate and provides better user experience to the visitors which collectively help in the growth of the business. While slow loading websites do quite the opposite and become the reason for the business failure.

There are many things that affect the website performance. Some of them are:

•    Your service provider (Hosting, DNS etc.)
•    Number of requests to the server
•    Technical issues or bad programming practices
•    Caching technique
•    Improper server configuration
•    Heavy image and video files

Drupal 9 Core and Custom Modules to boost Performance 

There are many available contributed and core modules in Drupal 9 which can be helpful in improving your website’s performance. By following certain coding practices and with proper server configuration, you can drastically improve the site performance.

Core Modules
 

•    Big Pipe

The Drupal Big Pipe module makes things faster without extra configuration. It comes packaged with Drupal core. It improves frontend perceived performance by using cacheability metadata and thus improving the rendering pipeline.

•    Internal Dynamic Page Cache

This Drupal 9 module helps to cache dynamic content. It is helpful for both anonymous & authenticated users. This module is not available in Drupal 7. Pages requested by users are stored the first time they are requested and can then be reused when the same page is further requested.

•    Internal Page Cache

The Internal Page Cache module helps to cache data for anonymous users. This module is available in core and is enabled by default. 

Configuration Path:  admin/config/development/performance

Here you can clear cache, set browser and proxy cache maximum age and enable / disable aggregation settings.

Contributed Modules

• Advanced CSS/JS Aggregation
  
  The Advagg module comes packed with many other submodules, such as -
• AdvAgg Cdn: Helps to load assets (CSS/JS) from public CDN
• AdvAgg CSS/JS Validator: Validates CSS and JS file
• AdvAgg External Minifier: Minifies Javascript and/or CSS with a command line minifier.
• AdvAgg Minify CSS : Helps in minify css files with 3rd party minifier
• AdvAgg Minify JS : Helps in minify js files with 3rd party mi
• AdvAgg Modifier : Allows one to alter the CSS and JS array. (May have compatibility issue)
• AdvAgg Old Internet Explorer Compatibility Enhancer

Configuration Path: /admin/config/development/performance/advagg

This module also supports file compression techniques like gzip and brotli. This module helps in reducing the number of http requests, thus improving the site performance significantly.

• Blazy

The Drupal 9 Blazy module provides lazy loading of images to save the bandwidth and avoid higher bounce rates. Lazy loading is a technique that loads images only when in the visible area to the user. This multi-serve technique saves time and data. 

Configuration path: /admin/config/media/blazy

Here you can enable/disable Blazy, configure placeholder effect and can also set the offset which determines how early the image will be visible to the user.

• CDN

The Drupal 9 CDN module helps in easy integration of CDN in Drupal websites. It helps to serve static content from the CDN server to increase the speed of content delivery. Other than that, this module is also easy to configure.

Configuration path: /admin/config/services/cdn

Here you can enable/disable the CDN, provide mapping URL and check/uncheck forever file caching.

Performance Improvement with Best Coding Practices

• Using isset() over array_key_exist()

isset() method is significantly faster than array_key_exist(). The main difference between isset and array_key_exist is that array_key_exists will definitely tell you if a key exists in an array. Whereas isset will only return true if the key/variable exists and is not null. For more information on this check here for benchmark comparison.

• Using entityQuery()

entityQuery() depends on a storage controller to handle building and executing the query for the appropriate entity storage. This has the advantage that any query run through entityQuery() is storage independent. So, if you’re writing a contributed module or working on a website where it might be necessary to move to an alternative entity storage in the future, all your queries will transparently use the new storage backend without any changes needed. entityQuery() can be used whether you’re writing queries by hand in custom code or via the entityQuery() Views backend.

• Using loadMultiple() method instead of looping

If you have 10 nids (node ids) and you’re looping through it to load each node, you are making 10 queries to the database. While using loadMultiple() it is reduced to just one database query. 

• Caching

Using Cache API in Drupal 9 you can cache the renderer, response array or object. There are three renderability caching metadata available in Drupal 9.

1. Cache tags
   
   The Cache tags are used to cache data when it depends upon Drupal entities or configurations. Syntax for this is cache-item:identifier e.g. node:5, user:3.
2. Cache context
   
   Syntax:
   •    periods separate parents from children
   •    a plurally named cache context indicates a parameter may be specified; to use: append a colon
                   Example: user.roles, user.roles:anonymous, etc.
3. Cache max-age        

          Cache max-age is used to cache time sensitive data.

• Queue worker / Batch

To process large amounts of data without php time out, batch processing or queue worker can be used. Items in queue worker runs only when the cron runs and it runs for a small amount of time. There are two types of queue workers: reliable and unreliable. Reliable queue worker ensures that the item in the queue runs at least once, whereas an unreliable queue may skip items due to memory failure or for other interruption. Batch processing processes the items till all the items finish in the batch conditioned so that no error should occur during the processing without waiting for the cron run.

Improving Performance with better Server Configuration

• Using Nginx instead of Apache

Nginx and Apache, both are widely used web servers. Nginx has an edge over Apache on performance benchmark. It is also faster and more efficient than apache. Nginx performs 2.5 times faster than Apache according to a benchmark test running up to 1,000 simultaneous connections.

• HTTP/2.0 over HTTP/1.1

HTTP/2.0 supports multiplexing, that is unlike HTTP/1.1 which blocks other resources. If one resource cannot be loaded, HTTP/2.0 uses TCP connection to send multiple streams data at once. HTTP/2.0 uses advanced header compression techniques than HTTP/1.1

Nginx configuration for HTTP/2.0
server {
    listen 443 ssl http2; //http2 settings
    ssl_certificate server.crt;
    ssl_certificate_key server.key;
}

• Serving Compressed Content

Compressing responses often significantly reduces the size of transmitted data. However, since compression happens at runtime, it can also add considerable processing overhead which can negatively affect performance. 
Nginx configuration to serve compressed content:
server {
    gzip on;
    gzip_static on;    
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_proxied  any;
    gzip_vary on;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;    
    ...
}

• MariaDB instead of MySQL

mariaDB has improved speed as compared to MySQL. It provides faster caching and indexing than MySQL. It is almost 24% faster than MySql in this case. There are other key metrics also where mariaDB is better than MySQL. So, MariaDb is preferred over MySQL in terms of performance.

• CDN

CDN stands for content delivery network. It is a cluster of servers spread across the globe (a.k.a., points of presence, or PoPs), which works together to deliver the content faster. CDN stores the cached version of the site content and delivers the content from the nearest available server. Some of the popular CDN providers are Cloudflare, Amazon cloudfront, Google cloud cdn etc.