Drupal is a flexible, open source content management system (CMS). It powers more than a million websites, including http://www.weather.com, https://www.whitehouse.gov, and http://www.economist.com. Although Drupal allows you to create a site via an easy-to-use user interface, it can be slightly slow out of the box. You need to optimize it to ensure fast load times and good experiences for your users.
Why speed matters
Regular readers of the Fastly blog may be aware that page speed matters, but in case you have lingering doubts:
- A one-second delay in page response can result in a 7% reduction in conversions.
- 40% of people abandon a website that takes more than three seconds to load.
- Lead conversion rates are highest when a website takes between one and two seconds to load.
- Google ranks sites with a shorter Time To First Byte (TTFB) higher in their search rankings.
As you can see, it's in your best interest to make sure your site is fast. If you’re using Drupal, it’s even more essential that you optimize your site for speed, making sure your users can access your content quickly.
Five ways to speed up your Drupal site:
Optimize server infrastructure
- Make sure your server has enough memory. If you find that swap space is being utilized, then increase the memory. If that's not possible, use a faster and more memory efficient web server such as nginx instead of Apache.
- If you are using PHP 5.3 or below, use an opcode cache such as APC. PHP 5.4 and above comes with opcode cache so you don't need to worry about it.
- Drupal stores all its cached data in the database. In general, database access is slow. Use memcache or redis to use memory instead of database for storing Drupal's cached data.
Gzip all the data that is being returned by the web server. This includes HTML, CSS, JS, and images. Compressing the response ensures a lot less data is transferred from the server back to the browser, reducing page load time. Content can be compressed by Drupal itself or by a web server such as Apache or nginx.
Move JS and non-critical CSS to the footer
You may have heard that moving JS to the footer ensures the browser doesn't get blocked while loading JS. You should also do the same with non-critical CSS, such as CSS statements that don’t apply to the content that appears above the fold on a page. As a result, content above the fold gets rendered quickly and the rest of the CSS can load later.
Aggregate and minify CSS, JS, and images
In order to reduce overall page load time, you can make it so the browser will request a smaller number of files from the server. To do this, aggregate and minify:
- CSS files into a small number of CSS files
- JS files into a small number of JS files
- Images into sprites — typically background images and icons can easily be combined into sprites.
These steps will help decrease the number of server requests, reducing the overall page load time.
Use a CDN
This may also be familiar to readers of the Fastly blog, but for those of you who need a reminder, a content delivery network (CDN) offers:
- Faster load times for web and mobile users
- Quick scalability during heavy traffic
- Minimized risk of traffic spikes at point of origin, ensuring site stability
- Decrease in infrastructure costs due to traffic offloading (less load on origin)
- Better site performance
You may also like:
Beacon termination at the edge
Using a CDN for beacon termination at the edge has gotten a lot of attention, in part because edge termination for beacons is cool; but it’s mostly because beaconing applications are becoming more popular and…
Why having more POPs isn’t always better
We’re often asked why having more POPs doesn’t necessarily make a CDN faster. To help illustrate, we’ll use an analogy of convenience stores versus supermarkets.
The importance of performance monitoring
Your site’s performance needs to be monitored closely, but once you start your monitoring initiative, you might find yourself drowning in an endless wave of information. This can make it difficult for you to get…