ページスピードの高速化のためにやった簡単な3つの改善方法

loading WordPress

ページスピードが気になり出して止まらない!

 

どうもどうも、細かい作業は苦手だからバーン!と効果のある対策だけをやっておきたいモストラです。
結局は一回の対策だけで終わらないだろうと思ってます。テイキテンケンダイジ!

 

サイトの掲載結果を分析してくれるPageSpeed Insightsが有名ですよね。

PageSpeed Insightのサイト

そして新しくGoogleが出してきたモバイルに特化したページスピードを分析してくれるサイトTest My Siteが6月29日からサービスをスタートさせています。

 

test my siteのトップ画像

 

ブログの環境を整えよう

訪れてくれた人にとって、ページの表示速度が遅いというのはストレス以外の何物でもない。自分で使っていてもわかるけど、表示速度が遅いというだけで、その先にある情報の価値が薄れる感覚になる。つまり、どれだけ有益な情報を提供していたとしても表示スピードが遅いというだけで、離脱率だけではなく読む前から興味が薄れてしまっていくことを意味する。

実際に表示速度が遅くて表示される前に戻って別のところを探すことは多い。端末のスペックの問題も確かにあるけど、他のサイトを表示するのと比較しても明らかに遅いサイトは存在するから、そういうとこはもったいないなといつも思ってます。

 

自分のブログがそういうことにならないように

ちゃんと対策を考えていかないとと思ってたどり着いたのが最初にあげた二つのサイト。PageSpeed Insightsは有名なので自分のサイトを持っている人なら一度はやったことがあるんじゃないでしょうか。

私も何度か試しているので、改善前と後を比較しながら紹介していきたいと思います。

 

 

サイトのアドレスを入力

PageSpeed Insightsを使用するボタンをクリックしたらこの画面になります。自分のサイトのアドレスを入力して分析ボタンを押すだけで結果が出るのでかなり分かりやすい。だから自分のサイトの分析結果を出していこうと思います。

 

どや!

 

モバイルでの表示結果

モバイルはボロボロです。

モバイルファーストと言われている今の時代にはUXが大事だってのにこの有様。
すぐに何とかしなくては!!

 

パソコンでの表示結果

パソコンもまずい…
モバイル全盛期と言ってもここで紹介しているのはパソコン関連が多いし多くなっていくだろうから、この状況はまずい。この現状をなんとかします!

 

ごちゃごちゃいじくった結果がこちら。

 

モバイルの表示スピード

 

56 → 74なので結構改善されました。goodまで持っていきたかったのですが、あれこれ対策するのは大変なので簡単な方法でこれだけ改善したということを伝えたい。さらに改善したいというのであれば、画面下に出てくる

 

パソコンの表示スピード

 

68 → 89 この変化は大きいと思います。
この数値は固定されたものではないので、その時々で変動します。また、大型アップデートのような時に変動することも考えられるので、時々チェックするのがいいかもしれませんね。

 

続いてモバイルに特化したTest My Siteではどうなのかというと

 

対策前は

対策前の結果 4秒で表示される

こちらはまだ浸透していない可能性があるので、少し説明。

世界標準の回線である3Gを使っての表示速度を分析してくれます。
回線を選択できるようにしてくれるとありがたいですが、今は選択できるようにはなっていません。

そして端末はMoto G4でChromeを使って読み込んだ時のデータになります。

 

対策後は、

対策後の結果 3秒で表示される

 

3秒に下がりました!

ひとまずこれで表示速度が遅いからという理由での離脱は避けられるかもしれません!
本当は1秒とかにしたかったけど、今現在で3秒未満の数値は確認できないので読み込み速度はこれが一番良いものなのかもしれません。

 

 

簡単にできる対策

上の分析結果のように改善させるにはどうすれば良いかというと、

  • mod_deflate
  • mod_experies
  • mod_pagespeed

この3つの対策をするだけです。最初の2つは.htaccessに追記するもので、最後はX Serverで行える対策になります。あれば尚良いという感じですが、最初の2つだけでも効果が大きいのでやっていきましょう。

 

.htaccessへの追記

【 mod_deflate と mod_experies 】

.htaccessは隠しファイルを表示させる3つの方法でも少し触れましたが、中身を書き換えるということなので、2つの方法があります。

一つ目は、契約しているサーバーが用意してくれている「.htaccess編集」のところから追記していく方法。
X Serverを利用している方は、サーバーパネルから追記することができます。

 

エックスサーバーの管理画面

 

.haccess編集をクリックするとドメインの選択画面に変わり、設定したいドメインを選択したら直接書き込める画面に移ります。

 

サーバーの.htaccess編集画面

 

ここの.htaccess編集をクリックすると追記することができます。

 

二つ目は、FTPを利用して追記をしてから上書き保存をする方法。

FTPのアプリは色々あるけど、やることは同じ!

/public_html/.htaccess

このディレクトリにある.htaccessをダウンロードしてからコードを追記する。そして保存してからアップデートするだけ。
FTPを使い慣れる意味でもこちらをオススメしたいけど、頻繁にいじったりしないならサーバーで追記する方が楽だと思います。

 

この.htaccess編集で追記する内容はこちらを参考にさせてもらいました。

まずは、mod_deflateの設定です。

 

このmod_deflateってなに?ってことですが、簡単にいうと画像などのコンテンツを圧縮させて転送量を削減することを可能にするもの。転送量を削減できるからページの表示速度も改善することができたということになります。(送信する前にピッと圧縮してパッと送っちゃうヤツ)

mode_deflateにはデメリットも存在します。それは毎回圧縮処理されることになるので、CPUに負荷がかかるということ。それほど気にしなくてもいいことかもしれませんが、念のため。

 

# mod_deflateを利用して Gzip圧縮する設定

SetOutputFilter DEFLATE

# Mozilla4系、IE7、8の古いブラウザでは無効にする
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

# GIF、JPEG、PNG、ICOなど圧縮済みの画像は再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
# プロクシサーバが間違ったコンテンツを配布しないようにする
Header append Vary Accept-Encoding env=!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-woff
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

 

mod_expiresではキャッシュの取り扱いを設定します。サイトに訪れてきた人に対して1度ダウンロードしたテキストデータをキャッシュしてもらって、期限内であればわざわざダウンロードしなくても表示させることができるように設定します。主にキャッシュの期限をどれくらいにするかというもの。リピーターに対して有効です。

 

# ブラウザへのキャッシュの設定
<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 1 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-opentype "access plus 1 year"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>

この設定をすることでPageSpeed InsightsとTest My Siteでの改善ができたので、ぜひ試してみてください!

 

まとめ

ぶっちゃけこの改善がどれくらいの効果を発揮するのかは私のサイトでは感じ取れる気がしないですが、直帰率が高いサイトであれば試してみる価値は高そうです。モバイルの利用者数がパソコンを超えたと言われているので、これからはモバイル!と言っても過言では無いだろうなと思います。2020年頃から3G回線は終わりを迎えて5Gが出てくるようなので、モバイルでも快適に利用できる環境がさらに改善していきそうですね。

まぁいつものように、それに合わせてサイトの作りが強化されて重たくなってしまうんだろうけど。。良い意味でイタチゴッコ。

コメント