PageSpeed Insightsの結果を修正し表示速度を改善した5つの方法

pagespeedinsights-modify

Google「PageSpeed Insights」の結果を修正し、WordPressで作成したWEBサイトの表示速度を改善した5つの方法について紹介

「PageSpeed Insights」の結果

まず何の対処もしない状態では、PageSpeed Insightsの結果は悪く「提案の概要」として以下のような修正が必要であることがわかりました。

  • ブラウザのキャッシュを活用する
  • 圧縮を有効にする
  • スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
  • 画像を最適化する
  • サーバーの応答時間を短縮する

スコアの方も60~70点ぐらいでした。
WEBサイトの表示速度はSEOにも関連する重要なところなので一つずつチェックしながら、かつ時間をかけず出来るだけ簡単に改善する方法で対応しました。
下記、5つの方法で90点ぐらいにスコアアップ出来ました。



「ブラウザのキャッシュを活用する」の対応方法

「.htaccess」ファイルに以下を追記することで改善します。

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

「圧縮を有効にする」の対応方法

「.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

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

プラグイン「Autoptimize」(最新:ver1.9.4)を導入し、設定することで改善します。

Autoptimize Settings

「advanced settings」で「JavaScript Options」を全てチェックしておきます。
私の場合、デザイン(見た目)の関係でCSSオプションはチェックしていません。

「画像を最適化する」の対応方法

プラグイン「EWWW Image Optimizer」(最新:ver2.5.1)を導入し、設定することで改善します。

Bulk Optimize

Start optimizing」と「Scan and optimize」の2つを押下して最適化します。

「サーバーの応答時間を短縮する」の対応方法

「.htaccess」ファイルに以下を追記することで改善します。

ModPagespeed On

※WEBサーバが対応していること。
エックスサーバーならサーバーパネルにログインし、ホームページカテゴリ内の「mod_pagespeed設定」をONにすることで実現出来ます。

こちらの応答時間については、物理的なサーバのスペックによるところも関係してきます。実際、ヘテムルサーバーよりエックスサーバーの方が表示速度は早かったです。
※ヘテムルの方はGUI的にはわかりやすく、使いやすい印象です。



参考価格

No.品名数量単価ネット注文価格
1ドメイン設定費15,0005,000円
2レンタルサーバ設定費15,0005,000円
3WordPressインストール費120,00020,000円
4WP表示速度改善設定費110,00010,000円
小計40,000円

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

ピックアップ記事

  1. 020 QNAP-NAS_usbcamara

    2018-6-8

    QNAP-NASのUSB-WEBカメラ接続使用方法

    QNAP-NASでUSB接続のWEBカメラを接続し設定使用(モニタ/録画)する方法について紹介(QN…
  2. centos7-dd-backup

    2018-4-30

    CentOS7-DDバックアップ方法

    CentOS7.4にてHDDデータを丸ごと外付けHDDにバックアップする方法について紹介(DDバック…
  3. office201709

    2017-9-7

    Office製品比較とシーン別価格重視での購入方法:2017年9月度

    SOHO/法人向けのマイクロソフトオフィス製品比較とシーン別/価格重視での購入方法について紹介(20…
ページ上部へ戻る