4

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

Niels Kristian
  • 8,661
  • 11
  • 59
  • 117
  • Also, remember "page rendering" I newrelic includes the space from domReady (user can see / interact) -> page Loaded. So some scripts (like facebook) will take some time to load, but won't be preventing the user from using your page. They mess up newrelic quite a bit in my experience. – Kevin Sep 26 '14 at 17:52

3 Answers3

4

  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.

Louis Simoneau
  • 1,781
  • 14
  • 18
doptrois
  • 1,560
  • 11
  • 10
  • Although I completely agree on your answer, I noticed this specific problem to be caused by the Server (or CDN?). The response time was terribly slow – it took about five seconds for the first rendering to start. The rendering of the page itself was quick. – rafleo Sep 30 '12 at 00:54
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

Chamnap
  • 4,666
  • 2
  • 34
  • 46
  • Thanks for the links, we are already using sprites. I'v tried both tools, but I have a hard time finding out what to conclude - it's just an informational overload to me. – Niels Kristian Jun 01 '12 at 16:16
0

Recommend two books to you:

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

hi

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

enter image description here

Hooopo
  • 1,380
  • 10
  • 16