WEB制作プライバシーポリシーお問い合わせサイトマップ画像を遅延読み込みさせるLazyLoadプラグインの使い方とちょっとしたコツ!2019.06.17プラグインHOMEプラグイン画像を遅延読み込みさせるLazyLoadプラグインの使い方とちょっとしたコツ!サイトを訪れた際、画像が読み込まれるのに時間がかかりイライラした経験はありませんか?画像を多用しているとどうしても読み込みに時間がかかってしまい、ユーザーの使いづらさに繋がります。いって文字だけというのも味気ないし画像を使った方が説明もしやすい...そんなジレンマを解決してくれるのが「LazyLoad」プラグインです。画面に映っていない画像の読み込みを遅延させる=スクロールしてエリアが画面内に入ったタイミングで画像を読み込む事で、サイトの初期表示速度を大きく改善する事ができます。今回はそんな画像の遅延読み込みプラグイン「LazyLoad」の使い方と設定時のちょっとしたコツをお伝えしていきます。まとめそもそも遅延読み込みって?ウェブサイトはユーザーがアクセスしてくると画像やテキストをページに表示させるのですが、画像が多いサイトだと一つ一つ画像を読み込まなくてはいけないので時間がかかってしまいます。実際には全ての画像を一度に読み込もうが一部の画像だけを先に読み込もうが、ユーザーが最初に見える範囲は一緒です。見えていない範囲を最初から表示しておく必要は無く、ユーザーがその画像の表示されるエリアに到達する「少し前」に画像が読み込まれていれば問題ないわけです。これが画像の遅延読み込みで、こうする事によってページの初期表示速度をあげる事が可能になります。LazyLoadをインストールする前置きが長くなりましたのでさっそくインストールの手順に入りましょう。Loadと検索します。するとこのようにプラグインがヒットしますので、「今すぐインストール」→「有効化」で準備は完了です。-WordPressにプラグインを導入しよう!検索の仕方からインストール、zipフォルダの...https://wp-topics.com/base/1049/WordPressには簡単にブログやホームページを作成できるという利点がありますが、それを可能にしているのは様々な機能を持った「プラグイン」を簡単に導入できる点にあります。個々のプラグインでそれぞれ使い方や設定は違いますが、導入方法は至って簡単です。今回は...LazyLoadの使い方それでは次にLazyLoadプラグインの使い方を、と行きたいところですが、このプラグインは有効化した時点で既にサイト内で画像が遅延読み込みされる状態になっています。使い方を覚えたり小難しい設定をせずに使えるので絶対に入れておくべきプラグインです。したコツとはいえ一点だけちょっと気になる点もあります。このLazyLoadですが、初期設定では「画像の上200pxの位置までスクロールしてきた時」に画像を読み込む仕様になっています。ユーザーのネット環境にもよりますが、200pxだとスクロールから表示までのタイミングが早すぎるせいで画像の読み込みが間に合わない場合があります。その為、プラグインの記述を少し変更して画像読み込みが始まるタイミングを調整しておくとより使いやすくなります。lazy-load.jsの記述を変更する管理画面左メニューの「プラグイン」→「プラグイン編集」でプラグインの記述を編集する画面に映ります。この画面を開く時は注意書きが表示されますが、「理解しました」を押して次に進みましょう。Loadを選択します。jsという項目の▶マークをクリックするとファイルがいくつか表示されますので、その中の「lazy-load.js」を選択します。編集画面に「distance:200」という部分がありますので、こちらを400に変更します。する事で、画像の上400pxの位置から画像の読み込みが開始されますので表示に少し猶予が生まれます。こちらの数値はあくまで一例ですので、色々と設定をしながらサイトに合うタイミングに調整してみてください。変更が完了したら「ファイルを更新」を押して保存しましょう。Loadプラグインの使い方(といっていいのか分からないぐらい簡単でしたが...)でした。サイトの表示速度を速めることはユーザーの使い勝手に大きく影響を与えるだけでなく、SEOの観点からも推奨される内容です。プラグインをインストールするだけでユーザーがサイトを見やすくなるなら入れておいて損はないですよね。使っていないという方は是非入れてみてください。2019.10.04ブログを続けていくと気になってくるのがサイトがどれぐらい人に見られているか、ですよね。プロフィールWEB屋さんの端くれ。