PageSpeed Insightsを使ってページ読み込み時間を改善してみた

ページ読み込み時間

どーも、ダンゴです( ̄▽ ̄)ノ

多くの人に読まれるブログを作る上で、
1番大事なのは“コンテンツ”なんですが、
ページの読み込み速度もけっこう重要です。

大手『Amazon(アマゾン)』のデータによると、

・読み込み時間が0.1秒減ると、売上が1%増加
・ページ読み込み時間が1秒増えると、PVが11%減少

などの結果が出ています。

みなさんも、表示が重いサイトはすぐに閉じちゃう
って経験があると思います(^_^;)

離脱しないにしても、
せっかくブログを訪問してくれた読者さんには、
快適に使ってほしいですよね(^^)

ちょうど読者の方から質問をいただきましたので、
今回は、ページ読み込み速度を計測できるツールと、
その改善方法をご紹介します☆

 

オススメはPageSpeed Insights

無料で使えてオススメなのが、
Googleが提供している、PageSpeed Insightsというサービスです。

PageSpeed Insights

 

計測したいサイトのURLを入力すると、コンテンツを解析し、
ページの読み込み時間を短くするための方法を提案してくれます(*^^)b

 

せっかくなので、ぶろらいでもやってみました。

結果はこんな感じ、、

 

PageSpeed Insights ぶろらい

100点中65点。

うーん、ちょっと低いですね(^_^;)

パソコンの場合だと、理想として、
緑色=85点以上は欲しいところです。

モバイル(スマホ)はどうしても重くなりがちですが、
赤色はちょっとまずいので、最低でも黄色にはしておきたいですね。

 

まずは赤色部分から

「どうすれば点数がよくなるの?」
ってとこですが、評価の下に改善点を提示してくれているので、
基本はそれに従って進めていきます。

特に、「 修正が必要」という部分は、
最低限直しておきたいところです。

ぶろらいの場合は、

PageSpeed Insights 修正が必要

・圧縮を有効にする
・ブラウザのキャッシュを活用する

ってとこを特に修正しなさいよーって言われていたので、
まずここを改善していきました。

 

圧縮を有効にする

サイトでは、HTMLやCSS、JavaScriptなどのデータを
サーバーから持ってきて表示しています。

簡単に言うと、そのデータを圧縮することで、
通信の負担を減らしましょうって感じですかね(・▽・)ノ

やり方としては、
『.htaccess』に以下の記述を追加するだけでOKです☆

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

 

.htaccessの場所は、
「public_html」の中にあります。

場所はどこに記述しても大丈夫だと思いますが、
1番最後の行を改行していないとエラーになるので、
そこだけ注意が必要です(・ω・)ノ

ぶろらいの場合は、
この記述を追加するだけで一気に点数が跳ね上がりました\(^o^)/

ちなみに、ここを直すとモバイルのほうも点数上がります。

上書き保存した後、
試しにもう1度PageSpeed Insightsで計測し直してみてください☆

けっこうテンション上がりますよ(ノω`*)♪笑

今回は、こちらの記事を参考にさせていただきました(^^)
圧縮を有効にする – PageSpeed Insights

 

ブラウザのキャッシュを活用する

『キャッシュ』っていうのは、
ブラウザで1度見たサイトなどを
一時的にコンピュータに保存しておく機能です。

これを活用することで、
よく見てくれる方はキャッシュに保存されたデータを参照するので、
ページの速度が速くなるよーって感じです(・▽・)b

こちらもですね、
先ほど同様『.htaccess』に以下を記述することで指定できます。

ExpiresActive 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"

 

こちらの記事を参考にさせていただきました(^^)
ブラウザキャッシュの設定をしてWordPressブログの表示スピードを上げる方法

 

さらに点数を上げるためにやったこと

ぶろらいの場合は、上記の2つを実行することで
「修正が必要」な赤色の部分はなくなり、
最低限の問題はクリアできました。

PageSpeed Insights ぶろらい 編集後

 

あとは「修正を考慮」という部分を1つ1つ直していけば、
1点ずつぐらいのペースですが、点数は上がっていきます☆

とりあえず緑色までにはしたかったので、
残り僕がやった改善方法と、
参考サイトをピックアップしておきますね(*^^)b

 

▼改善方法
・プラグイン『Async JS and CSS』導入
・プラグイン『Autoptimize』導入
・ソーシャルボタン削除

▼参考記事
PageSpeed Insights で「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript / CSS を排除する」と提案されたときの修正方法
HTML、CSS、JavaScriptを縮小してWordPressブログを高速化する方法(Autoptimizeプラグイン)

 

『Async JS and CSS』は、
非同期やファイルの圧縮など、
『Autoptimize』は、
JavaScript・CSS・HTMLを縮小してくれるプラグインです。

どちらもインストールして有効化するだけでOK☆

ただ、場合によってはサイトの表示が崩れることがあるので、
導入後は必ずチェックしてください(・ω・)ノ

 

あと、TwitterやFacebookと連携できるような
ソーシャルボタンも意外と重いです(^_^;)

デフォルトで入ってるテンプレートが多いと思いますが、
あまり使わないのであれば、外したほうが軽くなります。

 

 

PS.

今回紹介したページ読み込み速度ももちろん重要なんですが、
ブログのアクセスアップのために1番大切なのは、
読者さんの役に立つコンテンツを提供することです。

なので、初期段階では特に、
コンテンツ強化に集中することをオススメします。

余力があればこういったところも考えていきたいところですが、
それでコンテンツの質が下がってしまっては意味がないですからね(´∀`;)

管理人プロフィール
▼名前:ダンゴ
ダンゴ プロフィール
どーも、ダンゴです。

お酒と漫画とお笑いが大好きな大学生で、現在はネットビジネスとスロットで学費と生活費を稼ぎながら、細々と暮らしてます。

数年前ブラック企業に内定し、「雇われるリスク」を肌で感じた結果、就職を放棄。

とはいえ食わねばいけないので、藁にもすがる思いでネットビジネスを始めたところ、毎月10万円以上の収入を生み出すことに成功!

知識ゼロから月収10万円を稼ぐまでの道のりをメールで紹介していますので、興味があれば登録してみてください☆

⇒10万を稼ぐ第1歩


コメントを残す

サブコンテンツ

このページの先頭へ