画面が「カクッ」となる正体、知っていますか？——画像デコードと`decoding=”async”`の話
Webサイトを作っていて、「画像を表示した瞬間に、一瞬だけ画面が引っかかるような気がする…」と感じたことはありませんか？
それは、あなたのPCやスマホのスペックが悪いわけではありません。実は、ブラウザという「職人」が、目の前の作業に追われてちょっとだけパンクしている状態なんです。
今日は、そんな「カクつき」を解消して、Webサイトを滑らかに動かすための魔法の言葉、`decoding=”async”`についてお話しします。
—
ブラウザという「孤高の料理人」の悩み
ブラウザのメインスレッドは、いわば厨房でたった一人で料理をしているシェフです。彼は「HTMLを解析して」「CSSを整えて」「JavaScriptを実行して」「画面を描画する」という、とんでもない量の仕事を一人でこなしています。
ここで、画像という「巨大な食材」が届いたとしましょう。
ブラウザは画像を表示する前に、圧縮されたデータを「人間が見られる絵」に変換する「デコード」という作業を行わなければなりません。
これが、実は結構重労働なんです。
特に大きな画像が届くと、シェフは他の作業をすべて止めて、「今からデコードするから待ってて！」と画面の更新を一時停止してしまいます。これが、ユーザーが感じる「カクつき（フレームドロップ）」の正体です。
魔法の言葉：`decoding=”async”`
そこで登場するのが、`decoding=”async”`という属性です。
これは、ブラウザに対してこう指示するようなものです。
「この画像のデコード、今すぐやらなくてもいいよ。メインスレッドが空いた時に、裏側（非同期）でやっておいて！」
これを使うと、メインスレッド（シェフ）はデコードという重い作業を「後回し」にできるので、画面の更新を止めずに、他のスムーズな動きを維持できるようになります。
実践！コードの書き方
使い方は驚くほど簡単です。普段使っている``タグに、この属性を一つ追加するだけです。
これだけで、ブラウザは「ああ、この画像は急がなくていいんだな」と理解し、画面のチラつきを抑えながら、裏側で静かに準備を進めてくれます。
ただし、ちょっとだけ注意点も
「じゃあ、全部の画像に付ければ最強じゃない？」と思いたくなりますよね。でも、少しだけ立ち止まって考えてみてください。
- メインビジュアル（一番最初に表示される画像）の場合：
無理に`async`にすると、画面が表示されたあとに画像が「パッ」と遅れて出てくることがあります。これだと「読み込みが遅いサイト」という印象を与えてしまうかもしれません。
- 画面の外にある画像や、装飾用の画像の場合：
これらは`decoding=”async”`の絶好のターゲットです。積極的に使って、メインスレッドの余裕を作ってあげましょう。
—
最後に：Web制作は「思いやり」の積み重ね
ブラウザの仕組みを知ることは、実はユーザーへの「思いやり」を知ることでもあります。
「今、ブラウザは忙しいかな？」「ここは少し肩の荷を下ろしてあげようかな？」——そんな風に、目に見えない裏側の動きを想像しながらコードを書けるようになると、あなたの作るWebサイトは、驚くほど心地よく、滑らかなものに変わっていきます。
もし、Web制作の途中で「なんだか動きが重いな」と躓いたら、ぜひこの`decoding=”async”`を思い出してみてください。あなたのブラウザという「シェフ」が、きっと感謝してくれるはずですよ。
焦らず、一つずつ丁寧にコードを磨いていきましょうね。大丈夫、少しずつの積み重ねで、Webサイトはもっともっと素敵になります。
コメント