I’m currently working on a student project and I encounter an issue with my code. We built an e-doc which mixes video, images, sounds and texts datas about people working during the night.
It’s made of HTML, Javascript and a bit of PHP to access a DB.
Recently we discovered that the page keeps loading infinitely when you arrive on the website… It brokes some of our JS code and we don’t know how to identify the ressource that might be corrupted or so…
What can make a page load “forever” ? And what kind of tools (ie firebugg or the built-in chrome stuff) should we use to identify the problem ?
You can find our dev- version right here : http://mgprddev2012.dream-valenciennes.com
EDIT : PHP Error is now OK, i forgot to upload the newest version of the code on the dev platform.
Many thanks
You’re not crazy – this page does indeed take a very, very long time to load.
If you look at the Network tab in Chrome Developer tools, you can see that there are a lot of images, audio files and video files loading up all at the beginning, and most of them are not visible right away. And some of them are very big. This is probably one of those situations where it’s best to defer loading of most of these assets until you need to display them, or at the very least until after you’ve loaded the assets you need right away.
I recommend checking you YSlow, which is an auditing tool that will give you some tips on how to make your web page load faster and appear to load faster. The site also has some good tips and thorough explanations for why different strategies are effective.
A few hints for this particular page:
A lot of your images are pictures of text. Consider rendering these as actual html text. You can still modify the size of each letter with CSS, and you’ll have the added benefit that Chrome will be able to translate the text for non-French-speaking users. You should be able to use CSS borders to get those lines around the text, or try SVG.
Your background image is 2.2 MB. That’s quite big. Try saving it at a lower compression setting.
You have a bunch of icons in individual png files. Consider putting them all in in one file and display them as CSS Sprites.
There are several png files that look like they could be jpg’s, except for the transparency. If you’re feeling ambitious, you can make a jpg with the color channels on the left side, and the alpha channel rendered as grayscale on the right, and use canvas to composite them.
You also have a few png files containing sprites for animation. You can convert them to videos and try the same canvas trick as above. If you’re willing to use WebGL, I have some code you can use.