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

2019.06.13
2019.08.04
Webスキル

よこのじ（@yokonoji_work）です。

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

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

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

1. 第101掃海隊ページの表示速度の分析
2. 要改善点の整理と結果
3. まとめとあとがき

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

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

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

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

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

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

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

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

RECOMMENDATION（勧告）を見てみると・・・？

これはいけませんね！画像のキャッシュが効いていないようです。実際、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したら61.5%もデータサイズが小さくなって、転送が速くなるじゃん！ボタンのgif画像１つ分は小さくなるよ！

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

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

ちなみに、ディレクトリを見てみると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掃海隊」と「ｗｅｌｃｏｍｅ　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">
　　 ｗｅｌｃｏｍｅ　to　１０１ＭＤ</font></i></font></p>