Web業界で働いている人が仕事の失敗談をメインにいろいろつぶやいています。更新:2017-02-09最近、本サイトの表示が重たいのであれこれチューニングをしています。Loadという便利なプラグインを見つけました。サイトにアクセスしページを開く際、該当ページで利用されているすべての画像・Javascript・CSSがサーバから呼び出され、すべてのダウンロードが完了して初めて画面に表示されるのですが、このプラグインは、モニターで見えている範囲の画像だけが表示されるようになるため、ページ表示時の時間短縮が期待できるというものです。Loadプラグインの導入について説明したいと思います。実装方法では、早速導入手順です。Load」で検索すると下の画像の通りプラグインが出てきますのでインストールします。インストールが完了したら有効化します。以下の画面が表示されたら完了です。これで画像表示のあるページを開いて下にスクロールすると画像がフェードインで現れるのがわかると思います。(コチラのページを参照)ただ、有効化しただけだと設定はデフォルトのため、あまりにも早くスクロールすると画像の表示が追いつかないことがあります。そこで、もっと早いタイミングで画像のフェードイン表示が始まるように調整します。Load」の編集をクリックします。すると以下のとおり、ソースファイルを編集する画面が表示されるので、右の一覧から「lazy-load/js/lazy-load.jp」を選択肢ます。「distance:200」と記述されている箇所があるので、ここを「distance:400」にします。これにより、もっと早いタイミングで画像表示がなされるようになるため早くスクロールしても大丈夫です。distanceを400にと書きましたが、デフォルトの200との違いを確認したい人もいるかと思います。コチラの検証サイトはdistance:200にしているので、気になる方はスクロールしてみてください。画像にはSEOを意識してALTタグを記述していると思います。ところが、このプラグインを利用すると画像がGoogleにインデックスしてもらえないという欠点もあります。Googleは「重要な情報であれば常に表示されているべきだ」という考えから意図的にインデックスをしていないとのことです。Loadが動かないようにする」という処理を追加する方法がありますのでそちらを紹介します。'Googlebot')の部分を追記してやればOKです。これで、SEOで不利になることもありません。最後に画像が少ないページでは、あまり効果は期待できません。記事によって画像の利用枚数は異なりますが、このサイトの画像の多いページでは心なしか表示スピードが上がったと感じています。サイトの表示速度を図るツールとして、以下の2つがあるので導入後の結果を確認してみました。Developer)GTmetrixう~ん、まだまだ改善の余地はありますね。引き続き別の方法でトライしていきたいと思います。iizukaフリーランスとしてUX視点で業務支援しています。Hi-Standard好きです。http://yukioiizuka.comMISLEADの記事に共感いただけましたらいいねをお願いします。コメントデータの処理方法の詳細はこちらをご覧ください。爪の周りやささくれの傷にばい菌が入ったらひょう疽です。Reserved...。