Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
18
Help us understand the problem. What is going on with this article?
@moroya

WebKit系ブラウザでvideoタグにpreload="none"をつけるとwindow.loadの発火がとても遅くなる

More than 5 years have passed since last update.

パフォーマンスの検証をしていたとき気づきました。

VideoタグをHTMLに書くとブラウザが自動的に動画をプリロードしますが、毎回再生されることのない動画等では回線の負荷となるので、preload属性にnoneを指定することでやめさせることができます。

<video preload="none" src="//example.com/hoge.mp4" />

しかし、WebKit系ブラウザではwindow.onloadの発火が遅くなる不具合があるようです。

こちらが、preload="none"のDevTools Networkパネル。
青い縦線がDOMContentLoadedが発火したタイミングで、赤い縦線がLoadが発火したタイミングです。

ScreenShot 2014-02-24 16.20.21.png

リソースの読み込みが全て完了してから、謎の空白があります。
Windows, Mac版両方のGoogle Chromeで再現しました。

この問題について調べるとIssueが上がっていましたが、今のところ解決策はないようです。
Issue 284413 - chromium - Video tag with preload="none" delays window "load" event

対策として、preload属性をmetadataにします。

こうすると、動画のメタデータ部分のみをロードします。

<video preload="metadata" src="//example.com/hoge.mp4" />

ScreenShot 2014-02-24 16.19.46.png

正しく最短でLoadイベントが発火するようになりました。(3秒近く早くなってますね)

最近はjQuery等で $(function(){ }); と書いて、DOMContentLoadedのタイミングで処理を実行するようになっています。
しかし、ブラウザのページ読み込み中インジケータは回り続けるので読み込みが遅く感じてしまうでしょう。

良かれと思って書いたpreload="none"で、余計遅くなってしまうことがあるという事例だったのでご紹介してみました。

18
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
moroya
アキバではたらくWebエンジニア。最近はディレクターはじめました。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
18
Help us understand the problem. What is going on with this article?