attention admin about comments trackbacks you may also like

ブログのスマートフォン表示を速くする改善策 その2【画像の軽量化と遅延読み込み編】

2019年01月27日
スマートフォン表示速度改善
0
FC2ブログ 画像の軽量化 LazyLoad 遅延読み込み PageSpeed Insights

さて、シリーズ 「 スマートフォン表示速度改善 」カテゴリの第二弾記事です。

今回は記事タイトルのように「画像の軽量化と遅延読み込み編」について書きますが、弊記事を応用すれば、あなたのブログのスマートフォン表示速度は一気にアップします(笑) けっして大袈裟な表現ではありません。

その前に、現状のあなたのブログのスマホ表示速度を、下記ブログカードをクリックして開くGoogleのツールで計測して於いて下さい。


PageSpeed Insights

あらゆる端末でウェブページの読み込み時間を短くしましょう


上記Googleの PageSpeed Insights(PSI) で表示されるURL欄に、あなたのブログのURLをコピペ記入して[ 分析 ]ボタンをクリックすれば、現状のあなたのブログのスマホ表示速度が分析出来ますから、その結果のスクショを撮って、パソコンのデスクトップにでも保存しておきましょう。 例えば下図のようなスクショを撮ってです。

Webテク倉庫のPSI分析結果の画像

[ 弊ブログの現状のスマホ表示速度分析結果の一部分です ]

同ツールでは、表示速度改善が必要な場合には「何をどう改善すべきか」のような結果も表示されますが、弊記事ではとりあえずその分析詳細には触れません。


ブログに貼る画像は圧縮軽量化してから利用することが当たり前です

さて、あなたはブログ記事に貼る画像の軽量化は常に行っておりますか? それはブログ運営に於ける「初心者でも常識」なくらいの当たり前の知識ですが、その具体例を実際の画像でご覧下さい。


軽量化していない画像

[ 横縦サイズ: 500 x 281 画像ファイル容量: 98KB ]
軽量化済み画像

[ 横縦サイズ: 500 x 281 画像ファイル容量: 13KB

同じ画像なんですが、上側の画像はその軽量化処理はしてありませんので 98KB と言うファイル容量になっており、下側の軽量化済み画像のファイル容量は 13KB と、そのファイル容量には 98KB - 13KB = 85KB も差があります(笑) 要は、視覚的にはほぼ同じように見えているのに、下側の画像ファイルは 85KB も軽くなっている と言うことなんですよね、要はその軽くなった分、表示速度は速くなると言うことなんです。
ですから、もしあなたのブログで扱って来た今までの画像を、まったく軽量化処理しないままに記事に貼り付けていたとしたら、画像ファイル容量を無駄遣いして来たと言うことと、その分、ブログ表示速度が必然的に重く(遅く)なっていたと言うことなんです。

画像の圧縮軽量化ツールを積極的に活用しましょう

インターネット上には、画像ファイルを劣化なく綺麗なまま「圧縮軽量化」してくれるWebツールやアプリはたくさんありますから、あなた自身が「これが私のお気に入り」と言うようなツールを是非見つけて下さい。 筆者が最近好んで利用しているツールは、以前にも記事に書きましたので、下記ブログカードをクリックしてご参照下さい。


これは凄いぞ! Googleのブラウザ画像圧縮WEBアプリ【Squoosh】

以前に、弊ブログで 『 GIFアニメーションや画像を劇的に軽量化する無料サービス 』 として、取り上げた Compressor.io GIFアニメーションや画像を劇的に軽量化する無料サービス...

アイキャッチ(サムネイル)画像の設定にはコツがあるんです

アイキャッチ(サムネイル)画像って、下のスクショのように青枠で囲ってある画像のことですよね。 要は、その記事を表現する「顔」のような存在の画像です。

このアイキャッチ画像の設定を、FC2ブログの記事編集で「本文の編集」欄に貼った1枚目の画像をアイキャッチ画像として扱っておられる方が多いんですが、その方法で貼った画像の横縦サイズが、ブログトップページに表示されるアイチャッチ画像としてのサイズよりも大きいと「ムダなファイル容量」として、スマホ表示速度に影響を受けるんです!

仮に、アイチャッチ画像にするつもりの記事1枚目の画像が、下のような大きな画像だった場合、、、

大判過ぎるアイキャッチ画像

[ 横縦サイズ: 1216 x 684 ファイル容量: 37KB ]

こんなに大きな実寸サイズのものが、ブログトップページの小さなアイチャッチ画像として表示されてしまっては、ムダが多すぎるんです、当然ファイル容量も大きいですから!

アイキャッチ画像の設定は専用ツールを利用しましょう

FC2ブログの記事編集欄には、その下の方に下図スクショのようなツールがあります。

ここでアイチャッチ画像の設定をすれば、トップページに表示される実際のアイチャッチ画像欄のサイズに合わせられて、ムダに大きい画像をアイチャッチ画像と設定しなくても済む訳です。 その結果として、あなたのブログのトップページは全体的に今までよりも軽くなり、表示も速くなるんです。

筆者の場合、アイキャッチ画像設定は、先ほど赤文字で 13KB と表示した圧縮軽量化してあります 横縦サイズ: 500 x 281 を設定してあるんです。 つまりはファイル容量でも 37KB - 13KB = 24KB も軽いんです(笑)

但し、Googleはアイキャッチ画像の横サイズは 1200px 以上を推奨しております (^^ゞポリポリ

■ 追記: 2019/05/13
筆者もやっとここ最近より、アイキャッチ画像の横サイズを 1200px 以上に設定するようになりました。(小さい画像だとiPhone Xなどの高解像度ディスプレイでは横位置にしますとボケますので=以前より解ってはおりましたが(笑))

アイチャッチ画像設定サイズは総体的に応用が利くように決めましょう

利用するテンプレートによって、アイチャッチ画像として表示される横縦サイズには作者のデザイン構想で違いがありますから、その辺りのサイズ設定はご自身で導き出すことが重要です、たまにはブログテンプレートそのものを他のテンプレートに模様替えすることもあるでしょうから、それらのことも加味する必要はありますから、いま利用しているテンプレートのアイチャッチ画像表示サイズと同サイズにキッチリ合わせるのではなくて「やや、大きめ」くらいの感覚で設定するのも良いでしょう。

ブログで扱う画像は全て「遅延読み込み」しましょう

ブログの記事欄に貼る画像だけでなく、サイドバー等に表示する管理人のプロフィール画像等も出来る限り「遅延読み込み」するWebテクニックを利用するようにしましょう。

画像の遅延読み込みを行う LazyLoad のテクニックがそれです

ブログの表示は、下図スクショのようにテンプレートのHTML構造を、上から下に向かって順に読み込んで表示しようとします。

テンプレートのHTML構造というのは、つまりはブログの「骨組み」ですから、本来はその骨組みが一番最初に表示されるべきなんですが、上から順に下に向かって表示されていく途中に記事欄に貼り付けた画像等があって、その画像のファイル容量が大きい場合には、その画像が完全に表示されるまで「その画像の下方になるHTML構造の表示はストップしてしまう」ようになるんです。 複数の画像が貼られている場合には、ますますその下側の骨組みの表示に遅滞が起きて、その結果として「ブログ全体の完全表示が遅れてしまう」のです。

ですから「 先にブログの骨組みを表示完了させてから、その後で、アイチャッチ画像や任意に貼り付けた記事欄の画像を遅らせて表示する 」というテクニックを利用すれば、ブログ構造表示の完成が結果的に速まるんです。

ブログのトップページや記事ページは、最初の表示はファーストビュー(パソコンやスマホ画面をスクロールしないで一番最初に表示される画面範囲表示のこと)と言って、ブログ構造全体が表示されるのではなく「一部分」が見えているだけですから、そういう性質を利用して「見える範囲だけをとりあえず素早く表示させる」訳です。 それを分かり易くしたのが、下図のGIFアニメーションでして、画像をクリックして戴けたらその「画像の遅延読み込み」の雰囲気がリアルに伝わることでしょう。

Webテク倉庫の画像遅延読み込みの様子
[ 画像クリックで GO & STOP ]

そして、そのファーストビューが表示完了したら、画面でまだ表示されていないもっと下の方も、同じように画面外で読み込みと表示を行うと言うことなんです。
ですから、パソコン画面でもスマホ画面でも、下の方にスクロールして行った時に、画像がふわ~っと遅れて現れるように表示されるシーンを、弊ブログで見たことがあると思いますが、それが「画像の遅延読み込み」による副次的視覚効果にもなっているんです。

けっして、画像が重たくて(笑)表示が遅れているのではなくて「ブログ構造の全体表示を先に済ませる目的」のテクニックの為にそのように見えている次第です(笑)

LazyLoad がデフォルトで組み込まれているテンプレートを利用しましょう

弊ブログで利用させて戴いております、FC2ブログのレスポンシブテンプレート( Lilting = りるてぃん )では、既にその「LazyLoad」がデフォルト(初期設定)で導入されており、とてもハイスペックなテンプレートなんです。

LazyLoad のお手本記事はこちらをご参照ください

先般から筆者は LazyLoad と書いておりますが、この呼び方は実際には一般名称でして、その数多くあるプラグインは様々な種類があって、それぞれに呼称がありますが、弊ブログで利用させて戴いております テンプレート Lilting の作者さんである Akiraさんは lazysizes(レイジーサイジズ) というプラグインを採用しております。


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

画像の遅延読み込み、一般的に Lazyload といわれるものですが、こちらを実際に使ってみようの巻 (´・ω・`) 手順及び説明など全て、私が制作したテンプレート上での作業であることが前提で、他製作者様テンプレートに関する言及は一切ありません。 ...

上記のLazyLoad記事には【初級編】【中級編】【上級編】 とありますから、是非にご参照下さい。 筆者もたっぷりと(笑)勉強させて戴きました。

LazyLoad の利用はブログの表示速度を格段に速くする効果があります

LazyLoad を利用したことがないブログでこのテクニックを応用すると、例えば PageSpeed Insights(PSI) のようなブログ表示速度分析ツールでのその結果は、一気にド~ンといった具合に格段にアップしたことが確認出来ます(笑) マジで わぉっ! っと驚くくらいですから、是非に積極的に採用すると良いと思います。

弊記事の最初の方で、スクショを撮って保存することをお勧めしたのを覚えておられるでしょうか?(笑) それと是非比較して戴きたいものですけどね(爆)

この 「 スマートフォン表示速度改善 」 カテゴリ記事の今後について

このカテゴリの記事は、ブログのスマートフォン表示を高速化するテクニックについてをまとめているものですが、これらは過去にも何度も個別記事として取り上げて来ていたものを、より関連付けしつつ更に具体的に書き下ろしておりますが、この【画像の軽量化と遅延読み込み編】を、あなたのブログに応用するだけでも、かなりの高速化が実現出来るものです。

そして、今後の記事では「もっとちょっとだけダメ押し」(笑)的に、しかし確実にスピードアップさせるような記事へと入って行きますので、初心者的意識だとちょっと理解に難しい記事になるかもしれませんが、なんとかそれなりに分かり易く書き進めるつもりでおります。
例えば 「 テンプレートのHTMLやCSSの圧縮や分割読み込み 」「 複数のJavaScriptを1つにまとめてhttpリクエスト数を減らす方法 」 等のテクニカルな記事になります。


ブログの表示速度が上がって喜ぶブロガー

おっ! 凄い効果だねぇ
ナイスだよ~♪

ブログのスマホ表示速度分析は PSI が強力です!
Google PageSpeed Insights

ブログのPC表示速度分析は GTmetrix が強力です!
GTmetrix

検索からの方はトップページへもどうぞ


関連する記事
ぼっちん
Author: ぼっちん
記事に関わらないコメントでもOKですからね~ ^^

コメント(0)

There are no comments yet.