WEBサイトの表示速度をスピードアップする方法
サイトの表示が遅いので、いくつかツールを使ってチューニングすることにしました。
まず初めに使ったツールがこちら。
Website speed test
http://tools.pingdom.com/fpt/
このツールを使うと何に時間がかかっているのか、大まかに知ることができます。
で、調べてみると「やっぱり・・・」という結果です。
(あまりに遅かったため、写真は割愛しました)
これはまずい。
前からうすうす感じてはいたけど、これはまずい。
そう感じて何か対策が無いかと探し始めました。
それで次に使ったツールがこちら。
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
Google謹製のツールが、読み込み時間を測ってくれます。
で、結果はというと
こんな感じ。
それぞれの項目をクリックすると、修正方法が表示されます。
かなりいっぱい修正するところがあるぞ!
まずページ上部の赤い「!」で表示されているのが「修正が必要」な項目です。
これは他の項目より修正する必要が高い項目を示しています。
上から順につぶしていくのがいいでしょうね。
ブラウザのキャッシュを活用する
CSSファイルや画像ファイルに有効期日や最大経過時間を指定すると、ローカルから以前にダウンロードしたリソースを読み込むようになります。
結論から先に行っちゃいますと、.htaccessに下記の表記を追記します。
<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 week" ExpiresByType image/jpeg "access 1 week" ExpiresByType image/gif "access 1 week" ExpiresByType image/png "access 1 week" ExpiresByType text/css "access 1 week" ExpiresByType application/x-javascript "access plus 1 week" ExpiresByType text/javascript "access plus 1 week" ExpiresByType application/javascript "access plus 1 week" ExpiresByType image/x-icon "access 1 week" </IfModule>
jpgやpng、CSSの有効期日を1週間に指定してます。
この期間はローカルからリソースを読み込むようになる、ということですね。
.htaccessを書き換えたらWEBサーバを再起動します。
どうでしょう?
少しは表示が早くなったでしょうか?
自分のサイトでは、早くなったことを体感することはできませんでした。
まだ他にボトルネックがあるということですね。
圧縮を有効にする
最近のブラウザはgzipやdeflateなど、圧縮したデータ(HTML、CSS、JavaScriptなど)をサポートしています。
圧縮したデータを送って、クライアント側でデータを展開することで、通信の負担を軽減させているんですね。
こっちも結論を書いちゃいます。
下記の表記を.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
で、こちらもWEBサーバを再起動。
どうでしょうか?
少し表示が早くなったでしょうか。
自分の場合はあまり早さが体感できませんでした。
これはもっと別なボトルネックがあるということですね。
とはいえ、上記2つの方法で表示が早くなるサイトもあると思います。
自分の方は引き続きどこがボトルネックになっているか、調査を続けていきます。
Google AD
関連記事
-
-
ブログでアクセス増やすためにはやっぱりタイトルと記事が重要らしい件
最近はアクセス数にも気をつけてるので、ブログのアクセスを増やす方法が書かれた記事が気になりま
-
-
cakephpでPHPのタイムゾーン設定してないとエラーが出る件
ロリポップからさくらにサーバを変えたのは先日のエントリーの通りですが、サーバ環境が違うことでca
-
-
Gitに挑んだりしてみる
複数で開発するにあたって絶対必要と言ってもいい、バージョン管理ソフト。WEBSVNという選択肢も頭を
-
-
あらら?Googleのストレージサービスで、無料なのに有料プランが使えてる?!
「ストレージサービス」をご存知でしょうか。「サーバーのディスクスペースを
-
-
xoops cubeを入れてみた
かなり枯れたパッケージだが、xoops cubeを調べたのでエントリー。 Xoops と言われ
-
-
eclipseのリソース名を変更する
ちょっとキョドったのでエントリー。 1. eclipse > エクスプローラー から名前を変更
-
-
SVNリポジトリのリプレース(とeclipseの設定)
SVNリポジトリのリプレースを行ったのでエントリー。 1.リポジトリをdump svn
-
-
Blogger Syntax Highlighter
今さらですが、Blogger移転を機にSyntax Highlighterを入れてみました。こちらの
-
-
開発の現場に行って来た
ひょんな事から、他社の開発の現場に行く事に。 念願だったT社に!書類選考で落ちたよT社! 久
-
-
さくらでcakephpを使って500internal server errorが出る場合の対応
こんにちは! 今日は節分ですね。自分の子供のころ、節分と言えば豆まきだったわけですが、近ご