How to find Cumulative Layout Shift problems if Page Speed Insights says one thing and Search Console says another

by

So as nobody has answered this I will put down what I did, it may not be the best way to do it so bear that in mind!

I opened dev tools and setup a new profile under network speed where the latency was 1000ms and the speed to 50kb/s. (where it says “online” next to “disable cache”, click there and go to “Custom > “Add…”).

This effectively gives you time to see what is happening on a page as resources load in.

I then went to the “rendering” tab and switched on “Paint Flashing”, “Layout Shift Regions” and “Layer borders”

I then just watched the page load with this artificial slow down in place.

It was immediately obvious doing this that I had a side menu loading in via AJAX but when it loaded it was about 1px too wide due to a border on it so it made the whole main section shift to the left a tiny bit.

Impossible to notice with the naked eye but really obvious with the above method. This didn’t happen on the automated tests as it was (sort of) a race condition in a browser that depended on load order (using async for scripts as I do other manipulation on the aside) and PSI was consistent.

I hope this helps someone until someone comes up with a better way of identifying the root cause of a Layout Shift.

Update

As pointed out in the comments make sure you test at different screen sizes as well.

More Related Contents:

  1. LCP time between LightHouse and Performance – Google Chrome
  2. Performance optimization strategies of last resort [closed]
  3. Is performance reduced when executing loops whose uop count is not a multiple of processor width?
  4. Why are loops slow in R?
  5. Is it safe to shallow clone with –depth 1, create commits, and pull updates again?
  6. Is recursion ever faster than looping?
  7. How are x86 uops scheduled, exactly?
  8. Why is my Rust program slower than the equivalent Java program?
  9. How can I accurately benchmark unaligned access speed on x86_64?
  10. Faster way to initialize arrays via empty matrix multiplication? (Matlab)
  11. Is ADD 1 really faster than INC ? x86 [duplicate]
  12. Clear file cache to repeat performance testing
  13. MATLAB parfor is slower than for — what is wrong?
  14. What’s the (hidden) cost of Scala’s lazy val?
  15. Given n points on a 2D plane, find the maximum number of points that lie on the same straight line
  16. Why is a conditional move not vulnerable to Branch Prediction Failure?
  17. Is Mongodb Aggregation framework faster than map/reduce?
  18. Run-length decoding in MATLAB
  19. Fast vectorized rsqrt and reciprocal with SSE/AVX depending on precision
  20. Speed-efficient classification in Matlab
  21. How Do I Measure the Performance of my AngularJS app’s digest Cycle?
  22. Is it useful to use VZEROUPPER if your program+libraries contain no SSE instructions?
  23. SUMIFS function in Google Spreadsheet
  24. Latency bounds and throughput bounds for processors for operations that must occur in sequence
  25. Git is really slow for 100,000 objects. Any fixes?
  26. NHibernate – CreateCriteria vs CreateAlias
  27. Denormalized Numbers – IEEE 754 Floating Point
  28. How to improve performance of GeoIP query in BigQuery?
  29. How to analyze golang memory?
  30. How to avoid Query Plan re-compilation when using IEnumerable.Contains in Entity Framework LINQ queries?

Leave a Comment