このブログはガーデニングの記事がメインなので、どうしても記事中に画像が多くなってくる。
記事作成の際にいつも少し悩むのは「画像をどのくらいのサイズにするか」ということである。
軽めの小さいサイズの画像にした方がサイトの表示速度が上がるのは分かっているのだが…。
「PCでの閲覧に合わせてある程度大きい綺麗な画像を載せたい」という気持ちもあるが、「スマホで読むときにこんな大きいサイズは必要なかろう」という事情もあり、そのせめぎあいが難しいところである。
今回はネット上で無料でできるサイトのスピード測定と、画像の縮小によって多少表示速度が改善された結果について書いてみる。
きっかけはこちらの記事
今回の様々な処理のきっかけは、先日ziziさんのこちらの記事、
を読んで、試しに自分のブログのスピード計測をしてみたことが始まりである。
そこそこ画像サイズには気を遣っていたつもりだったが、驚くほど低い数値が出て焦り、ひとまず重すぎるページの改善をしてみたという次第である。
※ ziziさんの記事ではブログに載せる画像の適切なサイズについて分かりやすく比較されているので、ブログに写真を多く載せる方はとても参考になると思います。
まずはスピード計測！
スピード測定にはGoogleから提供されている、
を使用。
使い方は簡単で、サイトにアクセスして、ブログのトップページ（や個々のページ）のURLをコピペするだけである。
試しにこのブログのトップページのURLを入力して計測してみると…
モバイルで18、パソコンで24という相当低い結果に（笑）。
ziziさんの記事では、モバイルで24、パソコンで51という数値で「低い」と書かれていましたが、それを圧倒的に下回る低速の結果に驚愕。
「うわっ、私のサイト…遅すぎ…？」
という気分である。
※ 実はこの結果の画像は、既に一つ画像の軽量化処理をした後です。
最初に計測したときに低速の原因のぶっちぎりトップだった「ロンギカウリス２年目」の記事を見て、焦って軽めの画像に変更した後でこの結果。
その変更前は「９」とかだった（笑）。
どうも50を切ると赤信号のようなので、何とかして多少改善できないか検討してみることに。
画像の縮小処理
普段は、さすがにスマホの写真そのままではなく、「縮小専用。」というアプリケーションでサイズを小さくしてはいる。
（ziziさんの記事では、はてなフォトライフを用いた縮小のやり方が紹介されています。はてなフォトライフを使った方が、新たなアプリを入れなくていいので楽だと思います。自分は知らなかったので…。）
スマホなどで撮影した写真はたいてい「4032×3024」とかの特大サイズである。
例としてこちらの画像を。（この画像は既に小さくしています）
この元画像をWindows標準の「ペイント」ソフトで原寸大で開いてみると…
こんな状態になる。元画像、左上の一部しか映っていない。
スマホ表示はもちろん、パソコンで表示するにも全く必要ないサイズである。
大型テレビやスクリーンなどに投影するならばこのサイズの利点をフルに生かせるのかもしれないが…？
というわけでブログに投稿する際は、いつもこちらのアプリケーションで画像を縮小している。
アプリケーションを立ち上げて、サイズを選択して、画像をドロップするだけなので簡単である。複数画像を一気に処理することもできるところが便利。
（あと、どうも画像にくっついているいろいろな情報（撮影日時とか撮影したスマホの機種とか）も一緒に消えてくれている模様）
先ほどの画像、元のサイズは「2.66MB」であるが、1024×1024だと302KB、800×800だと201KBになるので大幅に軽量化される。
800×800にした画像を、ブログに載せると以下のようになる。
はっきり言ってこれくらいで十分かも？
さらにひとつ小さめの640×640の設定にしてみると…？
これでもいいかもしれない。
一番きれいに咲いている写真は大きめ、苗を植えただけのような写真は小さめでもいいか？
一眼レフとかで撮影した「PCの壁紙などにも使えるような渾身の一枚」ならともかく、植物の成長などをどんどん載せるだけならそこまで大きなサイズにする必要もないだろう。
ガーデニングブログゆえ、どうしても写真が多くなるので、ここの画像の縮小は必須である。
「改善できる項目」の検討！
スピード測定した後に、下に表示された「改善すべき項目」をチェックしてみる。
「オフスクリーン画像」とか、「次世代フォーマット」とやらは素人なのでよく分からない…。よって「適切なサイズの画像」というところを見てみる。
（わかる方がいらっしゃったら、教えて頂けると嬉しいです）
結果の見かたがよく分からないが…。
「リソースのサイズ」というのを見ると、数値が多めの800KB程度になっている
記事がいくつかある。
そして表示されている画像は、各記事のトップ画像である。
はてなブログ無料版ゆえ、トップページを一覧表示にできないため、各記事は序文とトップ画像までで「続きを読む」にしている。このずらりと並んだトップ画像が「重い」と判断されているのだろうが…
この「800KB」というのは画像１つあたりの容量としては実際のサイズより大きいし、その記事全ての画像の容量としては少ない。何を示しているのだろう？
だが、おそらくその記事（または画像）の容量が大きいことは間違いないと思うので、ひとまずここで示された画像が含まれる記事の写真を縮小してみることにする。トップ画像だけ処理しても効果は出そうだが、どうせなら記事全体を処理した方が、個別のページでの表示速度も上がるだろう。
既に処理した「ロンギカウリス２年目の記事」の次に改善項目の１位になっていたのが「オリビアローズオースチンの２年目の満開」の記事。
バラの満開に浮かれ、画像が30枚と多量だった。
この記事の多数の写真をアップし直すのは憂鬱で仕方ないが……頑張ってみたら
PCの方は少し改善。パソコンの方の数値が24から36になった。
※ モバイルの方の数値はほとんど変わらなかった。モバイルに最適化するなら、もっともっと小さい画像で十分なのだろうが、PCでの閲覧に耐えるようにするにはそこそこ大きい画像を載せたいし……悩ましいところである。
ただ、この軽量化が即、パフォーマンス数値の改善に直結したのかどうかはよくわからない。測定の誤差範囲かもしれない。
（改善を実施しても「パフォーマンススコアには直接影響しません」とか書いてあるし…）
しかし、項目別で見ると、明らかに容量が減っている（下の写真矢印部分。上では897.6KBだった）ので、確実にこのページの表示速度改善はされているだろう。
この記事は写真の数が多かったこともあり、この貼り直しだけで、
・貼ってある画像の確認
・元画像のPC内画像フォルダからの再ピックアップ
・画像の縮小処理
・キャプションを含めた貼り直し
の作業が必要で、これだけで１時間かかった…（笑）。
特に画像を消す前にキャプションを覚えておいて、貼り直してから同じ文を書き直すのがなかなかの手間で…。もっと効率のいいやり方がありそうだが。
さらにその次のカラドンナの記事にも取り組む。
少し慣れた（＆写真の数が少なかった）こともあり、３０分くらいでできた。
これでスコアはさらに改善して44。
「リソースのサイズ」で700KBを超えているような別記事も処理した結果、最高49まで行った。
モバイルの方はこれだけ処理しても、あまり変わっていない。
スマホなどで見る場合、800×800でも、全く必要がないサイズだからだろうか。
しかし、PCで見ることも考えると、あまり小さくもできない。
悩ましいところである。
※ ちなみにこの測定は誤差があるらしく、何も変えずにもう一度測定しても少し数値が変動します。ただ、軽量化の処理をしていくたびに少しずつ平均値が上がっていった感じです。
個別の記事なら…
サイトのトップページでなく、個別の記事であれば50を超えるものもあった。
現状、ブログのトップページよりも個別記事の方へ検索で飛んできてくれることが多いようなので、ひとまずこれでいいだろうか？
はてなブログ無料版ゆえ、トップページを一覧表示にはできないので、どうしても速度が遅くなってしまう。
できる対策といえば、トップページに表示する記事数を減らすくらいか…？
トップページの記事数を減らすと、前の記事に行くのに何回もクリックしなくてはならなくなるので、それも悩ましいところである。
おわりに
ブログの記事の展開的に、何とかトップページも50を超えて黄色信号くらいにまではしたかったところだが、ひとまずその直前の49まで行ったところで今回の処理を終える。
「サイトの表示速度が検索順位に与える影響はそこまで大きくない」という情報もあったが、それでも検索等で来てくれた読者の方が
「何このサイト……重ッ！！」
とか感じてすぐ離脱するのを防ぐためには、多少の軽量化は必要だろう。
とはいえ、あとかさんのこちらの記事
では、1200ピクセル以上の高解像度の画像を使った方がGoogle的にはいい、という面もあるとのことなので、表示速度との兼ね合いが難しいところ…。
ひとまず、ひとつの記事に載せる写真が多量の場合は軽めにして、数が少ないときには多少高解像度にしてみる、という折衷案で対応してみようかと考えている。
（またはトップ画像だけは軽くするとか）
※ ziziさん、あとかさん、記事を参考にさせて頂きありがとうございました。
勝手に記事を引用していますが、問題がありましたら削除しますので、お手数ですがコメント欄等でお知らせ頂ければと思います（コメント欄は自分が承認するまでブログに表示されませんので、確認・対処後コメントごと削除します）。←これもあとかさんのやり方を参考にさせて頂きました…（笑）
（ ↓ この記事がなんとSmartNewsに掲載されました！）
（ ↓ 他のブログ運営系の記事はこちら）
