なに？PageSpeed Insightsって。評価が悪い。どうしたらいいの？

PageSpeed Insightsっていうらしいのですが、グーグル様はいろんなツールを無料で提供してくれます。
それは、ありがたい事なのですが、やることが多くて対応できないくらいです。

その前に、１月２７日のＳＥＯ結果をみると、閑古鳥も見放したような状態でしたが、現時点の前日（２月５日）の状態をみると、下記のようになりました。

前回と比較して、ユーザー数も、５倍になりました。

でも、ＰＶは変わってないですね。来訪者は増えたけど、他のページに流れてないことがわかります。まだ、興味をもってもらえるようなサイトになってないから仕方ないですね。

クロールの統計情報をみると、

なんだか、１日あたりのクロールされたページ数が一向に上がっていきません。

だれだよ。投稿記事が１００超えたころからクロール増えるって言ったのは！？なんて言っても時間の経過ごとに変わっていきますので仕方ない事ですね。

冷静になって分析しないとね。だんだんと。googlebotからも見放されている状況がわかりますね。どうしたらいいのだろうか？

ところで、ページのダウンロード時間ってなに？

Googleクローラーがサイトのページに巡回に来てダウンロードするのにかかった時間のようです。
ダウンロードの時間が急激に上がることは、CSS、JavaScript、Flash、PDF ファイル、画像などのデータが増えて時間がかかっているということになり、時間がかかればかかる程、googlebotからの評価も下がるってことのようです。時には、Googleクローラーも、サイトから離脱するようです。

これは、まずいんじゃない！？ってことで、調べると、サイトの表示スピードを調べる方法があるというじゃないですか？

PageSpeed Insights

さすがgoogle様ですね。

さっそく調べてもらうと、

モバイルの方が、「速度　Unavailable」「最適化　Medium　61 / 100」

パソコンの方が、「速度　Unavailable」「最適化　Low　53 / 100」

という結果でした。

ところで、「速度　Unavailable」ってなに？

次から次へと疑問がでて、もう大変です。結局、英語ページだとＯＫだとか、はっきりしたことはわかりませんでした。多くの書き込みでは、まだ信頼性がないので気にすんなって感じでした。

さて、これからが重要な事になるようですが、「最適化」ってところで、評価されていますよね。最適化ってなに？また、調べないとならないのね。

メンドクサイので推測ですが、修正する内容が表示されているので、PageSpeed Insightsの指摘する項目を修正すれば表示スピードが速くなって評価が上がるよってことが、最適化だと判断します。

じゃ、やってやりましょうじゃありませんか！？

まずはモバイルからということでご指摘をみると、

PageSpeed Insights　様からのご指摘モバイル編
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する。
このページには、レンダリングをブロックするスクリプトリソースが 3 個、CSS リソースが 23 個あります。これが原因で、ページのレンダリングに遅延が発生しています。
以下のリソースの読み込みが終わるまで、このページでスクロールせずに見えるコンテンツを何もレンダリングできませんでした。レンダリングをブロックするリソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください。
レンダリングをブロックする JavaScript を除去してください。

もう、だんだんと萎えてきます。

調べてみると、いろいろと回避プラグインがあります。

私は、さくらインターネットをつかっていますが、既にパフォーマンスのアップするプラグインが入っていました。

さくらレンタルサーバ版Wordpressの特徴

その中から、下記の３つのプラグインを有効にしました。

Autoptimize プラグイン
サーバからブラウザへ転送するデータのうち、HTML、CSS、JavaScriptを最適化します。
ファイルサイズの縮小や複数のファイルを統合しています。

Disable Google Fonts プラグイン
Google社が提供しているWeb Fontsを使用しない設定を適用します。
WordPressをSSL化した際に生じる不具合(警告の表示)の回避や、サーバの応答速度の向上が期待できます。

ImageMagick Engine プラグイン
サムネイル画像の作成を PHP GD ではなく ImageMagickで行います。
実用への影響がない程度に画像のファイルサイズを減らします。

それぞれ、有効にしただけでは、ダメな場合がありますので設定などは、ネット検索をすれば沢山出てきます。

さて、PageSpeed Insights　様の結果は、どれだけ向上したのでしょうか！？

変化なし

嘘だろ！！！なんで？、ただ、修正箇所はかなり減ったようです。でも、数値は変わらない。

そして、サーバーキャッシュの最適化を試しに実行。

.htaccessに下記のタグを追加するだけの優しい作業。

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

そして、PageSpeed Insights　様の結果は？

モバイルの方が、「速度　Unavailable」「最適化　Medium　62 / 100」

パソコンの方が、「速度　Unavailable」「最適化　Medium　63 / 100」

という事で、モバイルが１ポイントアップ。パソコンは、１０ポイントアップして、低レベルから中に格上げされました。

そして、更なるダメ押しで、gzip圧縮化にするために、さらに、.htaccessに下記のタグを追加するだけの優しい作業。

AddType image/x-icon .ico
 
<IfModule mod_deflate.c>
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
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>
 
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>
 
FileETag none
 
<FilesMatch "^(wp-config\.php|wp-mail\.php|install\.php|\.ht)">
order allow,deny
deny from all
</FilesMatch>

下記の方のサイトを参考にしました。