*

WEBサイトの表示速度をスピードアップする方法

公開日: : 最終更新日:2014/05/19 システム, テクニック , , ,

Hi Speed Train

サイトの表示が遅いので、いくつかツールを使ってチューニングすることにしました。
まず初めに使ったツールがこちら。

Website speed test
http://tools.pingdom.com/fpt/

このツールを使うと何に時間がかかっているのか、大まかに知ることができます。
で、調べてみると「やっぱり・・・」という結果です。
(あまりに遅かったため、写真は割愛しました)

これはまずい。
前からうすうす感じてはいたけど、これはまずい。

そう感じて何か対策が無いかと探し始めました。
それで次に使ったツールがこちら。

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

Google謹製のツールが、読み込み時間を測ってくれます。
で、結果はというと

PageSpeed Insights

こんな感じ。
それぞれの項目をクリックすると、修正方法が表示されます。
かなりいっぱい修正するところがあるぞ!

まずページ上部の赤い「!」で表示されているのが「修正が必要」な項目です。
これは他の項目より修正する必要が高い項目を示しています。

上から順につぶしていくのがいいでしょうね。

ブラウザのキャッシュを活用する

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


Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

関連記事

no image

img画像に隙間(空間)ができる件

何度か経験してそのたびにイラッときたので自分用にエントリー。 スタイルシートで下記のように記述

記事を読む

no image

ワードプレスのプラグイン初作成

タイトルのとおり。ワードプレスのプラグインを作ってみました。仕事でEC-CUBE使って販売をしている

記事を読む

postgresqlのスロークエリ(スローログ)を取得する

45年ぶりの雪が、1週おきに降るってどういうことでしょうか? とは言え、雪が降るといつもと

記事を読む

【アフィリエイト】WordPressプラグイン「AmazonJS」をインストールしてみました

ずん飯尾という芸人さんがいます。 中でも「現実逃避シリーズ」がプチブレイクしていて、現実離

記事を読む

cakephpでユーザ定義定数を読みだす方法

サイトを作るにあたって、定数を使いたいときがよくあります。 サイト上のある数値に変更があっ

記事を読む

no image

タグクラウド機能を付加。

右側のナビにタグクラウドを付けた。どうでしょうか。それにしてもワードプレスってタグが簡単だよね。wp

記事を読む

no image

windows7のxamppでvirtual hostを設定する

忘れないように忘れてもいいようにエントリー。 タイトルの通りです。 c:/xampp/a

記事を読む

WordPressのテーマを「stinger」に変えたよ

しばらくぶりにブログ(Wordpress)のテーマを変更しました。 以前はオールホワイトで

記事を読む

CakePHP1.3でブラウザを閉じてもセッションが切れないようにする方法

ちょっと体調を崩してしまってましたが、なんとか回復してきました。(辛かった・・・) 本当に

記事を読む

【解説】Googleウェブマスターツールの使い方

サイトの分析やアクセス解析のツールと言えばGoogleAnalyticsですよね。 このブ

記事を読む

Google AD

Google AD

PAGE TOP ↑