サイトスピードを計測＆原因を探って高速化しよう【PageSpeedInsights】
サイトやブログを運営していて、なんか最近読み込みが遅いな？と思うことはありませんか？
それもしかしたら、回線やネットが重いのではなく運用している我々の知識不足が招く『回避できる問題』かもしれませんよ。
この記事は、サイト読み込み・表示スピードアップを目的にするのではなくて
とにかく表示速度が遅すぎるのをどうにかしたい！
と感じ、対処法をまとめています。
どーも筋トレ×お絵かき好きのプログラマー、スキラゲックス(https://twitter.com/skillagex/)です。
今回はサイト・ブログの表示／読み込み速度の遅い理由と、実際にGoogleの『PageSpeedInsights』を使ってやった施策について説明していきます。
最速とか目指してもしょーがないですからね。あくまでも見る人がストレスないレベルを目指します。
PageSpeedInsight（ページスピードインサイト）とは？
サイトスピード、つまり検索からクリックしてページが開くまでの時間のかかり具合を、Googleが判定してくれる、登録なし・無料なサービスです。
他のサイトの計測結果と比べてた俯瞰的な判定なので、平均的に見て下された評価の数字だと思います。
あくまでもGoogle基準ですね。
外部リンク：PageSpeedInsight（ページスピードインサイト）公式
外部リンク：PSIについて／Google開発者サイト
なぜサイト・ブログのスピードを計測するのか
一般的に、人はページが開くまでの時間が長ければ長いほど離脱する確率が高まると言われています。
サイトが重いと別のページを見ようと、ブラウザバックして別のサイトに行きますよね。皆さんも身に覚えがあると思います。
正直この速度問題はクソ重要な部分だと思います。
ブログやサイトページの日々の更新も確かに重要ですが、どんなにページをたくさん用意していても動作が重いと、開ききる前に訪問者がイライラして見ずに帰ってしまう恐れがあります。
例えばgoogleはスピードが下がることによってこんなことが起こるといっています。
私たちの研究は目を見張るものでした。分析したモバイルランディングページの70％では、折り畳みの上のビジュアルコンテンツが画面に表示されるまでに5秒以上かかり、折り畳みの上下にあるすべてのビジュアルコンテンツが完全に読み込まれるまでに7秒以上かかりました。
https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
WEBマスター公式はGoogleの検索順位の優劣のつけ方などを説明してくれているので、常に押さえておきたい公式ガイダンスです。
以前と比べて遅くなった！その理由
このブログも、始めたばっかりの時は90点以上の評価でした。
理由その1：アドセンスの導入
おそらくですが、アドセンスを始めたあたりから急激にサイト読み込み・表示スピードが落ちたと思います。広告を引っ張ってくるので多少は仕方ないですね。
実際に改善点の項目にアドセンスの読み込み画像を軽くするように指摘するものも。
いや、お前んとこのサービスじゃろがい！マッチポンプやんけ！
ここでまず自分で何とかしなければという気持ちが芽生えました。
理由その2：ページスピードインサイトのアップデート
以前は無かった次世代フォーマットの導入などを勧められるようになりました。
以前より厳しくなった印象です。特にモバイル。
モバイルからのアクセスが多いブログなら、もちろん意識せざるをえません。
しかしちょっと厳しすぎるスコアを弾き出すので、ちょっと低くてもあまりショックを受けなくてもいいです。80点ぐらいあれば御の字じゃないでしょうか。
実際遅くなって何が起こったか
僕の場合サイトスピードをほったらかすと・・・順調に掲載順位が下がりました。（笑）
いや、笑っている場合じゃないんですよ。死活問題です！
掲載順位が２ページ目から３ページ目になってしまうページも。もうほとんど訪問がないといっても過言はないです。
反対に、それでも訪問してくれるキーワードが見つけられるメリットもありますが、一般的にサイト順位は１ページ目を目指すのが定石です。
２ページ目以降は僕もほとんど見ないですし。なければ再度検索し直しますし。
重いと再訪問もページ回遊率も下がり、googleの言う「何度も訪れる有益なページ」からは程遠くなります。
僕の場合、結果としてはトップビューを稼いでいたページがガツンと先週に比べて33%減です。これだけが直接的な原因ではないとは思いますが、修正をして様子をみてみたいと思います。
行ったサイト表示スピードアップ対策一覧
PageSpeedInsightsでスピードを測る＆原因を探る
https://developers.google.com/speed/pagespeed/insights/
まずは上記で紹介したページスピードインサイトを使って速度を調べます。
できれば何回か場所や時間を変えて測って、平均的な速度を割り出すことをおすすめします。時間や環境、例えばルーターとかによっても微妙に変わります。
ページスピードインサイトの使い方
サイトのURLを入力して、エンターを押すと自動的にパソコン、モバイルの両方のスピードに対してのスコア・評価をだしてくれます。
時間や日によって多少変動しますが、原因と思われる要素と改善案を教えてくれます。
外部リンク：Google TestMySite（テストマイサイト）公式
こちらはモバイルサイト専用の『テストマイサイト』というGoogleのテストサービス。
モバイル向けの提案をしてくれます。アプリ寄りのサイトはこっちの方がいいのかな？
こちらもさらに改良されて使いやすくなっています。
改善する箇所・主な項目
https://developers.google.com/speed/docs/insights/rules
公式サイトでは改善提案される項目が以下のように挙げられています。
この提案はつまりどういうこと？と思ったら、下記のリンク先を開いてみてください。
https://developers.google.com/speed/docs/insights/rules
計測結果が出たら、特にスピード短縮効果が大きい要素から順に並んでいると思いますので、そこから手をつけていくといいでしょう。
僕の場合は容量の重いイラストを何枚か上げてしまっていたようです。
圧縮はしたのですが、まだまだ圧縮したりず、１枚2MBもあるものも。そりゃ重いわ。
アップロードすると自動的に圧縮してくれるワードプレスのプラグインを使用していましたが、まだまだ重いですね。
たくさんの画像を圧縮するには
まとめて画像を圧縮・軽量化して短時間で効率的に作業します。せっかくなのでワードプレスのプラグインを利用します。
画像を容量を軽くした記事はこちらです。
https://skillagex.com/netshopsite/wordpress/wordpress-ewwwim...測定の精度を高める為にすること
あくまでもGoogleのみの測定になるので、偏っているのは事実です。
違ったソースサイトからの情報と合わせて大体の平均値を把握するといいと思います。
他のサイト分析ツールを合わせて使いながら、大体これくらいだな〜というラインを導き出して精度を高めましょう。
施策をした後も効果を再度測定する
その後ちゃんと効果があったかどうか測定します。
速度改善は主に『直帰率』『離脱率』『ページ表示速度』に影響します。
また最後まで読んでくれる可能性も高まるため、ページの最後にアンカーリンクを設置しているのなら、回遊率が高まり、１セッションあたりのPV数も変化するはずです。
ここで問題が起きます。画像の圧縮だけでは大きな効果が見えませんでした。一番の原因では無かったようです！
PageSpeedInsightsも今回のアップデートで厳しくなったというのは本当のようですね・・・
特にスマホの点数が上がりませんでした。パソコンは80点行くのですが、スマホは25点→37点までしか上がりませんでした・・・
その後行なったサイトスピード改善施策
コンテンツキャッシュ機能を試す
ロリポップサーバー側でキャッシュを保存してもらい、読み込み速度を速くしてもらいます。これはある一定の効果がありました。
レンタルしているサーバーに『キャッシュを保存』する機能があればぜひ利用してみましょう。サーバーにログインして管理画面で操作・変更することができることが多いです。
画像の読み込み遅延を設定する
使用しているワードプレステーマ「ルクセリタス 」では『画像の読み込み遅延』が設定可能です。
また、それ以外にも高速化のためのjavascriptの圧縮など設定できるので試していきます。
詳しくは公式ページでも確認することができます。要チェック。
これが一番手軽でかつ効果があったのではないかと思っています。
そのほかの改善提案として上がっていたのが「画像ファイルのWEB専用拡張子への変更変更」です。
やけに勧められるのでいろんなサイトを調べましたが、様子見との判断のようなので取りやめました。
ワードプレスやブラウザがほとんど対応したタイミングで僕も実装していこうと思います。
最後に
今は様子見です！
2MB画像をたくさん圧縮したのですがそこまで劇的には改善しないようです。そのあと掲載順位が上がるのか、引き続き観測してこのページに追記していきたいと思います。
これで効果がなければ、あとは少しめんどくさい手段しかありません！その時は追って報告します。