ページの表示速度を速くするには

目安時間:約 6分
  • このエントリーをはてなブックマークに追加
  • 人気ブログランキング

 

 

 

このブログでは

ネットビジネスで起業するための情報を発信していますが、

 

少しでも内容をわかりやすくするために

画像とか動画を取り入れるように心がけています。

 

 

文字がいっぱい並んでいるだけだと

どうも読む気がしなくなるのは私だけじゃないですよね?

 

saya160312170i9a3708_tp_v

 

 

 

 

 

 

 

 

 

ちょっとイメージにあった写真や画像があるだけで

内容が理解しやすくなります。

 

ところが画像や写真を使えば使うほど

ページの表示がどんどん遅くなるんですね~。

 

 

見るほうからしたら

表示が遅いページはストレスが貯まるので

途中で読むのをやめちゃったりするんです。

 

 

そういう悩みに対して

ワードプレスなら解決策があります。

 

 

「Lazy Load」というプラグインを使います。

 

 

lazyload5

 

 

 

 

 

 

 

 

 

 

 

 

 

 

インストールするだけで、

特別な設定は必要ありませんから便利です。

 

 

「Lazy Load」というプラグインには

どんな機能があるのか?

 

 

あなたも見たことがありませんか。

 

 

ページをスクロールして行くと、

最初なにもなかった部分にポワーン、ポワーンと画像が表示されるページ。

 

 

普通は一番最初に画像を含めたページ全体が読みこまれるので

読み込みが完了するまで表示されないんですね。

 

 

Lazy Loadを導入すると、

ページがディスプレー画面に表示された部分から

順に画像を読み込むようになります。

 

 

ディスプレイに表示されていない部分は、

ページのスクロールがされるまで

その範囲の画像は読み込まれないんです。

 

これだけでサクサク感が向上します。

 

 

インストールしたら

実際に自分のページを表示してみましょう。

 

ほら、ページの画像が

フワフワっと出てくるようになりましたね?

 

フワフワっと

 

 

 

 

 

 

 

 

 

 

 

それでもまだまだ少しぎこちなく感じる場合、

設定の変更も可能です。

 

 

初期設定では、

表示されている画面の下、200px先まで読み込んでおく

という設定になっているんですが、

 

これを400pxと少し広げるだけで大分改善します。

 

 

 

プラグイン一覧の「Lazy Load」を探して、「編集」をクリック。

 

 

プラグイン編集画面になったら、

画面右側の「Lazy-load/js/lazy-load.js」をクリック。

 

 

 

編集画面になったら、

○箇所の200 の部分を、400へ変更して「ファイルを更新」します。

 

lazyload4

 

 

こんな簡単なことで表示が軽くなって

ブログの訪問者のためになるなら、

インストールしておいて損はないです。

 

 

 

 

  • このエントリーをはてなブックマークに追加
  • 人気ブログランキング

コメントは4件です

  1. アニー より:

    こんにちはアニーと申します。
    確かに、画像がある方が読みやすいですが、
    遅くなるのはストレスになりますね。

    為になる情報ありがとうございます。

    • daiki より:

      アニーさんコメントありがとうございます♪

      気に入っていただけましたか?
      チャンスがあればぜひやってみてくださいね。

  2. トリ より:

    ダイキさん、はじめまして!
    ブログランキングから参りました。

    こんなプラグインがあるんですね~。jQueryを使うのと同じ原理ですかね??
    結構皆さんどんなプラグインを使っているのか興味ありますね^^
    知らないけど便利なものがたくさんあるみたいだし!

    応援させて頂きます。

  3. daiki より:

    トリさん

    コメントありがとうございます♪

    確かにトリさんがブログで紹介されている
    jQueryと効果は同じですね。

    こちらはプラグイン、
    そちらはプログラミング言語

    の違いはありますが。

    ピンポイントでフェードインさせたいならjQueryが便利ですね。

    教えていただいてありがとうございます♪

コメントフォーム

名前

メールアドレス

URL

コメント

CAPTCHA


This blog is kept spam free by WP-SpamFree.

ページの先頭へ