神戸グルメゲリラ

Nukko Nuko, sometimes gourmet blog

はてなブログでオフスクリーン画像の延滞読み込みロード(lazy loads)を動的かつ簡単に使う方法です。画像の多いブログはPageSpeed Insightsが改善します!

はてなブログで、オフスクリーン画像の延滞読み込み(lazy loads)を使うには

乗り越えないといけないハードルが色々ありまして、断念されてる人も多いと思います。延滞読み込みの環境は実装できても、新規ブログ毎に画像に対して手動でlazyタグ埋め込んで下さいとか、過去記事も全部メンテして、埋め込んで下さいとか、これでは実用的ではありません。

はてなブログでも、こうすれば、実用的に延滞読み込み簡単に出来ますよ!

しかも動的に自動で!ってのを、やってみました。

一応、うまくいっており、画像の多いページでは、劇的に初回のページロードが劇的に短縮され、特にスマホでは後方に、ずらりと並ぶサイドフレームコンテンツにも有効でして、画像の延滞読み込み(lazy loads)は、効果覿面です。

最後に付け加えておりますが、この延滞ロード実装は擬似AMP対応みたいなものって話しです。

「Lozad.js」という延滞読み込みを使用してみました。

オフィシャルサイトです。使い方を説明しています。

僕の方で必要な部分だけ、抜粋していますので、特に読む必要もないかと、結局どうするのと、読んでもモヤモヤ~っとなるだけですw

apoorv.pro

まず、必要な実装がコレ、エンジンは外部からロードして使うタイプ、中のソースコードを見てみましたが、驚くほどコンパクトです。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

 そしてコレで延滞読み込みが実行される

const observer = lozad();
observer.observe();

なんですが、 はてなブログでは、これだけでは作動しない事情がありまして、ネックとなっているのがimgタグのclass名にlozadを追加しなければ、作動しません。

ほとんどの延滞読み込みの手法が、このclass名へ何らかの専用タグを追加する仕様になっており、あっコレ無理!と断念されてるのかと思います。実際、成功したよ!という記事が、はてなブログのケースで見かけることがないはコレが主な理由かと、なので、とにかくシンプルな方法でチャレンジしてみました。

方法はある!簡単にいこう!ぶっこめばいい!

例えば、はてなブログの場合、画像ファイルはのHTMLタグは、こんな感じ

<img class="hatena-fotolife"  .....>

これを以下に変更しないといけない

<img class="hatena-fotolife lozad" .....>

これで解決できます。

$(".hatena-fotolife").addClass("lozad");

 

そして最大の関門を突破する!

さらに嫌らしい仕様があります。

.hatena-fotolifeクラスのsrc属性を複製して、新たな属性data-srcを作り、srcの内容を空にすること!

こいつが難関ですでが、これも簡単に突破してみる。

まずは、Lozad.の挙動を、ご説明いたします。これはうまく作動しているか知る為にも必要な内容なので、読んで下さいね。

元々あった.hatena-fotolifeクラスのsrcはunknownとなり、画像ファイルのURLはdata-srcに移されます。Lozadが作動すると、デバイス画面上に今、表示すべきimgタグのsrcのunknownの分だけの画像をロードしようとします。data-srcのURLからロードが行われます。ロード完了後、srcにdata-srcのURLが戻され、さらにdata-loaded="true"の属性が付与されます。

つまり、最初は.hatena-fotolifeクラスのsrcが空なので、結局ロードされず、ページ本体のHTMLのトラフィックが優先されることとなり、結果、早くページ本体が表示される。以後、ユーザーのスクロール動作によって、表示すべき未ロードのimgがロードされ、効率よく個別にロードが行われトラフィックが緩和される。細い回線での壊滅的な全画像ファイルの同時読み込みが回避できます。

なので、うまく実装できたか点検するには、ページロード後に各ブラウザにてHTMLの検証を行い,、.hatena-fotolifeクラスにdata-loadedが付与されているか確認します。まだ読まれていない.hatena-fotolifeクラスは、src=unknownで、スクロールさせ読ませると、data-loaded="true"が付与、srcにもURLが入ります。となっていれば

おめでとうございます!延滞読み込みの機能が無事、実装されました!

となります。

この、はてなブログの延滞ロードが素晴らしい点は、srcに画像のパスが入ったままのオリジナルの記事に対し動的に行える点です。従来の延滞ロードは元の静的ページのsrcを空にしておく必要があるので、延滞ロード専用に記事を書き換える事からSEO的にも不都合が生じてると思われます。

これをデザインのフッタへセットする。なるべく先頭で

合わせて、.urllist-imageクラスのサイドバーコンテンツのサムネイル画像にも行います。結構少ない実装で実現できます。これだけ

 

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

<script>

$(".hatena-fotolife").addClass("lozad");

$(".hatena-fotolife").each(function(i, img) {
    $(img).attr("data-src", ""+$(img).attr("src")+"");
    $(img).attr("src", "");
});

$(".urllist-image").addClass("lozad");

$(".urllist-image").each(function(i, img) {
    $(img).attr("data-src", ""+$(img).attr("src")+"");
    $(img).attr("src", "");
});

const observer = lozad('.lozad', {
rootMargin: '200px 0px'
});
observer.observe();
</script>

はてなブログ専用です!

※$(function() {は不要です。外で実行を!理由はHTML読み込み直後に実行したいから

※rootMarginというのは、どれぐらい手前で作動させるかです。例えば画像の延滞ロード最優先なら0px、今表示してるところから200px下に画像あればロードして表示のラグ解消を優先といった具合です。あまりに大きいと、せっかくの初回ロードの効果が薄れてしまいます。様子見で200pxから始めてみます。

※srcを空にしてますが、実はここローディングgifを設定してもOKです。むしろ設定した方がいいと思います。

こんなやつ(これは1KB、可能な限り小さいバイトサイズが望ましい)

f:id:tommyoctopas:20190814214640g:plain

最小サイズでなら、1*1pxの動的透過gif

data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7

JQueryですが、こちらを使用しています。もし動作しない場合は、こちらに換装してみて下さい。headに設定するのが、望ましいです。

<script src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>

 

 

回線の遅い スマホで表示させてみると効果覿面です。特に画像ファイルが多い記事で後方にサイドバーコンテンツが多く並ぶページ、初期ロード時間が劇的に改善して、スクロールさせると順次、読み込みが始まり、快適なブラウジングになりました。

実は僕も画像ファイルを最適化せず、超巨大なまま、ばっこんばっこん貼ってるので、あとでスマホでみると、じりじ~り、じりじ~りとしか表示されず、ダメだこりゃと思いつつ、なんとかせねばと、お盆休み、特にやることもなく、暇すぎて、そういえば前からして見たかった難題、はてなブログにおける実用的な画像の延滞読み込みにチャレンジしてみました。

スマホで高容量の画像ファイルが一杯掲載されてる記事を読むと、全然表示されなくて、イライラして、見ないで去るといったケース(泣

あると思います。

 

PCで動作確認するには

キャッシュが効いてしまうので、クロームの場合、Ctrl+Shift+Rで完全再リロードが行えます。これで画像ファイルが沢山ある記事を読み込ませ、ページロードが完了するまで待ちます。そして一気に下へスクロールさせ、順次、画像がロードされるのが、見て取れれば、作動している挙動となります。スマホの方が確認し易いです。そもそもPCの回線は早いので

では対応してない古いブラウザで表示すると、どうなるのか?.hatena-fotolifeクラスのsrcを空にしているので、大丈夫なのか?JavaScriptをOffにしてあるデバイスは?

大丈夫みたいです。lozadは、srcへURLを戻して、今までどうりの挙動、一斉ロードを行うようです。恩恵を受けれないデバイスに遭遇しても大丈夫そうです。あとJavaScriptをOffのデバイスは、そもそもsrcを空に出来ないので、むしろ好都合です。

試しにWindows版の恐ろしく古いSafariブラウザで実験してみましたが、作動はしないものの、通常の処理で表示は終えます。古いスマホに関しても同様の挙動をする前提ですが、すべてのデバイス環境を所持していないので、100%OKとは言えませんが、何が問題があれば、情報を追記してみたいと思います。

 

5MB近い画像ファイルを、ばっこんばっこん貼ってる記事で

はてなブログを動的に延滞ロード対応した場合、対応として認めてくれるのか

PageSpeed Insightsで検証してみました。

f:id:tommyoctopas:20190813175359p:plain

まずは、延滞読み込み無しの、今までどおりの一斉読み込み、ページロードに1分超え2分に迫るような超ダメダメな状況です。

再び延滞読み込み有りで行うと、ページロードの問題が解消され、改善項目から無くなり、そして、オフスクリーン画像の延滞読み込みの監査に合格となりました。

※結果判定はパソコンの方のレポートでも構いません。スマホの方は使っている「はてなブログテーマ」がレスポンシブをサポートしている必要があります。

f:id:tommyoctopas:20190813175927p:plain

あと「35KB減らせます」とあるのは、はてなスターです。こいも減らすことは可能ですが、はてなさん側で、ページロード完了直前に差し込んでくる処理やってまして、それをわざわざ待ってまで、カバーするのは、やる価値が無いように思えます。

 

こちらの監査サイトで、巨大画像てんこもり記事を読ませ、合格した監査に「オフスクリーン画像の延滞読み込み」がエントリーされていれば、動作確認完了です。

developers.google.com

 

これでスマホでも巨大画像ファイルてんこ盛り記事でも何とか見れるようになったかと、そして、はてなブログの動的延滞ロード対応は監査クリアのようです。

初回ページペイントが爆速!!

ミッションコンプリート!やったわ\(^o^)/

 

グーグルが監査項目にオフスクリーン画像の延滞読み込みを加えている理由

ウェブマスター向け公式ブログ
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報
ページの読み込み速度をモバイル検索のランキング要素に使用します
2018年1月18日木曜日
検索ユーザーはできるだけ早く質問に対する回答を見つけたいと考えています。研究(英語)では、ユーザーはページの読み込み速度を非常に気にかけていることがわかっています。 読み込み速度はこれまでもランキング シグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。 そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。

これは僕の勝手な推測ですが、グーグルが推進しようとしてる「AMP(Accelerated Mobile Pages)」と関係があると思われます。とういうのは、このAMPは、延滞ロードをデフォルトで、かつもっとネイティブに実装している仕様、AMPが高速な理由は、この延滞ロードを積極的に使って、ページの初回ペイントを従来よりも超高速化する。

邪推ながら、この監査項目の延滞ロードって、かなり重要視している可能性あり

AMPでは無いものの「おっおまえ早いやん、おっ延滞ロードやってるのか、じゃAMPと同じぐらいのSEOポイントやるわ、こっそりね!」とグーグルはやってるかもしれない(笑

PCなら、いざ知らず、スマホなら、ページの初回ペイントに3秒以上かかると、100人中、半分の50人は見ずに去ると言われており、早ければ早いほど、見てくれる人の率に比例します。言い方を変えれば、こうなります。クソ記事の可能性があるのに、待たされるリスクがあり、仮にクソ記事なら見れば人間なら0.5秒で判断できるのに、それが中々、表示されない。こういったケースは人間さんが可哀想なので、グーグル先生がAMPとか延滞ロードで救出する作戦を実行しているなら、これから遅い記事は駆逐されるか、もう自動的にAMPへ変換してロードされるとか、グーグルも早ければ早いほど、広告表示の機会が増え、それはつまりは人間さんも早く情報が沢山みれて、いんじゃね(Win-Win

言うなれば、この延滞ロード実装は擬似AMP対応

この延滞ロードでAMPの真似事をして「早くしたんで、わいも、仮でええのでお仲間に加えてくれ」的なメッセージがグーグル先生に届くか、これからアクセス数の変化を見守ってみたいと思います。

PS

このブログは八丈島 猫」「チャトラン ポスター」でしか、ほぼほぼ閲覧されることの無い猫ブログでして(笑、せっかく見に来てくれてるのに、実は問題となっている巨大画像もりもり記事が「八丈島 猫」アクセスなのです。これで何とか今まで以上に見て頂けるようになったかと