ページスピードが気になり出して止まらない!
どうもどうも、細かい作業は苦手だからバーン！と効果のある対策だけをやっておきたいモストラです。
結局は一回の対策だけで終わらないだろうと思ってます。テイキテンケンダイジ！
サイトの掲載結果を分析してくれるPageSpeed Insightsが有名ですよね。
そして新しくGoogleが出してきたモバイルに特化したページスピードを分析してくれるサイトTest My Siteが6月29日からサービスをスタートさせています。
ブログの環境を整えよう
訪れてくれた人にとって、ページの表示速度が遅いというのはストレス以外の何物でもない。自分で使っていてもわかるけど、表示速度が遅いというだけで、その先にある情報の価値が薄れる感覚になる。つまり、どれだけ有益な情報を提供していたとしても表示スピードが遅いというだけで、離脱率だけではなく読む前から興味が薄れてしまっていくことを意味する。
実際に表示速度が遅くて表示される前に戻って別のところを探すことは多い。端末のスペックの問題も確かにあるけど、他のサイトを表示するのと比較しても明らかに遅いサイトは存在するから、そういうとこはもったいないなといつも思ってます。
自分のブログがそういうことにならないように
ちゃんと対策を考えていかないとと思ってたどり着いたのが最初にあげた二つのサイト。PageSpeed Insightsは有名なので自分のサイトを持っている人なら一度はやったことがあるんじゃないでしょうか。
私も何度か試しているので、改善前と後を比較しながら紹介していきたいと思います。
PageSpeed Insightsを使用するボタンをクリックしたらこの画面になります。自分のサイトのアドレスを入力して分析ボタンを押すだけで結果が出るのでかなり分かりやすい。だから自分のサイトの分析結果を出していこうと思います。
どや！
モバイルはボロボロです。
モバイルファーストと言われている今の時代にはUXが大事だってのにこの有様。
すぐに何とかしなくては！！
パソコンもまずい…
モバイル全盛期と言ってもここで紹介しているのはパソコン関連が多いし多くなっていくだろうから、この状況はまずい。この現状をなんとかします！
ごちゃごちゃいじくった結果がこちら。
56 → 74なので結構改善されました。goodまで持っていきたかったのですが、あれこれ対策するのは大変なので簡単な方法でこれだけ改善したということを伝えたい。さらに改善したいというのであれば、画面下に出てくる
68 → 89 この変化は大きいと思います。
この数値は固定されたものではないので、その時々で変動します。また、大型アップデートのような時に変動することも考えられるので、時々チェックするのがいいかもしれませんね。
続いてモバイルに特化したTest My Siteではどうなのかというと
対策前は
こちらはまだ浸透していない可能性があるので、少し説明。
世界標準の回線である3Gを使っての表示速度を分析してくれます。
回線を選択できるようにしてくれるとありがたいですが、今は選択できるようにはなっていません。
そして端末はMoto G4でChromeを使って読み込んだ時のデータになります。
対策後は、
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編集をクリックすると追記することができます。
二つ目は、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が出てくるようなので、モバイルでも快適に利用できる環境がさらに改善していきそうですね。
まぁいつものように、それに合わせてサイトの作りが強化されて重たくなってしまうんだろうけど。。良い意味でイタチゴッコ。
コメント