PageSpeed Insightsで100点を取る方法

クローラビリティ

PageSpeed Insightsで100点を取ることは可能です。ただし100点を取るには何かを諦めないといけないでしょう。まずは結果をご覧ください。

PageSpeed Insights(モバイル)
PageSpeed Insights(PC)

100点を取るためのポイントを個別に解説します。

①CSS を縮小する

CSSからコメントをできる限りなくします。複数人で管理をしている場合、コメントがないと理解しづらくなる場合もあるので注意が必要です。また、「0px」と記述している箇所は「px」を削り「0」と記載できます。あと、「margin: 0 0 10px 0;」とある箇所は「margin: 0 0 10px;」とまとめることもできます。

②HTML を縮小する

HTML内のコメントをできる限りなくします。経験上全てなくさなくても大丈夫です。また、インデントもなくします。インデントは開始タグと終了タグの位置が視覚的に理解しやすくなりますが、複数人で運営しているとルールが遵守されないケースも出てきてインデントが崩れることがあります。なので、個人的にはインデントはなくても運用できるはずです。

③JavaScript を縮小する

JavaScriptからコメントをできる限りなくします。また改行もなくしましょう。JavaScriptの圧縮ツールを使用すれば簡単に縮小できます。

▼JS Minifier (JavaScriptの圧縮)
https://syncer.jp/js-minifier

④サーバーの応答時間を短縮する

このエラーの解消の可否はレンタルサーバーによります。実際、解消できないサーバーもありました。

Apacheのmod_pagespeedを使用する、各種プログラムをFastCGI化する、などすることで高速化できます。あと、 ECサイトなどデータベースを読み込んで表示している場合はキャッシュ化することも有効です。

⑤スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

解決方法としては、JavaScriptとCSSを非同期化します。JavaScriptはasync属性(またはdefer属性)を追加して非同期化します。CSSはJavaScriptで読み込むことで非同期化できます。当然JavaScriptが有効でないとCSSが読み込まれないので、別途対応が必要です。

コンテンツ量が少ない場合は以上で大丈夫でしょう。コンテンツ量が多い場合はWebページの作り方を工夫する必要があります。普通にコーディングをするとエラーになります。まずファーストビューの範囲部分のCSSとそれ以外のCSSに分割します。そしてファーストビュー用のCSSをHTML上にインラインで記述し、残りは外部CSSで読み込みます。しかし、このためにわざわざ作り直すのはどうかと思いますが。

⑥ブラウザのキャッシュを活用する

サーバーでブラウザのキャッシュを有効にします。一例としてApacheの場合.htaccessに以下のように設定すればExpiresヘッダが出力できます。キャッシュ期間はサンプルです。

ExpiresActive On
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"

上記は同一ドメイン内のファイルに対する設定で、外部ドメインのファイル(JavaScriptなど)は対象外です。そのためGoogle Analyticsの埋め込みタグを設置している場合はエラーとなります。Google Analyticsを使用する場合は100点が取れません。

⑦リンク先ページのリダイレクトを使用しない

どの環境(PC・スマホ・タブレット)でも同じURLを使用します。レスポンシブデザインはもちろん、アダプティブデザインでもURLが同じならOKです。PCとスマホでURLを分けていて、スマホの時はリダイレクトをしているケースは改修が必要になります。

⑧圧縮を有効にする

サーバーで圧縮を有効にします。当然サーバー負荷が増えるので一部レンタルサーバーでは設定できません。一例としてApacheのmod_deflateを使用する場合、以下を.htaccessに記述します。

SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

⑨画像を最適化する

画像内の不要な情報を削除します。オンラインの圧縮ツールがあるので利用すると良いでしょう。

▼JPEG 圧縮
http://compressjpeg.com/ja/

▼PNG 圧縮
http://compresspng.com/ja/

⑩表示可能コンテンツの優先順位を決定する

まずHTMLの構成をコンテンツ部分をソース上部に来るように配置します。そしてHTMLソースの下部にJavaScriptとCSSを記述すれば大丈夫です。⑤の対応の時に一緒に行うと良いでしょう。

以上がざっくりと100点を取る方法です。ただ、サイトによって作り方は千差万別なので対応方法もマチマチです。お悩みの方がいらっしゃいましたら是非ご相談ください。

(2016年10月20日修正)

西部俊宏
執筆者:
株式会社Webの間代表取締役。上場企業でのSEOの実績やWebサイト構築実績多数。SEO・Web制作の経験からクローラビリティ改善・最適化サービスを提供している。

売上アップに繋がる本気のユーザーをホームページに呼び込みませんか?

※当ブログはブログ村に参加しております。
にほんブログ村

売上アップに繋がる本気のユーザーをホームページに呼び込みませんか?
  • 医療関連サイト制作
  • サービスサイト制作
  • 独自ECサイト構築
  • コーポレートサイト・CI作成
  • レシピ投稿システム開発
  • 採用選考システム開発・おかえりな採用
  • 採用選考システム開発・オープンコネ採用
  • 採用選考システム開発・考えな採用
  • 採用選考システム開発・登頂採用
お客様に最適なWEB集客&コンテンツをご提案します