With performance being a continuous bottleneck for enterprises trying to deliver an exceptional digital experience to customers and please search engines, this blog will serve as a sight to the sore eyes.
Earlier, we covered tips and tricks for beginners to help them optimize the site performance. Today, we are taking this forward to illustrate some intermediate-level techniques for optimal results. The many ways to configure web performance for your Drupal website are listed below-
1. Theme optimization
Theme optimization is an essential technique to enhance performance. Because, when developers create new themes, they override the required templates such as home page layout or node page, and for the rest of the pages, they override CSS; leading to the addition of a lot of unwanted layers in the HTML.
Follow the steps mentioned below to optimize the theme for your Drupal website-
2. Drupal external caching:
There are a few methods in Drupal that can manage the CMS interaction with an external cache. This can be done using contributed modules, like-
A. Advanced CSS/ JSS Aggregation
Known as AdvAgg, it ensures the improvement in the frontend performance of your site. You can also compare before and after results using Google’s PageSpeed Insights tool.
B. Memcache
With Memcache, you can directly discharge cache bins into RAM; thereby speeding up the cache and making room for MySQL to breathe.
C. RedisRedis is an open-source (BSD licensed) & in-memory data structure store that can be used as a smart cache with the proper eviction policy. When implemented in a similar fashion, it can prove to be the most effective way by which the application can access stored content within it and improve the cache hit ratio substantially.
Know more about the clear cache tag module and how it helps in optimizing the website performance.
3. Devel module:
Devel is an amalgamation of modules, encompassing helper functions, admin pages, and additional development support. One can use Drush commands to use it during the development process to evaluate the query execution time or the number of times function was executed on a particular page.
4. Sprite image:
Sprites are 2-D images that are constituted into one from small images, defined at X and Y coordinates. To display a single image from the combined image, you could use the CSS background-position property, thereby showcasing the exact position of the image to be displayed.
5. Lazy-load images
Lazy loading is a shrewd technique that involves displaying content only when it’s visible to users as they scroll down the screen. This comes handy for those sites which comprise a lot of images and don’t intend to waste the bandwidth by loading the whole page every time the user comes on it.
Thus, images are visible only when the user scrolls.
6. Implementing AMP standard to provide lightning-fast page loading on mobile devices
AMP refers to Accelerated Mobile Pages. It ensures the optimization of web pages for faster loading on mobile devices by providing content through lightweight pages. This certainly aligns with Google’s motive of making the web a more accessible and enjoyable place for users of mobile devices.
AMP is the open-source framework that lets you build pages which are stripped-down/lightweight version of your main pages by eliminating speed-taxing elements impacting load time.
So, whenever a standard webpage’s AMP alternative is available, a link to the AMP version is placed on the page via an HTML tag and then it is what displayed to the mobile device user.
This way, the implementation of AMP can boost the loading speed of your web pages, and hence, improve the end-user experience.
7. Accelerating your 404 responses with the Fast 404 module
The average site with an average module load consumes around 60-100MB of memory on the server to deliver a 404. However, Drupal Fast 404 module comprises a common method that handles both missing image & file 404 errors to fix the issues using less than 1MB of memory; depending on the method you choose - aggressive or super-aggressive.
8. S3 File System
S3 File System or s3fs provides an additional file system to your Drupal site, which is stored in either Amazon’s Simple Storage Service (S3) or any other S3- compatible storage service. It’s up to you whether you want to use S3 File System as the default one, or only for individual fields. This is beneficial for the sites that have distributed their load across multiple servers, as the mechanism used by Drupal’s default file systems is not sustainable under such a configuration.
9. Content delivery network
Content Delivery Network module facilitates easy integration for Drupal sites. It modifies file URLs so that files (for example, CSS, JS, images, fonts, videos, etc.) are downloaded from a CDN instead of your web server.
However, only origin pull CDNs are supported. You just need to replace the existing URL with another domain name- thereby, allowing CDN to automatically pull the files from your server (the origin).
10. Pick Nginx over Apache
Apache and Nginx are the two common open-source web servers, however, the latter is quite faster and consumes considerably less space than the former one.
Nginx has been designed to resolve the C10K problem - the most common problem that web servers (like Apache) face in supporting a large number of simultaneous connections, i.e, more than 10k connections at once.
Thus, Nginx comes as a quick fix for performance issues. You can opt for it without the need of changing your actual application code. It will seamlessly integrate with your Drupal code.
11. Leverage browser’s cache for images and files
Leveraging your browser’s cache implies that you can specify for how long web browsers should retain images, CSS and JS stored locally. That way, the user’s browser will download less data while browsing on your site, thereby improving site performance. Below are the examples of the same for different web servers-
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}
location ~* \.(pdf)$ {
expires 30d;
}
It should be added to your .htaccess file.
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
12. Drupal coding standards should meet
Coding standards specify the set of rules for programmers to ensure best practices like consistent formatting, indentation, and many more rules.
Drupal’s coding standards are articulated in English so that anyone working with Drupal team around the globe, which is common today, standards can eliminate any communication differences.
Further, many programmers come to Drupal from multiple programming language backgrounds, each with their syntax and style. Therefore, having a precise set of standards to look upon help in keeping the codebase consistent.
These standards, further, specify the guidelines on how to style and format your code precisely, especially concerned with its appearance and readability ease. This includes things like indentation, whitespace, and line length.
Ensuring that all code abides by the given guidelines, Drupal acknowledges consistency & integrity in all its projects, making it easier for documentation. The API module itself parses the information to produce a document, which can be seen here. The documentation is generated by the specific format of the comments and a variety of tags in the source code to get detailed information on the code.
13. Ensuring code security is a MUST
Security is the foremost issue for any developer that he or she must take care of, undividedly; no matter whether you are writing a PHP snippet or an entire module.
The given basic rules will help you avoid any security breach if followed properly-
14. DB query optimization in codes
Performance tuning can be a challenging task, especially when you tend to work with large-scale data. Even the smallest change can have a significant (positive or negative) impact on performance.
Query optimization can be stated as whenever a developer or the database engine revamps a query in such a way that SQL Server is capable of returning the same results more efficiently.
For more ease, you can follow these steps-
1. Join DB queries whenever possible
2. For any DB updates and insertion, use core API
3. Follow Drupal coding standards
15. DB table optimization
DB table optimization in Drupal refers to the refinement of all the administrator-selected tables in the database and displaying its sizes. Enable notifications stating the necessity to analyze tables, maintenance, and carry out repair operations.
With it, you can prevent crashing of tables during regular cron.php executions.
16. Table indexing
A database index is a data structure that ensures the boost in the speed of operations in a table. You can create indexes using one or more columns for rapid & random lookups, and efficient ordering of access to records.
17. Use Defer attribute for external js file to load the page faster
The role of the Defer attribute is to indicate to the browser that it should load the script in the background, while continuously working on the page. Once the script gets loaded, you can run it.
The advantage here is that scripts with the Defer attribute never let the browser block the page.
18. Upload compressed image for better performance results
Using compressed or smaller- sized images will help in saving bandwidth, which is appreciated by Networks and browsers as well.
Also, before starting the modification of images, ensure that you have chosen the best file type. There are several types of file that you can use:
With all the given methods from implementing a CDN to clearing caching, lazy-loading images, fixing 404s, and aggregating CSS/JS files, you can fix your Drupal-powered website’s performance extensively.