CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues
60fps, but it is getting closer to a consistent 30fps on desktop, which is
actually not bad.Show PainT ReCTangleS
Under “Rendering”
within the “Settings”
cog, you can enable a
feature called “Show
paint rectangles” to
help you visually see
the area repainted in
each frame. With this
feature enabled, it can
become easy to visu-
alize what slows pag-
es down. You want to
keep the areas being
repainted as small as
possible.fPS CounTeR
An older but equally useful tool for
visualizing frame rate and jank is the
real-time frames-per-second count-
er. This can be enabled in DevTools
by going to the Settings menu and
checking “Show FPS meter.”
When activated, you will see a
dark box in the top-right corner of
your page with frame statistics. The counter can be used during live editing
to diagnose what in your page is causing a drop-off in frame rate withoutIn this screenshot, a paint rectangle is being drawn over the
region where a div with overflow:scroll was being drawn.
This is good as it’s a relatively small part of the screen.