Issues

PageSpeed: Forced Reflow

back to issues overview

Forced Reflow

Pages with a forced reflow which can result in slowing down rendering and user interactions.

A forced reflow (also known as forced synchronous layouts) occur when JavaScript queries geometric properties (such as offsetWidth) after styles have been invalidated by a change to the DOM state.

Multiple forced reflows in quick succession is called “layout thrashing”.

How to Analyse in the SEO Spider

To populate this filter the PageSpeed Insights API must be connected via ‘Config > API Access > PSI’.

View URLs with this issue in the ‘PageSpeed’ tab and filter and use the lower ‘Lighthouse Details’ tab to click on the issue on the left-hand side, and see details of the forced reflow files on the right-hand side.

Bulk export the pages and images via ‘Reports > PageSpeed > Forced Reflow’.

What Triggers This Issue

This issue will trigger if a page fails on any of the below checks:

  1. Avoid, or at least reduce, the amount of DOM geometry writes that are done just before reads.
  2. Have no forced reflows that take longer than 30 milliseconds.

How To Fix

Batch style reads and do them first (where the browser can use the previous frame’s layout values) and then perform any writes.

Developers can minimize reflow by reducing DOM depth, optimising CSS rules, using absolute or fixed positioning for complex rendering changes, and avoiding complex CSS selectors.

Further Reading

Back to top