最短ホームページテンプレート、ページスピードインサイト

MENU

ページスピードインサイトでページの読み込みスピードを確認する

ページスピードインサイトについて

ここまで作業された方は、もうひとつの重要な内部SEO対策となる、サイトの
読み込みスピードの改善について作業されることをおすすめします。

 

グーグルのツールになりますので、あなたのサイトもまずは試して下さい。

 

PCトップページのURLを記述して、「分析」をクリックするだけです。
分析結果内で、PC、スマホの両方のサイトを確認できるようになっています。

 

ページの読み込みスピードチェック・・・・・ページスピードインサイト

ページスピードインサイト

さて何点GETできましたか?この点数はアクセスアップに非常に重要で、
内部SEOに密接な関係があります。

 

サイトの読み込みスピードの重要性

ECサイトやアフィリエイトサイトでは、表示速度が0.1秒遅くなると売り上げが
1%減少すると言われます。またGoogleのデータによると、ページの読み込みが
0.5秒遅くなると、検索数が20%減少すると報告しています。

 

よく検索結果のリンクをクリックしてもなかなか開かないサイトがありますが、訪問者が
イライラしてページを閉じてしまうと言う直接的なマイナス要因からのデータです。

 

これ以外もページの読み込み速度は、クローラーがページを巡回することにも影響を
与えています。簡単にかみくだいてご説明しますと、読み込みが遅い場合は、クローラーに
サイトの評価をしてもらうのに不利になります。

 

これは読み込み速度の遅いサイトはインデックスされにくいという事です。

 

SEO対策とは「小さな改善」の積み重ねです。「このくらいは、、」と思えるような
小さな作業の積み重ねが、やがて大きな差となります。

 

今回のご紹介したSEOは、スマホの検索エンジン最適化です。これはモバイルフレンドリーテストという「ユーザーフレンドリー」「検索エンジンフレンドリー」の最適化です。

 

ページの読み込みスピードの改善も、この2っの「フレンドリー」を最適化させる
重要な内部SEO対策となります。

読み込みスピードの改善方法

 

ページスピードインサイトでは、その分析結果で次の改善ランクが表示されます。

ページスピードインサイト ページスピードインサイト

これらの中で「改善の必要性が高く」、改善による「効果の高い警告」について
3っの対策を取り上げて解説します。

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

ブラウザのキャッシュとは

 

最適化されていない場合、下記画像のような表示がされると思います。

ページスピードインサイト

 

まず、インターネット上の画面を見ると言う事は、サーバーから、そのサイトのファイルを
ダウンロードして閲覧しているという事になります。

 

そしてブラウザのキャッシュとは、そのダウンロードしたサイトファイルを、訪問者さんのローカル(自分のパソコン)に一時的に保存しておくという機能です。

 

この機能を利用すると、2回目に同じページを開く場合は、キャッシュを利用して、
自分のパソコン内に保存したファイルを見ている事になります。

 

このように、キャッシュされたファイル(自分のパソコン内)を見れるようにする事で、
サイトファイルのダウンロード時間が削減され、表示スピードが速くなると言う事です。

 

キャッシュ機能イコール「一時ファイル」とお考え下さい。

 

このキャッシュの設定は、.htaccessファイルに記述します。なおルールとして、
キャッシュは1週間以上残すようにします。"access 1 week"と命令しているのが、
キャッシュ期間の設定になります。

 

グーグルがページスピードインサイトで、キャッシュの保存期間を、最低1週間以上
設定する事を推奨しているためです。

 

また.htaccessの記述条件としてサーバーが「mod_expires」に対応している必要が
ありますので、ご自身のシステムをご確認ください。

 

確認済みサーバー

  • さくらのレンタルサーバー
  • エックスサーバー
  • ロリポップ

 

コピペでご利用できます。現在のリダイレクトの記述の続きで貼り付けて下さい。

# ブラウザのキャッシュを活用
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 week"
ExpiresByType image/jpeg "access 1 week"
ExpiresByType image/gif "access 1 week"
ExpiresByType image/png "access 1 week"
ExpiresByType text/css "access 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType image/x-icon "access 1 week"
</IfModule>

 

圧縮を有効にする

圧縮を有効とは

 

改善の必要がある場合は、下記画像のように表示されていると思います。

ページスピードインサイト

 

別の場面で例えると、メールの送信などで、重い画像ファイルをまとめて送信する場合、
zipファイルなどに圧縮して、容量による負担を少なくするという方法があります。

 

これと同じ原理で、「圧縮を有効とは」サーバーからの出力されるサイトの
「HTML、CSS、JavaScriptファイル」を、閲覧者さんに送る前に圧縮してしまう事です。

 

圧縮されたデータを閲覧者さんが受け取り、ブラウザ上で展開してから、サイトを表示
させるため、ページの読み込み時間が早くなると言うわけです。

 

  • deflateは、圧縮をするためのアルゴリズム
  • gzipは圧縮をする為のプログラム

 

最近のブラウザは、gzipdeflateによって圧縮されたデータを展開する機能
持っているとお考え下さい。

 

この機能も.htaccessに設定を記述する事で動作させる事ができます。
コピペでご利用できます。現在のリダイレクトの記述の続きで貼り付けて下さい。

# 圧縮を有効
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/widgets.js

 

.htaccessのまとめ

リダイレクトの設定を含めた.htaccessの全記述

 

上記までの解説の「ブラウザのキャッシュを活用」「圧縮を有効」は、ともに
.htaccessへの記述となります。スマホ最適化のためのリダイレクトの方法も
.htaccessファイルへの設定ですので、以上の3っをまとめてみました。

 

ページスピードインサイトで改善の必要があった場合に備えて、3っの設定を
すべて記述したファイルをご用意しました。宜しければお試しください。

 

この場合は、すでにアップロードしている.htaccessは削除して頂くようお願いします。

 

下記をすべて記述した.htaccessファイル・・・.htaccessファイルのダウンロード−2

# スマホ最適化リダイレクト
Header set Vary User-Agent
RewriteEngine on
RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^(.*)$ sp/$1 [R]
RewriteBase /
RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^sp/(.*)$ $1 [R]
RewriteBase /
# ブラウザのキャッシュを活用
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 week"
ExpiresByType image/jpeg "access 1 week"

ExpiresByType image/gif "access 1 week"
ExpiresByType image/png "access 1 week"
ExpiresByType text/css "access 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType image/x-icon "access 1 week"
</IfModule>
# 圧縮を有効
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/widgets.js

 

画像を最適化する

画像を最適化とは

 

画像のサイズを最適化した方が良い場合、下記画像のように表示されていると思います。

ページスピードインサイト

 

上記のようにHTMLファイルの圧縮で表示速度が速くなる原理と同じで、画像データを圧縮し最適化する事で、ページの読み込みスピードを改善する事ができます。

 

「画像を最適化する」で「修正方法を表示」をクリックすると下記画像のような
画像の修正方法が指示されます。

ページスピードインサイト

ロスレス圧縮という言葉が目に付きます。

 

ロスレス圧縮とは

 

可逆圧縮(かぎゃくあっしゅく)の事を言います。圧縮前のデータと圧縮後のデータが同じになります。要するに画像の劣化が無い圧縮方法であるという事です。

 

グーグル推奨のロスレス画像圧縮ソフト

 

ping画像のロスレス圧縮・・・・・OptiPNG

「optipng-0.7.5-win32.zip」をダウンロードして下さい。

optipng

 

jpeg画像のロスレス圧縮・・・・・jpegoptim

jpegoptim

それぞれダウンロードできましたら、デスクトップ上にアイコンを置いて下さい。

 

両ツール共にそれぞれ「optipng.exe」「jpegoptim.exe」の上に PNG、Jpeg画像を
ドラッグ&ドロップで、圧縮します。

 

ページスピードインサイト

私の場合これらのツールをデスクトップ上に置いて、すぐに作業できるようにしています。この操作は上書き保存となりますので圧縮前の画像は残りませんのでご注意ください。

 

「Jpegファイルはロスレス圧縮という概念はないはずっ」ていうのが私の認識です??グーグルの推奨する画像最適化ツールのサイトで説明されているので、そのまま解説しました。とりあえず推奨されている通り、jpegoptimoptipngをまず利用して、ロスレスの指示がない画像の最適化では、次ににご紹介している「その他の画像圧縮ソフト」
オンラインソフトをご利用ください。

 

PageSpeed Insights ・・・・・[画像を最適化する]

 

その他の画像圧縮ソフト

 

オンラインサービス

 

JPEG画像を圧縮する・・・・・JPEGmini

画像は1枚ずつしか操作できません。ダウンロード版は複数を一度に圧縮できますが有料になりますので、少々手間がかかりますが、オンラインで作業して下さい。

JPEGmini

下の画像で113KBから109KBに圧縮されている事がわかります。

ダウンロードは、少々解りずらい場所にあります。ブラウザ左下のDown Load Full Resからダウンロードできますので、こちらをクリックして下さい。

 

PNG 画像を圧縮する・・・・・TinyPNG

対応画像サイズの最大は2MB、画像数は一回の操作で20個まで対応。

TinyPNG

ダウンロードは「download」テキストリンクをクリックして下さい。

 

以上2っのグーグル推奨のダウンロードツールであるロスレス圧縮と、オンライン上
お勧めの2っのツールを、状況と改善の指示に応じて、組み合わせてご利用ください。

  • ロスレス圧縮・・・・・・・・・グーグル推奨ツール
  • ロスレスの指示が無い画像・・・オンラインツール

 

最後に

モバイルフレンドリーテストでは、外部ファイルを読み込んでいる場合などで、
避けられない「改善の指示」が表示される事もあります。

 

またCSSスクリプト関係に改善の指示もありますが、現時点では触らないように
して下さい。これらは無視しても点数に大きなマイナスが出る事はありませんし、
100点を取る必要もありません。グーグルの見解では80点以上あればOKで合格です。

 

 

最短ホームページテンプレートでSEOに少しずつ慣れて頂いて、

あなたのWEBサイトの目標を達成されることを願っています。

以上ですべてのスマホ最適化の解説を終わります。お疲れ様でした。