Background video "northen-light.mp4" is not cached and it's downloaded on every loop
Closed this issue · 9 comments
This bug should be resolved ASAP since it's costing us money on S3.
Screenshot of the devtools
The request is not cached by the browser, so it's hitting Cloud Flare, and it's not cached by Cloud Flare as well, so it's hitting S3. It's also weird that there is a request per loop.
OK so doing a request is the default behavior of a <video loop> tag. That is insane.
On S3 the cache-control header is properly set.
I'm checking Cloud Flare now.
Some numbers: In the past day, CloudFlare served 108 GB to 970 unique visitors of bigchaindb.com. That's an average of 111 MB per unique visitor.
curl the video on S3
~ ➜ curl -I https://s3.eu-central-1.amazonaws.com/www.bigchaindb.com/assets/videos/northern-light.mp4
HTTP/1.1 200 OK
x-amz-id-2: 0+mt++U1ZQ/uK8c9AsOBudi/OUApHVBOISSQVOotX+QEUlj5kW9HERzdGJU1k9jz70nbByb904g=
x-amz-request-id: 11B7FCF14C49C930
Date: Tue, 24 Jan 2017 14:58:40 GMT
Last-Modified: Wed, 10 Feb 2016 19:42:35 GMT
ETag: "e607cf0b0ec58cfa41c2896db082e1e9"
Cache-Control: max-age=2592000, no-transform, public
Accept-Ranges: bytes
Content-Type: video/mp4
Content-Length: 6618936
Server: AmazonS3
curl the video on Cloud Flare
~ ➜ curl -I https://www.bigchaindb.com/assets/videos/northern-light.mp4
HTTP/1.1 200 OK
Date: Tue, 24 Jan 2017 15:00:02 GMT
Content-Type: video/mp4
Content-Length: 6618936
Connection: keep-alive
Set-Cookie: __cfduid=d828c10e1005e10fa5eaf2ef7004c3ec31485270002; expires=Wed, 24-Jan-18 15:00:02 GMT; path=/; domain=.bigchaindb.com; HttpOnly
x-amz-id-2: yerCRWqDUMYZLr0qtnMkG1VoUcrlmbohC4rTJ76NE7hDI6V5Xd+jbTFSw2avqtL3m/TbwYurlG8=
x-amz-request-id: EF1AACDCC9B0C4EA
Cache-Control: max-age=2592000, no-transform, public
Last-Modified: Wed, 10 Feb 2016 19:42:35 GMT
ETag: "e607cf0b0ec58cfa41c2896db082e1e9"
Server: cloudflare-nginx
CF-RAY: 32645a4bcdbc2d53-TXL
I did another test with tcpdump and the devtools closed in an incognito window, and I still see the traffic flowing 😩.
S3 costs in November (on that AWS account): $9.27
S3 costs in December: $122.55
S3 costs so far in January: $212.85
One dumb solution for now would be to have a static image instead of a video.
On a first quick look, no idea what happened between Nov & Dec, nothing on the video code side has changed. I actually prevent the video from loading by default via preload="none" on the video element, loading happens via js only on bigger screens. Maybe something changed around the .load(); behavior in browsers. So I suspect this is caused by the js loading of the video since it seems caching works correctly on the S3 & Cloudflare side.
One dumb solution for now would be to have a static image instead of a video.
That's the current default behavior, we just load the video on top of it, once it's loaded it replaces the poster image. So yes, quick fix would be to just remove the video loading part.
@kremalicious thanks for your quick reply!
Maybe something changed around the .load(); behavior in browsers.
Might be. Anyway if you google you'll see some interesting Stack Overflow questions and some bugs in the Chromium bug tracker. I'm really confused.