お久しぶりです。

WEB制作チームのウサナミです。

最近自分の作ったサイトが他の社員の方達と比べて幾らか読み込みスピードが遅いような気がして、

色々と調べていました。

その中で誰でも簡単に出来るサイト軽量化の方法も幾つか見つけたのでその辺りを中心に紹介していきます。

画像を整理する

WEBサイトの読み込みを重くする一般的な要因は画像とjavascriptです。

その中でも画像は読み込みが重いからという理由でサイトに載せないという選択肢を取るのが難しいものです。

ですが、容量を削減したり読み込ませ方を工夫したりすれば

サイトの読み込み速度を大幅に改善することができます。

画像を圧縮する

サイト等が無料で提供している画像を圧縮するツールを使えば、画像の見た目を変えずに画像の容量を半分以下まで落とせることがあります。

画像をいっぱい使っているサイトや重たい画像を使っているサイトはこれを導入するだけで劇的に読み込み速度が変わることがあります。

画像のサイズに気をつける

ここ最近まで私がよく行っていたことなのですが、PCと比べて解像度が２倍になるスマホサイトを意識しすぎて、画像をPCでの表示サイズより幾らか大きめに書き出していました

しかし、無理に画像のサイズを大きくしてもそこまで大きくサイトの見た目が変わらないということにここ最近、今更になって気付きました。

ですので、同じようなことをしていた方は無理に大きいサイズで画像を書き出すことを意識するのではなく、サイトで表示させたときに見た目が粗くならない程度で書き出すことを意識していったほうがいいと思います。

縦*横のサイズを指定する

つい最近知ったのですが、画像にサイズを指定していると画像を読み込む前から指定した分のスペースを確保してくれるので、その分の読み込み速度があがります。

逆に指定していないとスペースを確保してくれないので、テキストを読み込んだ後に画像を読み込んだ場合、画像のサイズ分テキストが下にずれるため、読み込み速度が下がるようです。

javascriptなどで画像の読み込みを遅延させる

画像があるところまでスクロールした時に初めて画像が読み込まれるscript（遅延ロード）を導入すると本来はページが読み込まれた時に画像も一緒に読み込まれるのですが、その動作を省略出来るのでサイトの読み込み速度を高速化出来るのでとてもオススメです。

昔からある技ですが、今でも色んなサイト管理者の方が利用しています。

有名なものではLazy Load等のプラグインがあります。

CSSを整理する

画像やjavascriptほどサイト読み込みが重たくなることはあまりないですが、CSSもサイトを作る上では欠かせないもので、なおかつサイトによっては何千行と膨大な量のCSSを書く場合もあります。

簡単にこれらを整理出来るのであれば、試す価値は十分にあると思います。

不要なCSSの削除

古いコンテンツをhtml側で削除した時に古いCSSだけ残る場合があります。

ですが、それもサイトを読み込む際に読み込まれているので少なからずサイトの読み込み速度を低下させる原因になっています。

削除推奨なのですが、どうしてもいつかまた使う可能性があるという方はバックアップを取った後に削除するようにしましょう。

CSSを１行にまとめる

CSS等のファイルは１行毎に容量をとっているので、行数を減らせば減らした分だけ読み込み速度が速くなります。目に見えて読み込み速度が変わるわけではありませんが、読み込み速度の向上はこういったことの積み重ねです。１行にするためのツールはCSS、圧縮などでWEBで探すと簡単に出てきます。

CSSの書き方に気をつける

<div class=“box”>
<ul>
<li>
<a class=“button”>ボタン</a>
</li>
</ul>
</div>

上記のような書き方の場合

.box > ul > li > a {

}

のような形でcssを書く方がいますが、これだとboxの中のulの中のliの中のとブラウザが読み込んでいくようで、

どちらかというと

.button {

}

と書いた方がサイト軽量化には繋がるようです。

最近自分は.box > ul > li > aのような形で書く癖がつき始めていたので気をつけようと思います…。

インライン化する

特定のページだけでしか読み込まないcssがある場合正直なところhtmlファイルに直接cssを書いたほうがファイルを読み込みに行く時間が掛からないのと、その他のページで余計なCSSを読み込む時間が減るため、サイトの読み込み速度はあがります。

ずっと外部ファイルで読み込んでいた人からしてみると違和感はありますが、大きいサイトやワードプレスの自動で入ってくるタグ等を見てみると割とインライン化されているCSSを見ることもあります。

javascriptを整理する

javascriptはこれまで紹介したものの中でも比較的取捨選択の余地があるものだと思います。

最低限のscriptを導入すればサイトの読み込み速度にそこまでの大きな影響もないでしょう。

不要なjavascriptの削除

使っていない動いていないscriptは削除するべきです。

css同様にサイト読み込み時に読み込まれるものですから読み込み速度に少なからず影響を与えています。

javascriptを１行にまとめる

こちらもCSSと同様の理由でファイルを圧縮できるので推奨です。

インライン化する

こちらもCSSと同様の理由でファイルを最適化できるので推奨です。

優先順位の低いjavascriptをコンテンツの後に読み込ませる

scriptの中には別に優先的に読み込ませる必要がない物も存在します。

例えばボタンを押した後に動き出すscriptなどはページを読み込ませた後に動くように設定しても問題ありません。

方法は簡単でフッター付近、コンテンツの後にscriptを記入するだけです。

基本的なWEBサイト読み込み速度向上に繋がる方法は今日紹介したもので大体補えると思います。

日々、こういった技術を取り入れ続けるのがサイト最適化に繋がります。