どうもブログの読み込みが遅い(;´Д`A ```
特に最上部のヘッダー写真をランダムに変更してから、余計に重いッ。
今後のことを考え、ページがどんな問題を抱えているのか、ちょっとグーグル先生にお伺いすることにしました！
PageSpeed Insights先生に弟子入りする
ページスピード・インサイツ先生の門を叩く。
ここで自分のブログのURLを入力して……先生、チェックお願いします！
すると出てくる出てくる、先生のご指摘の数々！
ロイヤルノートといったかな、うーんきみのサイトはアレだねぇ～、ちょっと画像も重いし～JavascriptやCSSもガンガン読みすぎじゃない～？
まぢですか……(;´･ω･)
上のスクリーンキャプチャは一部だけで、この下にも先生のご指摘がまぁ続く続く……。
よっしゃ！
Google検索などでたどり着いてくださるゲストのためにも、ここはひとつ、改善できるところは改善していこうじゃないか！
（特にWiI-Fiも使わずスマホの限りあるデータ容量の中で訪問してくれている人には申し訳ないし……）
ということで今回は最初のご指摘にあった「画像を最適化する」の対応をしてみます。
画像を最適化する！
ご指摘を細かく見てみると、このように……
ふむふむ、画像を圧縮することで各画像の容量を98%削減できます…
他にも97%…92%…91%……ってうぉい！
オフ率ハンパないですね！
対処することで読み込む量を2.7MB（79%）削減できるといわれちゃあ、やらないわけにいきません。
画像圧縮はJPEGminiやTinyPNGか、Google先生直々のお直しを拝借
仕事の関係で画像圧縮はよくやってました。
「画像を圧縮しなくちゃ」でまず思いつくのはこちらのJPEGmini。
PNG形式のファイルならこちらのTinyPNGが便利です^^
しかしGoogle先生のお直し内容をくまなく見てみると……
このページ向けに最適化された画像、JavaScript、CSSリソースをダウンロードできます。
ちょっとやってみたんだが、こういう風にするとイイんじゃないかな？
よかったら使ってくれたまえ。
なんと先生自ら、最適化した画像（さらにはCSSなども！）を無償でプレゼントしてくれます！(´;ω;｀)
世界のウェブ閲覧をもっと快適にしたい。
Google先生の想いが、こんなさりげない場所で、さりげなく展開されていたなんて………。
これを活用せずに、ブログで発信なんてしてられません！＞＜
というわけで最適化された画像たちをダウンロード
してみました。
なるほど、トップページに表示されてる（読み込まれている）画像のうち、改善したほうがいいとPageSpeed Insights先生が判断したものが圧縮（最適化）された状態で提供されています。
こちらで用意した画像だけじゃなくて、広告で自動表示されてる画像も対象になっているみたい。
ここは私たちウェブサイト運営側では手が出せないので割愛しましょう……。
記事内の写真の最適化をチェック
わたしははてなブログを使っているのですが、はてなブログのトップページでは標準で最新記事のいくつかが表示される仕組みになっています。
わたしは「トップページには一覧感がほしいな……」と思ったので、以前ちょっと手を加えてもっとタイトに、一覧ぽくしていました。
今ではさらにちょっとだけ変更を加えて、記事の冒頭に写真を置き、その写真だけはトップページで見えるようにしています。
※「続きを読む」の手前に写真1枚だけ置いている感じ
そのため、うちのトップページでは各記事の最初の1枚だけは写真が見えているということになります。
その写真が見事に「重い」と先生に指摘されました(;'∀')
では実際に、先生が手直しした画像ファイルをちょっと見てみます。
この青い服を着たお兄ちゃんの写真。これは「20代から貯金しよう」の記事の最初の画像です。
PageSpeed Insightsが手直しした画像は115KB。
いっぽう私が置いていた元の画像サイズは……↓↓
597KB！
先生が圧縮することで、実に約5～6分の1にまで縮小されています！！
これはお見事！
じゃあ、自分でJPEGminiを使って圧縮した場合はどうなんだろう？
実際にやってみたところ……
124KB、約5分の1にまでは縮小できました！
ここでひとつの解がでましたね。
Answer
PageSpeed Insights先生の画像圧縮の精度は最強！
でもJPEGminiで縮小してもかなり良い値にまで小さくすることはできる。
先生に逐一画像圧縮をかけてもらうのもアリですし、自力でJPEGminiをぶんまわして圧縮するのでもOKのようです^^
アイキャッチ画像の最適化は諦める
これははてなブログに限った話ですが、はてなブログではアイキャッチ画像の最適化は諦めるのが妥当なようです。
はてなブログのアイキャッチ画像は正方形。
この正方形の画像は、記事内に掲載した写真から好きなものを1枚指定することで、自動的に生成されるものです。
はてなサーバー側で自動生成しているので私らからは手のほどこしようがないということになります(;'∀')
推薦された画像に置き換えてみた結果
アイキャッチ画像や広告の画像をのぞいて、改善できうるすべての画像を差し替えてもう一度先生のチェックをまわしてみます。
すると！
23点から42点にサイト評価がポイントアップ！
しかし、相変わらず「修正が必要」と手厳しい先生……。
指摘内容を確認すると、
2.7MB削減できます ⇒ 1.1MB削減できます
まだまだできるだろおおおお！？
と先生は仰っているわけです(;'∀')
これ以上どうしろというんですか！？
改めて先生が手直ししてくれた画像を見てみますと、
PCでは横幅だいたい656pxで表示している画像（画像データそのものの寸法は横1024px）を、もっと縮小して286pxにしちゃいなよ！
と先生はいっているわけですね。
これはさすがにキツイ^^;
元の寸法1024pxが大きすぎるというならそれはまぁ、わからないでもない。
なるべく解像度の高いディスプレイで見られた時にも写真はなるべくキレイに表示したいので、大きめの寸法で余裕を持たせて表示させています。
しかし実寸の656pxよりもっと小さい横幅にしてしまえとは、ヒドイ！
そうすると今度は「拡大表示」させることになるので、画像は荒くなります。
さすがにこれには従えないよ先生……。
でも究極まで頑張ってみた
やはり、訪問してくれるゲストありきのブログですし……なんだか指摘されたままというのもどうも気持ちが悪いので、ちょっとやれるところまでやってみることにしました！
具体的には……
- 表示する実寸656pxを包括するギリギリレベルの660pxまで画像サイズを縮小
- アイキャッチ画像もそれ専用の（先生が生成してくれた）画像を使う
この2点をクリアできれば、広告画像などを除いて先生の指摘はゼロになるはず…
やってみた結果がこちら！
画像の最適化だけで23⇒68点まで改善できましたー(^^♪
画像に対し、先生が指摘しているのは残り6つ。
広告・広告・広告・私のアイコン・はてなのやつ・はてなのやつ
もうこれ以上は…さすがに良いかなーと(;'∀')
私のアイコンも、これでも極限まで小さくしてたった6KBですから！
一度諦めたアイキャッチ画像はどうやって小さくしたのか
これは私の場合は…ですが。
前述のとおり、私は各記事の冒頭部分にこのようなものを書いています。
<p style="display:none;">ここに全角スペース</p>
<p>ここに続きを読むのはてな記法</p>
この上段のディスプレイ：ノーンはそこにあってもなかったことにする（表示しない）という命令です。
ここに全角スペースを入れていた代わりに、アイキャッチに使うための小さな画像を入れました。
画像は、すでに先生が用意してくれた「最適化された画像」がありますね！
<p style="display:none;">ここに画像（実際は見えない）</p>
<p>ここに続きを読むのはてな記法</p>
こうすると、お客さんには見えないですが記事内部にアイキャッチ画像を読み込んでいる。読み込んでいるということは、アイキャッチに指定できるというわけです。
画像圧縮によるブログ表示の最適化のお話はここまで。
次回はその他の指摘部分をチェックしてみて、どこか調整できるところは手を加えてみたいと思います！
種類豊富な指摘内容ですが、ボトルネックになっているのはやはりシンプルに「容量のデカイ画像」のようです。
画像が改善されるだけで、ぐっとGoogleの評価も上がるはず。
気になるかたはぜひトライしてみてください(/・ω・)/
