Webサイトパフォーマンスとは何か？まずは知りたい、サイト表示速度が振るわない6つの原因
最近鹿児島はめっきり暑くなってきましたね・・・。
こんな日はクーラーガンガン効いた部屋でホームページを制作するのが1番！
ということで、今回はMATEREATEがサイトを制作する上で最も重視している「Webサイトパフォーマンス」について話していきたいと思います。
そもそも「Webサイトパフォーマンス」って何？
一言で言うならば、「サイト表示速度」のことです。
近年、Googleのアップデートにより、SEOにもこの「サイト表示速度」が重視されるようになってきました。
サイトのスピードに関して、サイトを重くしてしまっている原因は多岐に渡り、また、その対処法も様々です。
では、まずはサイトを重くしてしまっている原因から見ていきましょう！
（自分のサイトのヘルスチェックとしてもご活用ください^^）
【遅くなる原因】
一部ではございますが、大方上記のような事象が、サイトを重くしてしまっている理由となります。
それでは、上記の原因に対し、それぞれどのような対処が考えられるのかを見ていきましょう！
（今後それぞれの項目に対して、詳しく書かれた記事を投稿していきますので、まずは簡潔に記載いたします！）
1.画像の多用がされている
こちらに関しましては、暗に画像を絶対に使っちゃダメ！ということではないです。
ユーザー（閲覧者）にとって見やすいサイトを仕上げるためには、写真を上手く使用したデザインが必要不可欠ですよね。
しかしながら、デザインの中にあるこのようなボタン。
よくありがちですね。
このボタンを画像使用して実装するか、CSSで表現するかの違いといったところです。
ボタン1つであればそこまで影響はないかもしれませんが、最近流行りのLPデザインには事ある毎に「お問い合わせはこちら」ボタンが多用されていますね。（あるサイトのボタンを数えてみたところ、1ページに10個はありました。）
それら全てを画像使用で実装すると、サイト全体の容量として大きな違いが出てきます。
まとめ：ボタンなど、CSSで表現できるものはCSSでの構築が望ましい。
2.画像の最適化がされていない
最適化ってなんだ？となるかもしれませんが、お伝えしたいこととしては3つございます。
各端末によって適切な画像を
スマホ表示の際に横幅1500pxの画像を使う必要があるでしょうか。
例えばiPhoneXの横幅は375pxしかありません。それならば明らかに横幅1500pxの大きな容量の画像を使うよりも、大体横幅400pxぐらいの小さい容量の画像を用意することが望ましいですね。
そのためにはPC表示時ではこの画像、SP表示時はこの画像をと、画像の用意・分岐の指定に手間がかかってはしまいますが、ないがしろにはできない項目でしょう！
画像軽量化（画像圧縮）
今日では画像の質を落とさずに、容量だけを70-80%ほど削減してくれるツールが多く存在します。
ひと手間となりますが、サイトに載せる全画像を、そういったツールで一度処理を施しておくだけでも、大きな違いが現れます！
SNSアイコン等を画像ではなくFont Awesome使用で表現
SNSアイコンや簡易的なアイコンであれば、画像をサーバーにアップロードしimgタグを使って読み込むよりも、Font Awesomeの使用を検討することが望ましいでしょう！
更に求めるならインスタアイコンを単色にしちゃうのも手ですね（笑）
まとめ：各端末に合わせ、なおかつ最適化を施した適切な画像を用意し、実装する。アイコンに画像は使わないことも検討。
3.どのページでも全てのCSSファイル（等）を読み込んでいる
例えばですが、TOPでしか使用することの無いスタイルを別ページでも読み込んではいないでしょうか？
必要なページに必要なスタイルだけを読み込ませることで、無駄な処理を省くことができ、結果的にページ速度を改善させることも可能です！
CSSだけではなく、各種ファイルの読み込み分岐も手間ではありますが、やらないよりは確実にやったほうがいいですね！
まとめ：必要なページに必要なだけの情報を読ませるための条件分岐を。
4.jQueryのプラグイン多用
サイトに求められる機能の増加に伴い、jQueryの便利なプラグインを利用して、色々な動きをサイトにつけることができるようになりました。
便利なのでついつい手を出しがちですが、その分読み込まれるデータ量は自ずと多くなってしまいます。
プラグインを頼らずともCSSのみ、またはjQueryのみでできることは非常に多いので、まずは「この機能（動き）には本当にプラグインが必要かな？」と疑ってかかりましょう！
補足として、相当量の十分な知識が必要となりますが、更に最速を目指すのであればやはり素のJavaScriptで書かれたものが最強となります・・・（笑）
とは言ったものの、限界はありますので、時にはプラグインを使用するという諦めも肝心です。
ただ、改善において十分に検討すべき事項であることは変わりませんので、適宜見直しを測りましょう！
まとめ：極力プラグインの使用をしないよう、しっかりと検討し、そして努力する。
5.WordPressにおいて、WordPressのプラグイン多用
WordPressでは多種多様なプラグインが配布されており、高度な機能でもそこまでの知識を必要とせず実装することができるようになりました。
その便利さ、使いやすさも相まって、WordPressは単なるブログサイト専用というわけではなく、大衆に支持されるCMSとなりました。
しかしながら、プラグインには便利さの裏に非常に多くの情報が詰まっております。
自作するとかなり難易度の高い機能を、ボタンひとつで手軽に使えてしまうのですから、それだけ複雑な処理がなされていることになります。
そのため、3番と同じように、特にプラグインの機能を必要としないページでも、そのプラグインを読み込むようにしたまま構築してしまうと、膨大な（そして必要の無い）処理を（全然関係ないのに）各ページに施してしまいます。
分かりやすい例で言えば、プラグインにより構築されたコンタクトフォーム、コンタクトページ以外で必要でしょうか？
あってもTOPの下部辺り、という構想がほとんどではないかと思います。
他にはプラグインによる関連記事表示や、記事内に内部リンクを貼り付けた際にポストカードのようになるプラグイン、これまた投稿ページ以外で必要でしょうか？
このような処理を避けるために、ページ毎に読み込ませるプラグインは適宜見直しましょう！
更に追い求めるならば、やはり最強は自作ですね・・・（笑）
まとめ：プラグインの処理は複雑であることを理解し、適宜条件分岐、もしくは使用を控える努力を。
6.コードの縮小化をしていない
縮小化ってなんぞや？
ですが、画像を見れば一発で分かると思います（笑）
なんだかパッと見すごいことになってますが・・・。
要は構築の際に書かれたコードの余分なスペースや改行をなくすことです。
コーダーにはかなり見にくいですが、コンピューターにとっては見やすさなんて関係ないですね！
これだけでなんと、データ容量30～50%の削減！
是非お試しを！（もちろんバックアップは取りましょう！修正の手間が大変なことになります・・・笑）
まとめ：何事も最後のひと手間が大事
・総括
以上、Webパフォーマンスについて見ていきましたが、いかがでしょうか？
あなたのサイトでも見直すに値することも含まれていたのではないでしょうか！
正直各項目について、まだまだ語り尽くせておりません・・・。
そのため、今後更に深く掘り下げた記事をガンガン投稿してまいりますので、どうかお楽しみにお待ちいただければと思います！
サイトの表示速度についてお悩みの方へ、少しでも参考になれば幸いです。
ではでは！！！