*

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

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

WP-SpamFree by Pole Position Marketing

関連記事

DiCE

64ビットwindows8にDiCEを入れる

DiCE[/caption] 新しいPCにwindows8入れてから、旧PCを全く触らなくな

記事を読む

no image

紛糾!システム構築の巻

システム作る時って、会社の縮図だと思う。いろいろな立場の人の思惑や損得が入り混じり、考えが違うために

記事を読む

wordpress-logo-stacked-rgb

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

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

記事を読む

no image

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

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

記事を読む

ユーザー サマリー - Google Analytics

PVが3000を超えたので3か月やったこととを公表します

ウクライナ情勢が緊迫している昨今、皆様お元気でしょうか? 自分のブログには大きな変化がありました。

記事を読む

ロリポップ

ロリポップからさくらインターネットにレンタルサーバを変更しました

前のエントリーで少し書きましたが、ロリポップを解約しました。 契約開始から3年と半年、本当

記事を読む

wordpress-logo-stacked-rgb

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

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

記事を読む

eclipse search option

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

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

記事を読む

no image

オブジェクトとクラスについて

基本的なところをちょっと復習。 下記あたりが参考になったのでメモ。 http://www.k

記事を読む

no image

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

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

記事を読む

Google AD

Google AD

Slurpy.. #iphone #iphone6 #apple #jakarta #indonesia #instastyle #gadget #ios #gold
iPhone6が来ました。アップルのサポートは未だ健在だったというお話。

アップルは製品だけじゃなくて、サポートの対応にまでその企業哲学

@APPLE introduces the iPhone 6 & iPhone 6 Plus see the short film now on http://bit.ly/1qO17By #gadgets #tlselitedotcom #thelifestyleelite #thelifestyleelitedotcom #lifestyleelite #iphone6
iphone6にするか、iphone6plusにするか、まだ決めなくてもいい方法

iphone6が発表されましたね。iwatchは来年に持越しで

child
パパも2歳になったよ

早いもので子供が2歳になりました。 年を取るごとに年月が早く

The #Liberal #Democrat Avengers! The New Female Thor, African American Captain America (The former Falcon) & Steve Jobs iOS Iron Man! Lol
転職して新しい職場で仕事始めました

1か月以上もブログを放置してましたが、私は元気です。 むしろ

career change
6月末で現職を退職します

ご存知の方もいらっしゃると思いますが、6月末で現職を退職するこ

→もっと見る

PAGE TOP ↑