こんにちは
システムチーム マネージャー / プログラマー のAです。
現在、
大規模なパフォーマンスチューニングを行っており、
そのノウハウを伝えたく、ブログに残します。
今回はテクニックよりの話にします。
パフォーマンスチューニングに関しては以前にも書きましたが、
その続きです。
１）見えていないHTMLは作らない
パフォーマンスを最も向上させる技法として
「見えていないHTMLは作らない」があります。
具体的に説明します。
例えば以下の画面は、無トラ直後のデキテル編集画面ですが、
この画面の中には、見えていないHTMLが大量に存在します。
よければ一度考えてみてください。
・・・・・
ピンときましたかね？
ざっくりとですが正解を伝えます。
① パレットに関して、アイコンホバー時に出てくるHTML全て
② 画面右のタブに関して、クリック・ホバー時に出てくるHTML全て
③ チャットサポートに関して、クリック後に表示されるHTML
④ ２枚目以降のスライドショー
⑤ スライドショーよりも下部に位置するHTML全て
の5つです。
これらには
「人が何らかの行動をして初めて表示される」
という共通点があり、
逆にいえば、
「人が何らかの行動をするまでは表示しなくてOK」
と言えます。
だから、
「見えていないHTML」の作成タイミングを「人が何かをした後」にずらします。
結果的に、「見えているHTML」の作成タイミングが前倒しになります。
すると、体感的に「早くなったな」と思うわけです。
その際に使うのが、「非同期」の技術になります。
非同期については、過去のブログを参照してもらえればと思います。
※※余談※※
物理学で、シュレーディンガーの猫 という有名な話があり、
合わせて考えると面白いです。
「表示するか否か分からないHTMLは、表示すると決まってから作ればOK」
という感じかなと思います。物理学とは逆の発想です。
【引用】「シュレーディンガーの猫」とは？意味や使い方を解説！
２）変わらない（静的な）HTMLは作らない
さて
「変わらないHTMLは作らない」という発想も、
高速化に関して、非常に強力な武器です。
先ほどの画面をもう一度見てみます。
次は
「お店によって変わる（動的な）HTML」がいくつあるか考えてみてください。
・・・・・
これもざっくりと正解を伝えます。
① メニューの文言
② 店舗名・電話番号
③ <h1>タグ
④ スライドの「車検」の文字
⑤ デザインに毎に変更されるHTML
ぐらいのものではないでしょうか？
⑤ を考慮しても2，30程度。考慮しなければ5，6程度の要素数です。
たかが５，６程度の動的なHTMLを作るために、
バックエンドで処理を行う必要は有りません。
静的なHTMLをそのまま出力して、
フロントエンドで動的なHTMLを書き換えればOKです。
今回であれば
デザイン毎に静的なHTMLを用意しておいて、
そこに名前などの動的なデータを当てはめていくイメージになります。
画面表示以外に
DBへのデータ登録など必要な処理があるなら、
ガイドを試してもらっている間に作ればいいです。
それが出来れば、
少なくとも、無トラ直後の編集画面のロードは大幅に短縮できます。
コードを想像するとややこしいですが、確実です。
一方で問題もあります。
変わらないHTMLが変わってしまったときに
どうやって対応するかは、とても大きな問題です。
変わるタイミングを厳密に調べて、書き上げたとしても
新しいタイミングが生まれると、プログラムの調整が必要になります。
この点を上手く対応出来る仕様を着想出来れば、
着手してもいいかなと思います。
今回はここまでにします。
テクニックと心構えについて、まだ色々とあるので
次回のブログで共有出来ればと思います。
