Webページの読み込み速度(表示速度)が遅いときの改善方法

この記事を読むのに必要な時間:04分23秒

今回は、前回告知した通り、Webページの読み込み速度(表示速度)を測定する方法の続編です。

どうやって読み込み速度を改善したらいいのか、その方法についてお話しします。

このブログも今回ご紹介する方法で大きく改善することができました。
Webページの読み込み速度(表示速度)が遅くなる原因
では、まず、読み込み速度が遅くなる原因から。

Webページの読み込み速度が遅い原因
・パソコン、スマートフォンなどのデバイスの性能の問題
・回線速度の問題
・Webページの容量の問題

こんなところでしょうか。

デバイスの性能と回線速度の問題は、ユーザー側の問題になるので、今回は、3つ目のWebページの問題を改善する方法をご説明します。

画像を圧縮して容量を落とす方法
Webページの容量の問題を手っ取り早く改善するには画像の容量を下げることです。

ですので、まずは、PNGとJPG画像を圧縮するツールをご紹介します。

どちらも無料のオンラインサービスのため、インストールは必要ありません。また、登録なしで利用可能です。
PNGファイルを簡単&キレイに圧縮できるツール
パンダのキャラクターが目を引く『TinyPNG』です。

TinyPNGのインターフェイス

使い方は簡単。

画像をドラッグ&ドロップするだけです。(画像の最大容量は3MBまで、1度に処理できる画像は20個まで)

TinyPNGの使用方法

アッという間に89%も圧縮完了。スゴい!

TinyPNGの画像圧縮後の画面

ちなみに、これがビフォアー・アフターです。

どうですか?このクオリティ!

TinyPNGでのビフォア・アフター画像

PNG画像を簡単&キレイに圧縮できる TinyPNG はこちら >>
JPGファイルを簡単&キレイに圧縮できるツール
JPGは、『JPEGmini』がおすすめ。

とにかくUX(ユーザーエクスペリエンス)が素晴らしい!とてもよくできたサイトです。

JPEGminiのインターフェイス

こちらも使い方は超簡単!

「Try It Now」をクリックします。

JPEGminiの使用方法 その1

それから、「Upload Your Photo」から圧縮したい画像を選択するだけです。

JPEGminiの使用方法 その2

圧縮が終わると、どれくらい圧縮できたのか確認することもでき、また、オリジナル画像と圧縮後の画像を見比べることもできます。

この辺りのUXもイイです。

「Download Photo」をクリックすると保存できます。

JPEGminiの画像圧縮後の画面

こちらもビフォアー・アフター。

こっちのクオリティもヤバい!

JPEGminiでのビフォア・アフター画像

JPG画像を簡単&キレイに圧縮できる JPEGmini はこちら >>

こんな素晴らしいサービスが無料&登録なしで使えるなんてスゴい時代になりましたね。
画像をスクロールに合わせて表示させるjQueryプラグイン
実は、今日は、ここからが本題だったりします。

画像の圧縮と是非併せて使ってもらいたいのが、jQueryプラグイン『Lazy Load』。

jQuery(ジェイクエリー)とは、JavaScript(ジャヴァスクリプト)ライブラリの1つ。

JavaScriptは、文字や画像などにさまざまな「動き」がつけられる言語です。まあ、とりあえず、難しいことは置いておきましょう。

『Lazy Load』をWebサイトに組み込むと、画像を一気に読み込まず、スクロールに合わせて読み込むようになります。

ページの表示と同時に画像をすべて読み込まないので、読み込み速度が短縮されるのです。

最近、いろいろなWebサイトで見かけるようになってきました。

ちなみに、このブログでも Lazy Load を組み込んでいるのですが、わかりますかね??

わかりづらければ、こっちのサイトの方が顕著にわかるかもしれません。
Lazy Load の使い方
それでは、Lazy Load の使い方です。

まず、「jquery.lazyload.js」をダウンロードします。

上記の「jquery.lazyload.js」のテキストの上にカーソルを置いた状態で「右クリック」 → Google Chrome、Firefoxの場合は、「名前を付けてリンク先を保存」、IEの場合は、「対象をファイルに保存」。「jquery.lazyload.js」のファイル名(そのまま保存すればOKです。)でダウンロード(保存)します。

jquery.lazyload.jsをGoogle Chrome、Firefoxでダウンロードする方法

jquery.lazyload.jsをIEでダウンロードする方法

jquery.lazyload.jsを保存する方法

次に、ダウンロードした 「jquery.lazyload.js」 を 「js」 など任意のディレクトリを作成し、サーバーにアップロードします。


そして、読み込み速度を改善したいWebページのhtmlファイルの headタグ 内に、

<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1′></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>

と書き込みます。



次は、読み込み速度を改善したいWebページのhtmlファイルの bodyタグ 内に、

<script type=”text/javascript”>
$(function() {
$(“img.lazy”).lazyload();
});
</script>

と書き込みます。



最後に、読み込みを制御したい画像を以下のように指定すればOKです。

<img class=”lazy” src=”image/画像.gif” data-original=”image/画像.gif” alt=”画像の説明” width=”幅” heigh=”高さ” />



実際にWeb上でチェックしてみてください。
WordPress(ワードプレス)で Lazy Load を使用
WordPressでWebサイトを運営している方はこちらを。

プラグイン画面で、「Lazy Load」と検索します。



「Lazy Load」をインストール。



有効化して完了。これだけです。


読み込み速度のカスタマイズ方法
読み込み速度を変更したい場合は、プラグイン編集画面で「Lazy Load」の「編集」を選択。


プラグインファイルから「Lazy-load/js/lazy-load.js」を選択。


distance:200 の「200」を任意の数値に変更します。

数値が大きくなるほど読み込み時間が速くなります。

反対に、数値を小さくすると画像がゆっくり表示されるようになります。



この辺りは、お好みで実際の表示速度を確認しながら微調整してください。

以上が、WordPressに「Lazy Load」を導入する方法です。
「Lazy Load」の効果を検証
それでは、気になる「Lazy Load」の効果を見てみましょう。

前回ご紹介した『GTmetrix』で検証してみました。



なんと、12.64秒から9.19秒… と3.45秒も短縮されました!スゴい!

というわけで、長々と書いてきましたが、画像の圧縮と「Lazy Load」を組み合わせれば、Webページの読み込み速度を改善することができます。

みなさんも是非是非お試しください!

今回もありがとうございました!


This entry was posted in SEO, Webサイト制作, 便利ツール, 内部対策SEO. Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>