こんにちは！パパむすです。
ブログの表示速度って日ごろから気にして対策を立てていますか？
特に何も気にせずにフリー素材やスマホで撮った画像を貼り付けしたり、jQueryの読み込みを最適化しないままにしてるなんてことはないですよね！？
もし心当たりのある方は非常に危険です！！
ブログの表示速度がめちゃめちゃ遅くなっている可能性がありますよ！
ん？ブログの表示が少し遅いくらい別に問題ないじゃんって思いました？
もしあなたがブログでたくさんのPVを集めるのが目的であったり、少しでも効率よく収入を稼ぎたいと考えているのであれば、ブログの表示速度は絶対に気にしてください！！
なぜなら、Googleはサイトの評価をするにあたって、そのサイトの表示速度を尺度にしていることを宣言しています。
また、読者があなたのサイトに訪れたときに、サイトが少しでも重いなと感じたら、訪問者は容赦なく離脱していくことも統計的に知られています。
Googleで評価されなかったら、検索から上位表示がされにくくなるので致命的ですし、読者がブログを読まずに離脱してしまうと、当然コンバージョン率はいつまでたっても低いままです。
今回は、僕自身がブログの表示速度が異常なほど遅くなっていた経験と、それをどうやって改善したかという実体験をお伝えいたします。
今までブログの表示速度を気にされたことがない方は、まずはこの後にご紹介するサイトの表示速度測定ページだけでもすぐに試してください。
- PageSpeed Insightsでブログの表示速度を計測すると驚愕の数値が
- 対策1：jQueryの読み込みを早くするためにサイトを改善
- 対策2：画像のサイズを縮小して表示が重くならないように改善
- 対策3：関連ページ表示の"Millard"を削除
- 対策4：AdSenseで使用するドメインに対してPreConnectしておく
- 対策5：外部ファイルの読み込みを遅延させるJavaScriptコードを最適化
- その他の対策について
- 対策実施後の計測結果
- 最後に
PageSpeed Insightsでブログの表示速度を計測すると驚愕の数値が
では、ブログの表示速度ってどうやって計ればよいのでしょうか？
調べてみるとGoogle Analyticsに標準装備されている機能を使う方法と、直接PageSpeed Insightsのサイトで計測する2通りの方法があることがわかりました。
Google Analytics→行動→サイトの速度→ページ速度 を選択すると、このような画面でページの表示速度をみることができます。
赤枠で囲ったところをみると、僕のブログは平均で18.96秒も表示に時間がかかっていることがわかりました。
さらに、左のメニューにある「速度についての提案」をクリックするとこちらの画面が開きます。
こちらの赤枠で囲ったPageSpeedの提案にある、各URLに表示されている「合計○個」というところをクリックしてみましょう。
すると、こちらの「PageSpeed Insights」というサイトに飛んで、自分のサイトの表示速度の評価が数値で表現されます。
PageSpeed InsightsはGoogle Analytics経由でなくても直接URLから利用することもできます。
こちらは僕のブログをPCで表示した場合の"Googleによる評価"です。数値が"100分の8"とものすごく低い数値であることを発見しました。
モバイルについても、"100分の28"とひどい有り様です。
これでは僕のブログを見に来た人がどんどん離れていくことが容易に想像できますね。
ここまで低い数値になるまで放っておいたこと、素人ゆえに表示速度を改善するという観点でブログを運営することすら知らなかった自分のセンス不足に気づかされました。
では、この数値をどのように改善させたのか、僕が実際にやった対策方法をお伝えいたします。
対策1：jQueryの読み込みを早くするためにサイトを改善
まず最初に行ったのがJQueryの読み込み改善です。
参考にしたサイトは普段からブログのカスタマイズでお世話になっている、シロマティさん(id:shiromatakumi) のこちらの記事です。
はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた - NO TITLE
僕の場合は、シェアボタン、グローバルナビ、サイドバーの固定などのカスタマイズでいつのまにかjQueryを多用していました。
そこで、はてなブログのヘッダー、記事上、記事下などの各所に設定してあったjQueryを全て探し出し、上記のシロマティさんの記事にあるコードに変更いたしました。
その結果、PageSpeed Insightsの数値を大幅に改善させることに成功しました。
PC ：8/100 → 40
モバイル：28/100 → 38
対策2：画像のサイズを縮小して表示が重くならないように改善
続いて、ブログに投稿している画像サイズを改善いたしました。
具体的には画像サイズの縮小と、ピクセル幅の縮小（縦×横を600×400に固定）です。
作業の前に僕が最近良く利用している以下のフリー素材サイトの画像のサイズを確認してみました。
Popular Categories - Stocksnap.io
「ぱくたそ」はそれほど画像サイズが大きくなくて、100KB～400KBくらいが多かったですがこれでも大きいので、50KBくらいに圧縮して再度記事に貼り直しました。
問題は「Stocksnap」です。こちらは海外の非常にオシャレな人物や風景画像をたくさん無料で使えるので重宝しているのですが、画像サイズが1MB～8MBもあることが判明しました。
素人の僕はあろうことかそんな重大なことにすら気づかず、この巨大な画像ファイルをバンバン貼っていたのです。
こちらも早速、50KBくらいに圧縮して再度記事に貼りなおしました。
画像ファイルを縮小するにあたって、僕が利用したのはこちらの「縮小専用」というツールです。
こちらのツールの便利なところは、フォルダにある複数の画像ファイルをまとめてドラッグアンドドロップで一気にサイズ変換ができることです。
サイズの変換ツールではこちらのJPEGmini | Oops...も有名で、紹介されているブログも多かったのですが、ファイルを一枚一枚変換する形式が面倒だったので、僕は「縮小専用」を使いました。
「縮小専用」でピクセルを「600×400」に、ファイルサイズを50KBに設定して、ファイルをドラッグ&ドロップすれば直ぐに縮小された画像ファイルを作成することができました。
画像ファイルを縮小したら、面倒ですが力技で記事をひとつひとつ修正して、重い画像ファイルを入れ替えました。
その結果、
PC ：8/100 → 40 → 65
モバイル：28/100 → 38 → 50
まで大幅にPageSpeed Insightsの数値を改善することができました。
対策3：関連ページ表示の"Millard"を削除
つづいて、僕のブログではMillardという関連記事表示機能を利用していたのですが、こちらもブログの速度表示遅延につながるため、思い切って削除しました。
参考にしたのはこちらの記事です。
はてなブログの読み込みを速くするために行ってきたことまとめ - NO TITLE
この中で私はMilliardを撤去しました。そもそも設置しても回遊率そんなに上がらなかったので。Millardを外したら点数が4～5点くらい一気に上がって驚きましたね。
Millardを削除したことで、僕のブログでも少しですが速度が改善しました。
PC ：8/100 → 40 → 65 → 67
モバイル：28/100 → 38 → 50 → 53
対策4：AdSenseで使用するドメインに対してPreConnectしておく
次にアドセンスで使用するドメインに対して、PreConnectしておきました。
参考にしたのはこちらの記事です。
スマホでのはてなブログの表示が重い・遅いのでできること - 後悔日誌
こちらの記事にある設定方法を実施したところ、少しですが改善しました。
PC ：8/100 → 40 → 65 → 67 → 70
モバイル：28/100 → 38 → 50 → 53 → 55
対策5：外部ファイルの読み込みを遅延させるJavaScriptコードを最適化
最後に、外部ファイルの読み込みを遅延させるJavaScriptコードを最適化しました。
参考にしたのはこちらのサイトです。
CSSの読み込みを遅延させるJavaScriptコード - NO TITLE
こちらの記事にある設定方法を実施したところ、少しですが改善しました。
PC ：8/100 → 40 → 65 → 67 → 70 → 72
モバイル：28/100 → 38 → 50 → 53 → 55 → 56
その他の対策について
これまで紹介した以外にも、
・はてなスターボタンやはてなブックマークボタンを削除する
ことも良く言われていますが、僕はあえて残したままにしてあります。
また、
・SNSシェアボタンははてなブログ標準のものは使わない
ことに関しては、以前から実施済みでしたので、今回の速度改善では計測対象外です。
対策実施後の計測結果
これまでご紹介した5つの対策をご紹介した結果、GoogleのPageSpeed Insightsの数値はこのように改善されました。
PC：100分の72ポイントまで改善
モバイル：100分の56ポイントまで改善
当初、PCが8ポイント、モバイルが28ポイントしかなかったことに比べたら、表示速度の大幅な改善をすることができました。
ちなみにこの72や56という数値がどの程度すごいのかと言うと、はてなブログを開設して何もカスタマイズをしていないデフォルトの状態でだいたい65くらいだそうですので、平均前後を獲得できていると判断しました。
最後に
僕がこのタイミングでブログの表示速度が遅くなっていることに気づいたのは、むぎろぐを運営されているむぎさん(id:nmugi)が、偶然気づいてtwitterで教えていただいたおかげでした。
パパむすさんお久しぶりです。
— むぎ@はてなブログ (@mugiblog) 2017年6月9日
なんかスマホで見たときの表示が若干重いような...僕の通信環境が悪いのかもしれませんが一応お知らせです。
ブクマでコメントしてもよいのですが記事と関係ないのでツイッターでお知らせでした。
むぎさんに教えていただくまで、ブログの表示速度を全く気にしていなかったので、むぎさんには本当に感謝です。
今回僕が経験したように、ブログの表示速度が気になっている方は、まずは
からスコアの計測だけでも行ってみてください。URLを入力するだけで誰でも直ぐに行えます。
意外な計測結果がみれるかもしれませんよ！？
そして、これからブログの表示速度改善にチャレンジされる方は、予めブログのバックアップを取ってからするようにしてくださいね。
ブログのカスタマイズはあくまで自己責任となりますので十分ご注意ください。
【推薦図書】
はてなブログをまだ十分に使いこなしていない方は、こちらの本を一度チェックしてみてください。
記事の投稿、ブログの細やかな設定などの基本はもちろん、ソーシャルサービス連携、ブログカスタマイズ、広告収入、アクセスアップ、有料プラン「はてなブログpro」のサービスなど、一歩進んだ活用法まで一冊で見につけることができオススメです。
【ブログ超初心者向け】短期間でPV数をアップする17の方法を公開 - パパむすブログ