BLOG

情報発信

blog サムネイル画像

Webサイトの表示を高速化するための方法4選

2021.07.16

Web制作

こんにちは!AWA Biz代表の小川です。

Webサイトが表示されるの速さが遅いと以下のデメリットがあると言われています。

  • Webサイト閲覧者の直帰率が上がる
  • ECサイトの場合売り上げが下がる
  • CVRが下がる
  • SEOの順位が下がる

お客様から「Webサイトの表示速度を向上させたい」と明示的に要望されることはあまりありませんが、効果的なWebサイトを作るためにも0.1秒でも速く表示されるWebサイト制作にこだわりたいですよね。

今回の記事では、普段実施しているWebサイト高速化の方法を書いていきます。

画像の圧縮

一番簡単かつ効果が期待できるのが、画像を圧縮して軽量化することです。Webサイトが開いた後に画像がカクカクと表示された経験はありませんか?

特にWebサイトを開いて最初に見える画像(ファーストビュー)は画像自体が大きく読み込みが遅くなる原因なので気をつけましょう。

画像を圧縮するためには以下の方法があります。

  • gulpのimageminを使用する
  • 画像圧縮ツールを使用する
  • プラグインを使用する(WordPressの場合)

それぞれ細かく説明していきます。

gulpのimageminを使用する

gulpのimagemin関数を使って圧縮する方法です。設定次第でコーディングが完了したら一括で画像を圧縮してくれるので圧縮作業が楽です。しかしgulpの設定知識が必要なので導入コストは少し高めかもしれません。

画像圧縮ツールを使用する

画像圧縮のためのWebアプリケーションやデスクトップアプリケーションを使用する方法です。

個人的には↓の2つが使用しやすく普段から愛用しています。

ImageOptim

Mac専用ですが、一括で画像を圧縮してくれる優れもののためかなりおすすめです。
ただし初期設定を変更しなしと本領発揮してくれないので、アプリインストール後に設定を変更することをおすすめします!
https://webrandum.net/imageoptim/

Squoosh

こちらは画像を一枚ずつしか圧縮できないのですが、圧縮率が高いのがおすすめです。
png→jpgなどの変換もしてくれるのもいいですね。
個人的にはファーストビューなど重要な画像はSquooshで圧縮し、それ以外の画像はImageOptimかgulpで圧縮する運用をしています。

プラグインを使用する

WordPressの場合のみですが、プラグインで圧縮する方法もあります。

WordPressの管理画面にアップロードした画像データを一括で最適化してくれます。ブログなどのサムネイル画像を圧縮する時に使用するのがおすすめです。

画像の遅延読み込み

画像の遅延読み込みとはページを開く時に全ての画像を読み込むのではなく、ページをスクロールするにつれて徐々に画像を読み込んでいく技術のことを言います。

ファーストビュー画像以外を遅延読み込み設定することにより、ファーストビュー表示を優先することができ、結果ページの読み込みが速くなります。

遅延読みこみの方法は以下の2つがあります。

  • img要素に loading=”lazy”属性を付与する
  • jsプラグインを使用する

img要素に loading=”lazy”属性を付与する

簡単な方法は一つ目の方法です。コーディング時に↓のように記載することでブラウザが遅延読み込み処理を行ってくれます。

<img src="image.jpg" loading="lazy">

ただこちらの方法は2021年7月現在Safariが対応されていないため、完全とは言えません。

https://caniuse.com/loading-lazy-attr

jsプラグインを使用する

こちらの方法は先程の属性を追加する方法に比べ全てのブラウザに対応できるのでおすすめの方法です。

遅延読み込みするプラグインはいくつか種類がありますが、弊社ではlazysizesというプラグインを使用しています。
jQueryに依存しないため軽量でメモリ消費も少ないです。

使い方はCDN経由でライブラリを読み込み、

https://cdnjs.com/libraries/lazysizes

適用させたい画像に属性を指定するだけです。

<img data-src="image.jpg" class="lazyload">

src属性をdata-src属性に変更する必要があるので、注意してください。

css,jsファイルを圧縮する

表示速度改善の方法2つめはcss,jsファイルを圧縮するです。

通常cssファイルやjsファイルなどは↓のようになっているかと思いますが、

これを圧縮すると↓のようになります。

コードが全て1行で書かれている状態になりファイルが軽量化されます。jsも同様です。

こちらもgulpやwebpackなどの知識が必要になりますので導入コストは少し高くなりますが、1度導入するとずっと使える&画像圧縮以外のメリットありますので、余裕がある場合はぜひ導入しましょう。

WordPressのプラグインをできるだけ使用しない

こちらもWordPressでの話になりますが、プラグインを入れすぎてしまうとサイトが重くなってしまう原因にもなりますし、セキュリティホールが発生してしまう原因にもなります。無作為にプラグインを増やすのは注意しましょう。プラグインで実装する前に、「この機能はコードを書いて実装できないかな」と調べてみると意外とヒットしたりします。なるべくプラグインは10個以内に収めるようにしましょう。

まとめ

以上がWebサイトの表示速度を向上させる方法4選でした。もちろんこれ以外の方法もたくさんあるのですが、今回は比較的導入コストが低いものを選定して書かせていただきました。

また、gulpやwebpack、lazysizesの設定など詳細を書けていないところもあるのですが、それは別の記事で書いていこうと思います。

AWA Bizではお客様の課題に寄り添い、効果の出るWebサイト制作を行っています。
案件のご相談・お見積はお問い合わせフォームからお気軽にご連絡ください。

お問い合わせはこちら

CONTACT

お問い合わせ

Contact