興味のある所からお読み下さい
- 開設までの手順
- 活用ノウハウ
- スコアカード改善
- 使い方と収益向上策
基本編の改善結果
前回記事「基本編」で行った、
- スピード診断：.htaccessによる「ブラウザのキャッシュの活用」
- エクスペリエンス診断：メタタグによる「viewport の設定」
で、チューニング前後でスコアは、以下のように改善されました。が、「スコアカード」は変わらずです。
基本編の改善結果の詳細はこちらをご覧ください。
チューニング後の要修正項目は、
スピード診断：修正が必要：１項目、修正を考慮：２項目（変わらず）
- スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する（要修正）
- 画像を最適化する（考慮）
- JavaScriptを縮小する（考慮）
エクスペリエンス診断：修正が必要：１項目、修正を考慮：１項目（要修正から）
- コンテンツのサイズを表示域に合わせる（要修正）
- タップ ターゲットのサイズを適切に調整する（考慮）
となっています。
スピード診断のさらなる改善
レンダリングを妨げるJavaScriptを削除する
レンダリングとは、ウェブページを解釈し、実際に画面に表示する文字や画像などの配置を行うことです。スピード診断結果のヘルプには、以下のように記述されています。
ブラウザではページをユーザーに表示する前に解析する必要があります。解析中に外部スクリプトがある場合は、解析を停止して、その JavaScript をダウンロードしなければなりません。そのたびにネットワークの往復が追加されるため、ページが最初に表示されるまでの時間が遅くなります。
また、解決策として以下が提案されています。
ブロックするリソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください。
具体的な施策
さらなる改善を目指し、「インライン化」と「読み込みタイミングを遅らせる」解決策をとることにします。具体的には、
-
JavaScriptのファイルサイズが小さいものは、いちいち外部ファイルとして読み込ませるのはやめて、HTMLドキュメント内に書く
-
先にJavaScript以外のファイルをを読み込ませてから、あとのほうでJavaScriptを読みこませるような順序配置を行う
※document.write を使用している場合は、非同期の読み込み（HTML の async 属性を使用）は安全に使用できないケースが多いので注意します。
改善内容
レンダリングを妨げるリソースは、jsファイル８個、cssファイル２個です。このうち、ファーストビュー表示に必要だが、ファイルサイズが大き過ぎる jsファイル１個はそのまま残し、他のファイルに以下の対策を施します。
-
ファーストビュー表示に必要な、小さな JavaScript/css は＜head＞部にインライン化（jsファイル２個、cssファイル１個）
-
それ以外は、JavaScript/css の実行や読み込みを、ページの読み込み後（＜/body＞の直前）に移動する（jsファイル５個、cssファイル１個）
画像を最適化する・JavaScript/CSSを縮小する
スピード診断結果欄にある「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます」（下図赤枠）をクリックすると、
「 jpg / png 画像のロスレス圧縮」（ gif 画像はできないのでこちらのサイトで圧縮します）、「JavaScript、CSS の圧縮（余分なスペース、改行、インデントなどの不要なバイトを取り除く）」を行ってくれます。
できあがったファイルをPCにダウウンロードし解凍して、それぞれのファイルをサーバーへアップロードします。
スピード診断の最終結果
以下の３つの改善を第１段階、第２段階と加えたことで、スピード診断のスコアはモバイル：５２→９１、PC：６６→９７へとアップしました。
- ブラウザキャッシュの活用（第１段階）：全て改善
- レンダリングを妨げるリソースのインライン化、配置変更（第２段階）：１ファイル未解決（試しにインライン化するとPCのスコアは１００になった）
- 画像、JavaScript、CSSの圧縮（第２段階）：全て改善
モバイルフレンドリーの重要性
以上で、スピード診断の改善は終わりとし様子をみます。これから益々重要になるのが「モバイルフレンドリーの改善」です。
Google は、モバイル検索の順位決定時に、その Web サイトが「モバイルフレンドリー」かどうかを重要な指標として利用するようになり、また
市場の70％以上をしめるスマートフォンからのユーザーを増やすことができれば（当サイトは８割がPC、２割がスマホです）、さらなる収益の向上に繋がります。
モバイルフレンドリーの重要性がここにあります。モバイルフレンドリー改善の詳細はこちらをご覧ください。
