• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 277
  • Last Modified:

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
0
ddantes
Asked:
ddantes
  • 3
  • 3
1 Solution
 
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 MVEDeveloperCommented:
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
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Scott Fell, EE MVEDeveloperCommented:
>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
 
Scott Fell, EE MVEDeveloperCommented:
>  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
 
ddantesAuthor Commented:
Great info, and thank you for the link to yslow.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now