I continuously get high CPU usage on visiting http://news.bbc.co.uk/. I've got a low spec machine, so I notice these things. I've tracked this down to a CSS bug that you have on your news page.
After downloading the homepage and chopping things up, I managed to find the culprit.
Halfway down the some extra styling is applied by: Morph.initStyles = function () {}
function.
It applies about 45 extra pieces of styling into the page. Four of these rules result in constant CPU usage. They are:
- "<style>@-webkit-keyframes gs-pulse{0%{opacity:1}50%{opacity:.3}to{opacity:1}}@keyframes gs-pulse{0%{opacity:1}50%{opacity:.3}to{opacity:1}}.gs-c-live-pulse{font-weight:700;text-transform:uppercase}.gs-c-live-pulse--news{color:#bb1919}.gs-c-live-pulse--sport{color:#2866f6}.gs-c-live-pulse--sport-light{color:#0186ff}.gs-c-live-pulse__icon{position:relative}.gs-c-live-pulse__icon-center{position:absolute;top:0;right:0;bottom:0;left:0;will-change:opacity;-webkit-animation:gs-pulse 1.7s ease infinite;animation:gs-pulse 1.7s ease infinite}.gs-c-live-pulse__icon-center svg{min-width:100%;min-height:100%}</style>"
- "<style>@-webkit-keyframes gs-pulse{0%{opacity:1}50%{opacity:.3}to{opacity:1}}@keyframes gs-pulse{0%{opacity:1}50%{opacity:.3}to{opacity:1}}.gs-c-live-pulse{font-weight:700}.gs-c-live-pulse--news{color:#bb1919}.gs-c-live-pulse--sport{color:#2866f6}.gs-c-live-pulse--sport-light{color:#0186ff}.gs-c-live-pulse__icon{position:relative}.gs-c-live-pulse__text{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;text-transform:uppercase}.gs-c-live-pulse__text:before{content:"";display:block;width:.25em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.gs-c-live-pulse__icon-center{will-change:opacity;-webkit-animation:gs-pulse 1.7s ease infinite;animation:gs-pulse 1.7s ease infinite}</style>"
- "<style>@-webkit-keyframes gs-pulse{0%{opacity:1}50%{opacity:.3}to{opacity:1}}@keyframes gs-pulse{0%{opacity:1}50%{opacity:.3}to{opacity:1}}.gs-c-live-pulse{font-weight:700;text-transform:uppercase}.gs-c-live-pulse--news{color:#bb1919}.gs-c-live-pulse--sport{color:#2866f6}.gs-c-live-pulse--sport-light{color:#0186ff}.gs-c-live-pulse__icon{position:relative}.gs-c-live-pulse__icon-center{position:absolute;top:0;right:0;bottom:0;left:0;will-change:opacity;-webkit-animation:gs-pulse 1.7s ease infinite;animation:gs-pulse 1.7s ease infinite}.gs-c-live-pulse__icon-center svg{min-width:100%;min-height:100%}</style>"
- "<style>@-webkit-keyframes gs-pulse{0%{opacity:1}50%{opacity:.3}to{opacity:1}}@keyframes gs-pulse{0%{opacity:1}50%{opacity:.3}to{opacity:1}}.gs-c-live-pulse{font-weight:700;text-transform:uppercase}.gs-c-live-pulse--news{color:#bb1919}.gs-c-live-pulse--sport{color:#1169f6}.gs-c-live-pulse__icon{position:relative}.gs-c-live-pulse__icon-center{position:absolute;top:0;right:0;bottom:0;left:0;will-change:opacity;-webkit-animation:gs-pulse 1.7s ease infinite;animation:gs-pulse 1.7s ease infinite}</style>"
I haven't looked into precisely which part of these animation CSS rules are causing the problem, but I suspect there's an infinite animation loop in there. Each one of these rules makes things a little bit worse.
I'd appreciate it if you could fix this as it's causing a lot of wasted CPU cycles in the UK right now. I've reproduced this in Windows and Linux using Chrome (83.0.4103.97).
Cheers,
Joe Wright
Twitter: @joe_jag