4 ms·

Wow I thought you were hallucinating but my Ryzen 7 5800X is SUFFERING to render that APNG. What the actual hell, why is that? Interestingly enough that stat do

Wow I thought you were hallucinating but my Ryzen 7 5800X is SUFFERING to render that APNG. What the actual hell, why is that? Interestingly enough that stat doesn't seem to reflect in HTOP nor in my (really loud) fans so I wonder if this is a Firefox bug. edit: I checked it now and I don't actually see any APNGs in the website? Only auto-playing mp4s which Firefox allows because there is now sound, and also some webm. Didn't really notice a pattern on why each one was a different file format and displaying one or the other didn't show noticeable performance impact. JavaScript disabled by the way. Also, while trying to reproduce I reopnened Firefox process manager but it only listed the website as using 20% CPU which is still a lot but somewhat to be expected with the amount of auto playing videos. Previously the flame graph for the page performance had a huge bar dedicated to "Image Decoding" however I couldn't really find the culprits unfortunately. What I found is that the issue intermittent, it's possible when the videos in the page restart Firefox for some reason had to decode them again and thus a spike in CPU usage. https://i.imgur.com/R1cyqhw.png https://i.imgur.com/R1cyqhw.png

coinfused 4y ago
Interesting! Indeed no APNGS, only MP4, png and WebM. Will try to see if I can do some more profiling but I am very new to making websites. Using eleventy as a static site generator and then doing some image compression also.
- doodlesdev 4y ago
  LOL why was your comment dead? Anyways, two tests I'd recommend is to disable autoplay in the videos and profile, and the other test would be to try different file formats. My test personally was in Firefox Linux, however it seems the problem also happens on macOS. Anyways, the website is great and I thoroughly enjoyed this article, so even though you're new to making websites I still think you're better than 99% of web developers.
  - coinfused 4y ago
    Thanks! I'll try to play around with it a bit. This post is by far the longest of mine so far so it's a good stress test page.
    - tiberriver256 4y ago
      Couple of other things to try. Hold off on loading and playing the videos until they are visible: https://web.dev/lazy-loading-video/#video-gif-replacement https://web.dev/lazy-loading-video/#video-gif-replacement Automatically pause the video when they are scrolled off the screen and no longer visible: https://benfrain.com/automatically-play-and-pause-video-as-it-enters-and-leaves-the-viewport-screen/ https://benfrain.com/automatically-play-and-pause-video-as-i...

coinfused 4y ago

Interesting! Indeed no APNGS, only MP4, png and WebM. Will try to see if I can do some more profiling but I am very new to making websites. Using eleventy as a static site generator and then doing some image compression also.

doodlesdev 4y ago
LOL why was your comment dead? Anyways, two tests I'd recommend is to disable autoplay in the videos and profile, and the other test would be to try different file formats. My test personally was in Firefox Linux, however it seems the problem also happens on macOS. Anyways, the website is great and I thoroughly enjoyed this article, so even though you're new to making websites I still think you're better than 99% of web developers.
- coinfused 4y ago
  Thanks! I'll try to play around with it a bit. This post is by far the longest of mine so far so it's a good stress test page.
  - tiberriver256 4y ago
    Couple of other things to try. Hold off on loading and playing the videos until they are visible: https://web.dev/lazy-loading-video/#video-gif-replacement https://web.dev/lazy-loading-video/#video-gif-replacement Automatically pause the video when they are scrolled off the screen and no longer visible: https://benfrain.com/automatically-play-and-pause-video-as-it-enters-and-leaves-the-viewport-screen/ https://benfrain.com/automatically-play-and-pause-video-as-i...