StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The 9 FPS you're seeing when the page isn't scrolling seems to be coming from a timer that's causing a DOM update. This is why there is a lot of time between "frames". That FPS name is somewhat confusing, the counter you want is the one you get when you click on the DevTools "settings" cog in the lower right and enable "Show FPS meter".</p> <p>You really want to be recording when you're scrolling though - the page will not render @60fps when you're not doing anything - try it - just load about:blank (or some very simple page) and try recording the Timeline - you should see none (or very few) events.</p> <p>Scrolling performance is a very complex topic and I'd like to direct you to <a href="http://jankfree.org/" rel="nofollow">jankfree.org</a>. That page contains tons of high quality talks and tutorials. You may want to look at <a href="http://www.html5rocks.com/en/tutorials/speed/scrolling/" rel="nofollow">the scrolling performance tutorial</a> and <a href="https://developers.google.com/events/io/sessions/325933151" rel="nofollow">this Google IO talk</a> to get you started.</p> <p>From a very brief look at your page it seems like:</p> <ul> <li>there is a timer firing at a very rapid rate on the page, you should investigate that since just sitting on the page, doing nothing is draining user's batteries.</li> <li>whenever you finish scrolling a pretty expensive script is triggered from onScroll. That also seems to trigger a raster of the entire page. Try removing the onscroll handler and seeing if the page is less janky, if so you should try and optimize that.</li> <li>when you click on an article the ads are positioned using JavaScript, not CSS positioning, these will always lag as you scroll. You should consider using <code>position: fixed</code>.</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload