Good news, is that Safari now handles this page incredibly quickly / smoothly on Mac, and that Chrome has made a big improvement!

Not yet perfect though on Chrome, so I dug a bit deeper.

Testing on https://sunshine.social/micahiverson

The background image is still pretty large:

https://tools.pingdom.com/#5e26cda53b000000

But, that's not causing the issue.

(Unrelated, the images on https://sunshine.social/ are also quite large, and there are 10+ second load times where I can watch them paint 😅)

When I reduce my window size by 50%, repaints make it back to nearly 60 FPS in Chrome / Mac.

You can remove this transition, it doesn't do anything, and width, height, top, left are generally slow to repaint in Chrome.

.grid-stack.grid-stack-animate, .grid-stack.grid-stack-animate .grid-stack-item {
    -webkit-transition: left .3s,top .3s,height .3s,width .3s;
    -moz-transition: left .3s,top .3s,height .3s,width .3s;
    -ms-transition: left .3s,top .3s,height .3s,width .3s;
    -o-transition: left .3s,top .3s,height .3s,width .3s;
    transition: left .3s,top .3s,height .3s,width .3s;
}

Chrome seems to be animating a few things in the "problem area" – box shadow and transform:scale

Only animating transform was my first idea. Doesn't seem to fix it.

.grid-stack-item-content, .grid-stack-item-content .flare, .grid-stack-item-content .flare-small {
    color: #E5E5E5;
    transition: transform .2s ease-out;
}