サイトの表示速度を意識して、最初にやること（画像・フォントの最適化）

「表示速度が遅い気がする」と思ったとき、いきなりCDNだのSSRだの難しい話に飛びつく必要はなくて、大抵は地味な部分から見直すだけで十分改善します。自分がよくやる順番を書いておきます。

まず画像を疑う

一番効くのは大体画像です。スマホで撮った写真をそのままアップロードしてないか、一度確認する価値があります。実際、自分も昔うっかり4MBの画像をそのまま貼ってしまい、表示が明らかにもっさりしていたことがあります。

表示サイズに合わせて圧縮・リサイズするだけで、体感速度がびっくりするほど変わることが多いです。

次にフォント

Webフォントは見た目こそ整うんですが、読み込みが終わるまで文字が出なかったり、出た瞬間レイアウトがガタッとずれたりすることがあります。font-displayの設定をいじるだけでこの手の違和感はだいぶ軽減できるので、地味に見直す価値があります。

あとは使ってない外部ライブラリが残ってないかのチェックです。「あ、これ試しに入れたけど結局使わなかったな」というスクリプトが、知らぬ間に速度のボトルネックになっていることがよくあります。

大掛かりな最適化に手を出す前に、まずこの3つを見直すだけでも体感速度はだいぶ変わってくると思います。