*

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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

ブログでアクセス増やすためにはやっぱりタイトルと記事が重要らしい件

最近はアクセス数にも気をつけてるので、ブログのアクセスを増やす方法が書かれた記事が気になりま

記事を読む

cakephp

cakephpでPHPのタイムゾーン設定してないとエラーが出る件

ロリポップからさくらにサーバを変えたのは先日のエントリーの通りですが、サーバ環境が違うことでca

記事を読む

no image

Gitに挑んだりしてみる

複数で開発するにあたって絶対必要と言ってもいい、バージョン管理ソフト。WEBSVNという選択肢も頭を

記事を読む

あらら?Googleのストレージサービスで、無料なのに有料プランが使えてる?!

  「ストレージサービス」をご存知でしょうか。「サーバーのディスクスペースを

記事を読む

no image

xoops cubeを入れてみた

かなり枯れたパッケージだが、xoops cubeを調べたのでエントリー。 Xoops と言われ

記事を読む

no image

eclipseのリソース名を変更する

ちょっとキョドったのでエントリー。 1. eclipse > エクスプローラー から名前を変更

記事を読む

SVNリポジトリのリプレース(とeclipseの設定)

  SVNリポジトリのリプレースを行ったのでエントリー。 1.リポジトリをdump svn

記事を読む

no image

Blogger Syntax Highlighter

今さらですが、Blogger移転を機にSyntax Highlighterを入れてみました。こちらの

記事を読む

no image

開発の現場に行って来た

ひょんな事から、他社の開発の現場に行く事に。 念願だったT社に!書類選考で落ちたよT社! 久

記事を読む

さくらでcakephpを使って500internal server errorが出る場合の対応

こんにちは! 今日は節分ですね。自分の子供のころ、節分と言えば豆まきだったわけですが、近ご

記事を読む

Google AD

Google AD

PAGE TOP ↑