Site loading time is critical, especially when your website is running on a network that has slow or fluctuating speeds. If a user request times out or takes too long to load content, the user may lose interest and switch to another site. Having had one bad experience on your website, it is highly unlikely that the user will visit again. Slow loading sites invariably result in loss of business traffic. This is why giving a pleasant experience to your website visitor is critical.
According to surveys done by Akamai and other content hosts, most web users expect a site to load in 2 seconds or less, and they tend to abandon a site that isn’t loaded within 3 seconds. 79% of web shoppers who have dealt with a poorly performing web site, say that they would not return to the site; and of those, 44% would tell a friend that they had a poor experience shopping there.
Page loading time is determined by the size of the page which in turn depends on:
- The size of the text content.
- The user’s internet connection(bandwidth and latency).
Since you don’t have any control on the user’s network conditions, all optimizations will have to be performed at the server and the Drupal application level. There are no magical, out-of-the box methodologies or technologies that can be applied to improve Drupal site performance when network speeds are erratic. You have to carefully examine user expectations and optimize the performance of your website to meet those expectations.
What are some of the key website experience expectations of site users?
- The website should perform well even at the slowest network speed.
- Web pages should load in 3 seconds or less.
- If the user is working on a form and loses network connectivity, the information already filled out should not be lost. Rather, the user should be able to continue from where he/she left off upon returning to the site.
- If for some valid reason a page has to take longer than 3 seconds to load, the user should be notified and provided with an explanation.
How can user expectations be met?
By following some web design best practices and by using recommended Drupal performance optimization techniques, you can provide the user with a first-rate website experience. Drupal’s built-in caching is the easiest way to improve performance on your site but is not sufficient by itself. For large amounts of content under heavy traffic, the Drupal application doesn’t scale well. To optimize performance under these conditions, you need to apply multiple caching strategies as well as server level optimization.
The following is a list of optimizations at the Drupal application and the server levels:
Application Level Optimization
- Save Form State/ Save form Data as Draft
- Auto save data entered in a Drupal form without actually submitting the form. It will be used to restore the form data if internet connectiity is lost while the user is filling out the form.
- You can also save form data as ‘draft’, which can be used to restore form data at a later point.
- Utillize contributed modules such as “Save Form State” and “AutoSave” to save the form data.
- Cut down on multiple HTTP requests
- Smaller Page Sizes
- Keep page size to a minimum to avoid slow loading web pages.
- Avoid heavy resource consuming themes. Try to keep the theme as light as possible; themes increase overhead on page load time.
- Show notifications for slow loading pages
- If a page load time is unacceptable, notify the user about the cause of the delay.
- Provide an alternative link such as a lighter version of the page.
- Show File sizes for links/downloadable items
- Show files size for all downloadable items, so that user is aware of the resources it will consume.
- Pages should not Auto refresh
- Avoid auto refreshing of pages to save the bandwidth.
- Page should have limited content
- Use pagination to avoid displaying a long listing of content.
- If you want to load a long listing of content on a single page, use ‘lazy’ loading to cut down the page load time.
- Aggregate and compress CSS files
- Use the compression utilities available with Drupal7 core.
- Aggregate JS files/ use minified JS files
- Use the aggregate JS functionality that is available in Drupal7 core.
- Turn Views Caching on
- Views caching can be enabled from the Views ‘settings’ page.
- Enable Block level caching
- This feature is also provided with Drupal7 core.
- Disables modules that you are not using
- Un-install modules like ‘Color’ which are very resource intensive and are not commonly used.
- Move Images, Videos, Static files to CDN (Content Delivery Network)
- You can use contributed modules that are available for CDN
- Implement caching in your custom modules as needed
- Try to cache output of custom modules, especially when they involve complex business computation.
- Keep the Drupal core and contributed modules updated
- Keeping the core and contributed modules updated helps in availing benefits of the latest performance improvements implemented by the Drupal community.
- Enable caching for authenticated users
- Enable caching of data for authenticated users using the ‘memcache’ module.
- Cache panel content
- Cache panel content with ‘panels content cache’ or ‘panels hash cache’
- Load Images only when needed with lazy loading
- Use performance related Drupal modules like
- Performance and scalability checklist.
- Performance logging and monitoring.
- XHProf PHP profiler.
- Rewrite queries for slow performing views queries
- Use Image sprites to reduce loading of multiple images
- Reduce 404 & 403 error
- Reduce Image Size
- Use Image styles to reduce image size on page loading.
- Use style sheets to replace images that have no purpose other than for layout.
- In general, due to the compression techniques used, the JPEG format is better suited to photographs and GIF; while PNG formats are better for bitmap graphics such as logos and images that contain areas of discrete colours.
- Turn Page caching(Drupal default) on
- It is available by default with Drupal core.
Server Level Optimization
- Enable Browser Caching
- Enable caching by keeping a copy of data that thas already been received, to avoid the need to request it again.
- Use static content where possible.
- Turn On page Compression
- Enable gzip compression, it helps in loading the HTML elements 50% faster.
- Enable APC(Alternative PHP Cache)
- Enable PHP-FPM (FastCGI Implementation) instead of mod_php.
- Use syslog
- Send log to your hosting OS instead of writing to the database.
- Enable reverse proxy such as Varnish/Redis to cache your static content
- Contributed modules are available which facilitate integration of Drupal with Varnish & Redis.
You need optimization at both the Drupal application level as well as the server level to tune the performance of your website. If done right, this will provide the user with smoother functionality even over an unreliable, low bandwidth network.