Performance is crucial for any website, and a website built with the Drupal or WordPress content management system (CMS) is no exception. Search engines prioritize mobile website performance, and users abandon websites that load too slowly, so ensuring fast loading speeds is essential.
While Drupal and WordPress offer a solid foundation, adding features, themes, and modules/plugins can slow down your site. In this blog post, we’ll explore strategies to improve the performance of your Drupal and WordPress sites and some pitfalls to avoid.
Measuring Performance with Google Pagespeed Insights
How fast is your site? Google Pagespeed Insights is an excellent tool for measuring performance. It provides Core Web Vitals and an overview score with recommendations for improvement. Focus on achieving a general site performance score of 80+ and passing all Core Web Vitals.
Strategies for Boosting Pagespeed
1. Cache and Aggregate
Caching can significantly enhance performance. WordPress Performance plugins can handle CSS/JS caching, while full-page and database query caching require additional plugins and fine-tuning for optimal results. Drupal, however, has these performance enhancements already baked into the CMS.
Consider using performance-oriented plugins on your WordPress site. Autoptimize, Phastpress, and Hummingbird are popular options that can significantly enhance site performance.
Drupal handles this with its internal caching. Enable Drupal’s built-in caching for all your pages, blocks, and views, and enable CSS and JavaScript aggregation on the Performance page.
These plugins and configurations may require platform-specific adjustments or specific settings for certain hosting environments, so testing is crucial.
2. Choose a Good Hosting Environment
Shared website hosting can be affected by other websites, adversely impacting your page speed. Dedicated or managed hosting environments offer better performance at a reasonable cost. Providers like Pantheon offer dedicated hosting for Drupal and WordPress, whereas Acquia provides dedicated Drupal hosting. WPEngine and Kinsta provide dedicated WordPress hosting. Any of these managed hosting providers are an excellent starting point.
Managed hosting environments often provide their own caching mechanisms that are worth exploring for their known performance benefits.
Varnish, for example, can dramatically improve performance. Consider Memcached or Redis for faster, more scalable caching — especially with complex Drupal or WordPress sites.
3. Image Size Matters
Even Drupal and WordPress have limits when compressing large images. Upload images close to the required size or aspect ratio. Configuring Drupal and WordPress to resize images automatically is essential for a fast experience.
4. Optimize Images
WordPress and Drupal can generate adequately sized images for your website, but newer formats like SVG, WebP, and Avif offer better compression without compromising quality.
WordPress plugins like WebP Express, ShortPixel, SVG Support, and Safe SVG can reduce image size quickly and offer SVG support.
In Drupal, the SVG Image module lets you add support for SVG files to the standard image field. It also facilitates web image format conversion through a filter within Drupal core image styles, which you can configure according to your needs.
It’s equally important to ensure the image loads are sized appropriately for the device accessing your site. Whether using Drupal or WordPress, you’ll want to ensure that responsive images are set in the SRCSET or your IMG tag. WordPress typically adds responsive images by default. You can manipulate these defaults using the wp_calculate_image_srcset() and wp_calculate_image_sizes() filters outlined within the WordPress Developer Resources. In Drupal, we do this using the module Easy Responsive Images.
Lazy loading images is an effective way of deferring the load of images until they’re about to enter the viewport.
Optimizing video embeds is as effective as optimizing your images. With Drupal, we do this using the Lite Youtube Embed module, which allows the videos to be lazy loaded.
5. Avoid Too Many Scripts
Google Tag Manager makes it easy to add multiple scripts for user journey tracking — but too many scripts can hinder performance. Regularly review and remove unnecessary third-party scripts to optimize site speed. We wrote a blog post on how to improve performance in Google Tag Manager.
6. Copy/Pasting? Clean Your Content
When copying and pasting text from another document, clean out extra metadata and styling. Drupal and WordPress can clean some of it, but it’s best to avoid loading unnecessary content. When possible, always paste text without formatting.
7. Update, Update, Update
Regardless of which platform you choose, it’s critically important to keep the content management system and its corresponding modules or plugins up-to-date. Drupal core and modules and WordPress core and plugin updates can offer performance and security fixes.
Be sure to keep PHP on the most recent stable version supported by Drupal or WordPress to benefit from performance and security fixes.
Strategies to Avoid
1. WordPress Page Builders
Avoid using page builders on the built-in WordPress block editor (Gutenberg). Gutenberg has improved site editing to the point where additional page builders are rarely needed. They can negatively impact site performance.
In Drupal, however, there is no equivalent page builder. It is important to use themes and modules that do not provide unnecessary bloat.
2. Excessive Plugins
Many Drupal modules or WordPress plugins can have unnecessary features that slow down your site. If you only need one feature from a module or plugin that loads many others, consider finding a more lightweight alternative. The functionality provided by that one feature within that module or plugin may be able to be written within your theme or a custom Drupal module or WordPress plugin for a more performant and secure site.
It’s always essential to audit your Drupal modules and WordPress plugins regularly. We would recommend quarterly. Disable unnecessary Drupal modules and WordPress Plugins that consume resources, and consider removing them from the code base completely where possible.
3. Frameworks and Bloated Themes
Adding frameworks like Bootstrap, icon packs, and fonts to a theme can increase CSS and JS bundle size. If you can’t optimize these effectively, stick to creating what you need on an existing theme. Less is definitely more in this case.
The payload of CSS for what loads above the fold on a page can be managed using Critical CSS.
Some parting advice:
Write efficient custom code in your theme and Drupal module or WordPress plugin to ensure it is optimized for performance. If you’re a developer, disable caching and aggregation when developing to avoid issues.
As always, test, test, and test again. Test the site under heavy load to simulate real-world scenarios to uncover bottlenecks, and use third-party services such as New Relic to help dig into these bottlenecks.
Drupal and WordPress provide a solid foundation for performance, but modules, plugins, themes, and functionality can reduce site speed. Monitoring performance is crucial — and pairing it with continuous optimization is essential. For more advanced assistance, feel free to get in touch; we’d be happy to provide expert advice, and even a few performance improvements.
Did you know that Shane is our very first Kanopi employee, ever? If you’ve enjoyed reading his post, please check out his other great works in our blogosphere, such as:
