14 Replies Latest reply: Aug 7, 2012 2:54 PM by Roger Wilmut1
apple_customer Level 1 Level 1 (45 points)

Hi, everyone.

 

As I am optimizing some web pages on my site I would like to see the overall size of each page and individual images displayed on iWeb.

 

Is there a way to see what the overall size of each page in iWeb will be once finished as well as the size of the presently selected image ? By size I mean uts file size in Kilobytes. I noticed the inspector shows the name of the file once an image is selected but I haven't yet found a way to tell its size or the overall size of the finished page.

 

Any ideas as to how I can see this information ?

 

Thank you in advance.

  • 1. Re: Size of web pages and inserted files (assets).
    Roddy Level 6 Level 6 (17,265 points)

    Publish your site to a local folder...

     

    http://www.iwebformusicians.com/iWeb/Publish-Website.html

     

    Highlight any HTML file and "Get Info" to see the size. Open the folders to get the images.

     

    Also consider using an optimizer...

     

    http://www.iwebformusicians.com/Search-Engine-Optimization/Optimize.html

  • 2. Re: Size of web pages and inserted files (assets).
    apple_customer Level 1 Level 1 (45 points)

    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.

  • 3. Re: Size of web pages and inserted files (assets).
    Wyodor Level 6 Level 6 (19,375 points)

    See you in two months with the same question.

     

    https://discussions.apple.com/thread/4003252

  • 4. Re: Size of web pages and inserted files (assets).
    Roddy Level 6 Level 6 (17,265 points)

    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.

  • 5. Re: Size of web pages and inserted files (assets).
    Old Toad Level 10 Level 10 (115,645 points)

    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:

    Transmit001.jpg

     

    OT

  • 6. Re: Size of web pages and inserted files (assets).
    Roddy Level 6 Level 6 (17,265 points)

    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.

     

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

     

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

     

    1.jpg

     

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

     

    2.jpg

     

    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...

  • 7. Re: Size of web pages and inserted files (assets).
    Cyclosaurus Level 6 Level 6 (12,915 points)

    Is there a way to see what the overall size of each page in iWeb

     

    no, not in iweb.

  • 8. Re: Size of web pages and inserted files (assets).
    Old Toad Level 10 Level 10 (115,645 points)

    I publish one of my sites which have 20 pages to a folder and it takes less than 30 seconds.  If you then publish new or modified pages to the same folder via the File ➙ Publish Site Changes menu option it only takes a few seconds.

     

    Then you can check the file size of a page or folder in the Finder.

  • 9. Re: Size of web pages and inserted files (assets).
    apple_customer Level 1 Level 1 (45 points)

    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.

  • 10. Re: Size of web pages and inserted files (assets).
    apple_customer Level 1 Level 1 (45 points)

    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).

  • 11. Re: Size of web pages and inserted files (assets).
    apple_customer Level 1 Level 1 (45 points)

    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...

     

    1.jpg

     

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

     

    2.jpg

     

    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.

  • 12. Re: Size of web pages and inserted files (assets).
    apple_customer Level 1 Level 1 (45 points)

    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.

  • 13. Re: Size of web pages and inserted files (assets).
    Old Toad Level 10 Level 10 (115,645 points)

    No.  To move beyond iWeb will require a learning curve for whichever app you choose to use.  I've not tried it but EasyWeb Pusblisher is reported to be fair.

     

    I know a little basic HTML so went with Flux.  It allows drop and drag in a fashon and lets you add code to HTNL snippet like iFramse, etc. 

  • 14. Re: Size of web pages and inserted files (assets).
    Roger Wilmut1 Level 9 Level 9 (65,485 points)

    RapidWeaver is basically like iWeb its approach - theme-based, with a fair amount of configuration and many third-party themes and plugins available. You can just throw a simple site together very quickly, like this photo album, or it's possible to do something quite sophisticated. There is even a combination of theme and plugin that allows you complete 'absolute positioning' to allow any layout you want, as for example here.