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
関連記事
-
-
wordpress plugin change the taxonomy when you suggest the time
1. at first, download Post Expirator.2.change code
-
-
【なぜ?!】ブログの直帰率が激減しました【GoogleAnalytics】
少し前から気づいていましたが、このブログの直帰率が激減しました。 まずはこちらの図表からどうぞ。
-
-
wordpressからbloggerに引越し
lolipopで使っているロリポプランは、DBが一つしか使用できない。もうちょっと有効に使えないかと
-
-
SVNリポジトリのリプレース(とeclipseの設定)
SVNリポジトリのリプレースを行ったのでエントリー。 1.リポジトリをdump svn
-
-
紛糾!システム構築の巻
システム作る時って、会社の縮図だと思う。いろいろな立場の人の思惑や損得が入り混じり、考えが違うために
-
-
AmazonEC2にcakephp2入れたときにエラーが出た件
たぶんEC2にはcakephpをこれからも入れるだろうから自分用にエントリー。 Amazon
-
-
Google Analyticsで毎日チェックするべき4つの項目
こんにちは! まだまだ寒い日が続きますねー。皆様ご自愛ください。 さて、通常なにかし
-
-
img画像に隙間(空間)ができる件
何度か経験してそのたびにイラッときたので自分用にエントリー。 スタイルシートで下記のように記述
-
-
アマゾンのクラウド(AWS)を使ってみる
前々からやろうやろうと思っていて手を着けられていなかったサービス、アマゾンウェブサービス(AWS
-
-
WEBディレクター、WEBエンジニア募集してます。
いっしょにWEB制作やりましょう! クライアント駐在(派遣) 場所:都営大江戸線