売上を上げるためにできるWEBサイト表示速度改善
営利目的でサイトを運用していると、必ずCVRの関門に突き当たります。
上げる方法は色々とWEBに散らばっていますが、案外サイト速度は軽視されがち＆結局何すればいいの？が分かりません。
今回は、「サイト速度の重要性」「サイト速度向上の方法」の2点について書きます。
対象者は
・WordPressなどの自由度が高いCMSでサイトを運用している方
・スクラッチでサイトを作成・運用されている方
です。
結論
「前置きはいいから結局どうすればいいのか教えてよ！」と言う方のために、サイト速度を向上させるためにはどうすれば良いかを先に書いておきます。
・画像を最適化して配信する
・Googleフォントなどの外部CSSを遅延読み込みさせる
・不要な広告は消す
・JSをなるべく消すor遅延読み込みさせる
・CDNを使う
・キャッシュを作る（WordPressならプラグインを使う）
（・AMP化する）
これをしておけば最低限の速さは確保できます。
ページ速度を測ってスマホのFirst Contentful Paintが2秒以内だったら及第点です。
サイト速度を改善すると離脱率が減るので、結果CVRが上がります。
実際に、自分はこれをやって、ファーストビューに30秒の動画を使っているトップページをPageSpeed insightsで計測した結果
・調子いい時：スマホ88点、PC99点
・調子悪い時：スマホ75点、PC91点
を出せました（スマホの数値は60~70で快適と言われています）。このサイトはクライアントのものなのでキャプチャなどは載せられませんが、現在自分のサイトを作り替えているので、そちらが終わったらそのデータを載せます。
WEBサイトの表示速度が大事な理由
はっきりと言います。表示速度は、サイトの効果を最大限引き上げるため絶対に必要な要素です。と言うか、「あって当たり前」な要素です。特に重視するべきはスマホの速度です。
なぜならば、
・モバイル検索時のページ表示速度がランキング要因になることをGoogle社員が認めており
・サイト表示速度が離脱率＝CVRに影響するから
です。
言い方を変えましょう。サイト速度は「速いといい」ものではなく、「遅いと悪い」ものです。そして、遅いの基準はスマホで最初のコンテンツの描画が2秒以上かかることです。
モバイルのページ表示速度がランキング要因になると言うことは、遅ければ下位になると言うことですし、表示速度が原因での離脱率が全体の１割だったとしても、CVRは1.1倍になります。仮にCVRが2%だったとしたら、2.22%に上がると言うことです。売上=流入*CVR*単価なので、CVRが1.1倍になると言うことはそのまま売上が1.1倍になるということです。
逆に言えば、もし今サイト運営で月10万稼いでいるとしたら（そしてサイト速度の改善をしていなかったら）、毎月1万円を捨てているということになるのです。ある調査では、サイトの表示にかかる時間が5秒だと直帰率は38％まで高まると出ているので、実際の損失はもっと大きいかもしれません。つまり、WEBサイトの表示速度改善は、「できたらいいことがある」と言うよりは、「できてて当たり前」の要素なのです。
また、マーケティングの数値計測は母数が重要です。母数が少なければ統計的な正しさが立証できないからです。その点でも、先ずはサイト速度を速くして、母数の減少を阻止するべきなのです。
速度に関して詳しく知りたいのであれば、この読み込み速度に関する記事がわかりやすいでしょう（URL先では読み込み完了としていますが、今はファーストビューの表示速度が重視されているのでここでは表現を変えています）。
速度改善のためにすることその１、画像配信最適化
サイトの表示速度を下げる一番の要因が画像です。まずは画像に対して、正しく対策を打ちましょう。
正しい対策とは、「サイズを調整し」「フォーマットを最適化する」ことを言います。
驚くべきことですが、画像提供サイトから拾ってきた画像をそのままサイトに表示させる方もいます。ものによっては画像1枚で2MBにもなるのに、です。PCの画面サイズの最大シェアは1980pxなので、画像は必ず横1980px以下にしてアップしましょう。可能であれば圧縮もしておきましょう。画像1枚で300KB以上のサイズになっている時は、「この画像は重い」と認識しましょう。
フォーマットの最適化などを自力でやるのはほぼ不可能なので、外部サービスを使いましょう。
オススメはCloudinaryです。
Cloudinaryは無料でも使える画像配信サービスで、少しの設定で最高のパフォーマンスを発揮してくれます。
プラグインが用意されているので、WordPressでも簡単に使えます。
配信する画像のパラメータにf_quto,q_autoを追加する、これだけで画像配信の最適化は終了します。
Cloudinaryの凄さや設定方法はまた後日。
また、LazyLoad系の対応もしておくと良いでしょう。オススメはAMPの導入ですが、それ以外でも勿論効果はあります。表示していない部分で無駄に良きも気にリソースを使うことがなくなるからです。
速度改善のためにすることその２、外部リソース読み込み制御
次にやるべきは外部リソース（JSやCSS）の読み込みの制御です。
使わないJSやCSSを消すだけでも大きな効果があります。
仮に使うものでも、ページロード時に不要なのであればbodyの最後に設置するだけでも効果はありますし、ファーストビューに使用されるCSSだけインラインにするのもアリです。
外部リソースで特に気をつけたいのが、Googleフォントです。Googleフォントは物凄く便利で、私も毎回WEBサイト構築の時に使っていますが、これが案外速度に悪影響を与えます。具体的には、Googleフォント対策をする前と後でモバイルの数値が10近く変わったほどです。
Googleフォントの読み込み最適化は簡単で、preloadを使うだけです。AMPにしている方はpreloadは使えないのでpreconnectを使いましょう。
速度改善のためにすることその３、不要な広告は消す
サイト速度に悪影響を与えるものの中で一番タチが悪いのが広告です。
JSを発火させ画像やCSSを読み込みiframeを起動し・・・と、広告の表示には多くのリソースが必要になるからです。
広告はサイト運営者にとって大事な収入源なので、表示するなとは言いません。しかし、クリックされない位置にある広告などは結構多く、特にトップページの広告は意味をなさないこともあるため、勇気を出して広告を減らすことも大切です。広告を減らすことで速度が上がり、その結果CVRが上がって以前よりも成果が出るという可能性もあるわけですから。
速度改善のためにすることその４、JSをなるべく消すor遅延読み込みさせる
これはそのままですし上に書いている内容と説明が重複するので、割愛します。
要らないもの、成果の出ていないものはしっかり消しましょう。
例えば、WordPressのcontact form 7プラグインは、残念なことに全てのページでCSSを読み込ませてしまいます。対策を打っておきましょう。
速度改善のためにすることその５、CDNを使う
どんなにページの読み込み速度を改善しても、ページをホストしているサーバーには限界があります。同時アクセス数が増えるとサーバー負荷が上がってコンテンツの配信に時間がかかってしまい、結果読み込み速度が下がることになります。それを解消するのがCDNです。まだ産まれたてでアクセス数が少なければ要りませんが、増えてきたと感じたら導入を検討しましょう。
あなたのサイトが静的ページでできているのであれば、netlifyを使いましょう。無料で使える範囲が広いのに、高性能な静的サイトホスティングサービスです。静的サイトのCDNは、netlifyかfirebaseの２択だと思っています。
WordPressもCDN化はできますが、やった実績がない（やる前に自分がJAMstackに移ってしまった）ので、なんとも言えません。この辺りの記事が参考になるのではないでしょうか。
速度改善のためにすることその6、キャッシュを作る
※WordPressなどのSSRをするサービス用です
ページのキャッシュは思っている以上に重要です。特にWordPressの場合、対処をしないとユーザーのアクセスごとにWordPressが頑張って記事情報を探して整形して表示して・・・をすることになるため、Google先生に怒られること間違いなしです。
WordPressでキャッシュを作りたいなら、WP Fastest Cacheが良いでしょう。導入してちょっとボタンをポチポチするだけで、設定が完了します。なのに他のプラグインと同等かそれ以上の成果を出してくれますしもちろん無料なので、コスパは最高です。
速度改善のためにすること番外編、AMP導入
もしあなたのサイトがそれを許すのであれば、AMPを導入しましょう。
WordPressならプラグインがあるので簡単に導入できますし、しっかり仕事をしてくれます（AMPキャッシュのレイアウトは残念な感じですが）。
もしあなたがスクラッチでサイトを作っていたりWordPressのテーマを作っているのであれば、フルでAMPを導入するべきです。これは別記事で解説していますが、AMPにはそれ程の魅力があります。サイト速度の向上だけでなく、サイト全体のUI/UX改善のためにAMPを導入するべきです。
再度、結論
再三ですが、サイトの表示速度は「速いといいね👍」じゃなくて「遅いと悪いね👎」です。遅いことによるデメリットは随所に発生します。もしあなたがサイト運用によって収益化を考えるのであれば、まず基盤として速いサイトを作るべきです。全てはそこから始まります。
表示速度の遅延要因はコンテンツの読み込みです。なので可能な限り画像やJS ,CSSの読み込みを減らしたいのですが、リッチなコンテンツが求められている昨今それは無理難題というものです。なので、読み込み方を工夫しましょう。
具体的には、
・画像はサイズを最小に抑えて最適化する
・JS,CSSはこのページで使わないものが混じってないか確認する
・急ぎじゃないJSはbodyの最後に持っていく
・CDNでいろんな場所から配信して負荷を分散する
・キャッシュを作って配信量を減らす
ことが大切です。
これらの対策をしてサイトの表示速度が正常になって初めて、CVRなどのマーケティング指標が正しい意味を持つことになるでしょう。
この記事が気に入ったらサポートをしてみませんか？