読者です 読者をやめる 読者になる 読者になる

Life is colourful.

Inspire yourself

表示の遅いブログは損している!ブログを軽量化して訪問者を逃さない誰でもできる対策法

ブログ運営 Web制作

あなたのブログの表示スピード、遅くないだろうか?

最近自分がブログを始めたこともあり、他人のブログを見る機会も増えたのだが、すごく気になることがある。ブログが表示されるまで待たされることが多々ある。

 

企業のビジネスサイトなどは専門のWeb屋が作っているので、さまざまな施策で表示速度が最適化されている。でもブログは違う。Webとは無縁の色んなジャンルの人が運営側にいる。

ブログはコンテンツが最重要だけれども、表示スピードが遅いといくら良質な内容でも、それを見る前に読者は帰ってしまう。誰もが欲しがる超高品質な商品を店頭に並べているのに、店舗の玄関前一面に大量のマキビシが撒かれているようなものである。

 

大きなお世話かもしれないが、ブログ運営者は今一度見なおして欲しい。

 

 

 

画像(写真)に気をつけて

特に気になるのが、ページ内(ヘッダーやサイドバーも含む)に配置されている画像。とくに写真は重くなりがちだ。たまに数MBの画像が並べられていることもあるのだが、写真家や高画質レンズの品質に関するブログでないなら、ちょっとこれはいただけない。

読み手はそれらの画像を全て問答無用で読みこまされていることを意識しよう。

 

最近ではInstagramやFlickr、無料画像提供サービスのおかげで高品質な写真に困らなくなっている。しかし、それをそのままブログに貼り付けるのは危険だ。

詳しい知識はいらないので、せめて以下の2点気をつけてほしい。

  1. 画像の大きさを最適化(最低限に)する
  2. ファイルサイズを縮小

1は、無駄に大きいサイズの画像を貼るのはNGということ。例えば、横幅が700pxしかない記事部分に1024pxの画像を貼り付けても、通信量や待ち時間、読者へのストレス、色んな面で本当に無駄でしかない。(ちなみにこのブログの横幅は620px ※PC表示時)

f:id:mtasam:20160630004009g:plain

 

2は、無駄に高画質な画像はブログにいらない、ということ。ブログ内に画像をはさむことは重要なのだけれど、高画質である必要はない。これも肉眼で劣化が目立たない範囲内で最低限の画質にするべきだ。

 

 

表示が遅いと直帰率や平均滞在時間が悪くなる

PCの読者はまだいい。光回線+強力なCPU&メモリを搭載した端末からのアクセスだ。

しかし、今や世の中モバイルアクセス全盛の時代である。訪問者の6割近くはモバイル端末からアクセスしてくる。朝の通勤時間なら9割近い。

 

f:id:mtasam:20160630105653j:plain

 

非力なスマホ&タブレットユーザに優しいつくりでないと読者は離脱し、サイトの直帰率や平均滞在時間といった数字に悪影響を及ぼす。そして彼らは、PCアクセスの読者よりも圧倒的に「待ってくれない」。スピードが命だ。

 

Googleも最近はいっそうモバイルフレンドリーにうるさくなってきている。

ページが3秒以内に表示されなければ、モバイルユーザの半分近くは離脱する。

Nearly half of all visitors will leave a mobile site if the pages don’t load within 3 seconds.  - Google -

 

グーグルアナリティクスで自分のブログの統計データを見て、離脱率の高いページがあったり、テキスト量の割に滞在時間がやけに短いなら、それは記事の内容だけの問題ではないかもしれない。

 

 

表示速度チェック方法

まず自分のブログの表示速度を把握しよう。

本来は本職のWeb屋に向けて提供されているツールなのだけれど、最近Googleからリリースされたコレを試して欲しい。

 

Mobile Website Speed Testing Tool - Google

f:id:mtasam:20160629235644j:plain

 

URLをいれるだけでサイトの表示速度をチェックしてくれる。当ブログの結果は以下の通りMOBILE SPEEDは67点(100点満点中)でギリギリ。数字が赤くなってPOORと出ると危険信号だ。

 

f:id:mtasam:20160629235741j:plain

 

サイトの速度表示のスコアの詳細を見るには、以下のとおりMOBILE SPEEDの「SEE WHTA TO FIX」をクリックしよう。

 

f:id:mtasam:20160630000246j:plain

 

詳細を見て、「Optimize images」が赤い✕印となっていると「画像が重いよ」ということである。このスコアを見て一喜一憂することもないが、できることがあるなら改善しよう。

 

f:id:mtasam:20160630000632j:plain

 

他にも表示スピード改善のために色々と指摘されると思うが、Web専門でない人にとっては手を出すのが難しい。特にブログサービスなどを使っていると、自分の範囲内で改善できない項目も多々ある。

しかし、ブログ内の画像の軽量化なら誰でも一手間かければできるので、これぐらいは積極的にやってみてほしい。

 

 

対策

では、実際に画像を軽量化してみる。

 

1.画像を入手

画像をダウンロード。今回はこの画像を使ってみる。ダウンロード時の画像のサイズは1280x851。ファイルサイズは117KB。

f:id:mtasam:20160630121440j:plain

 

お手軽に高画質な無料画像を手に入れたい人はこちらの過去記事を参考に。

 

2.ファイルサイズを圧縮

ファイルサイズを小さくするソフトやWebサービスは色々あるが、今回は手軽にドロップ&ドロップできる、こちらのサイトを利用してみる。

Compress Image

 

上のスライドバーを左右させると、圧縮レベルを変更できる。圧縮レベルを徐々に上げていって、画像の劣化が目立つ手前まで圧縮しよう。

 

f:id:mtasam:20160630115754j:plain

 

結果、今回の画像は117KBから31KBまでダイエットできた。さらに画像の大きさも620x412pxに調整して最終的には26.5KBまでファイルサイズを小さくできた。

圧縮とリサイズ(サイズの調整)を同時にしたい人は、こちらのツール。

JPEG Optimizer - Compress and Resize Your Digital Photos

 

 画像の軽量化やツールについて興味を持った人、もっと詳しく知りたい人はこちら。

 

 

最後に

多少不安を煽りぎみで書いたが、実際のところ重い画像を並べていても、読み手の環境によってはそこまで深刻な遅延は発生させていないかもしれない。また我慢強い日本人は多少遅くても、そこそこ待ってくれるだろう。常連のリピーターならなおさらである。

しかし運営側としては、読者目線のコンテンツだけに気を配るのではなく、アクセシビリティという面においても訪問者により快適な閲覧環境を提供する努力をするべきではないだろうか。