422737 / Pixabay
検索エンジン？というかグーグルさんは表示速度の遅いサイト（ページ）を嫌うようです。嫌われるとどうなるかというとサイトの評価が落とされて、検索エンジンで下位表示…最悪圏外…そんなことにもなりかねません！！
まぁ、分かりますよね。私たちも何か検索して、さて見よう！としたサイトの読み込みが遅かったらイライラしてほかのサイト見にいっちゃいますよね？なので、表示速度の遅いサイトっていうのはグーグルさんにも私たちユーザーにも何もいいことがないんですね…
と、いうことで表示速度を上げるべく試したことを紹介します！
結論から言うと、これを行ったからかはわかりませんが1ページ目6位くらいだったのが1位になりました。だいぶニッチなワードですが…
今のページ表示スピードは？
まずは現状把握からですね
PageSpeed Insightsで表示速度を測定
使い方はいたって簡単で、分析したいサイトもしくはページのURLを記載するだけ！
参考【86 / BRZ】USBポート取り付けDIY、車内でのスマホ充電を可能に！ - YuuuloG
ためしに画像の多いこちらの記事を測定してみます。すると、
こんな感じで表示されます。モバイル・PCどちらも測定できます！100がMaxです。100になることはまずないと思いますが、結果が20以下だと相当まずいみたいなので即改善したほうがよさそうです。と、いうことで私の結果を見てみますと…
・・・0
・・・・・・・0
えぇえぇえええ！？
20以下はまずいって言ってんのに0って！！
もはやこのページはピーーーーーーがピーーーでピーーも同然じゃんねｗ（※自己規制）
あえて画像が多い記事を選んだのも原因だけど、ここまでショッキングな結果を見せつけられるとは思わなんだってこと！
で、このページはクソ…ピーーだってことがわかったところで、いったいどうすりゃいいんじゃい！って話！
大丈夫です！ちゃんと対処の仕方を書いてくれいています。私のこのページに関しては、あからさまに大量の写真が原因だってことがわかっていたのでいいんですが、ほかの原因を見てみると、
こんなのが…
実際にみなさんやってみればいいんですが、記事に写真がないもしくは少ない場合これが1番上に表示されると思います
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
まぁ、意味はよくわからんのだけどな！
レンダリング
データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成すること
あーわからん！
でも安心してください！
残念ながらコイツをどうにかしようとしても現状どうにもなりません。なぜなら、はてなのシステム的な問題だから！！
ワードプレスや他社のブログならまた違った結果が出るのでしょう。とにかく自分たちでどうにかなる問題ではありませんでした…自分たちでなんとかなる部分はやっぱり画像ってことになりますね！
画像を圧縮して軽量化させる
ってことで画像の容量を小さくしていきます
例として、こちらの写真の容量をどれだけ小さくできるか試してみます（この画像はすでにリサイズしています）
写真のチョイスは、まぁ察してください
初期状態で5760ｘ3840で5.08MBあります。今回はわかりやすいようにブログサイズで提供されているものではなく、あえてデカいサイズのものにしました
Photoscape
まずはこちらのフリーソフトを使って一気にサイズ小さくしちゃいます！ブログに掲載する写真は横幅600（600ｘ400）あれば十分みたいなので設定してリサイズ
このソフトの詳しい使い方はこちらを参照してください
これでどこまで容量が小さくなったかというと、
5.08MB→39.8KB
これだけでも十分OKですね
しかーし！さらに追い込んでみます
圧縮ソフトOptimizillaとTinyPNG
- jpeg→Optimizilla
- png→TinyPNG
ってな感じで使います。どっちでも使えるっぽいんで、どちらか一方でもいいと思います。ただ、TinyPNGは1日10枚まで？と制限があるみたいです（定かではありません）
両方ともブラウザ上に写真をポイッとするだけで簡単に圧縮してくれます
今回の写真はjpegイメージなのでOptimizillaを使って圧縮した結果、
34％削減して27KBになりました！素晴らしい！
さらに右横にあるQualityバーで任意に画質を決めることができます。80を切ると粗さが目立つ気がしますので下げすぎも注意です！当然これだけ小さくしたので質は低下していますが、モバイルで見る分にはまったく問題ありません！（PCもですが）
と、いうことでこの作業を先ほどの記事に施して張り付け直しです…これだけでも苦行なのですが、せっかく張り付け直すんだからと思い、もうひとつ手を加えました。これはまた別記事するか追記します
ここまでで表示速度に影響する部分は終わりなので、記事に反映させて再度速度を測定した結果、
0％！？
さっきとなんにも変らないやないかーーーい！！！
ここまでの苦労…
直接的な原因は画像じゃなかった
ちょっと立ち直るまでに時間が必要でした…と、まぁ努力が実らなかったわけなんですが、じゃあいったい何が影響しているのか？って話ですよ
Milliardというプラグインが原因だった
モバイルでの表示が極端に遅い…遅いっていうか息してないレベルなんだけどさ…
だから何が原因なのかなーって見てみたら、どうやら記事下に配置した【こんな記事も書いています】が悪さをしているらしい…（導入されている方の速度を測定させて頂いたところ私ほど遅くなかったので、私の導入の仕方が悪かっただけだと思います）
参考Milliard関連ページをはてなブログで設定する方法 | シスウ株式会社
さっそく取っ払って速度を計測した結果、
60％！
きたぁああああああ！まだまだ低いけど0よりいいに決まってる！
大元の原因はMilliardを配置していたからでした。私の場合そこに表示されたサムネの画像の容量が大きかったがために、みごと0％をたたき出したんだと思います！なので、画像のサイズが小さければここまでひどいことにならなかったのかな？とも思います。すべての画像を手直ししたら再度導入してみたいと思います
検証2回目
これじゃあ画像の容量小さくした意味ねーんじゃねーの？ってことでですよ！そんなのヤダ、絶対！
くやしいので違う記事でやってやります！！今度はMilliard外した状態で！！
検証結果
まずはありのままを測定。今回はこちらの記事！この記事も画像多めです
-
-
【金精軒】水信玄餅の味は？季節限定＆寿命の短い新食感スイーツを食べてきました【レビュー】
jeonsango / Pixabay ↑水信玄餅のイメージ 6月も早いもので、残りわずかとなりました。 まだ梅雨とはいえ、連日暑い日が続いていますね。 私はどちらかと言えばインドア派な ...
どの記事も遅いのぉ…グーグルさんにはご足労お掛けしとるのぉ…
ここからの手順はさっきと同じなので割愛して、画像をブログに反映。かーらーのー測定した結果…
ドキドキ…
上がった―！まだ赤で安心できないゾーンですが、とりあえず今回はこれでよしとします
さいごに
やるなら早めにやったほうがいいです。私はまだ記事数も少ないほうだと思いますが、それでも苦行です…これからちょこちょこ修正していこうと思います
と、いうことで画像のサイズそのままだわーという人はぜ試してみてはいかがでしょうか？
