第31回SEO女子コラム「Googleの便利ツールその3」

モバイルフレンドリーテストツール

今回は以前コラムで書きましたモバイルフレンドリーのテストツールについて紹介します。
このモバイルフレンドリーテストはつい先週くらいにページのデザインが変わったみたいです。
機能面でなにか変わっていたらワクワクして検証するんですが見た感じ、特に変化はない模様…。
というわけでひとまずはモバイルフレンドリーテストの基本的な使い方を解説していきます！

使い方と言っても、対象のサイトURLを入力欄に記入して分析する、という非常にシンプルなテストツールなので簡単です。
例としてSEO女子ブログを分析してみます。

モバイルフレンドリーテストにアクセスするとURLを入力する欄があるので、対象のURLを入力します。
そして「分析」ボタンをクリックすればこのようにぐんぐんと分析されていきます。

分析後、問題がなければこのように問題ありません。このページはモバイルフレンドリーです。と表示されます。
ここで分析後にエラーが発生すると、幾つかのエラー項目が表示されます。
モバイルフレンドリーのエラーについては既に紹介しているのですが、表示される項目の書き方が若干違います。
もしエラーが発生した際にはこちらのコラムと照らしあわせて参考にしてみてください。
ちなみに今回発生したエラーでリンク同士が近すぎますというのは以前のコラムで言う、「リンク(タップ要素)は十分に幅を取る」という解説を、モバイル用 viewport が設定されていませんと表示された時には「ビューポートを設定する」、テキストが小さすぎて読めませんというエラーは「フォントサイズに気を付ける」の項目を確認してみましょう。

モバイルフレンドリーテストのツールについてわかった所で、自分のサイトがPC以外のデバイスからどう見えるかをチェックできるツールを紹介します。
そのツールとは何度か紹介しているGoogle Chrome Developer Tools（グーグルデベロッパーツール）です。
特にWEBの開発などに関わった人は多く利用しているのでは？と思います。
私も今の仕事を始めてから使用していますが本当に充実した機能だなと思ってます。（私は全然活用できてませんが）

デベロッパーツールを出すにはWindowsの方はF12キーを、Macの場合はCommand＋Option＋Iキーで表示されるようです。右クリックにあるメニューの中では「検証」というところがこれに当たります。
iPhoneなど各デバイスの表示に切り替える機能はこちらの左上にあるこちらの四角が2つ重なったところをクリックします。

そうするとこのように四角のところが青くなり、iPhoneやiPadのような各デバイスでみた状況を確認できます。
デバイスの表示切り替えはページ上部で可能なので、PCやスマホ、タブレッドなどを使用しているユーザーへ向けたサイトならいろんなデバイスでの表示をチェックしてみて下さい。
PCサイトでは問題なくても、この機能を使用してテキストが見づらい・画像が大きすぎたなどレイアウト崩れに気づくこともありますのでサイトを最適化したいなら確認しておくことをオススメします。
もちろんPCから見ていることには代わりはないので、実際にスマホでも確認しておくことをお勧めします。
デベロッパーツールには、他にももっと便利な機能があるのですがあまりに豊富なのでそれはまた別の機会に紹介しますね。

PageSpeed Insights

Googleが提供するツールの中でもう一つ知っておきたいのが、「PageSpeed Insights」です。
このツールはページの読み込み時間について調べる事が出来るツールで、サイトの問題点などを調査し読み込み速度を早くするにはどうしたら良いかを解析してくれるという便利なツールです。
最近Googleはスマホでのページ読み込み速度に力を入れていますし、よりページを快適に閲覧してもらうためには欠かせないツールです。
このツールを使えばスマホから閲覧した時とパソコンから閲覧した時の2パターンを調べる事が出来ます。

百聞は一見にしかずといいますし、実際に使ってみましょう！

まずはPageSpeed Insightsにアクセスします。もちろんこのツールもGoogleが無料で提供をしてくれているので、有り難く使わせてもらいましょう。
使い方は簡単で、調べたいページのURLを入れて分析ボタンを押すだけです。とっても簡単！

分析が終わると結果画面が現れます。タブ切り替えでスマホからの判定とパソコンからの判定が見えますが、お恥ずかしながら当サイトは読み込みスピードがあまり良くないようですね…！

PageSpeed Insightsはページの速度をスコア形式で判定してくれます。もちろん点数が高ければ高いほど良いです。点数と合わせて、修正したほうが良い点を解析してくれます。それがこちらの項目ですね。

赤いマークで書かれている「修正が必要」という項目は、ページの読み込みを遅くしている原因とも言える部分になります。ここに出てきた項目はなるべく修正をした方がいいでしょう。その下、黄色いマークで書かれている「修正を考慮」という項目は、時間があるのならば修正をするともっと良くなりますよーという項目です。
画像では見えていませんが、この下に緑のチェックマークで「合格」という項目もありますが、この項目は特に修正の必要が無く良いですよーと褒められている項目となります。

項目1つ1つで修正の方法が見えるようになっているので、この結果を参考そのページの修正をしてあげましょう。

それではどのような項目があるのでしょうか？軽い修正方法と共に見ていってみましょう！

レンダリングをブロックしているJavaScript/CSSを排除する
スクロールをしなくても見える部分にあるJavaScriptやCSSの外部ファイルが検出された時に出る項目です。ブラウザは、画面を表示する前に一度ページの解析というものを行います。その解析が完了してやっとページを表示しますが、外部ファイルが存在するとその解析を一旦中断して外部ファイルのダウンロードをしないといけません。そのダウンロードなどでネットワークの往復が発生し、ページの表示に遅れが出てしまいます。
これを解決するためには、スクロールしなくても見える範囲のJavaScriptやCSSはインライン化(直接ソースに書き込む方法)をし、スクロール後に見える範囲のものは配信を遅延させるといったテクニックを使用します。
詳しくは：https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

圧縮を有効にする
ネット上のページと言うものはウェブサーバーを使って圧縮をすることが出来ます。この圧縮をすることでファイルのダウンロードが早くなり、時間の削減をすることが出来ます。
解決方法としてサーバーの設定で圧縮を有効にする必要があるので、様々な設定方法を確認してください。
詳しくは：https://developers.google.com/speed/docs/insights/EnableCompression

画像を最適化する
画像の読み込みはとても時間がかかります。画像自体の大きさはもちろんですが、ファイルサイズなども大きすぎると読み込みに時間がかかります。
これらを解決するために、画像は適切なサイズで使用をしましょう。また、ファイルの圧縮なども行う必要があります。他にも方法がありますので、画像の圧縮方法などを調べてみてください。
詳しくは：https://developers.google.com/speed/docs/insights/OptimizeImages

リソース(HTML・CSS・JavaScript)を縮小する
HTML、CSS、JavaScriptのファイルは最小限のファイルサイズにすることで読み込みの速度を上げることが出来ます。直接編集をしている人にとっては少し見辛いかもしれませんが、不要な改行やスペース、インデントを消すことでファイルはかなり圧縮されます。CSSやJavaScriptは変数などを変えることで圧縮も出来ますが、そのときにはHTMLも対応させなければいけませんので要注意です。
詳しくは：https://developers.google.com/speed/docs/insights/MinifyResources

ブラウザのキャッシュを活用する
ブラウザにはキャッシュ機能があります。そのキャッシュ機能を使用することで、ユーザーが2回目以降にサイトを訪れた場合のアクセスを楽にすることが出来ます。いちいちアクセスをしなくてもブラウザに残っている情報を使用することが出来るため、表示時間を早くすることが出来ます。
静的なリソースに限りますが、リソースは多岐に渡るため、設定等をしてみてください。
詳しくは：https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

サーバーの応答時間を短縮する
サーバーからの応答が遅い場合、もちろん読み込み速度も遅くなります。PageSpeed Insightsでは、サーバーの応答がある特定の秒数以上かかった時に修正が必要である、と判断されます。原因は様々で、ページによって違うため調査が必要ですが、アプリケーションやデータベースに問題があったり、メモリが不足していたりと様々な要因が考えられます。
詳しくは：https://developers.google.com/speed/docs/insights/Server

リンク先ページのリダイレクトを使用しない
301。302関係無くリダイレクトが発生すると、その分読み込みの速度も遅くなります。必要な場合は仕方ないのですが、余分なURLを挟まずに一回のリダイレクトで目的のページヘユーザーを導く必要があります。
詳しくは：https://developers.google.com/speed/docs/insights/AvoidRedirects

表示可能コンテンツの優先順位を決定する
スクロールせずに見える範囲の読み込みが早ければ表示も早くなるため、スクロールせずに見える範囲のコンテンツに使用しているデータを優先的に読み込ませ、残りは後で読みこむように改善すれば表示速度も自然と早まります。大量のデータのやり取りは遅延に繋がりますので、リソースの読み込みは優先順位を決めて最適化しておくようにしましょう。
詳しくは：https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent

必ずしもすべて可能というわけではありませんが、出来るだけ実現させることで読み込み速度も早くなり、PageSpeed Insightsの点数も上がるはずです。まずはテストを行い、自分のサイトのページについて問題点があれば洗い出してみるといいかもしれませんね。