サイト高速化とCore Web Vitalsへの対応【2020年6月のまとめ】

2020年6月の月間活動報告をいたします。

6月は動画アップ数が少なくブログPVも大きく下がってしまいましたが、今後のことも考えてサイトの高速化・快適化に取り組みました。

ブログはPV大幅減

1月末から取り組んだYouTubeSEOが奏効しているのか、ここ数か月YouTubeは好調です。

6月前半にYouTube動画埋め込み方法の設定ミスがあって（後述）少し再生数は下がりましたが、動画SEO対策前に比べると、平均して50％くらい伸びています。

しかし、6月はブログのアクセスが大幅に減っています。

前回、5月のまとめでご報告しましたが、自分が運営する2つのブログの検索流入は5月上旬にピークをつけた後に急降下しています。

こちら側では目立った変更を行っていないのでGoogleのアルゴリズム変更によるものと思われ、当初は「すぐ戻るだろう」と思って様子見をしていましたが、検索流入は下がる一方で、ピーク時から8割減という酷い状態になった後、少し回復したりまた下落したりで底這いが続いていました。

とくにゲーム音楽ブログのほうの下落率が大きいです。

これはさすがに放置できなくて、5月末あたりから原因を調べて対策に乗りだしました。

そんなわけで、6月は主にサイトの表示速度の改善などに力を入れていたのですが、今回はその話をします。

サイト表示速度改善へ

検索表示回数・検索順位の低下の原因を調べていて、今回浮上してきたのが「Core Web Vitals」なるものです。

これは最近になってGoogleが出してきた新指標で「今後は、ユーザー体験の向上ということを今まで以上に重視します」ということなんですが、具体的には「ページの表示速度を向上させ、操作しやすいレイアウトにしましょう」ということです。

Core Web Vitalsは2021年から新たなランキング指標として導入されるとのことですが、自分がリサーチした実感では5月のアップデートから反映されはじめてるんでは？と思える節がありまして。

Core Web Vitalsそのものは、まだ正式なランキング指標になってないのかもしれませんが、5月のアップデートで表示速度が遅かったり、レイアウトが悪かったりするサイトはガッツリと順位落とされたり検索表示回数減らされたりしてる雰囲気なんですよね。

自分のサイトは、以前からスマホで見たときの表示が遅いと思っていて、いつか改善しないとなぁ、とは感じていましたが、この機会に対策することにしました。

そして、どうせ改善するならGoogleが提唱してきたCore Web Vitalsに対応したいので、その中身を調べてから取り組むことにしました。

Core web Vitalsの中身

Core Web VitalsはFID、LCP、CLSの3種類の指標からなっています。

FID（First Input Delay）
ユーザーが操作してから反応するまでの時間

LCP（Largest Contentful Paint）
画面に収まる範囲にある最大コンテンツが表示されるまでの時間

CLS（Cumulative Layout Shift）
読み込みが始まってから表示し終わるまでにレイアウトがズレる度合い。とくにリンクの位置がズレるのがまずいらしい。

それぞれの数値が小さいほど優秀ということです。

PageSpeed Insight

Core Web Vitalsをはじめとするサイトの表示性能はGoogleが提供する「PageSpeed Insight」というツールで計測できて、サイトの快適性がスコア（満点は100点）として表示されます。

自分は2ブログとも似たような設定やレイアウトにしているんですが、PageSpeed Insightでモバイルページのスコアを計測したところ、トップページとか動画のあるページは40点前後、文章主体のページでも60点前後でした。

前から重いとは思っていましたが、これは早急に改善しないとですね。

実際にやったこと

Core Web Vitalsの3指標の改善を重点的に対策しましたが、要するに以下2点になります。

• 重くなる要素を極力減らして表示速度を上げる
• レイアウトを改善して、リンクが表示中にずれないようにする

今回やったことを一つずつあげていきます。

ヘッダー画像廃止

ヘッダーに画像を使うと、表示速度もですが、それ以上にCLSで不利になる感じです。

サイトの最上部にデカい画像があると、その画像が少し遅れて表示されることで、下にあるコンテンツが全部ずれてCLS数値が大幅に悪くなります。

ヘッダーの画像の縦幅を小さくしたり、ヘッダー画像を優先読み込みにしたりしてみましたが、CLSがなかなか改善しないので、思いきってヘッダー画像は廃止してテキストにしました。

これの効果は絶大で、CLSの問題は半分くらいこれで解消しました。

ヘッダー画像無いと味気ないですが、もっと良い解消法見つかるまではこれでいこうかと。

コメント欄の廃止

時折コメントを頂くこともあるので、これはかなり心苦しい選択ではありましたが、以下の理由でコメント欄を廃止させていただきました。

• コメント欄と入力フォーム表示は結構リソースを使う。
• コメントは承認制にしていたものの、コメントスパムが毎日大量に来る。サーバーにも多少は負荷になっていると思われる。

コメントスパムのアクセスが無くなると少しアクセス下がるのかも知れませんが（今回のアクセス減はこれも影響してる？）、それはもともと水増しされてたモノってことだし、正確なアクセスを把握するにはスパムアクセスは来ないほうがいいです。

BGMと交流したいというかたは、TwitterかYouTubeでコメントお願いいたします！

（追記）いろいろ検討した末、ブログコメント欄は復活させています。

動画の埋め込みをやめた

PageSpeed Insightで調べるとiframeを使ったYouTubeの埋め込みが、めちゃめちゃ重いのが判明しました。

埋め込みプレイヤー表示のために500KB近いスクリプトを読み込むんですが、この500KBって容量はスマホの横幅いっぱいの画像10枚分くらいあるってことですね。

自分はWordPressのテーマにCocoonを使用していますが、Cocoonには埋め込み動画を軽量化する仕組みが実装されています。

埋め込み動画を直接表示せず、サムネイルだけ表示しておいてクリックされたら埋め込みプレイヤーを読み込む、という処理をするもので、早速、全動画をその方式に変えてみました。

そうすると、確かに軽くなって、これだけで動画のあるページのPageSpeed Insightスコアが20点くらい向上して喜んでいたんですが、大きな問題が発生しました。

この方式だとYouTube側の再生回数にカウントされないんです。

これが判明するまで、YouTubeアナリティクスの「トラフィックソース」とか「再生場所」の推移を見たりして2週間くらいかかったんですが、その間ブログからの動画再生回数カウントは0回でした。

今月YouTubeの再生回数が下がったのはこれの影響が大きいと思われます。

iframeで埋め込んでいたときはちゃんとカウントされていましたので。

そして色々考えたんですが、結局YouTubeプレイヤー風のサムネイルを自作して、画像クリックでYouTubeサイトに直リンクさせるようにしました。

これだと、動画を見に行った視聴者が離脱したまま帰って来ない、っていうリスクは上がるんですが、その分YouTubeの評価やチャンネル登録が増えるのを期待できるし、総合的なメリットとデメリットはトントンかな？と見ました。

ならば、表示速度が速いほうがいいじゃん、ということで直リンク方式にしました。

全動画のリンクを2回も修正したのでめちゃくちゃ大変でしたが、しばらくはこの方式で行こうと思います。

アドセンス広告減量

Googleアドセンス広告もかなり重いです。

広告全廃も検討しましたが、広告を全部外してしまうと、また広告貼るのに再審査を受けなければなりません。

それにドメイン代とサーバー代くらいは稼ぎたいし、将来的な収益増加の可能性もにらんで、最低限は残すことにしました。

自分が使っていたアドセンス広告の中で一番重いのは「関連コンテンツ」と思われます。

関連コンテンツはサイト回遊率が上がる効果もあるらしいのですが、クリック単価は普通の広告に比べて安いし、裏で色々重い処理をしてそうな感じもするので、一旦外して替わりに関連記事ウィジェットを入れました。多分こちらのほうが軽いはず。

そしてアドセンス広告は1ページにつき2つだけ（バナーとレクタングル）にしました。

細かいレイアウト変更

スクリプトを使うような重いコンテンツやあまり効果のないコンテンツは削除しました。

• YouTube登録ボタンは重いらしいし、設置以来1、2回しか押されてないようなので撤去。
• 今までページの上方に置いていたパンくずリストはCLSで不利になるようなので下に移動。
• 同じ理由で、サイト内検索はサイドバーのトップへ移動。
• 今までSNSフォローボタンを大小二つ表示させてたのを一つに。
• トップページなどのインデックスは今まで12記事表示してたのを8記事に減量。

サムネイル画像最適化

これは結果的にはPageSpeed Insightのスコアには寄与しなかったんですが、サイト内のサムネイル画像をより綺麗に表示させることに成功しました。

うちのサイトだと、とくにトップページなどのインデックスページのサムネイル画像が結構な容量を食ってるので最適化したかったんですが、これには色々と難しい問題がありました。

自分が使っているCocoonだと、インデックス（エントリーカードっていうらしい）とか、関連記事・リンクカードなどに付くサムネイルは、見る端末によって、サイズが自動的に決められて表示されますが、何故かモバイル表示のほうが高解像度に設定されているので、最初この設定を変えようとして色々調べたんです。

結果、ざっくり言うと、phpを弄れば表示解像度を変えることは出来ますが、結局iPhoneのRetinaディスプレイをはじめとして、今のモバイル機器はPCに比べて面積あたりの解像度が高く、画像の場合は表面上の解像度（論理解像度というらしい）の4倍（縦横2倍）以上の解像度にしないと綺麗に表示させられないので、それに対応してモバイルのほうが高解像度設定になってるって話なんですよね。

さらに調べると、Cocoonのアイキャッチ画像は大きな画像を登録しても数種類のサイズのサムネイルが自動的に生成されて、実際に出力されるのはデバイスに合わせた最適サイズのサムネイルになるらしく、実際にはそれほど重くなることはないようです。

つまり、リサイズで元画像を小さくしても高速化にはそんなに効果が無く、サムネイルが汚くなるだけ、ということみたいです。

色々お勉強して勘案した結果、画像に関しては高解像度の原版をアップしておいて、表示はCocoonデフォルトの機能を使う、ということにしました。

そんな経緯で、なるべく綺麗な画像を再アップすることにしたんですが、以前容量を気にしてリサイズした画像や使っていない画像が大量にあります。

それらを選別するのも面倒なので、画像は一旦全消しして、必要な画像だけアップし直し、プラグインで必要サイズのサムネイルだけ再生成させる、という作業になりました。

これを数日かがりでやった結果、サムネイルは前よりかなり綺麗になりました。
そして重くなったりすることも無いようです。

高速化作業した結果！

動画埋め込み方法変更と画像最適化がかなり大変な作業でしたが、丸1ヶ月かけて全ての作業をやり終えました。

結果、PageSpeed Insightのモバイルスコアは（だいたいですが）トップページで40点→70点、動画のあるページで40点→80点、文章のみのページで60点→80点と大幅に改善しました。

ちなみにPCのスコアは90点台後半です。

Core Web Vitalsの数値もGoogleが推奨する範囲におさまっています。

LCPだけはページによってはギリギリのラインですが、現時点の自分の知識では、これ以上はアドセンスを全廃するとか、AMP導入（これも調べたんですが、超めんどくさそうなので今回はパス）するとかしないと無理そうです。

アクセス数に関しては、今のところ劇的な効果はありませんが、6月末頃からは回復傾向になってきました。

例によって完全に反映されるのに数か月を要すると思われるので、これからジワジワと効果が出るのを期待しています。

SNSへの配信方法

動画の埋め込みを直リンク方式に変えたのに伴い、TwitterやFacebookなどへの配信方法も変更・統一することにしました。

今まではYouTubeへのリンクをサムネイル付きのメインリンクにして、ブログへのリンクは「解説はこちら」みたいな形で、サブ扱いで配信していました。

今回、ブログのYouTube埋め込みをやめて直リンクにしたので、SNSへの配信はブログのリンクをメインにすることにしました。

まずは一度ブログに入ってもらって、動画見たい人はそのままYouTubeへ、記事が気になった人は下へスクロールして読んでもらう、っていう方式です。

SNSから来る動画目当ての視聴者さんも、一回ブログに入ってもらうようにすることでブログのPVはアップするだろうし、訪問者の一部でもブログの読者になってもらえたらいいな、と思いまして。

Twitterについて

これは最近気がついたんですが、スマホアプリ版のTwitterだとYouTubeの直リンクってインライン再生もしないし、サムネイルすら出ないんですね。

Twitterは今までPCメインでやってて気がつかなかったので、軽くショックでした。

これではスマホからはクリックされにくいですよね。

それもあって、スマホでもサムネイルが出るブログのリンクをメインにしようと思ったわけですが。

ただ、ブログのリンクのみだと、そのツイートはメディア検索に出なくなるので、サブリンクとしてYouTubeのリンクも併記したほうがよさそうです。

そんなこんなで公式Twitterは過去動画もつぶやき直したいし、もう少し盛り上げたいので、毎日1ツイートを目標にしようと思ってます。