Hi Guys

The page load time is the one of the main factors affecting its usability and there are chances that most internet users will just skip a web site altogether if it fails to load within a couple of a seconds. It is for this reason i have initiated this thread to discuss various issues related to web site performance and to share some valuable tips.

Here are some of the tips:

1. Reduce the HTTP Requests
2. Don’t rely on other sites
3. Save your images properly
4. Compression
5. Avoid JavaScript where possible
6. Strip extraneous PHP calls
7. Optimize Images
8. Image Formats
9. Optimize Your CSS
10. Use a Slash on Your Links
11. PHP/MySql Performance tuning
12. Server side Performance tuning

Thanks
R.Rajan

Designing without table also improves the site performance

By combining external files and embedding CSS and JavaScript within your HTML you can minimize the number of HTTP requests required to render your page. Each unique HTTP request requires a round trip to a server, introducing indeterminate delays.

So this:

<link rel="stylesheet" type="text/css" href="/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/css/nav.css" />
<script src="/js/functions.js" type="text/javascript"></script>
<script src="/js/validation.js" type="text/javascript"></script>

Becomes this:

<link rel="stylesheet" type="text/css" href="/css/combined.css" />
<script src="/js/combined.js" type="text/javascript"></script>

Images can create an extra load on the size of your pages, specially if you forget to optimize them. Photoshop and similar image editing software include a feature called “Save for the web”. Always use this feature since it will reduce the image size and load time substantially.

Optimize your css


Cascading Style Sheets make websites much more efficient because they allow the browsers to cache style-related information from the .css file directly, removing the need to read that information every time a single page is loaded. Even if Style Sheets are naturally more efficient than HTML tables you can still optimize the CSS code to make your website cleaner and faster.

First of all try to locate dispersed code and aggregate it together. For instance instead of:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

you should use:

margin: 10px 20px 10px 20px;

Instead of:

<p class="decorated">A paragraph of decorated text</p>
<p class="decorated">Second paragraph</p>
<p class="decorated">Third paragraph</p>
<p class="decorated">Forth paragraph</p>

you should use:

<div class="decorated">
<p>A paragraph of decorated text</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Forth paragraph</p>
</div>

Secondly you can also try a CSS optimizer tool like CleanCSS. Those tools are supposed to merge similar selectors, remove useless properties, remove whitespace and so on.

Hi,
The another factor we have to consider about site performance is Links used in the web pages.
Don't use external links in your website Because, Occassionally page name can changed on external site. Which causes links to be invalid and this is also detriment as far as Search Engines. Search engine checks for links, and if suppose
it is a bad url means, the search engine may penalize your web site. Of course links to internal pages on your site should be valid as well

__________________
Regards,
VELHARI
I am not totally useless. I can be used for a bad example

Hi folks,
The following will be used to increase the performance of the site.

we usually concat a string with the following:-
<?php
echo '<option>'.$variable.'</option>';
?>

But a better way is to use commas to output the string rather than the previous used. Because PHP only has to output it instead of using concatenation.

<?php
echo '<option>',$variable,'</option>';
?>

__________________

J.Vijayanand

Hi,

When you create your page, you should pay attention to two things.

1)Use valid code.
The more bugs your code consists of, the longer a browser needs to render it.

2)Use less objects.
A lot of people are using to many images, flash and javascript on their site. There have been great improvements in the connection speed of a lot of users and broadband connections exceeding 1 MBit are not as uncommon as just a few years ago, but the vast majority of all users are still dial-ups with a modem or ISDN connection. If you don't want to exclude 90% of the web community, you should keep your site small.

__________________

J.Vijayanand

Hi Vijayanand,

From your suggestion, we can directly use “echo” instead of concat the strings.
But we need to consider one thing; “echo” is an expensive I/O function it takes more time to compare with other PHP functions.

Consider this ex:
<?php
$vTemp = 10;
For($vLIndex = 0; $vLIndex < $vTemp; $vLIndex++) {
echo '<option>', $vLIndex,'</option>';
}
?>

From above code “echo” statement executed by 10 times within the loop it will automatically increase the execution time. Now consider bellow code.

<?php
$vTemp = 10;
$ArrOptions = array();
For($vLIndex = 0; $vLIndex < $vTemp; $vLIndex++) {
$ArrOptions[] = '<option>'.$vLIndex.'</option>';
}
?>
echo implode(‘’, $ArrOptions);

From above code not concat any string and do not uses “echo” within the loop. Instead of “echo” we use array functions. Basically array functions faster then string functions. And finally prints all array element by a single “echo” with help of implode function.

Thanks
- Kathir

Use a slash on your links

When a server opens a link in the form of “http://www.domain.com/about” it will need to figure what kind of file or webpage is contained on that address, wasting time on the process. If instead of using that link you include a slash (”/”) at the end like “http://www.domain.com/about/” the web server will already know that the link points to a directory, reducing the time to load the page.

Reduce your stylesheet’s size

Making your stylesheet(the style.css file found in your current theme’s folder) the smallest size possible will allow you to gain considerable loading speed since it’s loaded everytime.

The simplest way is remove the comments and coding things on the same line instead of several lines(left to right fashion instead of top to down one).


body {font: 62.5% Verdana, Arial, Sans-Serif; color: #444;background: text-align: center; margin: 0 0 30px;}

instead of


body {
font: 62.5% Verdana, Arial, Sans-Serif;
color: #444;
background: #EDEDED;
text-align: center;
margin: 0 0 30px;
}

Pass objects and arrays using references in functions. Return objects and arrays as references where possible also. If this is a short script, and code maintenance is not an issue, you can consider using global variables to hold the objects or arrays.

References do not provide any performance benefits for strings, integers and other basic data types. For example, consider the following code:

function TestRef(&$a)
{
$b = $a;
$c = $a;
}
$one = 1;
ProcessArrayRef($one);

And the same code without references:

function TestNoRef($a)
{
$b = $a;
$c = $a;
}
$one = 1;
ProcessArrayNoRef($one);



PHP does not actually create duplicate variables when "pass by value" is used, but uses high speed reference counting internally. So in TestRef(), $b and $c take longer to set because the references have to be tracked, while in TestNoRef(), $b and $c just point to the original value of $a, and the reference counter is incremented. So TestNoRef() will execute faster than TestRef().

In contrast, functions that accept array and object parameters have a performance advantage when references are used. This is because arrays and objects do not use reference counting, so multiple copies of an array or object are created if "pass by value" is used. So the following code:

function ObjRef(&$o)
{
$a =$o->name;
}

is faster than:

$function ObjRef($o)
{
$a = $o->name;
}

Thanks,
Ramkumar.B

For searching for substrings, the fastest code is using strpos(), followed by preg_match() and lastly ereg(). Similarly, str_replace() is faster than preg_replace(), which is faster than ereg_replace().

Thanks,
Ramkumar.B

For processing XML, parsing with regular expressions is significantly faster than using DOM or SAX.

Thanks,
Ramkumar.B

Gzip components
Using this Gzip components in the page is also a better way to increase the performance.
While delivering any data from web server to browser, you can apply gzip compression over it. These gzipped data are decompressed when received by brwsers and treated as regular data. Almost all of the modern browsers supports gzip compression. To compress your content, you can do it either automatically using Apache’s mod_deflate or manually via your code. If you like to do it using mod_deflate, then you have to enable mod_deflate first and then modify your .htaccess file to make use of that. The following line in httpd.conf enables mod_deflate with apache

LoadModule deflate_module modules/mod_deflate.so

Now if you want to make use of mod_deflate and compress your content on the fly while delivering, you can add the following line in your .htaccess file.

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-javascript

Or you can write PHP code for delivering gzipped contents. The following piece of code delivers any javascript file as a gzipped one.

<?php
//gzipjs.php
ob_start(”ob_gzhandler”);
header(”Content-type: text/javascript; charset: UTF-8″);
header(”Cache-Control: must-revalidate”);
$offset = 60 * 60 * 24 * 3;
$ExpStr = “Expires: ” .
gmdate(”D, d M Y H:i:s”,
time() + $offset) . ” GMT”;
header($ExpStr);
include(urldecode($_GET[’js’]));
?>

To deliver a javascript file (say prototype.js) using gzipjs.php you can load your scripts like this

<script type=”text/javascript” src=”gzipjs.php?js=prototype.js” ></script>

But, don’t just include any file passed to it (as i did it here in gzipjs.php). I wrote the code quickly to demonstrate the process. In practice you must sanitize the supplied argument before including. Otherwise it could be a very dangerous security breach.

__________________

J.Vijayanand

Minify JavaScript

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. The most popular tool for minifying JavaScript code code is JSMin, developed by Douglas Crockford, a fellow Yahoo!.

Thanks
-Kathir

Put CSS at the Top
While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages load faster. This is because putting stylesheets in the HEAD allows the page to render progressively.

Front-end engineers that care about performance want a page to load progressively; that is, we want the browser to display whatever content it has as soon as possible. This is especially important for pages with a lot of content and for users on slower Internet connections. The importance of giving users visual feedback, such as progress indicators, has been well researched.

In our case the HTML page is the progress indicator! When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.

__________________

J.Vijayanand

Remove Duplicate Scripts

It hurts performance to include the same JavaScript file twice in one page. This isn’t as unusual as you might think. A review of the ten top U.S. web sites shows that two of them contain a duplicated script. Two main factors increase the odds of a script being duplicated in a single web page: team size and number of scripts. When it does happen, duplicate scripts hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution.

Unnecessary HTTP requests happen in Internet Explorer, but not in Firefox. In Internet Explorer, if an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page.

In addition to generating wasteful HTTP requests, time is wasted evaluating the script multiple times. This redundant JavaScript execution happens in both Firefox and Internet Explorer, regardless of whether the script is cacheable.

One way to avoid accidentally including the same script twice is to implement a script management module in your templating system. The typical way to include a script is to use the SCRIPT tag in your HTML page.

<script type="text/javascript" src="menu_1.0.17.js"></script>

An alternative in PHP would be to create a function called insertScript.

<?php insertScript("menu.js") ?>

In addition to preventing the same script from being inserted multiple times, this function could handle other issues with scripts

Thanks
-Kathir

The Zend Engine is the internal compiler and runtime engine used by PHP4. Developed by Zeev Suraski and Andi Gutmans, the Zend Engine is an abbreviation of their names. In the early days of PHP4, it worked in the following fashion:



The PHP script was loaded by the Zend Engine and compiled into Zend opcode. Opcodes, short for operation codes, are low level binary instructions. Then the opcode was executed and the HTML generated sent to the client. The opcode was flushed from memory after execution.

Today, there are a multitude of products and techniques to help you speed up this process. In the following diagram, we show the how modern PHP scripts work; all the shaded boxes are optional.



PHP Scripts are loaded into memory and compiled into Zend opcodes. These opcodes can now be optimized using an optional peephole optimizer called Zend Optimizer. Depending on the script, it can increase the speed of your PHP code by 0-50%.

Formerly after execution, the opcodes were discarded. Now the opcodes can be optionally cached in memory using several alternative open source products and the Zend Accelerator (formerly Zend Cache), which is a commercial closed source product. The only opcode cache that is compatible with the Zend Optimizer is the Zend Accelerator. An opcode cache speeds execution by removing the script loading and compilation steps. Execution times can improve between 10-200% using an opcode cache.

Thanks,
Ramkumar.B

hi pals,

1) We should use the single quotes instead of double quotes to increase the performance of the page..
Where the performance will be increased by twice when using single quotes rather than double quotes...

2) And we should use the assignment operator to display the php values instead of echo the values.

for eg,
a. <?=$display_value?>
b. <? echo $display_value; ?>
hence using the a will be quite valuable when compared the b.

the performance of the page will be the follwing :
(<?=)... : 0.2423449754715
(<?echo): 0.25177192687988

__________________

J.Vijayanand