jQuery Lightboxでページの読み込みを早くしよう！

Wrodpressを使った画像系SEO対策記事2連続ですが、ご容赦くださいませ。

前回Tinypngのプラグインを使用した画像軽量化によるものでしたが、今回はちょっと変化球です。

そもそもWordpressに画像をアップロードすると4種類のサイズ作ってくれる

Original
サムネイル - 150x150
中 - 300x300
大サイズ - 1024x1024

この4種類が作成されます。設定によってはもっと沢山作成されます。
そして、通常はブログ記事内にその画像を貼り付けるわけですが、恐らく皆さまこういう基準で貼り付ける画像のサイズを選択されていると思います。

文字が沢山ある→文字が読める程度のサイズの画像
文字は含まれていないが大切な画像→大きめの画像
文字が含まれていないし雰囲気のためだけの画像→小さめの画像

共通して言えるのは、最も小さい画像ではなく、それが画像であるという効果が発揮できる程度のサイズである、という点。
しかし、実際にはブログのデザインを壊さない程度のサイズでは、文字は小さすぎる事が多いと思います。
かといって、クリックで画像に飛ぶようなリンクを作ってしまうと、ページが遷移してしまってユーザビリティが下がってしまう…。

そこで、jQuery Lightboxというプラグインを導入しましょう。

jQuery Lightbox

このプラグインを導入すると、自動的に画像へのリンクをLightBox形式に変更してくれます。
LightBoxがどんな形式かと言うと、画像が拡大して表示されて、他の場所をタップすると元のページの元の場所に戻る、というアレ。
これがあれば、掲載する画像はかなり小さいサイズ…サムネイルくらい小さいサイズに変更することが出来ます。
ユーザーは見たい画像だけ拡大して見れば良いので、ユーザビリティも下がりませんし、画像が小さくなった分だけページを読み込む速度が向上して、ユーザビリティはむしろアップしているかもしれません。文字も充分な大きさで見えるでしょうし。

jQuery Lightboxの設定

これが少しクセがあります。

このようにチェックしましょう。
特に、「スクリーンのサイズに合わせて画像を縮小」にチェックを入れる事が大切です。
入れておかないと、スマホで見た時に画面サイズより圧倒的に大きな画像が表示されて何もわからない！となってしまいます。

それと、画像をアップロードする時に、リンク先を「メディアファイル」にする事を忘れないでください。

これを忘れてしまうと画像をクリックしても拡大されません！

まとめ

ちょっと昔に流行ったな〜という感じのLightBoxですが、やはりユーザビリティには大きく貢献してくれます。
まだご使用でない方は是非どうぞ！

                           

  関連記事