My page takes too long to load! How can I cut the page load time!

Question

Hi guys I'm testing out my application. Using firebugs I've found out my application is abominably slow and needs to speed up.

I have one huge clumped up javascript file thats over 700KB, that includes all my js libraries but the spooky part is the code itself takes anything between 20 to 40 seconds to run. Now the thing is that my code is based upon zend framework and retrieves emails from a mail folder - however this is too slow. How can I speed it up - how can I tell which part of the code is taking its toll?

========================

The javascript is part of the iissue however at the same time another problem is that the page I'm talking about in particular reads through an email inbox. Its a front for a webmail interface, there are database calls being made but the timing seems negligible. Look at the following istings I made using microtime to calculate the time for getting messages and snippets of code.

I took the time for each snippet of code to run and attached a label to them in a report and this is the result - the first number is the time in microseconds while what follwos the number i sthe label for that snippet of code which took the time taken. Which snippet should I be keeping my eyes on. The ones that are with repeated labels are so cos they ran in a loop - its an email client and each message is retrieved as a loop.

[Log Entry 2010-07-10T10:49:44+00:00] 0.000446:::::01

[Log Entry 2010-07-10T10:49:45+00:00] -0.100127:::::02

[Log Entry 2010-07-10T10:49:46+00:00] 0.191738:::::get message

[Log Entry 2010-07-10T10:49:46+00:00] 2.0E-5:::::get headers

[Log Entry 2010-07-10T10:49:46+00:00] 0.000776:::::contacts check

[Log Entry 2010-07-10T10:49:46+00:00] 0.174134:::::non multipart

[Log Entry 2010-07-10T10:49:47+00:00] -0.842978:::::get message

[Log Entry 2010-07-10T10:49:47+00:00] 1.2E-5:::::get headers

[Log Entry 2010-07-10T10:49:47+00:00] 0.000834:::::contacts check

[Log Entry 2010-07-10T10:49:47+00:00] 0.179016:::::non multipart

[Log Entry 2010-07-10T10:49:48+00:00] -0.851685:::::get message

[Log Entry 2010-07-10T10:49:48+00:00] 1.8E-5:::::get headers

[Log Entry 2010-07-10T10:49:48+00:00] 0.001334:::::contacts check

[Log Entry 2010-07-10T10:49:49+00:00] -0.587962:::::html part message

[Log Entry 2010-07-10T10:49:49+00:00] 0.138799:::::get message

[Log Entry 2010-07-10T10:49:49+00:00] 1.9E-5:::::get headers

[Log Entry 2010-07-10T10:49:49+00:00] 0.002155:::::contacts check

[Log Entry 2010-07-10T10:49:49+00:00] 0.181675:::::non multipart

[Log Entry 2010-07-10T10:49:50+00:00] -0.856142:::::get message

[Log Entry 2010-07-10T10:49:50+00:00] 1.6E-5:::::get headers

[Log Entry 2010-07-10T10:49:50+00:00] 0.000803:::::contacts check

[Log Entry 2010-07-10T10:49:50+00:00] 0.178046:::::non multipart

[Log Entry 2010-07-10T10:49:50+00:00] 0.141544:::::get message

[Log Entry 2010-07-10T10:49:50+00:00] 1.8E-5:::::get headers

[Log Entry 2010-07-10T10:49:51+00:00] 0.001167:::::contacts check

[Log Entry 2010-07-10T10:49:52+00:00] -0.188653:::::html part message

[Log Entry 2010-07-10T10:49:52+00:00] 0.148198:::::get message

[Log Entry 2010-07-10T10:49:52+00:00] 2.0E-5:::::get headers

[Log Entry 2010-07-10T10:49:53+00:00] 0.00284:::::contacts check

[Log Entry 2010-07-10T10:49:53+00:00] 0.336415:::::html part message

[Log Entry 2010-07-10T10:49:53+00:00] 0.140683:::::get message

[Log Entry 2010-07-10T10:49:53+00:00] 2.0E-5:::::get headers

[Log Entry 2010-07-10T10:49:54+00:00] 0.003539:::::contacts check

[Log Entry 2010-07-10T10:49:54+00:00] 0.311735:::::html part message

[Log Entry 2010-07-10T10:49:54+00:00] 0.143097:::::get message

[Log Entry 2010-07-10T10:49:54+00:00] 1.9E-5:::::get headers

[Log Entry 2010-07-10T10:49:55+00:00] 0.001392:::::contacts check

[Log Entry 2010-07-10T10:49:55+00:00] 0.313101:::::html part message

[Log Entry 2010-07-10T10:49:55+00:00] 0.146926:::::get message

[Log Entry 2010-07-10T10:49:55+00:00] 1.7E-5:::::get headers

[Log Entry 2010-07-10T10:49:55+00:00] 0.000743:::::contacts check

[Log Entry 2010-07-10T10:49:56+00:00] 0.173081:::::non multipart

Answer 1

You can use XDebug with {K,Win}Cachegrind to do some profiling and find the slow parts of your code. KCachegrind runs on linux, and is better than Wincachegrind.

Answer 2

Generally the SQL queries written improperly, or iterating under a loop are responsible for slowing down the website. A javascript file with 700KB would not make it slower that much. Try to find out which queries are taking too long to execute or if there are some queries running in a loop, try to find some other way of fetching the same result without the loops.

Answer 3

Its hard to tell where the problem might be from the question, but if its the loading itself you can install YSlow for Firebug.

This will analyse your site as it loads. It will then grade it and identify problem areas - recommending improvements (which are often easy-wins) to help improve the situation. This will help identify any problems with the actual webpage resources.

Answer 4

To detect some issues related to the contents served to the browser, install the YSlow plugin under Mozilla Firefox. You will get some grades concerning various dimensions: http requests count, compression, dynamic CSS and so on.

Answer 5

For profiling you could try http://stackoverflow.com/questions/855126/what-is-the-best-way-to-profile-javascript-execution or https://developer.mozilla.org/en/Venkman (specifically see here).

Unless the JS is working on a lot of data, I am going to guess the problem lies with doing a lot of API calls back to the web server (AJAX and similar). This should be easy to fix by, say, making API functions that take and returns lists if you currently have them take and return single units of information. getText(1,2,5,6) vs. getText(1),getText(2),...

Or that the code on the server itself is broken, so it's the server that takes 20+ seconds to respond to some JS query it needs a response to before it actually builds your page...