こんにちは、だいちゃんです。

先日僕のポートフォリオサイトをリニューアルしたのですが、その際併せて ページ表示速度の改善 もやってみました。

今までは速度を意識したことが無かったので、勉強しながらのはじめての試みです。

コーポレート・ロゴBのサブセット化

今回のリニューアルに伴って、フォントを2種類サーバーから配信する仕組みにしました。理由は「コーポレート・ロゴB」というフォントに惚れたので///

でも、フォントファイルを丸ごと投げるには重すぎるし、難しい漢字や複雑な記号はまず使わない というか僕が読めなくて使えない のでごっそり削除しちゃおう、という方針にしました！

あと、「コーポレート・ロゴB」に関してはタイトル部分に使うつもりなので、あまり難解な言葉は出てこない＆ちょっとの気遣いで対処できそうというのもあります。

この記事を参考に、よく使われるであろう漢字を抽出しました。記号も結構削ってみた。

サブセットフォントメーカーというソフトにぶち込むだけの 簡単なお仕事 。

フォントのwoff化

上述のサブセット化したコーポレート・ロゴBですが、WOFFコンバーターを入れておくとオプションを選択するだけで.woffに変換までしてくれます。便利！

簡単すぎて楽しくなってきたのでGoogleFontsの「 M Plus 1p 」も僕のサーバーから配信する為、ダウンロードしてwoff形式に変換しました。これは本文に使うので、いろんな文字が必要になる可能性を考えて サブセット化はせず、変換のみ 行いました。

GoogleFontsをわざわざこっち側から配信するのってどうなんだろうって気持ちなんだけど（Google先生のサーバーの方が強くないの？）、PageSpeed Insightsのスコアはこのやり方のほうが高かったんですよね…。

スタイルシートをpreload

このくらいの量のソースコードならあんまり気にならないだろうけど一応実装しました。

Preloadにすることで、 cssのダウンロードを待たずに（並行して）ページの描画をしてくれる ので体感的に表示速度が上がるよねって話らしいです。

<link rel="preload" as="style" href="./assets/css/style.min.css" onload="this.rel='stylesheet'">

ただ、そのままだとスタイルシートであることを認識できないので、onloadのタイミングでrelをスタイルシートに書き換えてます。

参考：Webフォント「Google Fonts」非同期で読み込んでページ表示を速くする方法

2020/08/07 追記

この方法だと、Chrome以外でCSSが読み込まれず、表示が崩れてしまいます。Polyfillもありましたが、新たに別のjsを読み込ませるのは本末転倒な気がしたので一旦この方法はやめました。

画像圧縮

定番っすね。

パンダ（＝Tiny JPG）で圧縮して、Macアプリ「Image Optim」も一応通しました。パンダだけで十分そうですけど。

PageSpeed Insightsスコア

速度改善策を何もしていない状態だと

でした。 速度改善策をすべて行うと

にまで改善しました！！！

ちなみに、旧サイトはこんな感じでした。

もちろんこのスコアが全てではないですが、、、 この結果は素直に嬉しい！