Solved

Can I improve the loading of this site?

Posted on 2013-05-22
7
265 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
  • 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 52

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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 52

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 52

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
JavaScript error 1 34
CSS measurement 10 18
Printing a Google Form 2 10
Google script to get long/lat from address 10 32
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now