表示速度の向上策をいくつかトライしてみた件
今回はブログの表示速度を高めるために行った次の事柄についてやり方をメモしておきます。
前回の結果と表示が遅い原因、解決策
まずは表示速度の測定結果のおさらいから。
結果はパソコンが52、モバイルが30、というスコアでした。内訳で赤字になっていた部分をみると、
・速度インデックス 14.0秒（パソコンは6.9秒）
・CPUの初回アイドル 9.3秒（パソコンは8.2秒）
・インタラクディブになるまでの時間 32.1秒（パソコンは8.8秒）、でした。
表示速度をあげるイコールこういった秒数を少なくしていくことの様です。
そして提案があった改善策で、モバイルとパソコンで共通した部分を抽出すると
・レンダリングを妨げるリソースの除外
・JavaScriptの最小化
・次世代フォーマットでの画像の配信、
でした。レンダリング？？？リソース？？？何のこっちゃ？？？
調べてみると、ホームページは記事の様な文章の他に広告やタイトル、記事の下の方にあるブックマークボタン等々、様々な要素が表示されて成り立っています。こういった様々な要素はコンピュータ言語でひとつひとつ記述されており、記述が完了したものから表示されるのですが、その過程でいろんな部分にムリ・ムダがあるみたいなんです。
上述の提案された改善策は平たい言葉でいうと「もっとスッキリさせたほうがいいよ」ということだと理解しました。そこで表示をスッキリさせるために次の様なことをやってみることにしました。
はてなによる広告の非表示
はてなブログではところどころに広告が挿入されています。
proグレードだとこれを消すことが出来る、とのこと。私はproグレードなので、とにかくやってみることにしました。先ず、ダッシュボードの画面で設定をクリック、
次に詳細設定をクリック、
詳細設定の画面をスクロールしていくと、中盤に広告を非表示、という項目があります。
ここで「はてなによる広告を表示しない」にチェックを入れて一番下の「変更する」をクリックすれば終わりです。
はてなによる広告を非表示にしたことで表示速度がどの程度上がったのかをチェックしてみます。
ここにサイトURLを入力してスコアをチェックすると
モバイルが（３０から）４２へアップ、
パソコンが（５２から）８７へアップしていました。
画像の圧縮
過去に書いた記事では図をいくつも貼り付けていましたが、これをより小さい容量の形式で張り付け直します。私の場合ですと、キャプチャした画像をパワーポイント等で編集した後、保存した画像を貼り付けています。このとき、保存する形式によってファイルサイズが異なります。例えばある画像について保存するファイル形式によってどの程度ファイルサイズが異なるのか調べてみたところ、
・PNGファイル 252KB ←これまで何気なく使っていた形式
・BMPファイル 4.42MB
・GIFファイル 130KB
・JPGファイル 99KB
でした。BMP（ビットマップ）という選択肢はなしとして、GIFやJPG形式で貼り付け直せばちょっとはマシになりそうです。どの形式で保存するのがよいかは対象ファイルの種類によって（文字リッチなのか写真リッチなのかとか？）も微妙に変わってくるようですが、ひとまず今回は容易に貼り付け直すことが出来るところをすべてPNGからJPGに置き換えてみました。
さて気になる表示速度の再測定結果です。
モバイルが４３へ（１ポイント）アップ、
パソコンが８８へ（１ポイント）アップ、ということで共に１ポイント改善しました。
まとめ
・はてな広告の非表示と画像の圧縮で表示速度が向上しました。
・ポイントはモバイルが３０から４２へ１２ポイントアップ
・パソコンが５２から８８へ３６ポイントアップ
今後の予定
その他の表示速度改善策として
JSやCSSのインライン化
amp検討
余計な修飾をカスタマイズ
など行っていって結果を徐々にアップしていこうと思っています。
ではでは。
