Size of web pages and inserted files (assets).

Hi, Roddy.

The problems I have found with this approach are (1) it takes too long, (2) we can't see the result until you publish the site, which can take a while if you do it often and the site has numerous pages, and (3) for every page there is an html page file and a folder containing all the related assets (images). It is not possible to get the overall size for the image unless you get the size of both and then add, right ?

I was hoping for something simpler, hopefully a solution within iWeb itself so that I could have access to this information while designing the pages. Is there a way you know that would allow me to see this while in iWeb ?

Also, do you know if there is a way to see in Safari the overall size of a web page that is displayed ? Let's say, for instance, that I go to Apple's or any other website. After the page downloads and is displayed on the browser's screen is there a way to see in Safari what the overall download size for that page is ?

In regards to the optimization I was planning on doing it but thank you for bringing it up. I will definitely do it once the site is finished.

Thank you for your help and reply.

Roddy,

Roddy wrote:

Images should be optimized before adding to iWeb. Optimize the file height and width to the actual size that it will appear on the page. Get info on the file to see its actual size in KB.

I was under the impression that iWeb did optimize the images but I noticed shortly after I started using the application that it didn't (at least not to the same level that could be accomplished by doing it with an external editor such as Photoshop).

Now, I resize the image and compress the files before I insert them in my iWeb page.

Thanks for your help.

Hi, Old Toad.

Old Toad wrote:

Use an FTP client like Transmit that displays your server account in a Finder like window and you can see file sizes on the server:

OT

This is a very good approach. Thanks for the tip (I do actually use Transmit as my FTP client of choice).

Roddy,

Thanks for the detailed and really helpful post. I am not sure where to begin ...

Roddy wrote:

Now that Safari has been "zombiefied" in version 6 its now makes even more sense to test your website in Firefox and Chrome since only 4.1% of surfers use the Apple browser.

I don't intend to get sidetracked but what exactly do you mean by "zombified" ?

Firefox has the best tools - found in Tools/Web Developer.

To get any page size do a Command I...

Click the "Media" button to image file sizes along with their original and actual dimensions...

This is really a great suggestion. I will use Firefox to check page sizes from now on.

If the scaled size is much less than the original you need to optimize and reload the image.

Optimization is not just a question of file size. All wasted space and returns should be removed and scripts need to be loaded in the most efficient order.

Title and meta data first, then the main stylesheet followed by "feature only on one page" stylesheets and then any javascript placed in a priority order.

The URLs to the main javascript(s) should be in the head. Scripts for individual items should be placed in the body as near to the bottom as possible.

Avoid inline styles and always use the minified version of scripts when available.

Use relative URLs rather than absolute.

Avoid using javascript for any function which can be created using CSS and try to avoid using javascript for any essentials such as the navigation.

And so on...

I always assumed that iWeb took care of all this. As I published my entire site or individual pages I was under the impression that iWeb was working in the background to ensure the html code was being written properly in what is considered the most ideal way. Is this not the case ?

The theme I am currently using is darkroom and it has a javascript included for navigation. Are you saying that this is not a good choice in terms of optimization ?

I have found apps to complement iWeb that work on SEO. Are there similar apps that can be used to analyze and optimize performance of a web page ?

Thanks again for your help and really helpful suggestions.

Hi, Old Toad.

This is a valid option but it would not be the most efficient in my case.

My sites (particularly the main one I am finishing now) are rather large and contain a fair amount of information, links and images. Publishing the site for the purpose of checking its page sizes and optimizing it would not be the best choice, at least for my specific case.

Aside from iWeb the only other application I've found that is design-based and aimed at those without programming experience is Adobe's Muse. Unfortunately this applicaiton is only offered as a subscription and cannot be purchased. Are you aware of any other that would work similarly ? It would be great to have a web design application with the simplicity of iWeb, design-oriented like Muse (feels the same as using the older PageMaker or the newer InDesign) and with the tools of Dreamweaver.

Thanks again for your help.