*

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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

postgresqlデータベースにインデックスを作成する方法

ビットコインが取引停止になったり、LINEがスタンプを自由に作れるようにしたり、何かとにぎや

記事を読む

wordpressのパーマリンク設定を変更してみたら大丈夫だった件

wordpressでパーマリンクを変えようと思ってたんですが、なかなか踏み切るタイミングがな

記事を読む

no image

Blogger Syntax Highlighter

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

記事を読む

no image

アマゾンのクラウド(AWS)を使ってみる

前々からやろうやろうと思っていて手を着けられていなかったサービス、アマゾンウェブサービス(AWS

記事を読む

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

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

記事を読む

no image

お名前ドットコムとDNSサーバ構築

以前話題にしたサーバ構築の件、DNSサーバとmailサーバを立てる事がなくなった。DNSサーバはお名

記事を読む

img vertical-align

vertical-alignで画像とテキストの位置を垂直方向で揃える

これも自分のリマインダー用としてエントリー。 画像とテキストが同じ行に並んでいて、垂直

記事を読む

ファビコン(.ico)の作成方法

テーマを変更したついでと言ってはなんだけど、ファビコンの作成方法をメモしておきます。

記事を読む

no image

WordCampTokyo2011行ってきた

WordCampTokyo2011 http://2011.tokyo.wordcamp.

記事を読む

no image

wordpress plug-in [register_taxonomy_for_object_type]

register_taxonomy_for_object_type仕事で使っているWordpress

記事を読む

Google AD

Google AD

PAGE TOP ↑