Make iWeb pages load Faster - DIY tips

Question

Like many other "i" apps from Apple iWeb is an "abstraction layer" builder which is what allows it to be a mostly WYSIWYG site creator. But the downside is that because you can't edit code (and personally I don't want to be an HTML code monkey) that means iWeb has to use some hidden, under-the-hood tricks to create some of the "pretty" graphic elements we all like to see, such as shadows, borders, reflections, etc.
After building a couple sites that weren't very complex I noticed photos and other graphics were taking far too long to load compared to other, similar sites and wondered what was causing the slow page-loading times. By using tools like RAGE iWeb SEO Tool and, the built-in page inspector in Safari I was able to see exactly what was going on under the surface: iWeb has to use JavaScript code to create and build things like borders on objects or photos, reflections, shadows and even non-web-safe colors.
For example, a simple colored border around a box gets converted into several segments of lines that are individual PNG's! That means instead of a single boxed-element the browser has to instead load all these separate PNG files and literally "builds" the border around the shape - or photo image. That takes a lot of extra time to process - and some browsers can't even read the code properly and don't build them at all during display.
So here's how you can build a better graphics-heavy page in iWeb and reduce this JavaScript processing time:
1. Try to reduce the use of borders around graphic elements as much as possible.
2. When you want a reflection, shadow, border or even perspective change on a photo or image file, use this application to create those effects instead: http://www.acqualia.com/picturesque/. This can build all those elements INTO the image file and can output it as an optimized PNG. Otherwise, every effect has to be built in Javascript separately by the browser - and also explains why some browsers like FireFox are unable to even display shadows created by iWeb.
3. Although iWeb '09 will do it's best to scale-down large photo files it's best to do that work in a photo editing program first. Image files - unless they are going to be really huge - should be 150k in size, or smaller.
4. When possible use web-safe colors for page color, backgrounds, shape-objects etc. only. This is especially important for Windows browsers which can easily get confused with iWeb created code.
If you've noticed slow loading times on your iWeb sites these tips should help speed things up quite a bit - especially when it comes to images with effects.
Cheers.

Answer 1

Like many other "i" apps from Apple iWeb is an "abstraction layer" builder which is what allows it to be a mostly WYSIWYG site creator. But the downside is that because you can't edit code (and personally I don't want to be an HTML code monkey) that means iWeb has to use some hidden, under-the-hood tricks to create some of the "pretty" graphic elements we all like to see, such as shadows, borders, reflections, etc.
After building a couple sites that weren't very complex I noticed photos and other graphics were taking far too long to load compared to other, similar sites and wondered what was causing the slow page-loading times. By using tools like RAGE iWeb SEO Tool and, the built-in page inspector in Safari I was able to see exactly what was going on under the surface: iWeb has to use JavaScript code to create and build things like borders on objects or photos, reflections, shadows and even non-web-safe colors.
For example, a simple colored border around a box gets converted into several segments of lines that are individual PNG's! That means instead of a single boxed-element the browser has to instead load all these separate PNG files and literally "builds" the border around the shape - or photo image. That takes a lot of extra time to process - and some browsers can't even read the code properly and don't build them at all during display.
So here's how you can build a better graphics-heavy page in iWeb and reduce this JavaScript processing time:
1. Try to reduce the use of borders around graphic elements as much as possible.
2. When you want a reflection, shadow, border or even perspective change on a photo or image file, use this application to create those effects instead: http://www.acqualia.com/picturesque/. This can build all those elements INTO the image file and can output it as an optimized PNG. Otherwise, every effect has to be built in Javascript separately by the browser - and also explains why some browsers like FireFox are unable to even display shadows created by iWeb.
3. Although iWeb '09 will do it's best to scale-down large photo files it's best to do that work in a photo editing program first. Image files - unless they are going to be really huge - should be 150k in size, or smaller.
4. When possible use web-safe colors for page color, backgrounds, shape-objects etc. only. This is especially important for Windows browsers which can easily get confused with iWeb created code.
If you've noticed slow loading times on your iWeb sites these tips should help speed things up quite a bit - especially when it comes to images with effects.
Cheers.