UPDATE：2021.10.29
- CATEGORY
サイトスピードが遅くなる原因と改善の方法【画像、WEBのフォント、外部読み込み要素】
Contents
遅くなる主な原因と改善方法をまとめてみました。
サイトスピードが遅くなる原因1：画像
単純に大きな画像を利用していたり、画像を多く使ったサイトは表示までのスピードが遅くなります。しかしデザインにもよりますが、画像が一切ないサイトというのは寂しいですよね。
画像を利用しつつサイトスピードを改善する方法はあるので安心してくださいね。
①画像の圧縮
圧縮することで画像サイズを軽くします。印刷する場合と違ってWEBの画像は圧縮してもある程度きれいに見えるので問題ありません。どんどん圧縮して軽くしましょう。②画像の遅延読み込み
ページのロード時に画像をすべて読み込むのではなく、画像を画面に表示する段階で読み込むようにすると表示スピードが速くなります。③次世代画像フォーマットの利用
WEBPと呼ばれる軽量の画像フォーマットに変更することで画像がより軽くなります。（※ただしWEBPはまだまだ一般的とは言えないフォーマットです。また、ワードプレスを利用していれば自動でWEBPに変換してくれる部分もありますが、手動で画像の変換をする必要が生じる部分もあります。その場合、専門の担当者以外が画像を変更するなどの修正を行う場合にWEBPでないために画像が変更されないといった混乱が生じるなど、メンテナンス面でのデメリットも考えなくてはなりません）
サイトスピードが遅くなる原因2：WEBフォントの利用
フォントはサイトのデザインで重要な部分です。サイトの雰囲気にあったフォントをWEB上でも利用したい！ という要望に応えて、Googleが便利なWEBフォントを配信しています。
（他にも有料で利用できるWEBフォントもあります）
WEBフォントの最大の利点はWEB上で異なるデバイスからでも同じフォントを見ることができる点です。
しかしこのWEBフォント、サイトスピードを下げる要因の一つにもなっています。
（むしろ一番の原因になっていることが多いかもしれません）
外部からフォントデータを読み込んでいるので、サイトの表示スピードに影響するのです。
（とくに日本語はひらがな・カタカナ・漢字と文字数が多いのでデータの量が大きくなります）
WEBフォントを利用すると、先ほどお伝えしたとおりWindowsパソコンやMacパソコン、iPhoneやandroidスマホなどデバイスを問わずに同じフォントでサイトの文字を表示できるのが魅力ではありますが、サイトスピードが気になる場合はWEBフォントを諦める、という判断も時には必要です。
（その場合はフォントのサブセット化や、各デバイスに入っているデフォルトのフォントで一番イメージに近いものが表示されるようにするなど代替手段を利用しましょう）
ちなみに…
游ゴシックフォントはWindowsとMac両方のパソコンに標準搭載されている便利なフォントです。
そういう異なるデバイスに共通で入っているフォントをベースに使うとWEBフォントを利用する必要もなくなりますね。
（しかしスマートフォンには游ゴシックは入っていないので、有料のWEBフォントを利用するか別のゴシックフォントを表示することになります。）
また、androidのスマホには明朝体フォントがデフォルトでは入っていません。
デザイン上どうしても明朝体をandroidスマホでも表示させたい場合は画像で対応するかWEBフォントを利用する必要があります。
このようにフォントのWEB上での表示に関してはサイトスピード以外にも様々な問題がありますので、また別の機会にまとめられたらと思います。
サイトスピードが遅くなる原因3：外部読み込み要素
上記のWEBフォントも「外部読み込み要素」に含まれるのですが、他にも『YouTubeの動画を表示させる』『グーグルマップを表示させる』『instagramを埋め込んで表示させる』などの外部読み込み要素もサイトスピードに影響します。
速度が気になる場合、「動画をサムネイルだけ表示させてクリックで再生させる」「動画をYouTubeからの読み込みではなく、軽量化したうえでmp4で直接埋め込む」、「グーグルマップは地図の画像に変更する」、「instagramは埋め込みではなく、画像をリンク形式で並べてからクリックでinstagramへ移動させる」などの変更を考えるといいかもしれません。
ちなみにレンタルサーバーの性能によっても表示速度が大きく変わります。
以上、サイトスピードについて遅くなる主な原因と改善の方法でした。
