Solved

Can I improve the loading of this site?

Posted on 2013-05-22
7
271 Views
Last Modified: 2013-05-23
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
Comment
Question by:ddantes
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 6

Expert Comment

by:mickey159
ID: 39189806
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
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39189809
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
 

Author Comment

by:ddantes
ID: 39189841
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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39189910
>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
 

Author Comment

by:ddantes
ID: 39189943
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
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39190906
>  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
 

Author Comment

by:ddantes
ID: 39191540
Great info, and thank you for the link to yslow.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
BG appearing and then disappaear after a second 8 56
Can't find an open element in HTML 5 49
Editing .asp website 5 27
Javascript Error 10 20
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question