あふぃり〜ちどっとこむ

アフィリエイトを始めるための準備と注意点(備忘録)

BJ Lazy Load で画像を遅延ロードさせてサイト表示速度をアップする

      2015/08/07

Display Speed-2

 

サイト表示速度が低下すると

アクセスしづらくて管理人自体にもストレスがたまる

なのでサイトへ訪れた人も

閲覧しずらくて当然、即離脱される可能性が高まってしまう

 

改善する方法、改善すべき項目は何点か上げられますが

まず簡単にすぐ出来ることから実行して少しづつでも改善していきたい

 

 

〜〜項目〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

★1、サイト表示速度を上げるために画像を遅延ロードさせる

*① Unveil Lazy Load 設定&レビュー
*② Image Lazy Loadn 設定&レビュー
*③ Bj Lazy Load 設定&レビュー
*④ 結果まとめ

★2、サイト表示速度低下を改善するその他の手段。。。。。

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

 

 

 

 

☆1、サイト表示速度を上げるために画像を遅延ロードさせる

 

サイトの表示速度アップさせる方法の1つ、ワードプレスプラグインの

  “Lazy Load” というのを色々試してみた

(画像ロードを遅延させ必要情報のみ先に表示させるためのプラグイン)

 

私の環境で互換性を確認できないものがあったけれど

結構種類があり、互換性のあるものを試して厳選してみました

 

 

*① Unveil Lazy Load

 インストールして有効化するだけで、設定は出来ないみたい

評価もわりといいので試してみたが、体感速度はあまり変化がなかった…………

 

 

*② Image Lazy Load (Unveil.js)

 インストールして有効化し、ダッシュボード>Image Lazy Load>を開く

ダッシュボード>ImageLazy Load

 

 

設定画面でロードの数値と、モバイル対応するかを設定できる

Lazy Load 設定

 

これはかなり体感的に速度が速まった

画像がふわっと遅れて表示されて面白い

スマホにも対応出来ていい感じ

 

 

 

*③ BJ Lazy Load

ダウンロードされている数が多いせいか 低評価もあるけれど、試してみた

これ かなりいい!

私はこれに決定〜〜〜!

 

インストール、有効化し、ダッシュボード>設定>BJ Lazy Load>と開く

設定>Bj Lazy Load-2

 

 

設定はデフォルトのままでも十分な感じ

設定①-2

 

 

設定②-2

 (設定項目)

Apply to content : コンテンツに適応させるかの設定(プラグインを適応させる項目でこれはON必須)

Apply to text widgets : テキストウィジェットに適応させるかの設定

Apply to post thumbnails : サムネイル画像に適応させるかの設定

Apply to gravatars : グラバターを使用している場合、そのアイコン画像に適応させるかの設定

Apply to load  images : 画像ファイルに適応させるかの設定(これは適応させないと無意味ですね笑)

Apply to load iframes : YouTube埋め込み画像に適応させるかの設定

Theme loader function : Lazy Load のコードをどこに置くかの設定
(上手く起動しない場合 head に設定すると改善されることがあるみたい )

Placeholder Image URL : 遅延させている間に表示させておく画像を設定出来る

Skip images with classes : 遅延させたくない画像を指定出来る

Threshold : 読み込みの数値を指定出来る デフォルトは200だったが特に問題は無し
400くらいにしておくと、画像表示のもたり感がさらに気にならなくなった

Infinite scroll : 無限スクロールに適応させるかの設定

Load hiDPI (retina) images : retina(Macの高解像度ディスプレイ)にも適応させるかの設定

Load responsive images : レスポンシブに対応させるかどうかの設定
(これはスマホ対応としてYes にしてみたが、画像が米粒のように表示されてしまい、
クリックしないと見れない状態になってしまった笑 これをYesにせずにスマホでためしてみたら、
それでも体感速度はぐっと上がったので、ここはデフォルトのまま、(Noのまま)にしておいた)
はて?何故だろ?笑

 

そして投稿画面の右下(アイキャッチ画像設定の下 )で、チェックを入れると、そのページの Lazy Loading をスキップできる
(対象外にも出来るってこと)

 

 

 

*④ 結果まとめ

体感速度も、数値的にも “BJ Lazy Load”  がNO.1だった
細かい設定も出来て、かなりスバラシイく、目的の表示速度アップもグンと出来ていい感じ

“Image Lazy Load (Unveil.js)” もかなりいいけれど、速度数値、体感速度も “BJ Lazy Load” が上だった

これだけで全てO.Kではないけれど、単純に手っ取り早く 速度を上げるにはすごくいいと思った

 

 

画像の圧縮、最適化

画像表示を遅延させる 

この2つをがっちりやるとそれだけでかなり変わるってことがわかった

 

 

 

☆2、 サイト表示速度低下を改善するその他の手段

 

*1、画像を最適化する、圧縮する

通常テキストよりも画像は圧倒的に重い なので負担がかかり、表示速度を低下させてしまう

この “画像の重さ”速度を低下させる大きな原因のメイン項目であることは確か

サイトを構築してく前にそれらを理解し、最初からきっちり圧縮した画像を使用しとくべきだけれど

あとからも改善は可能
画像圧縮でサイト軽量化 参照

上記の中に、webサービスを利用しての手動圧縮についても記載してるが、
これがかな〜りの効果が得られていて、私は全ての画像をこれで圧縮している

このように画像のウエイトが高い場合、画像の改善をすると、いっきに良くなる場合が多い

 

 

*2、レンダリングをブロックしてしまう JavaScript 、CSS ソースを改善する

 ・ワードプレスプラグイン “Head Cleaner” などで細かい設定が必要
⇒かなり胸が一杯になるコアな設定が必要なのと笑 ソースを最適化するってことは
大きく不具合を起こす可能性を秘めている?ってことで
これはきっちり調べて理解した上で利用すべきかなと……….

 

 

*3、キャッシュを利用する

 ・ワードプレスプラグイン “w3 Total Cache”や、”wp Super Cache” などを導入してみる
⇒これはやってみたら、かなり効果があった

んが……….サイトカスタマイズしたりするとき、最新の情報が反映されたページを確認することが全くゼンゼンダンゼンバリバリけちょんけちょんに出来ず
かなり不便さを感じ、今は使っていない
しかもインストールして一度有効化すると、無効化してもプラグインを削除しなければ最新の情報が反映されず
かなり混乱する始末
全く新しい情報を読み込む必要がない場合はいいけれど、なんとも微妙
そしてキャッシュって色々な意味でリスクがあったりするので……….
知識や経験を積んでから利用するのがベストと感じた…..

 

 

*4、契約してるサーバー自体を変える

サーバー自体のスペックに無理があるのはかなり厳しい
そのままではストレスが溜まる一方

原因がそれなら おもいきってサーバーを変えてしまう方が断然いい
(アフィリエイト向けレンタルサーバー撰び 参照

 

などなど まだまだ先は長いのかな…..

 

 

以上 あふぃり〜ち備忘録でした

ではステキな スピードライフをば!

 

 

"サーバー契約・ASP登録・ドメイン取得” の
注意点や選び方をまとめてみましたので
こちらもチェックしてみて下さい☆
★レンタルサーバー選び方
注意点
はこちら

★登録必須ASPの内容
ピックアップ
はこちら
★独自ドメイン取得
注意点
はこちら

 

 

 - Wordpress プラグインについて, SEOについて, Site 運営について , , ,

スポンサーリンク



スポンサーリンク



Message

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

15 + nineteen =

  関連記事

タグを記憶させておけるWPプラグン AddQuicktag

  記事を書く時毎回使うタグってありますよね それを毎回書いてると面倒 …

Optimize Database after Deleting Revisions終わらない
リビジョン削除&最適化プラグインOptimize Database after Deleting Revisions の設定

ワードプレスでリビジョン削除&コントロールのプラグインが更新されてないからOptimize Database after Deleting Revisionsを試してみました。設定の仕方メモです。

さくらサーバー自動クイックインストールでドメイン直下に出来なかった場合の修正方法

  *注意点〜〜〜〜〜〜〜〜〜〜〜〜〜 さくらのサーバでワードプレスな …

scroll to top系で使いやすく更新されているWordPressプラグイン

トップに一瞬でスクロールできることはサイトを見やすくするために必須にかんぞますが、そのプラグインも更新されていて最新のWoord Pressと互換性あったものを選んでおきたい

TablePress レスポンシブ対応 (TablePress Extension: Responsive Tables)

  ※スマホで閲覧して頂いている方は表がはみ出てページ表示がやたらちっ …

seesaa ブログに無料アクセス解析 i2i を設置

  無料ブログにアクセス解析を設置することって結構あると思うのですが …

ワードプレスであるページの本文(コンテンツ)が表示されなかった時の原因と解決法

ワードプレスである特定のページの内容(本文・コンテンツ) のみ丸ごと表示されない場合の原因と解決法について

画像圧縮でサイト軽量化

    画像はテキストに比べて圧倒的に重い なのでサイトに画 …

pdfファイルの保護

pdfファイルをサイトやブログで公開する場合の保護の仕方について…

Word Press無料テーマ4種レビュー

  サイト構築の上で、 サイトのデザインは大切 まずは視覚的イメージが …