Lazyloadを使ってみる【初級編】

vanillaice (Akira)

vanillaice (Akira)

画像の遅延読み込み、一般的に Lazyload といわれるものですが、こちらを実際に使ってみようの巻 (´・ω・`)

手順及び説明など全て、私が制作したテンプレート上での作業であることが前提で、他製作者様テンプレートに関する言及は一切ありません。
また、ご質問についても私のテンプレートをご利用頂いているユーザー様に限定させて頂きますことを予めご了承ください。

一部汎用的に使える内容もありますが、ご紹介するコード内容などに独自性があります。
ですからweb一般向けの内容とはなりません。すみません (´・ェ・`)

レスポンシブテンプレートであることが大前提です。
つまり スマートフォン版を利用していない(非表示設定) 方のみご質問を承ります。

スマホ版は私のテンプレートとは無関係で仕様なども存じません。
htmlバージョンの整合性さえ不明。
ですから私のテンプレートをご利用の場合でもスマホ版を併用している場合にはお答えしません(できません)
スマホ版利用者はスマホ版にも別途導入作業が必要です。
導入できるかどうかもまた別の話しです。

現在のところ全文タイプテンプレートのメンテナンスを終えまして、要約タイプのメンテ進行中です。
全文タイプテンプレートにLazyloadのJS内容は一切含まれていません。
全文タイプをご利用の方は元となるJSファイルをテンプレートhtmlソース内に導入する作業からがスタート地点になります。
要約タイプテンプレートのほとんどが元JSファイル導入済みです。
特殊な一部テンプレートを除き要約タイプはファイル導入の手間は省けますがFC2独自変数の操作は必要です。

要約タイプはメンテが終了していませんので対象テンプレートのメンテ状況をご確認の上、終了を待つかご自身で入れて頂くか決めてください。
丸投げっぽい感じでごめんなさい _(•̀ω•́ 」∠)_ ₎₎

先回の記事

FC2ブログでのLazyload導入の仕方と注意点【検討編】 - カスタマイズ

Lazyloadは自分との闘いです(笑) まず最初に、初心者向け説明記事ということで、なるべく平たく細かく説明できれば良いな、と思います。 「Lazyloadが何か知らない。読み方もわからない (∵`) 」を出発点にして自ら説明のハードルを上げるワタクシ((((笑) 説明すべき点がたくさんありますので、かなりの長文になりますから記事も数回に分けようと思います。 導入の具体的な手順は最終の記事にしますので、それまでの説...

前段階の記事は「採用するかしないか熟考しなければいけないよ」ということで「検討編」となっております。
重要事項が多く含まれますので必ず目を通して頂ますようお願いします。
やっちゃってから「やっぱ止めたい (;ωq`)」は知らんかんね ←
自己責任の名のもとに行なってください。

使用するプラグインは「lazysizes」です

Lazyload は一般名称でもあり商品名でもありますよ、ということで、ここでは区別のために画像遅延読み込みを行うプラグイン全般を delay lodaing と呼びます。
私が採用したプラグインはdelay loading系の中で lazysizes(レイジーサイジズ) という名称のものです。
たぶんこれが既存プラグインの中でも使いやすく拡張性も高いと思います。
この「プラグイン名称」はしっかり把握しておいてください。一口に lazyload と言ってもたくさんの種類がありますし、フックアップ(JSを実際に起動させるためのコード)も それぞれに異なります。

githabでJSファイルを入手 or CDNを利用

全文タイプの方はここから始めます。要約メンテ済みのものは既に含まれていますのでこの章は飛ばしてください。

githab(ギットハブ)から入手

aFarkas/lazysizes

上記リンク先のページ右の方に という緑のボタンがありますのでクリック(ここのボタンを押しても何も起こりません)
Download ZIP をクリックするとダウンロードが始まります。


必要なファイルは 2つ です。
lazysizes.min.js
ls.object-fit.js
前者がlazysizesを動作させるための元JS。
後者は Microsoftブラウザ(IE11, Edge)対策のためのJSです。
Microsoftゴミブラウザの対策などしない、という方は不要です。
この後者のファイルはpluginsフォルダの奥に入っています。

2つのファイルをFC2サーバーにアップロードしますが、事前に名称の変更をしてください。
拡張子前のドット(.)はFC2では使用不可ですので、取り除くなりハイフンに置き換えるなりしてください。

CDNを利用

アップロードせずに無料で使えるCDNを利用することもできます。
dcnjs/lazysizes


ここでの作業はコピーのみです。
ここに直接URLを書けば良いのですが、私が直接ここで配布してもいけませんので自身でサイトを訪れて取得してください。

アップロードの利点
・ CDNサービスが閉鎖されても手元にファイルが残る
CDNの利点
・ gzip圧縮で転送される(高速)

テンプレート内に記述

この章は要約タイプをお使いの方もお読みください。

いずれかの方法でファイルを入手できましたら、取得したURLを以下のような形にしてください。

【必須JSファイル】

<script src="ここにobject〜のURL"></script>
<script src="ここにlazy〜のURL"></script>

で、ここからちょっと分岐に入ります。
自身の条件と照らし合わせて選んでください。

1. トップページで使用, 個別記事では使わない場合

<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area--><!--not_search_area-->
<script src="ここにobject〜のURL"></script>
<script src="ここにlazy〜のURL"></script>
<!--/not_search_area--><!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->

2. トップページで使用, 個別記事でも使用したい場合

<!--not_titlelist_area--><!--not_edit_area--><!--not_search_area-->
<script src="ここにobject〜のURL"></script>
<script src="ここにlazy〜のURL"></script>
<!--/not_search_area--><!--/not_edit_area--><!--/not_titlelist_area-->

3. FC2プラグイン(サイドメニュー)に適用したい内容が一つでも存在する場合

<script src="ここにobject〜のURL"></script>
<script src="ここにlazy〜のURL"></script>

FC2独自変数(エリア変数)の使い分けです。
delay loading導入の主旨が「ページ負荷を減らす」ことにあるのですから、不要なページ種でJSを読み込まずに済むようしっかり分けた方が良いですね。

記載する場所

jqueryファイルのすぐ「上」で良いです。
ajax/libs/jquery で検索すると出てきますので目印にしてください。

CSSの追加

.lazyloading{opacity:0}.lazyloaded{opacity:1;transition:opacity 1s}

こちらは任意です。これを入れておくとフワっと表示されます。
ただopacityは比較的動作に負担がかかるプロパティですので、delay loadingを追求するなら入れない方が良い「かも」しれません。
個人的には入れて欲しいですけどね。いきなりバッと表示されると風情が無い。

要約タイプメンテ済みについては 個別記事への適用を除外しています。
個別記事でdelay loadingを利用するには、記事作成時のhtml入力が必須 ですのでデフォルトでは除外。
この点も踏まえて最も適切と思われる内容を選んでください。
全文タイプの場合には個別記事で適用しなければ当然トップにも反映されませんので
全文タイプでdelay loadingを適用する場合には記事作成時のhtml入力必須
ということになります。

要約タイプは個別記事とトップページの内容が全く別ですので、そういった事情から要約タイプのみデフォルト導入となっています。

全文タイプの方が選ぶなら最低でも 2 かな、と思います。
要約タイプの方は、トップだけで良いと思えば何もする必要はありません(メンテ後再DLしたのであれば、です)

導入後の作業内容を簡単に説明しておきます。

トップページのみ適用
・ テンプレート内での1処理のみ --- 要約
・ 記事作成時のhtml入力必須 --- 全文(使用のON/OFFを切り分けるだけなので無意味)

個別記事適用
・ 記事作成時html入力必須 --- 要約・全文共通

FC2プラグイン適用
・ プラグインソースコードに1処理 --- 要約・全文共通

要するに 個別記事で使う場合だけ毎回html入力作業が発生する ということです。
できそうにないなぁ… と感じられましたら導入しない方が無難です。

注意
要約タイプは
【検索結果ページ】では使えません。
このページ種はサムネイルをFC2ブログ変数で出力する必要があり、そのhtml内容には手出しができません。
クラス名とか追加できませんので無効です。
全文タイプは
【検索結果ページ】【カテゴリページ】【タグページ】【アーカイブページ】
も「私のテンプレートでは」使えません。使いたい方はリスト系ページを全文に書き直す必要あり(カテゴリ, タグ, アーカイブ)
でもって【コメント編集】【全記事一覧(インデックス)】のページ種はサムネイル自体ありませんのでそもそも対象外。

記事作成時のhtml内容

全文トップページは個別記事の内容如何、要約トップページは既に私の方で処理済ですので個別記事のhtml説明に限定します。
(メンテ前要約をご利用の方は本記事を参考にご自身でトップページへの適用をお願いします。質問は受付ません。そのためにメンテしてるわけだから(笑))

今回は「初級編」ですので、最低限の内容に留めます。

<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="ここに画像アドレス" alt="代替テキスト">

クラス名 lazyload これがdelay loading対象の画像であることを示しますので重要です。
通常の画像掲載では src 属性の値として表示画像のURLを入れますが、ローディング時に画像を読み込ませないために代替画像を入れておきます。
先回の記事で説明しましたが バリデーションにこだわりのない方は省略して構わないと思います。

省略したくない方は雛形にあるようにデータURIを使うか、あるいはご自身で1px×1pxの透過gif/png画像を準備してください(後述)

本物の画像(最終的に表示させる画像)は data-src の値として書きます。
ここ間違えてしまうと全てパーですからしっかり把握してください。
こちらはhtml5で新たに追加された カスタムデータ属性 というやつです。
html4では使えないよ (ノ゚ェ゚)

通信の仕組みとdata URI scheme

data URIのデメリット
・ キャッシュが効かない(ブラウザが毎回処理を行います)
・ 文字列が長いのでファイルサイズは増える

スペイサーGIFのデメリット
・ ファイル管理の必要がある(画像の消去に気をつける)

Data URI Scheme(データ ユーアールアイ スキーム)の説明をざっとしておきます。
通常は 通信リクエスト が生じる画像をテキストデータに置き換えることで、ファイル管理不要・通信量削減がメリットとして挙げられます。
今回利用しているのは透過GIFをテキストデータ化したものですが、通常の画像でも同じく置き換えが可能です。
ただしサイズ(容量)の大きいものは却って負担となります(キャッシュが効かない点なども含め)ので、極小の画像で使用するのが最適です。

delay loadingの本質は リクエスト回数を減らす 点にあります。
画像は「アドレス」を持っていますので、その住所を尋ねて情報を取得するわけですが、ページが重たくなる大きな原因のひとつに「リクエストが多い」ことが挙げられます。
それを無くそうや、というのがdelay loadingの狙い。

通信の仕組みは以下の通り

DNS問い合わせ

サーバー接続

データリクエスト
delay loadingのメリットdata URIのメリット

レスポンス待ち
delay loadingのメリットdata URIのメリット

取得情報のダウンロード
キャッシュのメリットdata URIのデメリット

上記内容が大雑把な相関図ですけれども、data URIのデメリットで挙げたのは「ファイルサイズが大きくなる」点です。
今こうしてみなさんが読んでいる文字にしても、全角は2バイト、半角ならば1バイトといったように容量があるわけです。
文字列が長ければ長いほど単純にファイルサイズは増えます。
あと記事の編集がし辛いわなー。たぶん (´・ェ・`)

data URIのメリット「通信量削減」とデメリット「ダウンロードサイズが大きい」の天秤ですね。
リクエストを減らすこととダウンロードの負荷を考えた場合、同ページ内で1万回ぐらい利用するとデメリットが上回ります。
ブログであればメリットの方が大きいと判断しても良いと思います。

繰り返しますが、バリデーションはどうでも良いという場合にはsrc属性を「書かない」というのが最適解。
それがdelay loadingのポテンシャルを最も活かせる方法です。

これなかなかね、他ブログではdata URI schemeって使いづらかったりするんです。
文字数制限があるでしょう? (´・ω・`)
FC2ブログの場合は文字数でなくファイルサイズ換算なんですよね。それもかなり余裕のある。
ありがたやー (´・ェ・`)
たぶんYahoo!ブログとかだとこの記事内容の半分も載せられずに制限喰らうと思う(笑)

重要事項【必読】

FC2ブログは 本文の一番最初に掲載した画像が自動的にトップページサムネイルとして指定される という特徴を持ってます。

アイキャッチ画像を指定「しない」場合には、最初の画像にdelay loadingを適用してはいけない

サムネイルの取得はサーバーサイドで行われますので、レスポンスが返ってから処理するJSを使ってしまってはサムネイル抽出の処理段階で対象画像が「無い」という判断になります(代替画像なしの場合)
代替画像がdata URIの場合には、OGPなどの関係上サムネイル対象とはなりません(絶対パス、つまりスキームの https: が必須)
さらに代替画像がスペイサーgifやpngの場合にはそのまま「透けてるから目に見えない」画像が選ばれてしまいます。

最初の画像も対象にしたい場合には アイキャッチ画像 指定の機能を利用し、サムネイル対象画像を意図的に作ってください。
この特徴を忘れるとトップページのみならず関連記事などあらゆるサムネイルが空白になってしまいます。

使いこなし提案

私は記事作成時にhtmlを全て手入力する派ですが、さすがにこれは無理だ (´・ω・`)
みなさん辞書登録を上手く使うと良いですね。
「れいじー」とかで登録しておくとか。

Google辞書での説明をしますと、単語登録の仕方は「単語登録(簡易)」と「辞書ツール」とがあります。
簡易登録の方はバイト数制限が厳しいので、辞書ツールから追加してください。
でないと長いから入り切らないです。

それから別途「でーた」とか適当な名前をつけてdata URIのみ出力できるようにしておいた方が良いです。
ってゆーか、しておいてください。今後UP予定の中級・上級編できっと役に立ちます。

このページにもあるように「見出しスクリプト(TOC)」を利用しており、各見出しへジャンプできるようにスムーススクロールを導入している場合。
概要は先回の記事に記しましたのでそちらをお読み頂くとして、FC2ブログエディターを利用すると良い と思います。
エディター使うと width/ height属性が自動的に出力されます ので、スクロール時の位置ずれを緩和できるかと思います。
ただ画像は基本レスポンシブ掲載ですからサイズは流動的… ってこれも書きましたので読んでください。
画像の縦横比を算出するのは大変困難ですので、エディターの力を借りる、と。
や、困難っつっても別にアプロード画面見て自分で書いても良いんだけどさ(笑)
ちなみにwidth/ height属性が有り、さらにstyle属性でCSSのwidth/ heightプロパティで掲載寸を指定した場合、style属性の方が優先されます。レンダリングには無駄が生じます。

threshold(スレショルド) しきい値の概念について

画面に入ってから情報取りに行ってたんじゃ遅いわけよ (´・ω・`)
threshold, offset, distance と、表現の仕方は様々ですが要は「画面に入るどのぐらい手前で処理を始めるか」の指定です。
もう今回はデフォルト値で良いと思います。400px手前で開始ですね。
大抵どの同系プラグインでも300〜400ぐらいです。

まとめと雑談

お前元々雑談だらけだろ m9(´・ω・`)
って感じなんですが。

他ブログのdelay loadingがどんなもんか知りうる範囲で書いておこうかな。
雑談ですよ。こんなのは雑な談話。
だってFC2ブログに関係ない…(笑)

アメーバブログ
・ 代替画像あり(data URI schemeのsvg)
・ フェイドインエフェクトなし
・ 独自JS
・ スマホ版のみ

アメーバは最近流行り…っぽいけど実際はあまり使われてなさげなSkeletonView(スケルトンビュー)も使ってますね。
その影響かしらんがブラウザバックがムカつくほど遅いけどね。

こういうやつ。これはFC2でやっても良いかもしれませんね。
気が向いたらテンプレでやるかも。

ナチュログ
・ 代替画像あり(data URI schemeのpng, 文字列めっちゃ長いやつ)
・ フェイドインエフェクトあり
・ Lazyload(ご本家)

ちょっと前は代替画像が無かった気がしますが、個人の設定かしら?

muragon
・ 代替画像あり(透過png画像)
・ ファイドインエフェクトなし
・ Lazyload(ご本家)

こんな感じですかね (´・ω・`)
最後に予告ということで。

中級編 --- FC2公式プラグイン「新着記事サムネイルつき」, 個別記事下「関連記事リスト」への適用の仕方
上級編 --- picture要素を利用したレスポンシブイメージ(パソコンとスマホで表示する画像を分ける) , ブログカードへの適用(ブックマークレット新仕様配布)
を予定しております。

関連記事

Comments 3

There are no comments yet.
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/02/06 (Tue) 15:14 | EDIT | REPLY |   
Akira  
To lazyloadの件 内緒さん

ありがとうございます ( ゚Д゚)ノ

<img class="lazyload" 〜省略〜 class="shadow-attachment">

赤字部分クラス名の重複が原因です。以下のように修正してください。

<img class="lazyload shadow-attachment" 〜省略〜>

クラス名が複数あるときは半角スペースを挟んで同じ箇所に記してくださいね。
よろしくお願いします。

2018/02/06 (Tue) 17:31 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/02/08 (Thu) 13:05 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
FC2テンプレート ご利用時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ