ページ表示速度は、コンバージョンやSEOに影響を与えるポイントの1つとして非常に重要です。
通信速度が不安定であるモバイルからのアクセスが増えている現状では、ページ表示速度がユーザー体験に与える影響はますます大きくなっていくと予想されます。
本記事ではWebサイトの表示速度が与える影響や、計測方法・改善方法を説明し、最後にAlgoWatchにおける改善事例を取り上げます。
【目次】
1. サイト表示速度の重要性について
2. Algowatchの表示速度改善事例
3. 実施施策
4.まとめ
サイト表示速度の重要性について
サイト表示速度は、SEO観点、コンバージョン観点のどちらにとっても極めて重要な要素です。表示速度を改善する際には、まず今のサイト表示速度がどの程度なのかを把握する必要があります。
サイト表示速度を計測するために使用するツールをご紹介します。
サイト表示速度の重要性
サイトの表示速度はランキング要因の1つでありSEO観点で重要な要素です。
また、ページの読み込み速度が遅く、ストレスを感じた経験は誰にでもあると思いますが、表示速度はユーザー行動やコンバージョンにも大きな影響を与えます。
近年は、スマートフォンなどのモバイル端末の利用率が増加しています。回線速度が遅かったり、接続が不安定だったりという環境からのアクセスも多くなっており、ページ表示速度の改善の重要度は増しています。
実際に、「47%のコンシューマーは2秒以内にウェブページがロードされることを期待している」「40%が3秒以上ロードに時間がかかると離脱する」などのデータもあります。
●参考
ローディング速度がユーザー行動にどのような影響を与えるか
サイト表示速度の確認方法
サイト表示速度を確認する方法はさまざまですが、ここでは代表的なものを取り上げます。
●GoogleのPageSpeed Insights
ページ表示速度を計測する代表的なツールが、Googleが提供するPageSpped Insightsです。
PageSpeed Insights
URLを入力するだけで、ページ表示速度だけではなく問題点や改善方法について教えてくれます。
モバイルとPCでデバイス毎に100点満点で採点されます。
●Googleアナリティクス
サイト管理者の多くはGoogleアナリティクスを導入しているのではないでしょうか。実は、Googleアナリティクスにはページ表示速度を確認することができます。
サイドバーの「行動」→「サイトの速度」→「サマリー」で確認することができます。
●GoogleChromeのデベロッパーツール
GoogleChromeにはデベロッパーツールという機能が搭載されており、デベロッパーツールを使うとWebページのリソースに関するデータを見ることができます。どのようなリソースが読み込まれているのか、各リソースの読み込みにどの程度の時間がかかっているのかなどが表示されます。
デベロッパーツールは「F12」→「Network」で見ることができます。
サイト表示速度の改善方法
サイト表示速度の改善には、大きく分けて「フロントエンドの高速化」と「バックエンドの高速化」の2種類があります。
ここでは、具体的な方法の例について簡単にご紹介します。
フロントエンドの高速化
フロントエンドとはWebブラウザ(ユーザー)側のことを指し、HTML・CSS・JavaScriptなどの最適化によってページがブラウザに表示される時間を短縮することを目指します。HTMLやCSSに関する最低限の知識は必要になりますが、比較的容易に高速化できるのがフロントエンド領域です。
●静的ファイルの最適化・圧縮
画像やCSS/JavaScriptファイルなどの最適化、および圧縮が最も単純かつ簡単な方法です。不要なファイルの読み込みを排除し、本当に必要なファイルのみを読み込むことで表示速度向上を図ります。
また、ファイル容量の圧縮によって表示速度向上を図ります。オンラインで使用できる圧縮ツールはたくさんありますが、代表的なツールを紹介しておきます。
・画像圧縮ツール
TinyPNG
・CSS/JavaScript圧縮ツール
Online JavaScript/CSS Compressor
<画像圧縮ツールを使った圧縮例>
ここではTinyPNGで当ブログ「Core編集部」のアイコン画像を圧縮してみます。
圧縮方法は簡単で、画面上で圧縮したい画像をドロップ&ドロップするだけです。
32%の圧縮に成功しました.
圧縮した画像は”DOWNLOAD ALL”からダウンロードできます。
●ブラウザキャッシュの活用
ブラウザキャッシュとは、過去にブラウザが表示したサイトのデータをPCに一時的に保存しておく機能です。次に同じサイトを表示したときに、サーバーにアクセスして新たに情報を取得する手間を省きます。サーバーとの通信回数を減らすことができるため、前回アクセスした時よりもページを高速に表示することができます
ブラウザキャッシュを使用するにはサーバー側での設定が必要で、Apacheの場合は.htaccessへの記述が必要になります。キャッシュの対象となるのは基本的にはJacaScriptファイル、CSSファイル、画像ファイルなどの静的なファイルです。HTMLなどの動的なファイルはサイトの状況やキャッシュポリシーなどのよって適宜最適なルールを策定する必要があります。
Googleは静的なリソースのキャシュを1週間以上、できれば1年を推奨しています。広告ウィジェットなどのサードパーティのリソースの場合はキャッシュの期間を短く設定するように推奨しています。
・参考
ブラウザのキャッシュを活用する | PageSpeed Insights | Google Developers
下記のように、ファイル形式ごとにキャッシュ保存期間を設定します。
・.htaccessへの記述例
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 2 weeks"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/jpg "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/svg+xml "access plus 1 weeks"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 weeks"
ExpiresByType application/x-font-woff "access plus 1 weeks"
ExpiresByType application/x-font-opentype "access plus 1 weeks"
ExpiresByType application/vnd.ms-fontobject "access plus 1 weeks"
</IfModule>
バックエンドの高速化
バックエンドとはWebサーバー側のことを指し、プログラムやデータベースなどサーバー側の最適化によって、内部処理および表示速度の高速化を目指します。データベースなどの専門的な知識が必要になり、比較的難易度は高めです。
状況によって、見るべきポイントが大きく異なることが多いため、ここではいくつかの要素について簡単にまとめておきます。
・SQLの見直し・データベースのテーブル構成の見直し
データを取得する際にはSQLを使用しますが、同じ処理を実装するにしてもSQLやテーブル構成によってパフォーマンスは大きく異なります。
本当に無駄な処理をしていないか、データ取得のロジックが最適かどうかあらためて考えましょう。
・DBのインデックスの見直し
データベースの高速化の技術で、最も重要な要素一つにインデックスがあります。本における「索引」と同じようなものですが、このインデックスの使い方によって検索効率やページ表示速度も大きく変わります。
・キャッシュの活用
キャッシュとは、一度参照が行われ、次に同じ参照が行われた場合に、一回目にメモリにキャッシュしておいた結果を返却する機能です。 2回目以降はメモリ上にキャッシュされた結果を返却し、ディスクにアクセスせずに済むため、高速に処理が行えます。
ただし、キャッシュを使用すると、データが変更された場合にキャッシュされた古い結果が返却されますので、「キャッシュの利用は比較的変更の少ないデータに限定する」「INSERTやUPDATEなどで更新された場合はキャッシュから削除する」などの対応が必要になります。
Algowatchの表示速度改善事例
弊社では検索エンジンのアルゴリズム変更と順位変動を毎日監視するAlgoWatchというサービスを提供しています。
AlgoWatchにおける表示速度改善事例をご紹介します。
MySQLのパフォーマンス
AlgoWatchの高速化では、データベースの構成とSQLの改善によって高速化を図りました。
・Algowatchの問題点
AlgoWatchでは、MySQLによって大きく3つの処理を行っています。
処理1)特定のドメインにおける順位変動集計
処理2)獲得している各キーワードの順位変動取得
処理3)SEO競合・類似サイトの取得
●1億近いレコードを保有
ドメイン入力時に、当該ドメインのSERPs状況検索で主に使用するテーブル(テーブルA)が1億近いレコードを保有していました。(2017年4月)
インデックスを使用しているとはいえ、1億件のレコードに対して検索をかけるのは効率的ではありません。
●ソート時にUsing temporary;Using filesortが発生しやすい
各SQLではorder by句によってソートを実施しており、データ容量が多いことからメモリに収まらず、「Using temporary;Using filesort」が発生しやすい状況にありました。メモリに収まりきらないとfilesortが行われ、処理が大幅に遅延します。
●インデックスの精度が低い
テーブルAにはインデックスは設定されていたものの、インデックスが貼られているカラムにおけるカーディナリティは極めて低く、インデックスの精度が高くない状況であり、インデックスの効果を最大限に活かすことができていませんでした。
実施施策
上記問題点を解決すべく、下記施策を実施しました。
●ページ表示用一時テーブル
指定ドメインでの検索時に、1億近いレコードを保有するテーブルAに対してフルスキャンをかけている状況であり、検索時間の遅延の原因でした。また、毎日約40万レコードのデータがテーブルAには追加されるため、今後ますます検索効率は低下すると予想されていました。
そのため、ページ表示に必要な直近2カ月分のレコードのみを抽出した一時テーブルを作成し、検索範囲を狭めることで検索時間の短縮を図りました。日次のバッチ処理により、一番古い日のデータを一時テーブルから削除し、最新のデータを追加するというフローです。
1日あたり約40万レコードであるため、2カ月で約2,400万レコードとなり、ページ表示時の検索範囲が大幅に縮小され、検索時間の短縮になりました。
●パーティショニング
上記の一時テーブルに対して、パーティショニングを実施しました。
パーティショニングとは、MySQL5.1から使えるようになった機能で、1つのテーブルを分割します。テーブルの分割により、容量の拡張や検索範囲の限定によるSQLの高速化を図ることができます。
データの振り分け方によって、いくつか種類がありますが、今回はKEYパーティショニングを使用しました。
MySQL5.6リファレンスマニュアル:パーティション化
AlgoWatchのページ表示時のSQLは、テーブルAの日付のカラムに対する検索が多いため、一時テーブルを日付によって60分割して格納することで検索効率性を高めることが狙いです。
パーティショニングには使用制限があり、SQL文の検索条件にパーティショニングの条件(ここでは日付のカラム)を入れる必要があるため、使用する際には注意が必要です。
●複合インデックス
AlgowatchではテーブルAの日付とドメインのカラムに対しての検索が多いですが、両カラムともカーディナリティが低く、検索効率が悪い状態でした。
そこで、テーブルAの日付のカラムとドメインを指定するカラムに複合インデックスを貼ることで、インデックスの一意性を高め、検索効率向上を図りました。
まとめ
モバイルの普及やモバイルファーストインデックス導入が控えていることもあり、サイト表示速度の重要性はどんどん増していくと考えられます。サイト表示速度の問題点はサイトによってそれぞれ異なるため、高速化を実施するときは、まずどこに問題があるのかを把握する必要があります。
ツールを使って問題点を把握し、リソースによってフロントエンド、バックエンドの高速化を検討しましょう。