SEOについてできるだけ主観なしで考察するブログ

PageSpeed Insights(ページスピードインサイト)で合格点100点を取る方法〜2018年Speed Update対応版

»

PageSpeed Insightsに関する最近記事はこちら

2018年1月発表の"Speed Update" 導入により2018年7月からモバイル検索においてもページの読み込み速度がランキング要素となりました(※1)。"Speed Update" 導入前はデスクトップ検索のみページの読み込み速度はランキング要素でした(※2)(モバイル検索のランキングはデスクトップ検索のコンテンツが使用されていたので、実質ランキング要因でありましたが(※3))。

ページの読み込み速度に対する考え方は以下2点では異なります。

  • デスクトップページに対する読み込み速度のスコア
  • モバイルページに対する読み込み速度のスコア

Googleが提供する読み込み速度検証ツールPageSpeed Insights(ページスピードインサイト)を使うとその違いがよくわかります。スコア付のポイントは一緒でも測定基準が異なるので、デスクトップの速度検証において減点とならないものがモバイルでは大きく減点されるものがあります。PageSpeed Insightsのスコアが良ければ上位表示できるとは言い切れませんが、何の判断基準もないよりも点数というのはわかりやすいものです。ここではSpeed Update後でも対応可能なPageSpeed Insightsスコア最適化について解説します。

▼PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

PageSpeed Insightsスコア100点を取る方法

PageSpeed Insightsのスコアで100点を取ることは可能です。ただし100点を取るには「Google Analyticsを使わない」といった対応が必要になります。それは現実的ではないと思うので、ここでは最低でも合格点は取れるポイントを解説します。まずは結果をご覧ください。

PageSpeed Insights100点(PC)

PageSpeed Insights100点(SP)

PageSpeed Insightsでスコア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
⑨画像を最適化する
画像内の不要な情報を削除します。オンラインの圧縮ツールがあるので利用すると良いでしょう。
▼オンラインイメージ最適化ツール
http://optimizilla.com/ja/

なお、モバイルでは画像のサイズはスコア減になりませんが、パソコンでは画像サイズが表示等倍でないとスコアが落ちます。モバイルはデバイスにより画像の表示サイズが変わること、ディスプレイの解像度が高いので表示サイズの2倍程度は欲しいことからできるだけ高解像度にしたいところです。しかし、それではパソコンでのPageSpeed Insightsスコアが減少します。この場合HTMLのsrcset属性を使用することで解決できます。srcset属性とはHTML5から取り入れられた新属性で、ブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて異なる画像を読み込むことができます。
ただし、1ページに対して複数の画像を用意することはサイト運用上手間が増えるので現実的ではないでしょうね。なので、トップページとか特に対策要件が高いページに絞って施策を行うのが現実的ではないでしょうか。
⑩表示可能コンテンツの優先順位を決定する
まずHTMLの構成をコンテンツ部分をソース上部に来るように配置します。そしてHTMLソースの下部にJavaScriptとCSSを記述すれば大丈夫です。⑤の対応の時に一緒に行うと良いでしょう。

2018年PageSpeed Insights、得点増減が大きいポイント

2018年現在、スコア基準変更によりPageSpeed Insightsの合格点獲得は以前よりも厳しくなっています。以前は減点されなかった状況でも今ではスコア減少が起きています。スコア獲得において難しいポイントは3つあります。

  1. 画像の読み込み
  2. サーバー応答速度
  3. 外部サービスの読み込み

まず画像を画像として使用する場合、デスクトップでは表示等倍が望ましいです。横幅500pxで画像を表示する場合は画像自体も500pxで用意します。ただし、表示等倍の画像ではモバイルだと荒く見えることもあります。この場合はモバイル時にはピクセル数が高い画像を表示するといった対処が必要になります。

画像を最適化する

サーバーの応答速度のスコア付は以前よりも非常に厳しくなっています。そして状況によっては対処が難しい部分でもあります。そもそも共用レンタルサーバーでは限界があります。年間費用が1万円くらいのレンタルサーバーではスコア減となる可能性が高いです。

最適化について提案

外部サービスの読み込みの改善は使わないという選択しかできません。SNSならまだしも、Google Analyticsの計測タグは使わざるを得ないでしょう。なので、「気にしない、諦める」ことが現実的な対処と言えます。ただ、PageSpeed Insightsスコアについてはか外部サービス抜きでスコア検証するということができます。パラメータとして "?filter_third_party_resources=true" を付けると外部サービスの読み込みがスコア対象外となります(※4)。

PageSpeed Insights(外部フィルターなしで検証)

▼PageSpeed Insights(外部フィルターなしで検証)
https://developers.google.com/speed/pagespeed/insights/?filter_third_party_resources=true

デスクトップ検索とモバイル検索におけるページ読み込み速度対応への違い

今まではページの読み込み速度はデスクトップ検索へ対応しておけば大丈夫でした。デスクトップ検索で大きくスコア減少となるのは画像読み込みです。なので技術的な取り込みで解決できました。対してモバイル検索では画像よりもサーバー応答速度を重視しています。結果的にサーバー選定がわずかでも上位表示に影響します。

2018年現在、Googleはモバイルファーストインデックス導入へ移行中です。モバイルページが存在する場合、ランキング対象がモバイルページに変わります。モバイル検索のためにわざわざサーバー移管をする必要はありませんが、新規サイトを立ち上げる場合はサーバー応答速度は意識しておくべきでしょう。

※当記事はWebの間のコラムを再編集したものです。元記事はこちら。
https://www.web-ma.co.jp/column/seo/1286.html
https://www.web-ma.co.jp/column/crawlability/98.html

Comment(0)

コメント

コメントを投稿する