Webサイト高速化技法（３）：きれいなHTMLを書く
今回は前回の予告通り、サイトの内部に話を移していきます。
きれいなHTMLとは？
もうお分かりだと思いますが、「きれいなページ」ではなく「きれいなHTML」ですので、見た目の問題ではなく、文法通りにHTMLが書かれているかが問題になります。ブラウザは当然、文法通りに書かれていた方が気持ち良く読めますし、早く読めます。その分表示も早くなります。一度ブラウザの気持ちになって HTML を読んでみる事をおすすめいたします。
たとえば、「レンダリングエンジン」
ブラウザは、レンダリングエンジンという描画エンジンを抱えています。インターネット経由で取得した HTML や CSS の文法を読解し、画面描画の為に、どこに何を書くのか？を判断して描画していきます。
みなさんも今までにいろんなサイトを見てきたと思いますが、それらの表示パターンが何通りかあったのは気付いているのではないでしょうか？
(1) しばらく白い画面が続いて急に画面全体が表示されるパターン
これは古いサイトに良くあるパターンです。テーブルレイアウトを使っているとよくこの現象が出るのですが、テーブルで指定したサイズと画像で指定したサイズ、実際に読み込んだ画像のサイズが違うと全部が計算終わるまで表示が出来なくなり、表示されません。つまり、描画に必要な画像を全て読み終わるまでは真っ白な画面が続く事になります。
こうならないように、テーブルレイアウトは使わずに、画像の width/height 属性も全部に書くようにしてください。
(2) 読み込んだ画像から次々表示されるのでカクカク感があり、読み終わるまでクリックしづらいパターン
このパターンが最近多いのではないでしょうか？読み込んでいる最中に先にページの下部が表示され、そこをクリックしようとした瞬間にその上部が読み込まれ表示されることで、クリックした場所がズレて期待したページではないページへ移動したこともみなさんあると思います。
最近は ajax 技術を使って、それぞれのパーツを別々に読み込ませているサイトが増えてきています。その場合に、それぞれのパーツのサイズが決まってないとカクカク表示され、その度にレンダリングエンジンが再計算をして表示し直す為、それなりにCPUリソースも使います。
できるだけユーザーの為にもカクカク表示させないように、パーツの width/height をしっかり定義しておきましょう。
(3) 全体の枠（レイアウト）が先に表示されて、そこに次々と画像が貼り付けられていくパターン
実はこれが最も早く表示され、かつ、ユーザーにやさしい「きれいなHTML」です。しかし、ここまでこだわっているサイトが少ないのも実情です。上の2パターンは表示が終わるまでレンダリングエンジンが計算しっぱなしで、それなりの負荷も与え、読み終わるまでクリックしづらい状況が続きます。このパターンでは、読み終えた部分から表示され、レンダリングエンジンはレイアウトの再計算をすることが無いので負荷もなく、表示も早く、読み終えてないパーツも alt で説明を入れておく事で、読み込んでいる最中でもズレる事なくクリックしやすいのでユーザーにも優しいです。
対応方法は至って単純です。width/height が必要な項目（画像やテーブルなど）に全て width/height を定義すれば良いのです。そこで、読み終わった画像とのサイズの差が無いように注意が必要ですが、定義しておく事で、表示も負荷も軽くなります。何よりイライラが無くなって人にやさしいサイトになります。
ほかにも注意すべき点
ほかにも、最近気になるページとして「ブラウザのローディングが動いてないのにローディング中」のページがあります。ajax 技術を使っていて、タブのところのグルグルが止まったので、読み込み終了かと思ったら、まだ次から次へ表示される。しかもローディング中かどうか表示されてないので、いつ終わったかが分からない。こういったページが増えてきています。関係者はどこまで読めばクリックできるか分かるので気にならないのかもしれませんが、一般の人が見ると、「終わったの？まだ待った方がいいの？」と悩んでそれがストレスになる事もあります。 ajax とはいえ、ローディング中の場合はその旨表示させる事を義務と考えた方が良いと思います。
今回はレンダリングエンジン（おもに width/height ）を取り上げましたが、他にもいろいろあります。まずはこの辺りから手をつけてみるのも良いかと思い3回目に紹介させていただきました。
4回目は未定です。
それでは。
