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
ddantesAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
>  My web page didn't work when I replaced all references to individual js files with loading the single, combined file

Make sure they are in the same order and you copy pasted everything correctly.  Simply combining the files does not cause an error.

Your images are going to be the biggest problems. Then the compressing and combining your js files.

See http://yslow.org/ gives you a grade C for speed.  There are just a few things you can change to increase that grade, some you may not want to bother with.  In any case, the total file size of all of your images is top priority and close 2nd is compressing the js files and combine them.
0
 
mickey159Commented:
If the page is mobile only, try reducing the resolution of the pictures. Clearer pictures need more time to load.

I hope this helps.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
ddantesAuthor Commented:
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?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>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.
0
 
ddantesAuthor Commented:
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.
0
 
ddantesAuthor Commented:
Great info, and thank you for the link to yslow.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.