Key Points

Page speed has long been a Google ranking factor.

Page speed matters! If your page load time is slow, it affects user experience and search performance.

Faster page speed = Happy Customer.

How to optimize website Performance?

There are many ways to improve the performance of website, but there are also specific Drupal tools and modules to know and implement. I’ll address both of these.

1. Compress your CSS and Javascript files.

The Advanced CSS/JS Aggregation module aggregates and compresses CSS and Javascript files to make your site run faster. Minified CSS and JS can save some valuable time of your site’s page load speed. The term “minify” describes the processes of removing unnecessary characters in the source code. These characters include whitespaces, line breaks, comments, and block delimiters which are useful for us humans but unnecessary for machines

2. Optimize Images.

Images plays a very important role in website performance. Lazy load the images i.e loading an image when it appears into the viewport. helps to improve website performance. We have many tools to lazy load the images. Lazy-Sizes a free opensource project that provides lazy load of images and easy to use. High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

How to use lazy Size ?

Download minfied JS file: lazysizes.min.js

Replace img src to data-src and add lazy load class to the image.

Responsive image styles

Drupal 9 core provides Responsive Image module that provides responsive image styles. A responsive image style is a mapping between image styles and breakpoints. Breakpoints are the points where a responsive design needs to change in order to respond to different screen sizes. Responsive image styles can either work with breakpoints defined in your theme or with breakpoints defined in the responsive image style settings. Responsive image style works with the picture tag of the html5 which provides scrset to define src of images for diffrent breakpoints.

3. Cache your pages with Drupal 9

Drupal 9 core or higher provides an Internal Page Cache module that is recommended for small to medium-sized websites. It can be found at core/modules/page_cache. That is sufficient for small to medium sized websites with moderate traffic. You can select the maximum age for your page caching based on how quickly your website content changes.

1 day - good for websites that are only updated a couple of times per week. There is no commenting or other interaction on the site.

1 hour - good for websites that are updated once or twice per day. (ecommerce)

15 minutes- good for frequently updated websites. (news sites)

If you use Drupal 9 Views or Panels, you can get more fine-grained in your cache settings. The caching on each individual block can be customized as well.

4. AMP for mobile

If your viewers are more in mobile devices then you can use AMP module in Drupal. The principal advantages of a site or web pages changing to Accelerated mobile pages (AMP) are faster loading pages for mobile users, reduce the load time, low bounce rate, adjustment on any browser, mobile-friendly and enhanced SEO.

5. Content Distribution Network (CDN) with Drupal 9

A CDN stores your website on servers across the globe. CDN companies own data centers on every continent and in every region. Think of it as taking your server cache and making copies of it to servers that are a lot closer to your visitors. If the HTML does not need to be recreated by Drupal, then it is served directly from the CDN, greatly reducing the load times involved.
CDN Module in Drupal 9 provides easy Content Delivery Network integration for Drupal sites. It changes file URLs, so that files (CSS, JS, images, fonts, videos …) are downloaded from a CDN instead of your web server.

6. Cloud Hosting

Cloud hosting is scalable. The “cloud” means that there is a data center with lots of dormant servers. As your site’s needs scale up (or down) the servers in the data center respond with more server power. While it may be a panacea for some, latency and cost can be critical concerns, although many include CDN services (content delivery networks) with their packages. Examples include Acquia Cloud, Pantheon, and Platform.sh (both Pantheon and Platform.sh provide free trials).

Site speed has long been a Google ranking factor. Google’s site speed patent was granted on February 4, 2014 (US Patent 8,645,362). Following this focus on desktop page load time, mobile page speed became a ranking factor more recently, in 2018, as part of Google’s “Speed Update.” The leading search engine aims to complete its shift to mobile first indexing by March 2021. Therefore, it’s more important than ever to pay close attention to your mobile page load speed.