Fast Loading web pages

Question

We are planning to develop a new website. Our goal is to load web pages quickly. What are all the techniques we need to follow.

Can anyone give me good suggestions, forums links or articles.

Our platform is PHP, MySQL, Javascript, and AJAX.

Answer 1

One of the best guides for speeding up your website's load times:

http://developer.yahoo.com/performance/rules.html

---

Update: Google now has an excellent guide as well

http://code.google.com/speed/page-speed/docs/rules_intro.html

Along with an even better addon for Firefox. In my testing so far, Google's Page Speed addon is far and above much better than YSlow. It gives much more detailed analysis and smarter advice (rather than recommending a CDN for small websites like YSlow)

Answer 2

• Use CSS sprites to keep your HTTP request count down.
• Make sure all your images are a decent size.
• Make sure you have a really good host with good upstream and downstream.
• Make sure your server can execute your scripts in good time, you can check this using the microtime function.
• Make sure your code is optimized properly.

Answer 3

Caching caching caching.

memcached

APC

Pick one, use it. Not having to fetch everything from the database speeds things up hugely.

Answer 4

One useful tool is YSlow which is a tool from Yahoo that helps identify web page performance problems. Also, Yahoo's Best Practices for Speeding Up Your Web Site is a good list.

However, see Jeff's blog entry Yahoo's problems are not your problems for some perspective on this issue.

Answer 5

Write as little code as necessary, but not too little.

Less code, less to compile, less to send, less to receive, less to process, less to display.

Answer 6

Use a profiler for PHP to make sure your code is executing at a decent speed. Refactor (where possible) if performance could be improved.

Answer 7

Some random points.

Render progressively rather than building it in memory and sending at at the end gives a distinct impression of speed.

There are some advanced caching tricks you can do, like a forward cache (this is what Akamai do on a grand scale) and separating static and dynamic content.

With PHP particularly, be careful about copying huge amounts of data around. PHP 4 was notorious for this due to it's "copy by default", but it's still a bit too easy to have huge amounts of data to hand in PHP 5. In other words: don't copy (or create!) strings, arrays and objects unecessarily; work with them in place and pass references instead.

Answer 8

in addition to what has been said:

• obfuscate and compress your css
• obfuscate and compress your javascript
• less files == less http requests == faster site == put all your css in one file, put all your javascript in one file

Answer 9

Compress all your files, inlcuding css and js files also compress your php files. Do as little database calls as possible and as stated earlier cache all the returns.

Answer 10

1) mod_gzip / mod_deflate! This is such an easy fix I'm surprised it isn't turned on by default.

2) Play tricks with your URL's so you can tell browsers to cache your JS and CSS files forever. In other words, construct the URL's to look like:

http://www.yourdomain.com/js/mad_scriptz-v123.js

Then use mod_rewrite and strip out the "-v123":

<IfModule mod_rewrite.c>
    # http://www.thinkvitamin.com/features/webapps/serving-javascript-fast
    RewriteEngine on

    RewriteRule ^/(.*)\-v[0-9.]+\.(css|js|gif|png|jpg|xap)$ /$1.$2 [L]

</IfModule>

Now apache will go looking for "/js/mad_scriptz.js"... Every time you change your static content, just bump up the version number to force browsers to reload the content. I usually have a template variable that contains a global version number that everything gets tied to. Not the most efficient, but works for my purposes. If you can tie the version number to your build system or a hash of the file, that would be extra sweet.

Get mod_expires up so all your static stuff expires years from now:

<IfModule mod_expires.c>
    ExpiresActive On
    # all in seconds...  
    ExpiresByType image/x-icon A2592000
    ExpiresByType image/gif A2592000
    ExpiresByType image/jpeg A2592000
    ExpiresByType image/png A2592000
    ExpiresByType application/javascript A2592000
    ExpiresByType application/x-javascript A2592000
    ExpiresByType application/x-shockwave-flash A2592000
    ExpiresByType application/pdf A2592000
    ExpiresByType text/css A2592000
    ExpiresByType application/rdf+xml A1800
</IfModule>

Update: It has been noted that not all browsers or search engines like gzip'd content. Don't blindly turn it on like I suggest above. Make sure you don't feed antique browsers gzip even if they accept it (some of them will get pissy with compressed javascript). The documentation for mod_gzip and mod_deflate both have examples that should work fine (I assume they do, or people would email them with changes :-).

I should also mention that it has been my experience that if you've got a reverse proxy in between your mod_gzip'd Apache servers and the world, you need to watch out. Squid 2.6 will often fool Apache into not gziping stuff when it should and worse, it will cache the uncompressed versions and feed them to browsers that can handle gzip'd content. Dunno if 3.0 fixes this and I dont know if it is something wrong in my config (doubt it). Just watch out :-)

That said. Turn it on. Seriously :-)

Answer 11

Yahoo: "Put Stylesheets at the Top", "Put Scripts at the Bottom".

This sped my recent site up more than any other optimisations.

Answer 12

Here is one tip I always find useful: If you have a lot of tiny images, put them all in one tiled image. In your CSS declarations, control the viewport of the html element by manipulating the x and y coordinates of the background:

.icon {
    background-image:url(static/images/icons.png);
    height:36px;
    width:36px;
}
.food {
    background-position:-52px -8px;
}
.icon_default {
    background-position:-184px -96px;
}

The tiling can be done in Python script, or by hand if you have a manageable set.

Gmail does this as well. See: http://mail.google.com/mail/images/2/5/greensky/icons7.png

Answer 13

A project which helps with a few of the points in Yahoo!'s guidelines (http://developer.yahoo.com/performance/rules.html) is Minify which employs minification, package bundling and conditional HTTP serving in the same space, used with good design practices can significantly reduce page loads, especially user experience (which differs from actually page loading times).