Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 269
  • Last Modified:

Load fast an html page with js

Hi,
I designed a page in php files that loads all the imeges from outside but the index page is loading very slowly....why is that?Is there some code that can load first the body of the php page and than all the other stuff. Please look at the page www.zendal.es if you can find the reason why it´s loading such time.
0
enigmateam
Asked:
enigmateam
  • 8
  • 5
  • 3
  • +3
13 Solutions
 
GodDoesntExistCommented:
Put so many javascripts and javascript include files as you can at the bottom of the index.php. Let the HTML and CSS load before.

It should make sense.
0
 
-null-Commented:
Hi

Have you tried moving all of your javascript to the bottom of the file?  It appears to be manically loading this before rendering the actual page.


-null-
0
 
enigmateamAuthor Commented:
Where do i put it before </body> o</html> ?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
-null-Commented:
You can put it anywhere, either before </body> or after </html> makes most sense.

-null-
0
 
enigmateamAuthor Commented:
well, it doesnt work. if i put the js code in another place the windows on the right don't como on in IE. In firefox it work. other idea?:(
0
 
-null-Commented:
Other than that window not appearing, is it just as slow, or did it speed up?

-null-
0
 
enigmateamAuthor Commented:
without the windos it loads faster but i have to have the windows...
0
 
enigmateamAuthor Commented:
I rearranged the js code and the widows como´s on but the page still loads slowly. I have modified the size of the images, but it still doesnt work. Please any other solution???????????
0
 
b0lsc0ttCommented:
You shouldn't move the scripts to the end of the html.  I recommend keeping them in the head section of the html (i.e. between the head tags).  If it doesn't need to be run until the end of the page load then add the defer attribute to the script tag.
<script type="text/javascript" defer="defer">
See http://www.websiteoptimization.com/speed/tweak/defer/ for some more details on this if you want.
I will look at the site in the URL and read the other posts again closer to see if I can add more but it is best if you leave the Javascript in the head section instead of after the body's closing tag.
bol
0
 
b0lsc0ttCommented:
What is your Internet connection speed?  Is it a specific browser that seems to be especially slow?  Does it seem to make a difference if you are visiting for the first time or when you are refreshing (i.e. use cache for images, etc)?
The page is big (+500KB if I remember right).  If you will have people using dialup or slower connections you should really make a drastic change to it.  On a high speed connection it seemed to load fine for me.  There is a site where you can get some optimisation details and suggestions.  Go to http://www.websiteoptimization.com/services/analyze/ and have them test that page.  It could be a start for getting it to load quicker.
Compare to some of the other pages to see the difference in size.  If it is great then that is probably the main reason for the difference in load speeds.  Optimizing the images for the web, having them locally (i.e. on the web server), etc can make a big difference.
Let me know how this helps or if you need details on anything I said.
bol
0
 
enigmateamAuthor Commented:
Thank you very much for the advises. Here is what i did:
I noticed that the header and the footer of the page have the same div, so i changed the name of the header.
I puted the <script src="script.js" type="text/javascript" defer="defer"></script> between head tags.
And i ashure you that all the images are optimised for web.
The page goes slow when it´s opened for a first time.
The size of the index.php is 10,4 K - it is nothing...
But it still doesnt open quickly!
0
 
b0lsc0ttCommented:
>> i ashure you that all the images are optimised for web. <<
How do you know?  If that is the case then it will be hard to do much more for your page as it is now.
>> size of the index.php is 10,4 K - it is nothing <<
Do you mean just the PHP page?  What does that matter??  When I said the page is big (if that is what you were responding to) then you can't just look at the size of the PHP and respond.   You look at the size of ALL the elements of the page.  The page's "weight" isn't just the size of the main page.  The figure I mentioned considered all the files used by the page.  That size is not "nothing" and the main reason your page would load slowly.
It would help if you respond to the other things I mentioned and asked.  After your response to my post on the page's weight I really would like to know how you can assure me the images are optimized.  It can make a huge difference and I don't want you to have misunderstood what I meant by that part too.
Let me know if you have a question about anything I have said.
bol
 
0
 
enigmateamAuthor Commented:
In the office we have a 6 MB conection and it opens slow. I don´t know the speed conection of our clientes but they did say that the page opens slow.
I know that all the imeges are optimised because i optimised every one of them when i created them in PSD.
Can you tell me how long does it take to load in seconds when you have deleted all the cache?
0
 
b0lsc0ttCommented:
The site loaded pretty good for me but I do have a fast connection (I mentioned all of this already).  If you want to see load times for different connection speeds then did you look at the page I linked to?  In the report it can provide it shows load times for various connection speeds.  I am sorry I can't be precise on my own load time but I prefer to not guess (it was just a couple of seconds) and I usually use something like the site I recommended.  It is the reason I provided the URL and that info.  There are other sites too so you can compare results but that site is one of my favorites.  There are even some helpful suggestions on that page for optimizing your site.
It is a complicated page.  There are 64 http requests.  Basically between images, external javascript and css the browser asks for 64 URLs.  Reducing that number will make a difference in load time.  As I looked over the list I wonder if you need all the mootools script pages (or do they have 1 script file optimized for production use)?  Do you CSS files have redundant or unneeded code?  Even your html elements but since the page validates and the html is a small part of the total "weight" I don't know that I would spend much time there.  If the effects, etc you get with mootools can't be done with fewer script pages and less code then consider looking at another framework or skipping the framework and doing it yourself or going without the effect.  Basically it won't help to overdo the page if it takes too long for the client and their visitors to load the page.
One suggestion to stick with Mootools though ... it doesn't seem like you are using either of the compressed versions of their script(s).  There appear to be about 25+ script files and many are Mootools related.  Using a compressed version of those scripts can really cut down load times (and don't include JS pages that aren't used on THAT page).  If the images are the best you can do without losing quality then this stuff is the next to look at for optimizing the page.
Let me know how that helps or if you have a question.  
bol
0
 
enigmateamAuthor Commented:
Is there somo way a can check in the css files wich codes i don´t use so i can eliminate them?

"One suggestion to stick with Mootools though ... it doesn't seem like you are using either of the compressed versions of their script(s).  "

How can I copresed the js files of the Mootols?
0
 
b0lsc0ttCommented:
>> Is there somo way a can check in the css files wich codes i don´t use so i can eliminate them? <<

You could look at a program like CSSTidy or a site like http://www.cleancss.com/ .  IMO the best source for this is you and knowledge of your page and code.  The CSSTidy program will also remove whitespace which I am not usually a fan of and not my specific recommendation for this.  I think it is more important to keep it readable.  I am definitely suggesting that you make sure there isn't any "fat" in the code though and the CleanCSS site or even better a close review of the code by you will do this.
>> How can I copresed the js files of the Mootols? <<
The compressed versions are provided on their site.  They actually have 2 different compressed versions of the main file(s).  The other files might also come in a compressed version and you should look at their download site for them.  With frameworks like Mootools it is very common for them to provide those versions.
There are also programs and sites you can use to compress your code.  One such site is at http://dean.edwards.name/packer/ and a search can provide a number of others.  I am not suggesting you compress everything but mainly that you use the provided compressed files for the frameworks you use.  I did mention the "Packer" site in case you are interested.
bol
0
 
enigmateamAuthor Commented:
I´m sorry but i think i did everything youtold me but the page loads the same. I can´t fing the compressed files of the js. Is there a program that could compresed them. I really need help with this page.
Thanks.
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
To be honest there is not much you can do more. It is the provider of where you have a page just sux. In mine computer everything is loaded after 2 sec, then images takes around 16 sec to load (they are size of 100b !!! or few kb!!).

I would advice you to do simple test - move everything to another (better) server and try your test agains. In mine opinion this is a reason.
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Here is a screenshot. Look how much takes connecting and waiting for data from server!
slowPerformance.JPG
0
 
ahoffmannCommented:
> You can put it anywhere, either ...
technically wrong
script tags have to be inside head tags or inside body tags, anything else depends on use of buggy browsers ;-)

enigmateam, you javascript code relies on the DOM, hence the browser needs to run that code *after* loading the page *and*rendering the HTML, otherwise your javascript cannot access the DOM.
As wilq32 already explained, the images take the most time fpr loading, I guess this is a server problem.
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
It seems that DNS on server are also really bad configured. Look on screen that DNS lookups for images takes ages. I also saw this when I enter page first time. It takes me more than a 5 seconds to retrieve IP from DNS server. That just sux :)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

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