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
関連記事
-
-
Google Analyticsで毎日チェックするべき4つの項目
こんにちは! まだまだ寒い日が続きますねー。皆様ご自愛ください。 さて、通常なにかし
-
-
CakePHPでFacebook-PHP-SDKを使ってFacebookログインするアプリの作り方
こんにちは! 昨日は東京では45年ぶりに大雪が降りましたね! 自分の家の方でも雪が2
-
-
SVNリポジトリのリプレース(とeclipseの設定)
SVNリポジトリのリプレースを行ったのでエントリー。 1.リポジトリをdump svn
-
-
wordpressのパーマリンク設定を変更してみたら大丈夫だった件
wordpressでパーマリンクを変えようと思ってたんですが、なかなか踏み切るタイミングがな
-
-
vertical-alignで画像とテキストの位置を垂直方向で揃える
これも自分のリマインダー用としてエントリー。 画像とテキストが同じ行に並んでいて、垂直
-
-
WordPressをインストールしたら最初にやってることまとめ
仕事でWordpress使ってるけど、とりあえずすごく役に立ちました。ありがとうございます。個人的に
-
-
Gitに挑んだりしてみる
複数で開発するにあたって絶対必要と言ってもいい、バージョン管理ソフト。WEBSVNという選択肢も頭を
-
-
ブログ更新情報をTwitterに流す、FeedBurnerの「Socialize機能」
タイトルの通り、ブログの更新情報をTwitterに流す方法。 結論から言うとFeedBurnaer
-
-
windows8買ってみた
正確に言うと、windows7のPCを買ってwindows8にアップグレードしました。