Multiple Spotify Oneboxes causing performance issues

AI-generated summary

Users on the Drowned in Sound community reported performance issues when topics contained many Spotify Oneboxes, making pages unusable ma0sm. While the community initially considered disabling Onebox generation entirely, they opted instead to limit the height of Spotify embeds via CSS to preserve aesthetics. The fix implemented was:

iframe[src*="spotify.com"] {
  max-height: 150px;
  height:80px;
}

This reduced the visual footprint of each embed ma0sm, and users who previously experienced slowdowns stopped reporting issues, suggesting the workaround was effective. SeanDrownedinSound temporarily blocked Spotify Oneboxes while the issue was being investigated. The problem appears to have emerged after Spotify Oneboxes became more complex, compared to their earlier, simpler versions. This CSS-based solution is now recommended for other forums facing similar performance degradation from embedded Spotify players.

There’s an issue that many users on the Drowned in Sound community have encountered where topics which contain a large number of Spotify links are rendering the topic unusable to them.

It’s been discussed there over the last few days, with a proposed solution to edit the CSS to minimise the maximum height for a Spotify Onebox (they don’t want to disable Onebox generation for the domain completely, for aesthetic reasons) and I thought I’d mention it here to see if you have any other thoughts or ideas on a solution.

I have not encountered the problem personally, so unfortunately cannot give more specifics than what has been posted above. It didn’t used to happen when the Spotify Oneboxes were more basic, but seems to have been triggered since they became extra.

Thanks for posting this

For clarity, I’ve temporarily blocked the domain from OneBox to try to prevent people having the issue

Sadly no suggestions on this, so I’ll share what Drowned in Sound did in case any other forums encounter the same issue.

The following was added to the CSS:

iframe[src*="spotify.com"] {
  max-height: 150px;
  height:80px;
}

Which results in the embeds looking like this:

Those who faced the performance problems before have stopped complaining, so it seems that this fix was good enough to resolve things.