PageSpeed Insightsを使用して表示速度を高める方法

サイトの表示速度が早いとか遅いとか気にしたことって有りますか？
サイトの表示速度が遅くなると訪問者の離脱率も高くなりサイトのランキングにも影響してきます、折角書いた記事も表示速度が遅いと読んでもらえる確率が少なくなってしまいます、それでは困りますので表示速度は早くしなければいけません、ではどうしたら表示速度を早くすることができるのか、ここでは初心者でも表示速度を高める事ができる方法を解説していきます。

ページの表示速度を高める必要性

ページの表示速度が遅いとどのような影響が出てくるかといいますと、サイトに訪れた訪問者がページの表示速度が遅くてページを閉じて離脱してしまうことが増えます、するとページの表示回数が低くなりアクセス数も減ります、そうなるとサイトの検索順位も下がってきます、一般的に表示に３秒以上かかるサイトは４割以上のユーザーが離脱してしまうと言われています。

表示速度が遅いと悪い影響ばかりで良いことは何もないのでページの表示速度は2秒以内で表示できるようにしたいものです。

ここではウェブページのコンテンツを解析し、ページの読み込み時間を短くするための方法を提案してくれるPageSpeed Insightsというツールを使って、サイトパフォーマンスを改善していきます。

PHPのバージョンを最新にする

先ずはPHPのバージョンを最新にしておいて下さい、PHPのバージョンを最新にすると処理速度が上がりWordPressの表示速度改善が見込める場合があります。

さくらサーバーを例に上げてPHPのバージョンを変更する方法です。

さくらインターネットサーバーコントロールパネルにログインして【PHPのバージョン選択】をクリックします。

バージョン選択の画面に変わりますので▼プルダウンメニューで最新のバージョンを選択して変更ボタンをクリックすれば完了です。

PageSpeed Insightsを使ってサイトを分析する

PageSpeed Insightsにアクセスして、分析したいページのURLを入力して分析をクリックします。

TinyMCE Advanced アイコンボタンの使い方⇒こちらのページを分析してみます。

分析が100%になれば完了です。

分析が完了するとPCとモバイル両方の分析結果を100点満点で測定します。

分析結果はパソコン、モバイルとも36点と散々な結果になってしまいました。

分析結果の下に最適化する方法が表示されていますので【修正方法を表示】をクリックして分析結果の修正をしていきます。

画像を最適化する

サイトの読み込み時間が長い原因に画像を多用しているということが挙げられます、当サイトでは画像を最適化する【EWWW Image Optimizer】というプラグインを入れていますが、【PageSpeed Insights】では画像を最適化する用に指摘されました。

画像が多すぎるのか？とも思いつつ「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」からダウンロードして画像を入れ替えます。

クリックするとZIP形式の画像ファイルがダウンロードされますのでファイルを解凍して開きます。

Windowsの場合ダウンロードしたZIP形式の画像ファイルを開いて【全て展開】をクリックします。

ダイアログボックスが開きますので【展開】をクリックします。

解答ができたら【image】を選択し開くをクリックしてファイルを開きます。

開いたファイルの画像は記事に入っている画像と同じ名前ですので、入れ替える画像の名前を変えておきます。

名前を変えなくとも置き換えは出来ますが適正化の画像がどちらだったか迷わないためです。

Windows の場合画像の名前をクリックすると画像の名前を変えられます。

WordPress管理画面で記事の画像と最適化した画像を入れ替えていきます。

入れ替える記事の画像をクリックすると画像設定のアイコンが表示されますので鉛筆マークのアイコン【編集】をクリックします。

画像詳細の画面に変わりますので置き換えをクリックします。

【画像を置き換え】の画面に変わりますので、ダウンロードして名前を変えて保存してあるファイルの画像をドラッグ＆ドロップして置き換えます。

画像の置き換えが出来たら最期に【置き換】をクリックします。

適正化した画像を全て置き換え、必要なくなった画像は削除して作業の完了です。

画像の適正化が終わったらどのぐらい表示速度が上がったか確認してみますね。

この記事を書いている途中で【PageSpeed Insights 】の表示の仕方が変わり、【速度】と【最適化】の項になりました、【速度】の方は取得できないようなので【最適化】の点数で比べるとモバイルは36⇒57でしたので多少効果はあったようです。

パソコンに切り替えて点数を見てみると36⇒84とこちらはかなり効果があったようです。

ページの表示速度に画像はかなり負担をかけているようです。（でも画像をなしには出来ないです。）

リビジョンの設定

WordPressにはリビジョンという機能がありますこのリビジョンというのは、今まで過去に更新した投稿内容を保存してくれる機能です、使い道によっては大変便利な機能ですがこのリビジョンが増えてくるとデータが溜まっていきサイトの表示速度も遅くなります。

このデータベースに溜まったリビジョンを削除し、自動保存機能をオフにしてリビジョン機能を回数制限します。

リビジョン設定できるプラグインもありますが、必要以上のプラグインを入れたくないためここは手動で行っていきます。

作業をする前はかならずバックアップを取りましょう。

関連する記事⇒BackWPup定期的にバックアップを取るプラグイン

データベースに溜まったリビジョンの削除

リビジョンの削除をするにはレンタルサーバーの管理画面から【phpMyAdmin】にログインします、私の場合【さくらのレンタルサーバー】ですのでそちらの管理画面でのログインの仕方です。

管理画面【さくらインターネットサーバーコントロールパネル】にログイン後【データベースの選択】をクリックしてデータベース設定画面の【管理ツールログイン】をクリックします。

phpMyAdminのログイン画面に変わります、ユーザー名とパスワードを入力して【実行する】をクリックします。

データベースをいじるときは何か不具合が発生したときのためにバックアップは必ずとっておきましょう。

関連する記事⇒BackWPup定期的にバックアップを取るプラグイン

ログインしたらリビジョンを削除したいデータベースを選択します。

データベースが開いたらwp_postsをクリックします。

wp_postsの画面に変わったら上にある【SQL】のアイコンボタンをクリックします。

既存の【SELECT * FROM `wp-posts` WHERE 1】のSQL文を削除します。

既存のSQL文を削除したら、

DELETE FROM wp_posts WHERE post_status = 'inherit' AND post_type = 'revision';

上記のSQL文を入力しますwp_postsには右上にある文字列を入力します。

最期に右下の実行するをクリックしてリビジョンの削除は完了です

〇〇〇〇_dbをクリックしてデータベースのテーブル一覧に戻ります。

データベーステーブル一覧に戻ったら、テーブルの最適化をしておきます。

テーブルのwp_postsにチェックを入れて【チェックしたものを】の▼プルダウンメニューから【テーブルを最適化する】を選択します。

【SQLは正常に実行されました】になっていれば最適化は完了です。

リビジョンが大量に増えすぎないようにリビジョンの数を制限

ここではさくらのレンタルサーバーでの例で解説していきます。

さくらインターネットサーバーコントロールパネルにログインして【ファイルマネージャー】をクリックします。

ファイルマネージャーの【wp-config.php】を右クリックして編集を選択します。

最下行にあるrequire_once(ABSPATH . ‘wp-settings.php’);の上にdefine('WP_POST_REVISIONS',2);と記述します、リビジョンの回数を指定するには最期にある数字を変えればOKです。

リビジョンの設定が済んだところで表示速度が上がったか確認してみます。

モバイルでは57⇒62でそれほどの変化はないようです。

次にパソコンの方を見てみると84⇒86とこちらもそれほどの変化は見られないようです、80点の合格点には達しているのでまあ良しとしておきましょう。

リビジョンが増え続けるとデータベースの容量が増えて表示速度に影響が出てきますので、リビジョンの削除とリビジョンの回数制限は行ったほうがいいですよ。

.htaccessにコードをコピぺ

ブラウザキャッシュの設定やリソースの圧縮の設定コードを【.htaccess】に記述するとかなりの高速化ができるという記事を他サイトで見つけたのでコピペさせてもらいました。

参考サイト⇒Simplicity

【スマホは横にスクロール】

# ETags(Configure entity tags) を無視する設定
<ifModule mod_headers.c>
    Header unset ETag
</ifModule>
FileETag None

# Enable Keep-Alive を設定
<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>
# MIME Type 追加
<IfModule mime_module>
    AddType text/cache-manifest .appcache
    AddType image/x-icon .ico
    AddType image/svg+xml .svg
    AddType application/x-font-ttf .ttf
    AddType application/x-font-woff .woff
    AddType application/x-font-woff2 .woff2
    AddType application/x-font-opentype .otf
    AddType application/vnd.ms-fontobject .eot
</IfModule>
# プロクシキャッシュの設定（画像とフォントをキャッシュ）
<IfModule mod_headers.c>
    <FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
    # プロキシサーバーが間違ったコンテンツを配布しないようにする
    Header append Vary Accept-Encoding env=!dont-vary
</IfModule>
# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
    ExpiresActive On

    # キャッシュ初期化（1秒に設定）
    ExpiresDefault "access plus 1 seconds"

    # MIME Type ごとの設定
    ExpiresByType text/css "access plus 1 weeks"
    ExpiresByType text/js "access plus 1 weeks"
    ExpiresByType text/javascript "access plus 2 weeks"
    ExpiresByType image/gif "access plus 1 weeks"
    ExpiresByType image/jpeg "access plus 1 weeks"
    ExpiresByType image/png "access plus 1 weeks"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType application/pdf "access plus 1 weeks"
    ExpiresByType application/javascript "access plus 1 weeks"
    ExpiresByType application/x-javascript "access plus 1 weeks"
    ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/x-font-woff2 "access plus 1 year"
    ExpiresByType application/x-font-opentype "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>
# Gzip圧縮の設定
<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE

    # 古いブラウザでは無効
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

    # 画像など圧縮済みのコンテンツは再圧縮しない
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary

    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/js
    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-opentype
</IfModule>

【.htaccess】に記述する方法はFTPでサーバーにアクセスするか、サーバーコントロールパネルにログインしてファイルマネージャーを開きます。

ここではさくらインターネットサーバーコントロールパネルのファイルマネジャーで.htaccessに記述する方法を解説します。

さくらインターネットサーバーコントロールパネルのファイルマネジャーを選択します。

ファイルマネージャーが開いたら【.htaccess】を右クリックして編集を選択します。

編集画面の最下層に上記コードをコピペして最期に右下の【保存】をクリックして閉じます。

【.htaccess】への記述はこれで完了です。

【PageSpeed Insights 】で表示速度の確認をした所？結果は殆ど変わりなしでした、サーバーソフトはApacheじゃないと動作しないとのことですが、さくらサーバーのサーバーソフトもApacheなので問題ないのですが、 😥 まっ効果がありと思うのでこのまま貼り付けておきます。

モバイルの点数が低いのが気になります。

プラグインで表示速度を上げる

さくらサーバーでWordpressをクイックインストールからインストールするとデフォルトで幾つかのプラグインがインストール済みになっていますが、その中で表示速度を高めてくれるプラグインが２種類ありますので有効化しています。

Autoptimize プラグイン
サーバからブラウザへ転送するデータのうち、HTML、CSS、JavaScriptを最適化します。
ファイルサイズの縮小や複数のファイルを統合しています。
Remove query strings from resources プラグイン
サーバからCSSやJavaScriptファイルを取得する際、付与されていたクエリストリングを削除します。
サーバの応答速度の向上が期待できます。

プラグインを使わない方法で点数を上げたかったのですが簡単な方法で行いたいので、上記プラグインの他にキャシュ系プラグインを入れて表示速度アップを図ります。

キャッシュ系プラグインとはキャッシュを使用しててページの表示速度を高めるプラグインです、キャッシュとは一時的に保持されるファイルの事で、このファイルを利用してページの表示速度を高速化しています、【wp super cache】プラグインはこのページキャッシュの生成と表示をしてくれるプラグインです。

但しこのプラグインを入れるとトラブルが発生したり、使用しているレンタルサーバーによってはエラーが表示されたりするようなので、プラグインの使用は自己責任でお願いします。

【wp super cache】の設定画面で【簡易】⇒【キャッシング】を選択して【キャッシング利用 (推奨)】にチェックを入れて、ステータスを更新ボタンをクリックします。

細かい設定は追々やっていくとします、【PageSpeed Insights 】で表示速度の確認をしてみると、全く変わっていなかったため間を置いてやり直した所表示速度の改善が見られました。（キャッシュの生成ができた？）

モバイルでの点数が62⇒83とかなりの改善が見られます。

パソコンでの点数も86⇒94とこのプラグインを入れたことで表示速度の改善が見られました、今のところ不具合らしいところは見られませんので、これから様子を見ながら細かい設定をしていきたいと思います。

最期に

【PageSpeed Insights 】での合格点は取れたと思いますがまだ改善の余地があるようです、これからはプラグインを使わずに表示速度の改善をしていければと思います。

今回画像の容量を減らすことが一番効果があったような気がします。

当サイトでは画像を圧縮するプラグイン【EWWW Image Optimizer】を入れていますが画像の量が多いとこのプラグインだけでは【PageSpeed Insights 】に画像の最適化を指摘されてしまいます、（有料オプションでは最大80%の圧縮ができるようです。）

容量の大きな画像はWordpressにアップロードする前にオンラインサービスの画像圧縮ツールを使って画像を圧縮してからアップロードします、アップロードしてからの画像置き換えは結構時間がかかりました。

よく使われているオンラインで画像を圧縮できるサービスを幾つか上げておきますね。

JPEGmini
JPG画像を圧縮するツール
TinyPNG
JPG、PNG画像を圧縮するツール
Compressor.io
JPG、PNG、GIF、SVGに対応して圧縮するツール

【PageSpeed Insights 】を活用してページの表示速度を上げれば訪問者の離脱率も減らすことが出来ますので、表示速度の改善はぜひ行いましょうね。

PageSpeed Insightsを使用して表示速度を高める方法

ページの表示速度を高める必要性

PHPのバージョンを最新にする

PageSpeed Insightsを使ってサイトを分析する

画像を最適化する

リビジョンの設定

データベースに溜まったリビジョンの削除

リビジョンが大量に増えすぎないようにリビジョンの数を制限

.htaccessにコードをコピぺ

プラグインで表示速度を上げる

最期に

コメントを残すコメントをキャンセル

サイト内検索

カテゴリー

ページの表示速度を高める必要性

PHPのバージョンを最新にする

PageSpeed Insightsを使ってサイトを分析する

画像を最適化する

リビジョンの設定

データベースに溜まったリビジョンの削除

リビジョンが大量に増えすぎないようにリビジョンの数を制限

.htaccessにコードをコピぺ

プラグインで表示速度を上げる

最期に

コメントを残す コメントをキャンセル

サイト内検索

人気の記事

カテゴリー

コメントを残すコメントをキャンセル