Page rendering speed improvement

Question

We are running a web service, that is struggling with some pretty high page rendering times especially IE8 (around 20 sec). We are very skilled at building high performing backend systems, but not as skilled at optimizing the frontend.

Currently it seems (from newrelic) that page rendering and dom-parsing is the biggest issue.

We have tried to optimize js scrips, and that helped a little, but still the page renders terrible slow in IE8, and I have a feeling that some low hanging fruits is out there. My problem is, that I have really no idea where to start, and what would work and if there is some red lambs flashing that I'm not seeing. I need an experienced eye.

Can any one help me in the right direction (I'm open for everything!)?

The slow page is here: the slow page

PS. we are running Rails 3.2

Answer 1

1. I recommend you to analyze your website via the tools above (YSlow is also a good tool) Or with this Online-Tool Pingdom. There you'll see in a very easy way, where your speed is gone.

2. Theres a free available summary from the performance optimization books in Hooopo's answer (which are excellent!) Yahoo! Developer Network

3. "Currently it seems (from newrelic) that page rendering and dom-parsing is the biggest issue." Therefore i recommend you to study this book: High Performance Javascript from Nicholas C. Zakas.

4. Put as much JS as possible to the bottom of your page to improve progressive rendering.

5. I sometimes found CSS-selectors that are a bit long (doesn't matter if it's a small site, but in this case..). this can make your page-rendering very slow, especially in IE.

Example (from your site):

table.results_table td.car_details .content > .left { ... }

Try to break down this large selector to this (if possible):

.car_details .content .left-child { ... }

Short: optimize your JS performance and keep your css-selectors as small and simple as possible.

Hope this helps.

Answer 2

To optimize the front-end, try these two tools and follow its suggestions:

http://www.webpagetest.org/

https://developers.google.com/speed/pagespeed/insights

You could also use css sprite image to reduce http requests. Try https://github.com/Compass/compass-rails

Answer 3

Recommend two books to you:

http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309

http://shop.oreilly.com/product/9780596522315.do