熱血!副業部

サイト表示でくるくる読込する”アレ”を実行する為のWordPressプラグイン


くるくるしながら読込むアレは何か?

今回はWordpressで作成したサイトの読み込みが遅い時に有効なプラグインを紹介していきます。

基本的な事前確認の方法

実際に、Googleの提供するPageSpeed Insightsを使い測定します。

スクリーンショット 2016-04-04 17.27.12

ここがポイントなんですが、

・測定結果が良い点数の場合でも、実際に見ると非常に遅い…

・測定結果が悪い点数なのに、実際に見るとめちゃくちゃ速い..

この2つのパターンが出てくるかと思います。

 

有名なサイトでも数値が低い事があるので、数字自体には大きく気にせず「修正が必要」と書かれた部分だけ修正していきましょう。

 

修正が必要と書かれた点を確認する

以下のような表示の中で「!修正が必要」の箇所を修正していきます。

 

スクリーンショット 2016-04-04 15.10.08

1項目目には「画像を最適化する」というのがありますが、それは以前に書いたWordPressでまとめて画像圧縮ならEWWW…設定方法とまとめこの記事で確認ができます。恐らく上記の表示の場合は100%解消できますのでご参考ください。

 

今回は以下のような「圧縮を有効にする」パターンです。

スクリーンショット 2016-03-16 15.36.48 スクリーンショット 2016-03-16 15.36.39

画像の最適化よりも解消しにくいのですが、圧縮を有効にして更に見た目にも読み込み速度を実感できるプラグインがあります。そのプラグインをすぐ使うのも良いですが、まずその前に原因を探る事が大切です。

 

もともと読込が遅い原因

それはサイト全体を読み込む時に

文章画像

この状況が成り立っているからです。

もっと分かり易くお伝えすると、表示順が

①画像→②テキスト

このようになっています。

画像を読み込んだ後、テキストを出している」から遅いのです。

これは普通にサイトを作成している過程だとデフォルトです。当然どのサイトでも起こりうる事で、対策していなければこのような表示順序になります。また、一般的には画像の容量を落とす事も考えたりしなければなりません。あなたのサイトの読み込み速度が遅いのは、主にこれが原因だと思います。

 

画像の解像度を落とす事はNG

せっかく良い写真をアップしたのに、読み込みの遅さに泣く泣く解像度を落とす…。なんて事は、私でもありました。ですが、それをしなくてもやる有効方法があるのです。

 

修正にはくるくるが有効

あえてくるくるって訳しますね。

ココで言う読み込み速度を早める方法、それが”くるくる”です。

見た事ないですか?こんなやつ。

gif-load

 

あえてサンプルですが、画像読込時にこのような表示ができるプラグインを使い、表示順を

①画像
②テキスト

から、

①テキスト
②画像

これに移し替えるのです。

画像が後に読み込まれるほど、サイトの表示速度も早くなり改善されていきます。
何よりSEOにも効果が出る事が良い点です。

もちろんこれだけでも良い対策なのですが、”いつ“改善されるか分かりません。すぐなのか、明日なのか、次期に…なのか。なのでこれを行った後は、必ずサーチコンソールでクローラーに回してもらえるようにしましょう。評価時間が短縮され、速いSEOが見込めます。

 

 

Lazy loadが最強

さて、長々とお話してしまいましたが、そのプラグインです。

単純には画像の遅延読込をさせる機能を持つプラグインですが、お洒落なサイトで良く見るような”くるくると画像が読み込まれる”センスの良いサイトが簡単に仕上がります。

スクリーンショット 2016-04-04 16.04.13

プラグイン入手から設定まで

プラグイン配布のあるサイトからも入手や設定方法を確認できますが、Wordpress内ですぐ入手し設定した方が簡単です。

WordPress左メニューの中から「プラグインメニュー」→「新規追加」→検索窓から「Lazy load」と検索します。上記のようなロゴが出てくるのでインストールし有効化。これだけで完了です。

Lazy load有効化による効果

このプラグインを入れておくとPC、スマホで画面をスクロールする度に画像が一瞬くるくると回るように表示されます。テキストだけ先に表示されるのでサイト速度は目に見える部分で改善されるはず。Wordpressでのサイト、ブログ作成時には入れておくべきプラグインといえるでしょう。

副業特集ページ

top-mother

raku-sidebusiness

salaried-man

collegestudent-rank

最終更新日: 2017/03/03