【爆速HP】阿部寛 超えと噂の海上自衛隊「第101掃海隊」のホームページの表示速度を分析してみた

よこのじ(@yokonoji_work)です。

Qiitaに『海上自衛隊のHPが阿部寛のライバルとして名乗りをあげた』という記事が上がっていました。

海上自衛隊「第101掃海隊」のページのパフォーマンスはなかなか良いらしいですが、爆速HPといえば「dev.to」か「阿部 寛のホームページ」と相場は決まっているわけです。この世界は甘くない。

今回は、第101掃海隊のページの表示速度に関する分析を行ってみましたので、ご紹介します。

第101掃海隊ページの表示速度の分析

表示速度分析ツールによる結果

まずは、GoogleのPageSpeed Insights による分析結果を確認してみます。

結果は・・・モバイル・パソコンともに余裕のスコア100

第101掃海隊 モバイルのpage speed

このyokonoji.workもかなり頑張りましたが、モバイル97なので、この時点で「やるな・・・」という感想。

ページのコンテンツが表示されるまでの時間を示す「速度インデックス」は0.9秒(モバイル)なので、かなり速いのがわかりますね。

第101掃海隊の表示速度

 

GTmetrix による分析結果も見てみましょう。

スコアは悪くないですよ!

GTmetrixのスコア

RECOMMENDATION(勧告)を見てみると・・・?

GTmetrixの分析結果

これはいけませんね!画像のキャッシュが効いていないようです。実際、HTTPレスポンスを見てもキャッシュの指示をしている様子はありません。

しかし、ChromeやFireFoxの検証ツールで確認した感じではキャッシュされていましたので、ブラウザが良きようにやってくれているのかもしれません。とりあえず問題はないみたいです。

それよりも気になるのが、6つのgif画像。下図の赤部分がjpgで、黄色部分がgifです。そのボタン、gifだったんだという感じです。

トップページの画像

このボタン、1つ約1.5KBなので6つで9KBくらいあります(ちなみにjpgの方は、上から2.4KB, 29KB, 13.8KB)。

ここについては、軽量化を徹底してテキストでメニュー表示している阿部寛のホームページと比べるとマイナス点です。

課題は見つかりましたが、これは伸びしろですねぇ。

ブラウザ検証ツールから見えてきたこと

PageSpeed InsightsやGTmetrixに頼りすぎるのも面白くないので、Chromeの検証ツールを使って自分でも課題発見を行いました。

レスポンスヘッダー

シンプルすぎる Response Headers・・・。これはgzipされていませんね(gzipはファイルを圧縮してデータサイズを小さくしてから転送する仕組みです)。

HTTP Compression Testというサイトでgzipされているかチェックしてみると、ほらやっぱりされてない。

gzipによる削減率

gzipしたら61.5%もデータサイズが小さくなって、転送が速くなるじゃん!ボタンのgif画像1つ分は小さくなるよ!

gzipするとサーバーでの圧縮作業とブラウザでの復元作業が入るので、たった3KBのファイルだとgzipするのとどっちがいいのか微妙ですが・・・

画像サイズについては、表示サイズとほぼ同じサイズが用意されており、爆速表示を意識した(?)ものになっていた。

ちなみに、ディレクトリを見てみるとbotann名前で、お茶目な一面を知ることもできた。

ディレクトリbotann

爆速のためのソースコード

ソースコードを見てみると、スタイルはインラインで記述されているのがわかる。

<div style="width : 71px;height : 66px;top : 9px;left : 283px;
position : absolute;
z-index : 5;
visibility : visible;
background-image : url(1211.jpg);
" id="Layer5">

そのため、CSSの外部ファイル読み込みは行われていない。これにより、HTTPリクエストが減るので表示が速くなるというわけだ。細かなところにも爆速表示への配慮が見られる。

字数を減らすために、タイトルすら記述しない徹底ぶりである。

<title></title>

そして、気になる部分・・・

スペースでデザインしている

選択している箇所なのですが、スペースを入れて「第101掃海隊」と「welcome to~」を左右に配置しています。余計なスタイルを当てるより、この方法の方が効率的ということですな。

<p><font size="+4" face="AR P行書体M" color="#000099"><i>第101掃海隊</i></font>
              <font color="#ff0000"><i><font size="+3" face="AR P行書体M" color="#000080">
   welcome to 101MD</font></i></font></p>

minifyもされていないのは、残念なところです。

要改善点の整理と結果

ここまでの調査で分かった、改善したい点。

  • ボタンのgif画像を読み込まない
  • gzipする
  • minifyする

画像をTinyJPGで圧縮をすると、33%もデータサイズを小さく出来たりするのですが、画像は表示クオリティを求める場合もありますし、今回は勘弁してあげます。

画像の圧縮

そういうわけで、上記3つの改善を行ってみました。

メニューは貧相になりましたが、爆速な表示速度のためならやむなし。

改良後の表示

結果、元々速かったパソコン表示での結果ですが、0.1秒ほど改善されました!!

改良前後

リンクなどの操作をしてからブラウザが表示開始するまでの時間(FID)は、130ミリ秒から20ミリ秒まで大きく改善されています。待たすことなく表示開始するため、体感的に良い印象を与えられるでしょう。

改善により、素晴らしい結果が得られたと言えます。

まとめとあとがき

冗談交じりに海上自衛隊「第101掃海隊」のページの表示速度を分析してみましたが、これだけシンプルなページだと、何をしようとも雀の涙でしたね。

0.1秒の改善とかどうでもいい・・・。

デザインの方は、第101掃海隊の方が独自に作られているのでしょうか?上のディレクトリにある海上自衛隊のページは、とても今風ですのに。

https://www.mod.go.jp/msdf/mf/other/butai/hp/101md/101home.html

海上自衛隊

今回、第101掃海隊のページをじっくり見ることが出来た機会となり、良かったです。

海中の機雷を排除する「掃海艇」という存在を知ることが出来ましたし、機雷は安価で破壊力が大きいという脅威の武器であることも知りました。

また、『東日本大震災や平成30年7月に発生した西日本豪雨の際は、給水や物資輸送など災害派遣に従事しています。』このような一文もあり、私の知らないところで日本を守ってくれているんだなぁと思いました。

活動を知ってもらうって、とても大事!

海上自衛隊の中でHTML, CSSとか出来る人いたら、良い感じに仕上げてあげてほしいな~

 

表示速度はSEOにも影響を与えるものなので、あまり考えたことなかった方はちょっとだけでも意識してみてください。