はてなブログでlazy loadを使う方法【写真ブログにおすすめ】

はてなブログでもlazy loadを使いたい

当ブログははてなブログからwordpressに移行しましたが、新たにはてなブログのほうで完全趣味のブログPhoto and Lifeをつくりました。完全趣味なので収益化とかは考えずに気分でやっていきます。

趣味の方のブログでは写真ブログと名乗るだけあり、写真にかなりの重きを置いています。しかし写真ブログなので画像一枚一枚の容量がかなり大きいのです。もちろん圧縮すればいいのですが、写真ブログなんだし、せめて長辺1920pxかつほぼ無圧縮の画像を載せたいです…

これが普通のブログなら画像の圧縮によってかなり軽くなりますが、写真ブログだとそうもいかないです。

なのでせめてもの対処として、はてなブログでも「lazyload＋ダミー画像の初期読み込み」という手段を使って、ブログの動作を少しは軽くしました。

はてなブログでlazy loadを使う方法

以下では「見たままモード」を使っている場合を考えます。「見たままモード」の場合、「HTML編集」の項目が使えるため、以下の操作をHTMLの編集から行います。

「はてな記法」や「markdown」の場合は少し面倒かもしれませんが、この2つのモードは文中にHTMLコードをそのまま記入できたはずなので、同じように編集すれば可能かと思います。

lazy loadのみを使う場合

はてなブログでlazyloadを使い、画像の遅延読み込みさえできればいい場合はこのサイトが参考になります。

上記サイトよりコードを引用しますが、以下のコードをはてなブログ管理画面より、「デザイン」→「カスタマイズ」→「フッタ」に貼り付けます。ヘッダーでもいいのですが、ページの高速化を考えるとフッタに貼り付けるのが良いです。

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<script>
$('.lazy').lazyload({
    effect : 'fadeIn',
    threshold :200
});
</script>

これではてなブログでもlazyloadが使えるようになりました。lazyloadで画像を読み込ませる場合は、HTML編集から画像のソースコードを次のように変えます。

<img class="hatena-fotolife lazy" data-original="【貼り付ける画像URL】">

重要なのはclassに”lazy“を付け加えること、貼り付けたい画像のurlを”data-original“で指定することです。この2点を守ればlazyloadが作動します。title属性やalt属性などは必要に応じて追加して下さい。

注意ですが、画像を上のように記述すると、編集画面（見たままモードのほう）では表示されません。プレビュー時のみの表示となりますので注意してください。

最初は低解像度のダミー画像を読み込む場合

上記の方法でほぼ解決ですがlazyloadの性質上、画像が読み込まれるまで何も表示されません。それが利点なのですが、写真ブログとしては何が写っているか程度は分かる低解像度の画像が表示されてほしいです。なのでlazyloadが動作する前は低解像度のダミー画像を読み込んでおき、lazyloadが動作したら高解像度版に変更するような動作にします。

と言ってもやり方は簡単です。先程述べた画像のコードに、src属性を追加するだけです。ソースコードはこんな風になります。

<img class="hatena-fotolife lazy" src="【低解像度の画像URL】" data-original="【貼り付ける画像URL】" />

ダミー画像を読み込んでさらに高解像度版も読み込むので、ページ全体の容量は増えてしまいます。でも閲覧側としては素早くページを表示してから低解像度→高解像度に変化するので、ストレスは減るのかなと思います。

□追記　上記の方法は容量の無駄が多いので、現在はダミー画像としてベタ塗りしたPNG画像を使用しています。これなら画像サイズが1200×800でも容量は241バイトしかありません。
実際に使用している画像は以下のものです。ただのベタ塗り画像なので自分のブログ等で使っていただいて構いません。

注意点

はてなブログでlazyloadを使うにはいくつか注意点があります。

編集画面でのみ画像が表示できない

これは先程も述べましたが、HTMLを編集すると見たままモードでは表示されません。もちろん実際にプレビューすれば表示されるので問題は無いのですが、管理するのが地味に面倒です。

画像URLを自分で貼り付ける必要がある

画像のHTMLソースを編集しますが、その際に画像のURLは自分でコピペして貼り付ける必要があります。特に機能的な問題はありませんが、面倒くさいです。

今後のアップデートによっては不具合が出る可能性

この方法ははてなブログが公式にサポートしている訳ではありません。なので今後のはてなブログのアップデートによっては不具合が出る可能性が十分あります。

まとめ

はてなブログでもlazyloadを使用することはできました。写真ブログとしてはlazyloadを使えるだけでページの体感速度が結構変わったと思います。

写真ブログに限らず、はてなブログでlazyloadを使いたい場合の参考になればと思います。