Webページ表示のオーバーヘッドを調査する方法と対処法について

Question

お世話になっております。

この度Webページ制作でサイズの大きい画像を使用しているため、サイトの表示がまばらに行われて、
サイトの表示が見づらいという現象に出くわしました。

画像サイズをある程度軽量化させていくぶん良くはなりましたが、描画は揃わないので、
より自然に見えるようにパフォーマンスチューニングをしようと思っています。

vue+alminというツールを見つけ、
一般的にこのようなツールでボトルネックを探して、描画タイミングを統一していくのだと思うのですが、
初めてまともにview側のパフォーマンスをチューニングするため、よく勝手がわかっていません。

まずは、imgとtextの描画タイミングを揃えたいのですが、それらはブラウザ側のjsコーディングのみで可能でしょうか？
また、可能でなければ、テキストを最初にレンダリングしたあと、サーバーサイドの画像を読み込むようにするなどの変更をすると思うのですが、
ここでも、画像をBASEエンコーディングなどでhtml側に吐き出すほうが、速度が向上するのでしょうか？

優先度的には、描画タイミングの一致=>ファーストレンダリングまでのスピードになります。
その他どのようなパフォーマンスをチューニングをすると良いか教えていただける方
いらっしゃれば教えていただきたいと思います。

不躾な質問になりますがよろしくお願いいたします。

Answer 1

具体的な希望する落とし所がよくわかりませんが
画像の読み込みが遅くて読み込み中のフォーマットが崩れるのが気になるなら
画像にきちんとサイズ（width,height）を指定してやり、altを付けてやるのが基本です。
ダイアルアップの頃はlowsrcなど解像度の低いデータを先に読ませるなどの工夫もありました

Comments

[退会済みユーザー]

cssのwidth,heightでレイアウト崩れを緩和出来るのは盲点でした。
いつも、デザインは他の人に任せてたり、自分でやる時は普通に指定しながら作ってるので気づかなかったです。
ありがとうございます！

Answer 2

yambejpさんがおっしゃるように、imgタグに横幅、縦幅を載せるのが基本。
1個1個画像のサイズが違うからやってらんねーって場合は、内接or外接リサイズで解決するんじゃないかな？

他に取れる手段としてはこんな感じ

• PNGはインタレース、JPEGはプログレッシブで作る

→転送サイズ制限の影響で同時にDLする画像は10個以下なので気休め

• 画像を全てbase64で記述

→キャッシュが効かず2度目以降のレンダリングが遅くなる

• CSSスプライトで複数の画像を1個にまとめる

→前段階の作業として画像のサイズ固定は必須

Webサイト全体的な話ならオライリーのハイパフォーマンスWebサイト――高速サイトを実現する14のルール
一度は目を通した方が良いと思うので是非

Comments

[退会済みユーザー]

おぉ！まさに求めてた情報です！
ありがとうございます！特に内接外接リサイズというテクニック初めて知りました。お恥ずかしい話ですがvueでDOMレンダリングしていてまさに画像サイズを調整しないことで表示に違和感が出ていました。DOMをサイズ指定しておけば綺麗に表示されるように出来そうです。
ハイパフォーマンスWEBサイト是非読んでみます！
ありがとうございます。

Answer 3

imgタグの描画タイミングに関しては、ブラウザのキャッシュ等を考慮する必要がありますが、読み込み完了時にイベントが発生するため、それを捕まえて全て画像が読み込まれた後にスタイル属性などを変更して画像を表示や差し替えなどをするとまばらに表示などの見た目は制御が可能かと思います。
imgタグの画像読み込みを監視する

Comments

[退会済みユーザー]

なるほどですね。
srcリクエストはjsと同期を取ろうと思うとやはり結構回りくどい工夫が必要なのですね。
画像の読み込み終わりのイベントでレンダリングを素早く行えば違和感なく見えるようになりそうですね。ありがとうございます。