Googleの評価を上げる ページの表示速度最適化に取り組んでみた結果
腹筋マリオ、どうもナカニシ（@tssb26）です。
少し前にパパむすさん（@papamusublog）の↓この記事を拝見してずーっと気になってたサイト（ページ）の表示速度
今まで見よう見まねでゴリゴリとカスタマイズしてきましたので、たぶん無駄なコードがてんこもりなはず
この「ページの表示速度を上げる」とどうなるかというと、Googleさんの評価が上がって自ずと順位も上がるらしい
せっかくアクセスしていただいたのに、なかなかサイトが表示されないが為に他のページに移動されたら悲しいじゃないですか
そういうのを避けるためにも、小さなことからコツコツと（ふるっ）取り組んでおいた方がいいと思われます
ていうてもハト並みの脳みそですので、これも見よう見まねですが、最適化の為にやったこと記載しておきますので参考になさってください
とりあえず現状把握
ということで、まずは現在のサイトの表示速度を計測してみます
計測にはGoogleさんの「PageSpeed Insights」というサイトを利用します
こちら→ PageSpeed Insights
トップページ
お、そんなに悪くない数字
でも改善策はいろいろと表示されてます
比較的画像の多いページ
いかにも重そうな画像の多いページを計測してみたところ
はい、出ました！0点です！
いーや、Poorやて、プアー！
そんなページ、速度計測するぅー？
0点ってわかる？れーてん
100点満点中の0点て
その顔で？その稼ぎで？
計測しにきたん？はぁ？
って、Googleさんに言われてるような気がします
あかん、やっぱり可及的速やかに改善せんとあかん
改善策いろいろ
jQueryが重いらしい
カスタマイズしていたらjQueryというのを読み込むためのスクリプトがたぶんどこかにあります
普通は読み込みは1回でいいのに、複数回読み込んでる場合もあります
はい、うちです、しかもヘッダーに2行もあったという（気付けよ）
参考資料→ はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた - NO TITLE
【計測】
あれ？変化なし、これが一番の要因やと思ったんですけどね
画像のサイズを小さくする
画像もあんまり考えずペタペタ張ってましたので、画像のサイズと容量ともに縮小させました
サイズは横長画像は横幅640px、縦長画像は横幅400px
容量は50kb以下を目安に調整
【計測】
お！いきなり改善キタコレ！
外部ファイル読み込みJavaScriptコード最適化
head内でFontを読み込んでいるコードがあるのですが、これをページ表示を優先して、後からフォント読み込みをさせようという裏技
参考資料→ CSSの読み込みを遅延させるJavaScriptコード - NO TITLE
【計測】
変化なし
削除「こんな記事も書いてます」
標準オプションで関連記事表示ができるようになりましたので、元々つけていたのを試しにはずしてみました
【計測】
誤差範囲かな、ちょっと改善
PreConnectしておく
説明読んでもよくわかりませんが、要するに、ページ表示までの手順書みたいなのを渡しておいて表示が完了するまで手際よく仕事させることで表示速度をアップさせるということ（らしい）
参考資料→ スマホでのはてなブログの表示が重い・遅いのでできること - 後悔日誌
【計測】
変化なし
はてなスター
これが重いというのは聞いてましたので、試しに取っ払ってみました
【計測】
減っとるがな
全部消してみる
記事上下、シェアボタン、フォローボタン、パンくずリスト、広告
それとヘッダーフッターも表示しない設定にしてみました
【計測】
それでもこのレベルか、微妙やなぁ
元に戻す
あんまり成果なかったので、全部戻してみて計測
【計測】
やっぱその辺の落ち着くか
最後に
いかがでしたか、とりあえず元に戻しました
最初の0よりかはだいぶ進歩したと思いますが、カスタマイズして利便性上がればある程度の速度遅延はしゃーなしってところですかね
ただ、画像サイズ調整は即効性ありです
あと、この速度計測サイト「PageSpeed Insights」ですが、計測結果を30秒ほど保持してますので
次に計測する場合は30秒以上待ってから行ってください
これで全体的に順位も上がってくればいいんですけどね
検索からの流入がまだまだですので、また様子みてみます
