Link to home
Create AccountLog in
Avatar of ddantes
ddantesFlag for United States of America

asked on

Can I improve the loading of this site?

I'm retrofitting my site for mobile browsers.  So far, the pages I've adjusted are appearing the way I would like in iPhone and iPad.  However, there is slow loading, and a period of partly-unstyled content.  I would like to improve that, if it doesn't require a total overhaul.  http://mauitradewinds.com/Test
Avatar of mickey159
mickey159
Flag of United States of America image

If the page is mobile only, try reducing the resolution of the pictures. Clearer pictures need more time to load.

I hope this helps.
Avatar of Scott Fell
1) Compress all of your js files.  http://jscompress.com/

2) Combine your js files

3) Combine your css file

4) Make your images 100% of the size you are displaying them.  You have 1000px images going down to 450px wide via the browser

5) 1 tiny error to fix http://validator.w3.org/check?uri=http%3A%2F%2Fmauitradewinds.com%2FTest%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

6) Your png files http://mauitradewinds.com/Test/images/Hawaii%20State%20Seal.png could be be optimized more.  They are each 80K.

7) Change your home page so all large images do not  load all at the same time. Instead use ajax and load one at a time.
Avatar of ddantes

ASKER

Thank you for those suggestions.  I have some questions for clarification, using the numbers of the points you enumerated...

1. On the online js compressor, there is an option to upload js files, and they will be combined and minified in order.  I'm having a little difficulty with this.  If I browse to a js file, the path appears in the first "browse" window.  If I do the same in the second browse window, and then click "upload and compress js fles", the result is "no javascript input was found."  Also, there is a button to add additional files, after the first two, but clicking it doesn't do anything.  This happened in IE as well as Firefox.

2. and 3.  Are you suggesting that I try to combine code from many js or css files into single files?

4. I have 1000px images, but I am also targeting browsers with large displays.  Do I need to serve alternative images for different display sizes?

5.  The developer of Supersized advises me that error can't be helped.  Adding any li to the ul will break the layout, so I'm accepting that error.

7. I'm unfamiliar with ajax.  How would loading images one at a time be more efficient?
>2. and 3.  Are you suggesting that I try to combine code from many js or css files into single files?

Yes

>4. I have 1000px images, but I am also targeting browsers with large displays.  Do I need to serve alternative images for different display sizes?

Try and keep the images close to 100% as possible.  Use media queries to deliver different size images based on different size screens.  https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

7) Instead of the browser loading all the images at once and the browser having to wait, it loads just one.  On fast internet, this is all good.  But on 3g may be another story.
Avatar of ddantes

ASKER

Thank you.  I tried another site for combining js files (jmerge).  My web page didn't work when I replaced all references to individual js files with loading the single, combined file.

Of the various suggestions you made, may I ask if you would rank them in order of the effect they would be expected to have on loading time.  I'm trying to concentrate on the most important adaptations first.
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of ddantes

ASKER

Great info, and thank you for the link to yslow.