Feb
I will not go into very much general information, all the recent studies have shown that customer's behavior is directly related to your website's performance. You might run an E-commerce website, have a presentation website or a customer portal. In any of the previous situations, your customer is always going to trust your brand based on their online experience.
The user experience
A visitor experience has multiple components. It includes at least the follwing:
- Visual experience
- Load time
- Ease of use
- Quality of information
- server request time
- download time
- page load time (also known as DOM loading time)
- loading external resources
All four are very important and have their own role in defining the user experience through their contribution to the speed of the website.
Server request time
This can be adjusted based on the complexity of your website and the number of visitors you expect to have online at once.
Server request time can be divided into: Low, Medium and High traffic.
Low traffic
You can use Drupal's basic caching, in the databse.
URL: /admin/config/development/performance
Make sure that you disable Devel module and disable Error logging.
URL: /admin/config/development/logging
Medium
When your traffic goes up you can't rely on this techniques. It might even harm your performance, since most of the caching is done in the databse and your server might hang because of excesive use of Memory and CPU by MySQL.
You should start looking at Memcache, a memory key-value caching system. It's going to remove the stress on your MySQL database and speed up the process of cache retrival (memory is the fastest storage method). Depending on your preference or other architectural concerns you can also use Redis system. Both are reliable and have very good performance.
Memcache: https://www.drupal.org/project/memcache
Redis: https://www.drupal.org/project/redis
If you are looking for a very good solution to speed up page delivery, mainly for sites having static information, you should take a look at Boost.
URL: https://www.drupal.org/project/boost
High
If you're dealing with millions per day in trafic, you are definitely looking at the right post. I can recommend a few modules that allow you to boost and keep up with high traffic.
First, you probably are already considering splitting your services across multiple servers from now on. You can have a standard setup with: Varnish (cache server), Application server (Drupal) and Database server (MySQL).
Varnish
Is a highly recognized web cache server, also popular among Drupal sites. Drupal has very good support for Varnish and has modules that communicate with the Cache backend to invalidate pages or define proper expiration timings.
Varnish will be installed on port 80 or 443 (if you use SSL). Your application server can run on the same server under another port (tipically 8080) or it can run in your datacenter on another server. You can call it from Varnish with it's internal IP.
URL: https://www.drupal.org/project/varnish
More about Varnish: https://www.varnish-cache.org/
No revisions
If your website does not have content moderation (eg. you don't have a news website or a big team of editors) you probably don't need to keep track of multiple versions of the same entity / document. In this case you don't need to use Drupal's built-in revision system. If you skip this functionality you cut MySQL queries in half and database size and tables to nearly 60% of the original.
There are two options, you can patch your Drupal distribution, or you can use the following module.
https://www.drupal.org/project/field_sql_norevisions
Pressflow
This is a Drupal distribution specially designed for performance boosts. If you expect high traffic it is a good ideea to start your project on this distribution.
URL: http://pressflow.org/
Download time
Even if the server is powerful and delivers the content at high speed there is still work to be done. You have to make sure that the content is small (does not take long to download) and is grouped as much as possible.
Here is an example, if you wish to download 10 Mb split into 10 files of 1 Mb it will take longer to download than one file of 10 Mb. On the other hand if you have to wait for 10 Mb to download in order to have anything displayed on the page, this is not good for UX. Making these decisions is not easy, but in real life you want a page to weigh no more than 1 Mb.
Aggregate CSS and JS files
Make sure that:
a. Aggregating the content does not break your site
b. It loads correctly on all browsers (see IE Limits per Stylesheet). There is a Drupal solution for this as well, it is called Advanced Aggregation
Use image sprites
This helps by loading multiple graphics at once and uses CSS positioning to select the proper image. Read more about the topic here: http://www.w3schools.com/css/css_image_sprites.asp
Also take into consideration that generally JPEG is smaller than PNG, so prefer JPEG images firstly because of their size in bytes.
Use SVG graphics
Instead of using binary graphic format you should use SVG (scalable vector graphic). By using this technique you gain multiple advantages:a. Smaller size, vector information represents the text format that defines it;
b. It's scalable, this means you can easily scale your graphics when drawing a responsive layout;
There is also a downside to using SVG assets, these are not supported by all browsers and versions. They're a bit more complicated to manipulate / generate, but the right solution is to use Graphic fonts: http://css-tricks.com/examples/IconFont/
Page load time
You can improve user experience for navigating on your website by adjusting the HTML structure. You should work on the following:
a. Make fewer DNS lookups, load the content to as few different domains as possible;b. Aggregate content, load less files;
c. Optimise the order of your content, put the important parts at the top and move the less important at the bottom (eg. move unnecesarry Javascript files at the end of your document);
d. Use valid markup, valid markup allows the rendering engine to make less guesses;
e. Use as few tags as possible. You can consider starting with a light theme, like https://www.drupal.org/project/mothership
Loading assets
Make sure your webserver / cache server specifies the correct expiration and cache timing. It should also support gzip compression for non-binary assets.
Using a CDN service allows your server to serve only the dynamic content. Also the browser can download the assets asynchronously from the CDN service.