Lots of red in Page Interactive and big mystery bar in results graph

Hi all,

Fair warning, I’m new to this site and need a little help interpreting the results I’m seeing on my website’s test. I’m particularly concerned about what the red bar that nearly fills my Page Interactive row means, what the heck the wall of purple is halfway through the test, and how to fix both of those. Thanks in advance for the help!



The wide purple bar is JavaScript running in the DOMContentLoaded handler (JQuery document.ready). The pink bar shows you which script file is running code. Looking at all of the purple in the main thread timeline graph at the bottom, it looks like the code is causing layout thrashing (running something in a loop that checks for the size or position of something and also modifies the DOM, causing a new page layout every time through the loop).

The red bar means the main thread is blocked (running all of the javascript and layout).