爆速サイトへの道

サイトがスマホやタブレットから見ると激重だったため高速化を試みてみました。

【やったこと】
・GoogleFontsの非同期読み込み（参考）と読み込むfont-weightを1つだけにする
・FontAwesomeのファイルDL（参考）と非同期読み込み（参考）
・画像をWebPにする（変換ツール）
・キャッシュの有効期間を長くする
・ぐちゃぐちゃだった追加CSSの整頓
・てがろぐに載せていた画像の多いエントリ（#過去ログなど）を一覧外に下げる（タグや検索などで呼び出した時のみ表示する）

特に赤字の3つは影響が大きかったようでかなりの改善が見られました。

続きを読む 🔽【Google fonts】
Webフォントを使わないという選択肢もありましたが、メニューやタイトル部などにどうしてもこのかわいいフォントを使うのを諦められなかったので頑張りました…。（使ってるフォントはKiwi Maruです）
非同期の効果はとても大きいですが、それ以前に欲張って太さの違う同じフォントを3種類も読み込んでいたのがかなり大きな要因でした。日本語フォント３つも読み込んだら重くなるに決まってる…。一つに絞ったら劇的にサクサクに。

【FontAwesome】
矢印やカレンダーやハートなどの小さなアイコンに使っています。
これもいいスパイスになっているのであきらめたくなく以下同文。

【WebP画像形式】
画像をWebPにしたことで表示速度がちゃんと改善されたことには驚きました。
もともと、jpgの状態でも500kb以下くらいには抑えていたのでそんなに変わらないだろうと思っていたのに実際は目に見えて変わりました。
上からジジジ…と表示されることがほとんどなくなりましたね。
創作サイトは画像が命だからね…。ここに関しては手間を惜しまず過去分も可能な限りWebPに置き換えていきます。
（Wordpressの方は画像アップ時に自動で変換してくれるプラグインもありますが、ギャラリーに使用しているプラグインの方が自動変換に対応していないので結局手動で順次差し替えていきます…。）

そのかわり、てがろぐではWebPの縦横サイズの指定ができないと言われてしまい、画像の読み込みが追い付かない時にガクガクっとなる地味な不具合（仕様）がでるようになりました。
読み込みが早い方が大事なのでここは妥協できる範囲かと思います。

【Google先生の評価やいかに】

△本館はもうちょっと頑張らないとだけど


△てがろぐはもう大丈夫そう

【次にやること】
・画像をWebP形式に順次差し替え　完了
・Wordpressテーマを軽くてサポートが継続されているものに変更する（デザインは大きく変えずに現状維持）
　→SketchはAutomattic社製の公式テーマだったのでとりあえず継続利用してても心配無用そう。

#カスタマイズ #Wordpress #高速化