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
関連記事
-
-
ブログ更新情報をTwitterに流す、FeedBurnerの「Socialize機能」
タイトルの通り、ブログの更新情報をTwitterに流す方法。 結論から言うとFeedBurnaer
-
-
ブログでアクセス増やすためにはやっぱりタイトルと記事が重要らしい件
最近はアクセス数にも気をつけてるので、ブログのアクセスを増やす方法が書かれた記事が気になりま
-
-
windows8買ってみた
正確に言うと、windows7のPCを買ってwindows8にアップグレードしました。
-
-
WEBディレクター、WEBエンジニア募集してます。
いっしょにWEB制作やりましょう! クライアント駐在(派遣) 場所:都営大江戸線
-
-
facebook for PHP SDKを使ってCakePHPでログアウトとポストする方法
ソチオリンピックではスノーボード・ハーフパイプで平野さん・平岡さんが初のメダル獲得をしました
-
-
【体験談】6年間禁煙を続けられた自分の、禁煙の始め方
4月1日から消費税が8%になり、日用品への影響が少しずつ出てきているころです。 自分はお酒
-
-
ロリポップ+お名前.comで独自ドメイン取得
onamae.com で独自ドメイン取得しました。 そのときのメモ。 1.lollipo
-
-
zenphotoを入れてみる
これまでの写真データ管理にはGoogleのWEBアルバムを使ってきたが、無料で使えるのは1GBまでだ
-
-
podcastのテスト
podcast配信です! mp3ダウンロード mp4ダウンロード
-
-
アマゾンのクラウド(AWS)を使ってみる その2
前回、アマゾンのクラウド(AWS)を使ってみる で何も無い所からEC2を立ち上げましたが、そのあ