こんにちは、こんばんは、にゃんこ師匠です。

ウェブサイトで高いコンバージョンを得て、SEOで高い評価を受けるためには、小さな改良から大きな変更まで、様々な点に気を配らなければいけません。継続的な改良こそが安定したコンバージョンを得る最高の方法です。

今回は「コレだけは押さえておきたいウェブ最適化のポイント」を紹介します。

ウェブ最適化のポイント

要旨:Google PageSpeed Insights(オンライン)で計測し、問題点をチェックした後、問題点の詳細を確認するためにメジャーブラウザの開発者ツールで詳細を確認しましょう。出来る所から地道に直して行くだけでもコンバージョンが改善します。

目次

  1. Google PageSpeed Insightsを活用する
  2. ブラウザ向け開発者ツールを活用する
  3. 開発者ツールを使用したカンタンチェック
  4. ページ速度改善のためのヒント(リンク集)
  5. ページデザイン改善のためのヒント(リンク集)

Google PageSpeed Insights

Google Pagespeed
https://developers.google.com/speed/pagespeed/insights/?hl=ja

Google PageSpeed Insightsとは

ウェブマスター(ウェブサイトの管理者)のために無償で解放しているオンラインの評価ツールです。ここでは過去の知見からウェブサイトで「価値を最大化」するために必要な要件を満たしているかをテストできます。

スクリーンショット 2015-01-27 15.22.55
単に点数が良い、悪いだけではなく、修正のためのヒントが出るので、最適化の道筋が立てられます。

Google PageSpeed Insightsで分かる事

URL欄に入力すると採点が始まります。リアルタイムにサイトを見に行くので何の準備も必要ありません。

指摘されるポイントには「すぐに出来そうなこと」「サーバー設定の再考が必要なこと」「サイト制作技術で解決できること」に分けられます。
スクリーンショット 2015-01-27 15.22.04
指摘されるルールは以下のページの指標に基づいています。
https://developers.google.com/speed/docs/insights/rules

これを、「すぐに出来そうなこと」「サーバー設定の再考が必要なこと」「サイト制作技術で解決できること」に再整理してみました。

■ すぐに出来そうなこと
■ サイト制作技術で解決できること
  • CSS の配信を最適化する(→速度改善のアドバイス
  • 見える範囲のコンテンツを優先する
  • レンダリングを妨げる JavaScript を削除する
  • 非同期スクリプトを使用する
  • 操作性に関するルール(→ページデザイン改善
  • プラグインを使用しない
  • ビューポートを設定する
  • コンテンツのサイズをビューポートに合わせる
  • タップターゲットのサイズを適切に調整する(→ページデザイン改善
  • 読みやすいフォントサイズを使用する
■ サーバー設定の再考が必要なこと(→速度改善のアドバイス
  • 圧縮を有効にする
  • サーバーの応答時間を改善する
  • ブラウザのキャッシュを活用する
  • リソースを圧縮する(自動化)
  • 画像を最適化する(自動化)

満点が必要なのではなく、日々の作業の範囲で意識したり、あるいは次の制作依頼のときにチェックしておくべき項目と言えます。

レンタルサーバー等の場合、「サーバー設定の再考が必要なこと」のいくつかは管理画面から設定、あるいは既に実装済みの場合もあります。(例:gzip/mod_deflate/mod_pagespeed等の項目が操作できる)
スクリーンショット 2015-01-27 11.59.04
※エックスサーバーの場合

ブラウザ向け開発者ツール

ブラウザ向け開発者ツールとは

最初はFirefoxのプラグインFirebugで実現していた「ウェブ系開発者専用ツール」でしたが、その利用方法はウェブデザインからカンタンなエラーチェックまで様々な利用に適していたため、今ではブラウザに当たり前に付いている機能です。

とはいうものの、専門用語が並ぶため、一般にはちょっと敷居の高いツールに感じるかもしれません。

そのため、使ったことが無い方も多いと思いますが、実は簡単な操作でワンポイントチェックできる、便利ツールなので非プログラマ、非開発者こそが使って欲しいツールだったりします。

各ブラウザの開発者ツール

■ Microsoft Internet Explorer 11

デフォルトで搭載。IE上でF12キーまたはctrl+shift+iで呼び出せます。メニューからはギアマーク>F12開発者ツール。コンテクストメニュー(ブラウザの画面上で右クリックして表示)の「要素を調査」でも呼び出せます。

IC688637
※ユーザビリティに影響する箇所の反応速度等も確認できる。(IE11 開発者ツール)

【公式】IE11 開発者ツール
https://msdn.microsoft.com/ja-jp/library/bg182326(v=vs.85).aspx

【参考】IE11 開発者ツール使い方(buildinsider)
http://www.buildinsider.net/web/ief12devtools/01

■ Firefox

最新版はデフォルトで搭載。アドオンの老舗Firebugは相当古いバージョンにも対応している。コンテクストメニューの「要素を調査」でも呼び出せます。
inspector
【公式】Firefox 開発者ツール(mozilla.org)
https://developer.mozilla.org/ja/docs/Tools

【アドオン】Firebug 2.0.7
https://addons.mozilla.jp/firefox/details/1843

■ Google Chrome

デフォルトで搭載。Windows版はChrome上でF12キーまたはctrl+shift+iで呼び出せます。Mac版はメニュー>表示>開発/管理>デベロッパーツール。コンテクストメニューの「要素を調査」でも呼び出せます。
スクリーンショット 2015-01-27 15.30.52
【参考】Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能(buildinsider)
http://www.buildinsider.net/web/chromedevtools/01

開発者ツールを使ったチェックポイント

Google PageSpeed Insightsで指摘された項目の確認

Google PageSpeed Insightsは、開発者ツールで確認できる数値を整理し、重要なポイントだけ指摘してくれていると考えて良いでしょう。つまり指摘事項(あるいはそれ以上)の情報を確認する事が出来ます。

何よりもブラウザだけで様々な場所からアクセスしてチェックできるのがポイントです。会社だけでは判らないポイントも見えてきます。Google PageSpeed InsightsではGoogleのサーバーからのリクエストのみになるので、よりユーザに近い情報を得るためにも有用です。

「速度」で遅い原因を探る

各開発者ツールには「速度」または「スピード」「ネットワーク」などの名の付いたメニューがあり、それを開いた状態でブラウザリロードすると、読み込みファイル順に詳細な速度を確認できます。
IC688183
中には極端に時間がかかっている画像やJavascriptもあり、上手く読み込まれない部分等も分かるので、重要なページは必ずチェックしましょう。

1つの画像を改善してもGoogle PageSpeed Insightsの評価は変わりませんが、ユーザ体験は確実に向上しています。

スクリーンショット 2015-01-27 15.35.02
※青い縦線が表示が終了したタイミング。1秒未満で表示されている。(Google Chromeのデベロッパーツール)

「コンソール」でエラーをチェックする

「コンソール」「Console」などの名前のメニューがあり、「警告」「注意」等の情報を確認できます。特に「警告」(赤い色に×マーク)の場合は要注意。ユーザ体験を低下させていたり、上手く動かない等の問題が発生している可能性もあります。

弊社のタグを挿入していただく時にも必ずチェックする項目で、確実に機能を動作させるためには必要な手順です。

ただし、警告でも無視していい警告、直せない警告がいくつか有ります。良く出るのがソーシャルボタン(Facebook,Twitter)のエラーです。これらは、誤判定、もしくは改善できない場合が多いので、ページ表示の問題が無ければ放置しても問題ないと思われます。

ページ速度改善のためのヒント(リンク集)

ページの読み込み、表示速度は売り上げや問い合わせの数に影響する重要な指標です。「速い程良い」ので改善のための情報を常に収集しておきましょう。

速度改善のアドバイス|Google Developers

圧縮を有効にする
https://developers.google.com/speed/docs/insights/EnableCompression

サーバーの応答時間を改善する
https://developers.google.com/speed/docs/insights/Server

ブラウザのキャッシュを活用する
https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

リソース(HTML、CSS、JavaScript)を圧縮する
https://developers.google.com/speed/docs/insights/MinifyResources

画像を最適化する
https://developers.google.com/speed/docs/insights/OptimizeImages

CSS の配信を最適化する
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

速度改善のオンラインツール

【CSS/JS圧縮】Compressor
http://compressor.ebiene.de

【CSS/JS圧縮】cssdrive
http://www.cssdrive.com/index.php/main/csscompressor/

【Jpeg圧縮】JPEGmini
http://www.jpegmini.com

【Jpeg/PNG/gif圧縮】J I C – a Javascript Image Compressor
http://makeitsolutions.com/labs/jic/

【画像圧縮まとめ】画質の劣化を抑えつつ画像を圧縮するオンラインツールのまとめ
http://matome.naver.jp/odai/2136142731431231001

ページデザイン改善のためのヒント(リンク集)

ページデザイン改善のアドバイス

【Google】タップ ターゲットのサイズを適切に調整する
https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately

【Google】Android UI ガイドライン
https://developer.android.com/design/style/metrics-grids.html

【Google】コンテンツのサイズをビューポートに合わせる
https://developers.google.com/speed/docs/insights/SizeContentToViewport

【iOS】アダプティビティとレイアウト|iOS Human Interface Guidelines
https://developer.apple.com/jp/documentation/UserExperience/

【スマホUI】モバイルサイトのナビゲーションメニューは画面下に置くべき|クリエイターボックス
http://www.webcreatorbox.com/tech/mobile-nav/

【スマホUI】CVRを向上させるスマホサイトUI/ UX改善ポイント10選
http://liskul.com/cr_uiux10-3454

【ソースチェック】Markup Validation Service
http://validator.w3.org
綺麗なデザインは綺麗なソースから。

【アクセシビリティ】色のアクセシビリティをチェックするツールまとめ(弊サイト)

あとがき

ウェブ最適化はエンドレスなテーマの一つと言えます。効率的かつ効果的に行うためにも、ツールの選択は重要なポイントとなります。ぜひ一度試してみて下さい。自分のビジネススタイルに合ったツールが必ずあるはずです。