Slow site... but just in Chrome/Safari
I'm trying to find a bug in a web ap开发者_运维技巧plication, which is causing Chrome and Safari to take up to 15 seconds to load the page (Firefox and IE, there are no problems). I've tried using Chrome's developer tools to find out what is causing the slowdown, but am unable to understand what elements/script is slowing down the page.
This is a joomla site with a custom add-on (done by another developer, not myself)... looking for some help in diagnosing the problem.
The URL is http://www.norfolktourism.ca/index.php?option=com_eventlist&view=eventlist&Itemid=70
I've tried loading the page with javascript disabled in chrome, and it's still super slow. Using Chrome's developer tools, I see 25 messages showing "XML self-closing tag syntax used on . The tag will not be closed.", followed up by a "[ Exception: TypeError: Expecting a function in instanceof check, but got TypeError: Cannot read property 'ANY_TYPE' of undefined ]".
There do seem to be quite a few div tags that are self closing; while it shouldn't cause problems, it can't hurt to clean them up.
I recommend you to try some chrome extensions:
- Firebug Lite: https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench
- Speed Tracer: https://chrome.google.com/extensions/detail/ognampngfcbddbfemdapefohjiobgbdl
I think firebug is better than default chrome's developer tools. And speed tracer can be quite useful to track items that are taking too much time to load.
Some advices:
Save the background image and every image that appers in the header in the png format to decrease their size
Try to enable the gzip because the html content weights too much
Use Chrome developers utilities to analyze every request that is done on the page to understand what is slow
UPDATE: Try to remove the addthis_widget.js script, it loads a lot of resources and it adds an hidden iframe that slows Chrome
Without showing us any code / script we can't really help much. One thing I can recommend is begin with one panel and keep a dding to determine the root cause of this.
My instincts tells me it is the image loader as this may have some JS bug. Top right corner remove that and try to load the page in chrome. If you notice it is a lot quicker you know that is your issue.
You can try to trace the problem with help of DevTools Timeline.
Timeline video guide
Other DevTools guides
Some changes in Timeline UI happened after recording the video. As example all the top level events are collapsed by default. But the idea is the same.
As I can see it is not a problem with JavaScript but with Layout recalculation.
精彩评论