疑問解決記『実体験に基づきながら』

幅広い情報を共有したい。その想いを伝えるために、筆者の体験を絡めて専門的な事から、日常的な事まで幅広く取り扱っていくブログ。

ブログが重たいと、どうなる?表示速度がユーザーに与える影響。


にほんブログ村 その他日記ブログへ
このブログがいいと持った方は

↑クリックお願いします!

ブログを作っていると、絶対悩まされる関門の一つ。

それこそが、ブログの表示が遅い問題である。


最初に結論から

一番の原因は『ブログのタイトルの背景』といっても過言ではない。

最初に陥りやすいのが、デザインを重視したブログの組み立てである。

実際背景のデザインに凝ると、どれくらいページの読み込みが遅くなるか。

約二~三秒である、大したことないと思う人もいるだろう。
f:id:K-rin:20180514145015j:plain:h300
しかし、読み込む立場になって考えて見てほしい。

情報を求める側は待つのであれば、他のサイトでも構わないのである。

極論、独自性に突き抜けたブログはほぼ無いといえるからだ。

私も、概ねその類の人種である。偏見で語るな、といった声が聞こえてきそうだ。

ならば、データを提示しよう。

f:id:K-rin:20180514133227p:plain:h300
How Loading Time Affects Your Bottom Line

これはロード時間が増えるにつれて、閲覧者がブラウザバックする割合を示している。

他にも、モバイルユーザーが12か月間で問題と感じた%や購買意欲(アフィリエイトやadsense)に与える影響なども載っているため、参考にしてほしい。

軽く解説すると、閲覧者の約50%は二秒以内に表示してほしい。三秒以上で40%の人が閲覧の放棄。

f:id:K-rin:20180514145841j:plain:h300
https://blog.kissmetrics.com/loading-time/?wide=1

約80%の購入者は、パフォーマンスに不満があると再度購入しなくなりやすい。

最後の一つは、約50%の購入者はブログの読み込み速度が速いことが、真っ当であると判断するのに重要であることを示している。

購入者の立場からすれば、怪しいサイトから買いたくない事は自明の理だ。

以上の事から、読み込み時間が大切なことは身に染みただろう。

さて、次にどうしたらいいかについて。


対処法を三段階の手順を踏んで試していこう。

① 手始めにブログタイトルの背景をpng形式の画像からjpeg形式に変えよう。


png形式は、可逆圧縮のために他の形式よりサイズが大きくなりがちだ。(他にも透明色が表現出来たり)

なぜ、可逆圧縮だと大きいのか?それは圧縮時、完全に元の画像へ戻せるように配慮した圧縮であるからだ。

jpegの場合だと圧縮した際に、人が感知しにくい一つ一つの画像パーツをそぎ落としていく形をイメージしてほしい。
(なくなったものは取り返せないよ、ということだ)

一方、可逆圧縮は一定の規則を作り出しデータ量を減らす手法だ。その規則を逆算すれば、圧縮元の画像に戻すことも可能だ。

何より、pngからjpegに変えた方がいいことはお分かりいただけただろうか。

② 次に、それでもなお、表示が遅いと感じる場合は、jpegのファイルサイズを圧縮しよう。

変換サイト等を用いて、元画像のサイズを好みに合わせて小さくすると、目に見えてファイルサイズを削減できる。

そのデメリットは、拡大時に画像の粗が目立つことであり、気になるかもしれない。

しかし、自分の満足を重視してまで、読者を減らしたいだろうか?よく考えて、検討してほしい。

③ ここまで改善されない場合、もう背景画像を付けるのをやめたほうがいいだろう。

筆者も圧縮した際に画像の粗が気になり、それなら画像はなくてもよいと判断し、背景の画像を取り外した。

その結果として、週間in数を一日で60(元のin数の四倍)近く上げることに成功した。out数は変わらないままに。

上位ブロガーに追いつくための、最善の一手と考えれば行動に踏み切れるだろう。

他に、サイトを軽量化する方法として、ヘッター・フッターに広告を挟むのやめたり、画像の大きさを指定したり、読み込みに影響を与えるもの(はてなスター・はてなブックマーク等)を減らすことも効果的だ。

広告を見てほしいからといって、読者に見る前にブラウザバックされたら意味がない。

あくまで、記事内で勝負できるようにページを改善しよう。

ここまで、どうだっただろうか。

デザイン性だけでなく、機能性をも高めていこう。

それが、よりよいブログに繋がるだろう。
f:id:K-rin:20180514144806j:plain:h300
合わせて読みたい記事↓
rusia.hatenablog.jp

$('section.archive-entry').eq(0).after('