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
関連記事
-
podcastのテスト
podcast配信です! mp3ダウンロード mp4ダウンロード
-
Pear::pager と TwitterBootstrap をマッシュアップしてみた
前回に引き続き、WEBアプリをカスタマイズしてみました。 DB使って商品登録をしてると
-
cakephp2にACLプラグインを入れてみた
cakephpで、ユーザーによって権限やアクセスを変えたりする方法を調べてたら、それ用のプラ
-
Gitに挑んだりしてみる
複数で開発するにあたって絶対必要と言ってもいい、バージョン管理ソフト。WEBSVNという選択肢も頭を
-
SVNリポジトリでコミットできなかった件
ベンダーさんに、先日立てたSVNリポジトリにコミットできないと連絡いただき、調べたところ、権限が
-
ブログ更新情報をTwitterに流す、FeedBurnerの「Socialize機能」
タイトルの通り、ブログの更新情報をTwitterに流す方法。 結論から言うとFeedBurnaer
-
PHPのpear インストールにて
今さらながらPEARを触ることに。以前に少しだけ触ったことがあって、「ダウンロードするだけでしょ?超
-
あらら?Googleのストレージサービスで、無料なのに有料プランが使えてる?!
「ストレージサービス」をご存知でしょうか。「サーバーのディスクスペースを
-
cakephpでviewからログイン判定してアカウント表示する機能
cakephpのログイン機能を、viewから判定させたかったので調べてみました。 よく
-
WEBディレクター、WEBエンジニア募集してます。
いっしょにWEB制作やりましょう! クライアント駐在(派遣) 場所:都営大江戸線