How to make web page load smoothly ?

[runrunforest]

Hi,

I see gmail and facebook are loading incredibly fast and smooth, I rarely,actually not, see image rendering and broken assembling layout. How could i do that ?

[emborrollats]

I think that google and facebook and all the great sites use diferent threads in you page load. You're receiving data from a server and images from another one.

Then you load images from images.yoursite.com and code from www.yoursite.com

This is a way to boost page loading.

Apart they have loads and loads of servers.

I hope it helps a little.


<snip />

[Stormrider]

Always set a height and width on your img tags, this will enable the browser to give it the right amount of space while the image itself is loading, so the layout isn't jumping around everywhere on load.

[runrunforest]

Always set a height and width on your img tags, this will enable the browser to give it the right amount of space while the image itself is loading, so the layout isn't jumping around everywhere on load.

My site isn't breaking at all, but I can see the image latency, its loaded at last, which creating flashing effect, which not nice. And i see 98&#37; internet web pages have the same symptom except some pages i mentioned

microsoft.com is a big site, they must have good infrastructure and application, their site, though, still loading like baby comparing to gmail.com and facebook.com

After many effort to compare loading quality among big sites, I see, fast loading sites have a visual trick. That is nothing shown up until everything is loaded. Thats probably why gmail takes quite a time just showing white page with a loading bar before showing you the gmail homepage.

In gmail's other pages, when u click in on a link or something, if your internet connection is lagging, gmail will not load piece by piece or image by image they give you a white page moment, then show all at a time.

The same matter apply for facebook. I think. So after all it could be a visual trick that designer wanted to create to make page look fast. Though can't deny server speed.

[Jake Arkinstall]

microsoft.com is a big site, they must have good infrastructure and application

Actually the output code is horrific, and there's alot of needless stuff downloaded along with the page.

Runrunforrest, these are some tips:

• Don't put PNG or PSD graphics on your site. They are larger in size than JPEGs and the transparency which is available in PNG but not PSD isn't compatible with IE6.
  Keep images a few kilobytes maximum.
• Use CSS as much as possible. Table-based layouts (unlike <DIV> elements) don't load until all the data is within the cells, and alot of people use images where CSS would do.
  If an element has an image background, also use a background-color and height/widths for images.
• For images which change on roll-over, preload the images
• Break large images into smaller images to increase download speed.
• Keep CSS and JS files as small as possible
• If the output file has alot of newlines and tabs, remove them. Output source code is nice to keep ordered but not at the expense of speed.

[Stormrider]

There are fixes for PNGs in IE6 available, PNGs are very useful on the web for certain types of transparency.

[Jake Arkinstall]

There are fixes for PNGs in IE6 available

And none of them work consistently.

If you have a site for an average IT-dumb company, alpha transparency should just be avoided.

[Stormrider]

I've got some of them to work pretty well.

Hopefully it won't be a concern before too long anyway

[samanime]

There are several techniques that you can use to deal with broken transparency in IE6. Plus, it's about time we stopped worrying about IE6 as much.

Also, even if you don't use transparency, some types of images are smaller as PNG then JPG or GIF (especially if you use PNG-8 or PNG-24). It's better to check each image in a variety of formats and see which one creates the smallest file size with the least amount of loss.

And, what emborrollats said will help reduce the flashing that you are talking about. Put images on a separate server from your other stuff. Basically, browsers will only download so much data from any one server at any one time. However, if your images are on a different server, it can download from both servers at the same time, meaning that your images don't have to wait until the end.

Take a look at the image sources and you'll see that is the case on Facebook and Gmail.

[runrunforest]

Thanks for the tips, guys.

[sk89q]

First off, indexed color PNGs are smaller than JPGs in about every case where the image does not have many colors. Logos, icons, etc. Use JPEG when the image has many colors, and use (indexed color) PNG when it doesn't. The people saying that all PNGs are bad don't know anything on the matter. Also, you can't use PSD on the web, so I'm not sure why arkinstall even mentioned it.

Secondly, if you want to use a full spectrum of transparency, the various alpha transparency fixes for PNG for IE 6 do work consistently. They're designed for one and only one browser. (I personally like the fix that uses Internet Explorer's HTML Components.) However, these images tend to be large, so it may be better to avoid them outright.

For icons, combine smaller images into one large image and use CSS's background-position property to align the image correctly. There's less overhead to load one image rather than to load 20 images.

There are more things you can do, but Yahoo!'s YSlow suggests all of this, so there's no point for me to blab on. Check it out here:
http://developer.yahoo.com/yslow/

By the way, Facebook's site is one of the worst sites I've ever encountered. It loads two dozen different external (JS and CSS) files. Visiting Facebook for the first time (before the files are cached) is a horrible experience, especially if you're stuck on a slow connection. It's not really a good site to set your bar at. It doesn't even degrade at all when JavaScript is off.

P.S. The problem with tables not loading entirely right away only really affects IE, and there's a way to fix that. There was/is a MSDN article I read many years ago about it. I think you can find it in one of my posts here at SitePoint.