Drupal is a High performance Content Management System, But there is a different reasons that may decrease the performance of your web applications, And there is a different steps that should be taken into account when developing your great application with Drupal .

A low speed web application may be due to different reasons :

• The size of the loaded content.
• Hard/Long Queries.
• The complexity of the processing Algorithm.
• ...etc

In this Tutorial i will talk about "The size of the loaded content" because it is the most important factor that we should consider when increasing our web applications performance .

The size of the loaded content is the size of the data (text, images, scripts..etc) that your visitors download when they visit your web site.
What if the size of your site is about "3 MB" , that's mean that your site visitor may take about "61 second" to load your web site content with the average internet speed connection (too long time !!) .

Anyway the size of your web site should be less then "800 KB", you can measure the size of your web site by saving your page content in your hard storage (ctrl+s)

Improve Drupal 7 performance

• Always Set the Image Width and Height to the Real Image Size:

You should use thumbnail and resized images instead if resizing the images from width and height attributes, It's tempting, when putting up images, to use the Web browser to resize your graphics. By this I mean, you've taken a picture with your digital camera. It's 1024x768 in dimension. You want to post it to your Web site, but you don't have time to resize it with Photoshop. So you upload it to your site, and post it to your Web page. Then in the image tag you write

 
<img src="" width="100" height="100" alt="my dog" /> 

While this will work (the browser will change the size of the image), there are several problems with it:

Your larger image is generally too big to download quickly - 20Kb is a good upper limit for any one image
Web browsers are not graphics editors, so when they resize the images, they don't make any effort to make the resize look nice
Bad Behavior :

  <img src='big_image.png' width='150' />

Correct Behavior :

  <?php $thumbnail_image_link = image_style_url('thumbnail', $big_image_uri) ;  ?>
  <img src='<?php echo  $thumbnail_image_link ; ?>'  />

• Aggregate CSS and JS files:

Drupal support Aggregations and compression Features which can be enabled from
"Configuration => performance"
or from the following URL
http://www.yourwebsite.com/#overlay=admin/config/development/performance

• Enable Block & Page Caching:

Drupal support "Caching" for Blocks and pages which can be enabled from
"Configuration => performance"
or from the following URL
http://www.yourwebsite.com/#overlay=admin/config/development/performance

• Use the appropriate Image format :

There are three image formats widely used in web pages: GIF, JPEG, and PNG. You need to choose the right format for your website images so that they will look good and still be a reasonable size.

Remember that web pages need to be about 70k or less (images and all) so that your pages download fast – this keeps your site visitors from falling asleep.

Points to remember:

JPEG

• Use JPEG to save photographs.
• JPEG cannot have transparent backgrounds.
• JPEG is not good at preserving exact colors – don’t use them for logos or text.

GIF

• Use GIF to save images that have sharp lines (like text) and solid colors Examples:
  • A solid red square
  • A typical corporate logo
• Use GIF to save images that need to have a transparent background.
• GIF was invented for creating screen graphics – don’t use GIF for images that you want to print on paper because they will look crappy.

PNG

• Use PNG if you want to have images with blended (fades smoothly), transparent backgrounds.
• Use PNG if you need to create print ready high-resolution graphics.