2021/03/19

検索順位UPも狙える！？サイトのページ表示速度を高速化して離脱率・直帰率も改善！

こんにちは。エンジニアのマサオです。

WEBサイトを運営されているみなさん、何とか検索上位に持ってこようと日々あれやこれや調べてお試しかと思います。
SEO対策についていろいろ調べている方は目にされたことがあると思いますが、例えばGoogle（グーグル）ではページ評価の要素として『ページ表示速度』が関係しているとされています。

今回はこのページ表示速度を高速化するための手法について技術的な話も織り交ぜながら解説していきます。

ページ表示速度とは？

スマートフォンやPCなどでWEBサイトを表示する裏側では、ブラウザ（Chrome/Safari/Edge/FireFox/Opera等）とサーバーの間でWEBページの表示に必要なデータのやり取りが行われています。
そして読み込んだHTML・CSS・Javascript・画像などのデータをブラウザがみなさん普段目にしているWEBページとして組み立てしてくれているわけです。

ページ表示速度とはブラウザにページが視覚的に表示されるまでの時間のことです。
幸いなことに最近のブラウザは多少データが重くても必要最低限のデータさえ読み込みされればページを組み立てを開始し、表示できるものは先に表示してくれるケースがほとんどです。

ページ表示速度が遅いとどうなる？

もはや語るまでもなくみなさんが本能的に行っている行動です。
それは何か。。。

「ページの閲覧をあきらめ、他のページへ」

タイム・イズ・マネー！
たかが数秒の出来事でしょうが、日に数十ページ、数百ページ閲覧することが当たり前になってきている世の中です。
数秒の積み重ねが数分・数十分となり年間にすると数時間・数日間と人生の無駄な時間を過ごしてしまうことになるのです。
当然みなさんそんな遅いページはとっとと読込をあきらめることでしょう。

統計によるとみなさんの一般的な我慢の限界はどうやら『3～5秒』程度までのようです。表示速度が3秒を超えたあたりから一気に直帰率（サイトから出て行ってしまう割合）・離脱率（ページから離れる割合）が増加し、5秒あたりでは直帰率・離脱率が40%程度まで増加するとの統計結果になっています。

冒頭でお伝えした通りGoogle（グーグル）ではページ表示速度も評価要因の１つとなっています。（厳密にはデータ読込～スクリプト実行完了までの時間）

ページ表示速度の高速化

ページ表示速度を高速化するためには

データの読込量を減らす
スクリプトの軽量化

この2つが重要になります。

データの読込量を減らす

WEBサイトを構成するデータの主なものは下記の通りです。

HTML/CSS
Javascript
画像ファイル

データの読込量を減らすためにはこれらのファイルを軽量化していく必要があります。

[HTML/CSS]

コード記述の無駄を省くことが一番です。
例えばChromeをお使いでしたらブラウザ上で右クリックし「ページのソースを表示」するとHTMLのソースコードが表示されます。あなたがサイト運営に関わっている方でHTMLの知識がなかったとしても、視覚的にコードの内容が多いのか少ないのか、なんとなく直感的にわかるかもしれません。
必要以上に階層化されたHTMLはページのレンダリングが重くなるケースがほとんどです。軽量化するためにはコーディングのやり直しやリニューアルが必要になる場合もあります。

[Javascript]

シンプルに必要最低限の記述を心掛け、コードが膨大になる場合はwebpack/gulp等で圧縮するのが一般的なアプローチです。
ライブラリを使用している場合は、本当にそのライブラリが必要なのか検討してみてください。

[画像ファイル]

デザイン性を重視したサイトだとどうしても画像1枚で1MBあるようなケースが出てきてしまいます。
例えば一般的なスマートフォンの画面解像度幅は420px未満がほとんどです。デバイスの解像度幅に応じて必要最低限のファイルサイズの画像を用意したり、デザイン性とファイルサイズを両立した限界ラインを攻めた圧縮を行う必要があります。
実は重たいページの大多数は、ページ全体の画像ファイルサイズを抑えることで表示速度を３秒未満に抑えられるケースがほとんどです。

スクリプトの軽量化

筆者は設計からコーディングまで一貫して行うケースが多く、よほど必要なケース以外ではjQueryなどのライブラリは『使わない』ことがほとんどです。
ライブラリは適切に使用することでバグを減らしたり全体的なコード量を抑えられるケースや開発時間が大幅に短縮できるケースがありますので、そこは適材適所。必要に応じて使用することもあります。
ただWEBサイトは一度作って公開すれば数年はリニューアルせず運用することがほとんどでしょうから、その後の検索順位アップのことを考えると多少開発時間が長くなるとしても無駄はなるべく省きたいものです。

2つの図を見比べるとわかる通り、このケースではjqueryの読込だけで 544ms（約0.5秒) かかっています。
例えばページ表示時間を平均3秒以内に収めようと思った場合、0.5秒はかなりのロスです。

(function($) {
    $('p#fadeOut').on('click', function() {
        $(this).fadeTo('slow', 0);
    });
})(jQuery);

よく見かけるケースですが、例えばサイト内でフェードアウトアニメーションを行う上記のコードのためだけにjQueryライブラリをロードしている場合があります。
コーダーの方からすれば入力するコード行数も減り非常に楽なことです。
しかしサイト運営者にとってのゴールはサイトを立ち上げることではなく、サイトにお客様を多く呼び込むことですから、リリース後のことを考えればネイティブのJavascriptだけで解決したり、CSSも組わせて下記のような簡潔なコードで済ませるのも手だと思います。

(function() {
    var ele = document.querySelector('p#fadeOut');
    ele.addEventListener('click', function(e) {
        e.target.classList.add('hidden');
    });
})();

p#fadeOut {
    transition: visibility 400ms ease, opacity 400ms ease;
}

p#fadeOut.hidden {
    visibiliy: hidden;
    opacity: 0;
}

そしてネイティブのJavascript＋CSSで処理するメリットは読込時間・容量の軽量化以外にもう１つあります。
それは『アニメーションの軽快さ』です。
Javascriptでアニメーションさせる場合、数十マイクロ秒ごとに処理を行わせることが多いと思いますが、実は低スペックなデバイスではこのJavascript処理が原因でアニメーションがカクつくことがあります。
アニメーション部分の処理をCSSのみで行わせることにより、よりスムーズなアニメーション効果を得ることができるので、CSSで不可能なアニメーションでなければなるべくCSSで処理させましょう。

おわりに

後半はスクリプトの軽量化について重点的に解説しました。
前述のとおり開発期間が長くなったり、開発コストがあがる場合もあるので一概にはスクリプトの軽量化がベストな解決方法とも言えません。
長い目で見た時に『どこが目標とするゴールなのか』をしっかりと考えた開発をすることで、開発者/お客様ともに満足のいく結果につながると考えています。

もしご自身での既存サイトの高速化・軽量化に行き詰まったり、ソースコードの軽量化やサイトリニューアルなどお考えでしたらぜひ一度ご相談ください。