この記事で分かる事
- サイトスピードの重要性
- SiteKitがサイトスピードに与える影響
- 一般的なサイトスピードの改善方法
みなさんは自分のブログで、サイトスピードの改善を行なっていますか？
サイトスピード(特にモバイル版)はSEOの観点からも重要項目で、極端い遅いページの場合は検索順位にも影響します。
そしてこのことについては、2018年にGoogleが公式に発表しています。
私自信サイトパフォーマンスを向上させるために、サイトの表示速度についてはとても重要視しています。
しかし、PC版の表示速度のスコアは良いのに、スマホ版の表示速度のスコアが極端に悪かったんです。
ずっと何故だろうと思いながら、画像圧縮やプラグインの削除などを行なっていたのですが改善されず。。。
するとある時に、SiteKItというプラグインがどうやらスマホ版の表示速度に影響を与えるという情報が入ってきました。
riku今回の記事では、SiteKitの影響を検証した結果をお伝えしています。
後半はサイトスピードの改善方法についても紹介しています。
- SiteKitを利用している
- なぜかスマホ版だけ表示速度が遅い
- 他の表示速度を改善する方法も知りたい
このような方はぜひこの記事をご覧ください。
「SiteKit by Google」というプラグインについてはこちらの記事をご覧ください。
特にアナリティクスや、サーチコンソールの連携を行うときにとても便利です。
サイトスピードの重要性
SiteKitの検証を行う前に、サイトスピードの重要性について少し触れたいと思います。
・Google公式の見解
サイトの表示速度についてはGoogleも公式に見解を発表しています。
ページの読み込み時間を最適化します。表示の速いサイトはユーザーの満足度を高め、ウェブ全体の質を向上させます（特にインターネット接続速度が遅い場合）。PageSpeed Insights や Webpagetest.org などのツールを使用してページの読み込み速度をテストすることをおすすめします。
Googleウェブマスター向けガイドライン
また、Googleは2018年にモバイル版のサイトの表示速度に関しても言及しています。
読み込み速度これまでもランキング シグナルとして使用されていましたが、デスクトップ検索を対象としていました。そこで 2018 年 7 月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。
Google 検索セントラル ブログ
ただ、この発表には続きがあります。
これを「Speed Update」と呼びますが、対象となるのは、ユーザーがかなり遅いと感じるようなページのみで、ごくわずかな割合のクエリにしか影響しません。
Google 検索セントラル ブログ
SEO的にはサイトスピードが極端に遅いページ以外はそれほど影響はないというように言っています。
ですが、そこで安心してはいけません。
GoogleのAIが「サイトスピードは遅くない」と判断したからと言って、私たち読者も同じように判断するとは限りません。
次で解説します。
・ユーザーへの影響
サイトスピードは極端に遅い場合を除いて、直接的にSEOの評価が大幅低下することはありません。
しかしサイトの表示速度の遅いページに読者がアクセスした場合、間接的にSEOの評価が下がる場合があります。
読者がページにアクセス→表示速度が遅くなかなかコンテンツが表示されない→読者が離脱→Googleから低評価
このように間接的にSEOの評価が低下してしまうことが考えられます。
rikuじゃぁサイトの表示速度はどれくらいなら良いの？
このように思うかもしれません。
結論、最初の画面が表示されるまでが3秒以内です。
この3秒というのが大切なんです。
こちらの画像をご覧ください。
この画像は「サイトの表示にかかる時間によってどれだけのユーザーがページから離脱するのか」を調査した結果です。
表示までに1〜3秒までは約3割のユーザーが離脱しています。
しかしサイトの表示速度が1〜5秒。
つまり3秒を超えると約9割の人がページから離脱してしまいます。
rikuだからこその3秒以内です。
サイトスピードの重要性について、わかっていただけたと思います。
【検証】SiteKitのサイトスピードへの影響
サイトスピードの重要性について熱弁してしまいましたが、やっとSiteKitのサイトスピードへの影響についての検証です。
記事冒頭でも書きましたが、何故かサイトの表示速度がモバイル版だけ極端に遅い。
Twitterとかを見ていると、それらの人に共通するのがSiteKitを使っているということ。
モバイル版の表示速度を測定した結果では、「使用していないJavaScriptの削減」の項目が赤文字で警告されています。
いろいろ調べて実践したのですが、どうやらSiteKitではJavaScriptを使用しているみたいだと言う事が分かりました。
下の画像の「pagead2.googlesyndication.com」がSiteKitによって自動挿入されているコード。
これはAdSenseを設定する際のものらしい。
プラグインを消去してこのコードを削ります。
このサイトではアドセンスは使わないので、消します。
検証結果：スコアが53→82に上昇！
SiteKitを削除して、問題となっていたJSの部分を削除するとなんと
サイトスピードのスコアが53から82にまで上昇しました！
やったことは以下の2つ
- Site Kitプラグインを消去
- Site Kitで自動挿入されていたコードの消去
ひとまずは53から82まで、29もスコアが上がりました。
他にも細かいところはありますが、ひとまずは及第点と言ったところです。
サイトが読み込まれてから表示されるまでの時間（First Contentful Paint）も2.0秒と、3秒以内に収まっています。
SiteKitを削除する前とさほど変わってはいませんが、他の項目はかなり改善されています。
riku個人的にスコアは80点台をキープしたいので、SiteKitはこのまま削除したままにします。
サイトスピード改善方法
Site Kitを消してからサイトの表示速度については大幅に改善されました。
しかし、まだサイトスピードを改善できる項目はたくさんあります。
一般的にサイトの読み込み速度や表示速度のボトルネックとなる項目を紹介したいと思います。
・画像圧縮
一つ目は「画像の圧縮」です。
ブログでは図解用の画像を入れたり、見た目を整える目的でH2下に画像を挿入したりします。
riku当ブログでもH2下に見出し画像を入れていますね。
みなさんは画像をダウンロードしてきたまま、又はスマホで撮った写真をそのままブログに挿入していませんか？
そのままでは画像のファイルサイズが大きすぎて、表示速度に大きな影響を与えます。
解決法は以下の3つです。
- 解像度を落として（圧縮して）使う
- webp形式を利用する
- 画像圧縮系のプラグインを使う
基本的に画像を使うときは、圧縮して解像度を落として使用し、できるならwebpという新しい形式に変換します。
これらは手動で一枚一枚やってると、とても時間が足りないのでプラグインで一括して行うと効率もアップします。
おすすめの画像圧縮系プラグイン
EWWW Image Optimizerは画像をアップロードするときに、画像の劣化なしに圧縮してくれるプラグインです。
Converter for Mediaはアップロードした画像をwebp形式に変換してくれます。
この2つは定番のプラグインなので、画像を頻繁に使用する方はインストールしておきましょう！
・HTML/CSSの最適化＆圧縮
次はHTML/CSSの最適化です。
これは少し専門的な項目ではありますが、テーマに標準で搭載されていたりします。
当サイトで使用しているSWELLも標準でCSSの最適化機能がついています。
この機能は不要なサイトのコードを最適化して読み込み速度を向上させてくれます。
「SWELLユーザーじゃない」と言う方はAutoptimizeというプラグインを使ってみてください。
- HTMLの最適化
- CSSの最適化
- JavaScriptの最適化
- 画像の最適化
Autoptimizeでは上記のようにサイトのソースコードを最適化して、読み込み速度を向上させてくれます。
・キャッシュ
次はキャッシュ設定です。
「キャッシュ」という言葉を初めて聞いた方もいらっしゃるかもしれません。
キャッシュとは？
ブラウザが一度開いたページの情報を保存して、再度同じページを訪れた際に素早く表示するための機能のことです。
ブラウザにペジーの情報を保存してあるため、いちいちネットを介して通信する必要がなくなります。
そのため1度目より2度目の表示が素早くなります。
すべてのページに共通している、ヘッダーやフッターなどをキャッシュしておくと読み込みが素早くなり、サイトの表示速度も向上します。
キャッシュについては使用テーマで標準で設定できる場合がありますので、一度ご自身のテーマの設定項目を見てみてください。
・埋め込み形式を利用
最後は「埋め込み形式」を利用すると言うものです。
あまり聞き慣れないと思うのですが、かなり重要です。
ここでいきなりですが、質問です。
rikuみなさんは動画をサイトに貼るときはどのようにしていますか？
動画を自分のWordPressにアップロード→サイトに直接貼り付け
この貼り方をしている方は要注意です。
これだと、動画ファイルまで読み込む必要があるためサイトの表示速度がガタ落ちします。
ではどうすれば良いのか？
それが埋め込み形式の利用です。
例えば、
動画をYouTubeにアップ→アップした動画のリンクを埋め込み
このように一度YouTubeなどにアップして、動画のリンクをサイトに埋め込むことで解決できます。
重い動画ファイルの読み込みを自分のサイト上ではなく、YouTube上で行ってもらう事ができます。
少し面倒ですが、動画を使用される場合はこのように埋め込み形式を利用することをおすすめします。
サイトスピードの計測ツール
これまでサイトスピードのことについてい長々とお話ししてきましたが、最後にそのサイトスピードを測る事ができるツールについてご紹介したいと思います。
・PageSpeed Insights
本記事の検証時にも使用したもので、Googleが提供している公式のツールです。
使い方は簡単で、URLを入力する欄に自分のサイトのURLを入力するだけです。
サイトスピードを100点満点でスコア付けしてくれます。
・testmysite
こちらもGoogleが公式に提供しているツールです。
こちらはサイトスピードだけでなく、改善項目やその項目を改善する事でどのようにサイトのパフォーマンスが上がるのかまで教えてくれます。
サイトスピードの影響でどれほどの読者が離脱しているのかも分析してくれます。
・Ubersuggest
こちらはサイトスピードを計測する事がメインではないのですが、かなりお世話になっているので皆さんにも紹介しておきます。
このツールは本来SEOを改善するためのもので、自分のサイトのキーワード候補やサイトのトラフィックを計測してくれるツールです。
無料版でもかなりお世話になっているツールです。
自分のサイトのSEOパフォーマンスを向上させるきっかけを作ってくれます。
またGoogle Chromeの拡張機もリリースされていて、キーワードリサーチの際にとても重宝しています。
まとめ
いかがでしたでしょうか？
SiteKitを使用している方は一度サイトの表示速度を計測してみることをおすすめします。
SiteKitではサイトの表示速度にそれほど影響は出なかったものの、サイトスピードのスコアに関しては確かに影響を与えていましたね。
とても便利なプラグインですが、ダッシュボードでは簡易的なデータしか見れません。
やはりサーチコンソールやアナリティクスのページから詳細情報を見ることをお勧めしますので、プラグインは必要ないと考えています。
SiteKitを使っていない方も、改善できる項目はたくさんあります。
サイトスピード改善項目
- 画像圧縮
- HTML/CSSの最適化＆圧縮
- キャッシュ
- 埋め込み形式を利用
サイトの表示速度は少し遅くなるだけで、読者が離脱してしまう原因になります。
表示3秒以内を目指して、改善を続けていきましょう！
Weekly SEO
ブログを運営する方に向けて毎週一通、お届けします。
お届けする内容の一部
- 正しいブログの運営方法
- 他と差がつくSEO
- SEOの重要ニュース
ブログの運営ノウハウはもちろんですが、特にSEOの最新情報を追いかけるのはとても労力がいりますよね。
このWeekly SEOに登録して下さってる方はできるだけブログ運営に集中してほしい。
そんな思いからこのニュースレターを作りました。
登録してくださっている方は毎週1通のニュースレターで、SEOの情報やそれに関連したブログの運営方法を知る事ができます。
自分で情報を追いかけなくても、このニュースレターに登録しているだけで勝手に情報が入ってきます。
ぜひご活用ください！