チャーターブログ

あかさたな 浜金谷

はてなブログの読み込み速度、表示速度をFully Loaded Time2秒台まで高速化

Proになって半年が経ち、GoogleSEOが先月急によくなってきたものの、まだ大半のページの検索流入は伸びていていない

ということで、今回は読み込み速度の改善をする

Page Speed Insights というスピード測定サイトで項目ごとの速さや総合得点を見ていく

検索流入狙いの記事の代表として下の記事を指定した

二郎系ラーメン巡り#2 ~ラーメン二郎 神田神保町店~ - チャーターブログ

改善前

読み込み速度を全く考えずコンテツの豊富さだけを考えてページを作成していたため、読込がかなり長かった

直帰率は約75%。

f:id:monhime:20191119095012p:plain:w600

点数の変化

表のA〜Fは次のものを指している

A: First Contentful Paint

B: First Meaningful Paint

C: 速度インデックス

D: CPU の初回アイドル

E: インタラクティブになるまでの時間

F: 初回入力遅延の最大推定時間

試したこととそのときの点数を順番に並べた

測定結果はかなりブレがあるので改善したはずが点数が下がることがある

改善 A B C D E F モバイル点数 パソコン点数
最初 4.4s 4.6s 21.7s 20.8s 54.4s 710ms 11 36
ソーシャルパーツを記事下のみに 3.7s 3.7s 21.6s 17.8s 51.7s 470ms 16 41
ソーシャルパーツをTwitterはてなブックマークのみに 3.7s 3.7s 21.6s 17.8s 51.7s 470ms 16 41
タイトル下の読者になるボタンを無くす 3.1s 3.1s 18.0s 14.2s 42.3s 860ms 20 48
記事中の広告を最大10→4つ分にコードを減らす 2.2s 2.2s 20.5s 23.6s 42.7s 950ms 25 45
記事中の広告位置を大見出し4つ目以降から 2.5s 2.5s 18.5s 5.1s 41.2s 1020ms 33 49
最新記事を7つ→3つ、注目記事を10→5つに 2.9s 2.9s 17.5s 13.7s 41.5s 950ms 21 47
累積アクセス数を削除 2.2s 2.2s 21.0s 5.3s 44.3s 1230ms 34 44
ブログ村へのリンクを削除 2.8s 2.8s 18.9s 14.4s 43.8s 830ms 22 46
モバイルの記事上下のコードを削除(記事中、下広告削除) 2.7s 2.7s 17.1s 12.0s 34.0s 620ms 23 45
モバイルをレスポンシブデザインに変更 1.9s 2.6s 16.1s 22.0s 45.8s 850ms 25 43
タイトル画像を600KB程度に圧縮 1.9s 2.6s 12.8s 22.1s 43.7s 720ms 26 50
記事内の画像を長辺最大500ピクセルに圧縮 1.9s 2.6s 14.8s 18.8s 43.9s 1300ms 26 52
ソーシャルパーツ削除 1.9s 2.6s 11.6s 18.7s 38.5s 710ms 27 53
最新記事削除 1.9s 2.6s 11.5s 16.5s 39.3s 860ms 27 55
記事中の広告を大見出し5つめ以降から 1.9s 2.6s 13.2s 20.6s 38.5s 1020ms 26 63
プロフィールのTwitterフォローボタン削除 1.9s 2.5s 11.4s 32.7s 39.8s 900ms 27 57
読者になるボタンのCSSを削除 1.9s 2.4s 8.1s 14.8s 22.9s 620ms 32 60
サイト内検索を削除 1.9s 2.5s 11.8s 17.2s 39.7s 1080ms 27 53
パンくずリストを削除 1.9s 2.4s 12.7s 18.7s 40.1s 760ms 26 58
ヘッダとフッタを表示しない 1.9s 2.6s 10.9s 21.2s 30.2s 570ms 27 59
AMPを配信 1.9s 2.5s 12.6s 27.4s 40.8s 1140ms 26 52
はてなスターを削除 1.9s 2.5s 12.2s 22.0s 42.1s 1030ms 26 58
記事下の読者になるボタンを削除 1.9s 2.5s 8.9s 18.3s 30.4s 820ms 29 71
注目記事削除 1.9s 2.5s 9.5s 19.8s 31.4s 910ms 29 60
サイドバーの広告1つ削除 1.9s 2.5s 10.9s 18.1s 30.5s 790ms 27 77
CSSを圧縮 1.9s 2.5s 9.8s 18.6s 28.6s 1100ms 28 65
DNSプリフィッチ 1.9s 2.4s 9.6s 19.8s 30.4s 1060ms 28 68
ライブラリの遅延読み込み 1.9s 2.5s 9.5s 16.1s 26.9s 930ms 29 72
はてなID、最終更新日を削除 1.9s 2.5s 9.6s 13.2s 29.2s 790ms 29 72
テーマをMinimalismに変更(CSSはリセット) 2.3s 2.9s 8.5s 21.0s 24.8s 840ms 29 74
タイトル画像の削除 2.3s 2.9s 8.5s 21.0s 24.8s 840ms 29 74
CSSの編集・圧縮・記事中広告とコメント欄を削除 2.3s 2.8s 6.6s 13.9s 24.7s 930ms 35 75

まだ広告を減らしたり、プロフィールの削除など出来るものはあるがここまでにする

ブログのテーマを変えるとA、Bの項目の速度が遅くなってしまったが、コードが軽いなど他の部分で稼いで全体的には良くなってるはず

モバイルは11点→35点、パソコンは36点→75点とかなり良くなった

パソコンのラボデータでは赤色の▲は一つも付いていなかった

f:id:monhime:20191120083030p:plain:w500

効果が大きかったのは次の5つ

  • ソーシャルパーツを削除

  • 広告コードを削除(特に記事中の自動で挿入するコード)

  • 累積アクセス数のカウンターの削除

  • 読者になるボタンを減らす

  • タイトル画像を圧縮、外す

広告はベタベタ貼っても押す人全然いなかったので少なくしたところで損することはないし、自動広告が勝手に挿入してくるから心配しなくて良さそう

むしろ広告を見てくれる人が多くなるかも?

他にも、要らないheadのコードや元々のデザインテーマについてきたCSSの要らない部分を削除したのも効いた

テーマをインポートするとデザイン設定のCSSの欄に最初から外部リンクからimportする記述があり、その先のページにインポートしているCSSのファイルがある

普通だと上書きする感じでCSS を編集しているけどそれは無駄だし、その元々のCSSコードにも不要な部分がかなりある

例えば、チャーターブログでは今回の改善でサイト内検索やヘッダ、フッタ、コメントなど削除したのでそのCSSも無くていいし、Fontaewsomeなどのマークも不要

すると、元のCSSに書かれていた次のFontAweSomeのimportも要らなくなる

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

ログインしているときに自分のブログを開くと「編集する」というのが出るが、そのデザインも不要

そこで、元々のCSSコードを直接編集・圧縮してhead内に貼り付けた

編集方法: はてなブログ|インストールしたデザインテーマ(CSS)をカスタマイズする方法

圧縮方法: はてなブログ 3STEPでレスポンシブデザインに!やり方を解説♪ - イロイロひとりごと。

とにかく不要なものは削除し、本当に必要なものだけ残した 最終的にページはこんな感じにシンプルになった

f:id:monhime:20191121085224p:plain:w600

他のページの結果

他のページでも調べると、文字が多い(画像が殆ど無い)記事がモバイルの点数が最も高い結果になった

モバイルは画像を表示させるのが苦手で点数のウェイトが大きいのかもしれない

対策 A B C D E F モバイル点数 パソコン点数
ブログトップ 2.3s 2.5s 9.1s 11.7s 24.4s 1050ms 29 76
画像が多い記事 2.4s 2.8s 22.0s 14.9s 46.4s 1480ms 24 68
文字が多い記事 1.9s 2.9s 6.0s 15.0s 22.6s 1660ms 38 74
GTmetrixによる数種類のページの結果

https://gtmetrix.comでも上と同じ4種類のページを計測した

画像が多い記事を除いて、全ての項目で平均くらいかそれより良い結果だった

このサイトのスコアはスピードの値で点数をつけるのではなく、スピードに影響する項目について採点している

スコアは平均くらいだけど、3種類の実測値Fully Loaded Time、Total Page Size、Requestsは平均よりかなり良いのでこれで十分かな

平均的な記事

二郎系ラーメン巡り#2 ~ラーメン二郎 神田神保町店~ - チャーターブログ

この記事はGoogle Mapの埋め込みや数枚の写真があるけど、大体平均よりいい結果になった

f:id:monhime:20191121180052p:plain:w500

※この測定サイトの利用者の平均値は順に72%、71%、6.9s、3.25MB、91

ブログトップ

チャーターブログ

読込時間が上の「平均的な記事」より速くなった

ブログトップには記事下の関連記事や広告が無いからかも

リクエスト数も少ない

f:id:monhime:20191120190509p:plain:w500

画像が多い記事

旅行日記 ~横川・碓氷峠・軽井沢~ - チャーターブログ

スピードが遅くなるのは仕方がない

画像が多い旅行日記は検索流入は狙っていなく、読者向けで日記感覚で書いている

f:id:monhime:20191127080026p:plain:w500

文字が多い記事

電気通信主任技術者試験「法規」〜事業用電気通信設備規則〜 過去問まとめ - チャーターブログ

点数自体は高いけど、実際の速さは「画像が多い記事」より遅くなってる

しかし計測値は毎回かなりズレるので何とも言えない

f:id:monhime:20191120080442p:plain:w500

最速記事

文字しかなく、しかも短いこの記事が最も速かった

電気通信主任技術者試験「法規」〜電子署名及び認証業務に関する法律〜 過去問まとめ - チャーターブログ

f:id:monhime:20191121073330p:plain:w500

テストサーバを香港にすると、2秒台を叩き出した!!!

地理的に近いので当たり前という感じだけどね

f:id:monhime:20191121181027p:plain:w500

PageSpeed Insightsでは、E: インタラクティブになるまでの時間がおよそ5s速くなり、パソコンでは80点を超えた

A B C D E F モバイル点数 パソコン点数
2.3s 2.8s 6.1s 13.7s 19.6s 780ms 37 82

最終的に、WordPressに匹敵する速さになった

はてなブログの遅さに呆れてWordPressに乗り換える人が多いようだけど、今回の改善で十分高速にできることが分かった

適当にWordPressのサイトをいくつかスピードを計測すると、評価がFのサイトもあればAのサイトもあるが、それでもFully Loaded Timeは3秒台あたり、速いと1秒台を出せたりする

その代わり色々捨てることにはなったが、文字のフォント以外にデザインのこだわりは無いし、今の状態の方がシンプルで良いと思う

余談

ページの読み込みが速いことで有名な阿部寛のホームページではこんな結果になった

451msって何これ...

f:id:monhime:20191120124703p:plain:w500

注意事項

CSSを圧縮してデザイン設定にあるCSSを消す時、AMP用のCSSの中身も消さないとAMPに関するエラーが出てGoogle Search Consoleからお叱りのメールが来ます(CSSの構文エラーが発生するらしい。メールの2番目の項目)

1番目の項目は!importをやたらめったら何も考えずに書いたためにエラーが出たのが原因

f:id:monhime:20191124073327p:plain:w500

AMP用のCSSの内容を削除し/ Responsive: yes /と書いて(必要かどうかは知らない)更新

次にGoogle Search Consoleの「修正を検証」をクリックして初期検証させる

Google Search Console 初期検証

初期検証が終わると本検証に入り、メールが届く

Google Search Console 検証 メール

AMPについて心配ならこのページでテストしてみよう

https://search.google.com/test/amp

調べたいページのURLの最後に?amp=1と付けるとAMP版が表示されるのでそれでも確認できる

その他

GTmetrixによると、CSSで画像の表示サイズを一括で設定するのは遅くなる原因で、大きく減点される

また、リンクを挿入するときにタイトルの他に本文やアイコンなど一緒に埋め込まれる「ブログカード」も減点対象

スピードテストはアクセス数(Direct)にカウントされるのでテストした分アクセス数が余計に増える

今後の注意

今後記事を書くときは次の点に気をつける

  • 画像の表示サイズを毎回指定

  • 画像の数を少なく

  • 画像ははてなフォトライフ経由でリサイズしてから貼り付ける

  • リンクの挿入をするときにブログカードは避ける

おわりに

今回の改善でかなり読込速度が速くなったことに加えてデザインがシンプルになり、読者のストレスがかなり減ったと思う

筆者もこのデザインが美しくてプレビューする度にうっとりしてしまう

アクセス数に大きな変化があればここに追記する形で書くのでお楽しみに

追記 (2019/12/5)

今回の高速化した後,検索流入が急激に増加しました

Google Search Consoleを見ると,表示回数やクリック数が急増しています

f:id:monhime:20191205104004p:plain:w500

これはページが高速になったからというより,高速化の過程でAMPを配信し始めたことの方が大きいと思います

【成果報告】2019年11月のアクセス数と収益 Pro6ヶ月目 - チャーターブログ

参考

はてなブログを最速に仕上げる史上最強の高速化カスタマイズ設定!! - みくにまるのブログ

モバイルサイトの最適化チェック「Test My Site」はてなブログでも良い判定にできた - ウェブと食べ物と趣味のこと

目指せ最速!はてなブログで表示を高速化するために行った7つの施策 | つばさのーと

Google Lighthouseについて調べてみた vol.1 #lighthouse - ユアマイスター株式会社エンジニアブログ

「はてなブログ」高速化・GTmetrixでA評価達成! - STDIO

はてなブログ|インストールしたデザインテーマ(CSS)をカスタマイズする方法