しょうBlog

簡単にできるWebサイトの高速化方法3選

2021/02/07

先日、以下のツイートをしました。


僕のツイートにしてはすごく反応がよかったので、今回は簡単にできる Web サイトの高速化方法について解説していきたいと思います。

なぜ Web サイトを早くする必要があるのか


この記事を読んでいる方の中には「なぜ Web サイトを早くする必要があるのか分からない」と言う方もいるかもしれません。
そこでまずは Web サイトを高速化することでどのようなメリットがあるのか、ざっと見ていきましょう。

主なメリットは以下の通りです。

  • 速度が速いサイトの方が Google からの評価が高く、検索順位が上がりやすいので結果的にアクセスが向上する
  • 速度が速いサイトの方がユーザーにとっても使いやすく、ストレスが小さくなる


この 2 つはそのサイトの売り上げにも関わるので絶対に意識しなければいけません。

高速化するには


ここからは具体的な方法について見ていきます。

  • 画像の最適化
  • async・defer 属性の付与
  • CSS のセレクタの簡素化


順番に見ていきましょう

画像の最適化


まずは画像の最適化です。
画像はサイトの中で 1 番重い要素なので、1 番最初に手を付けなければいけないところだと思います。

画像の最適化にはいくつかやるべきことがあります。具体的にはリサイズ、圧縮などがありますが、個人的に 1 番簡単で、効果があったのは
画像のフォーマットの変更です。詳しい解説が知りたい方はこちらが参考になったのでこの記事を読んだ後に見ていただけたらと思います。

PNG や JPG から、WebP, SVG に変更するだけで大きく変わります。WebP とは、Google が開発した次世代画像フォーマットのことです。web に最適化されているらしく jpg や png よりも軽いので、サイトスピードの改善に繋がりました。
実際にやってみたところ、元の画像のサイズが 64KB だったのに対し、5KB まで軽くなりました。
また、SVG はベクター画像という種類の画像で、他のフォーマットの画像がピクセルという色情報がついた点の集まりで構成されているのに対し、SVG は画像の直線や曲線を数式で表したもので、容量が小さいのでシンプルなロゴやアイコンなどに使用すると効果的だと思います。

async・defer 属性の付与


こちらはscriptタグにasync・defer属性を付与することによって、JavaScriptファイルを非同期で読み込むことにより、HTMLのレンダリングをストップすることなくJavaScriptのダウンロードを行うことができます。
また2つの違いはJavaScriptを実行するタイミングです。deferは、HTMLの解析が終わるまでJavaScriptを実行しないのに対して、asyncは、JavaScriptのダウンロードが終わり次第JavaScriptを実行し、その間はHTML解析が止まります。
なので基本的にはdeferを使い、SNSのページプラグインのような他のファイルと独立したプログラムを実行する際にasyncを使用してみるのがいいと思います。

CSS のセレクタの簡素化

こちらは小さな変化ですが、簡単にできることなので入れさせて頂きました。
CSS のセレクタの簡素化と言われると難しそうに聞こえるかもしれませんが、つまりparents > .son のように書かずに、極力 .son で完結させるということです。理由はブラウザがCSSを解析する際に、セレクタを右から左に調べていくので、セレクタが多ければ多いほど時間がかかってしまう、という問題があるためです。

まとめ

重要でいうと上から順に、

  1. 画像の最適化
  2. async・defer 属性の付与
  3. CSS のセレクタの簡素化


かなと思います。

他にもJavaScript内でDOMへのアクセスは何度も行わずに、あらかじめ変数に格納しておくことやローディング画面を用意することで体感的な待ち時間を減らすなど、たくさんの方法があります。しかし、今回解説したことを努力したとしても0.1秒以下しか変わらないなんてこともあるでしょう。
サイトの表示高速化はこうした地道な小さな積み上げをしていくしかないので、頑張っていきましょう！！

back to home