• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

WEBを張り巡らせるクモであったり
空をただようくもであったりしたい
WEBエンジニアの日々の足跡
雲の足跡

2014年12月18日(木曜日)  ()

実は遅いのでは?

皆様こんにちは!
天気も悪く、寒い日が続いていますね、
いっそのこと雪が降ってくれれば良いよ!
と思ってしまうところです。

こんなに寒くてもオフィスの中では、
良く半そでで動き回ってます。
暖かな環境に感謝ですね!


さてさて、最近サイトの読み込み速度をいろいろと眺めていました。
弊社のサイトもTOPに沢山"もの"がありすぎるために、
御世辞にも速い!といえる状況ではなくなっているのが、
悲しいところです。

ページ表示速度を上げるメリットは?
■ユーザー直帰率を下げる!
・ユーザーがページ表示に待てるのは最大2秒!
・3秒以上読み込みにかかると40%以上のユーザーは離脱!
そんなにユーザーは待ってくれません!遅い、即直帰ということです。
2秒を超えたら不快感が。シビアな世界なのです。
面白い画像何かが貼ってあったら、10秒くらい待ってしまいますよ?私は笑
■SEOの観点で効果がある
・微々たるものですが、Googleさんのサイト表示順位が上昇するそうです。


では実際に速度を計ってみましょう♪

(カンタンにこの二つを使っていきましょう)
1.PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/?hl=ja
URLを入力し、簡単にサイト表示スピードを知ることができます。
0~100 ポイントで評価され、85以上のスコアはそのページの、
パフォーマンスが高いことを示します。


2.GTmetrix

http://gtmetrix.com/
こちらもURLを入力するだけでカンタンにサイト表示することができます。




サイト構成で気をつけるべき点は?

・リンク先ページでリダイレクトを使用しない
・圧縮を有効にする
・サーバーの応答時間を改善する
・ブラウザのキャッシュを活用する
・リソースを圧縮する
・画像を最適化する
・CSS の配信を最適化する
・見える範囲のコンテンツを優先する
・レンダリングを妨げる JavaScript を削除する
・非同期スクリプトを使用する

といった点が上げられます。


中でも、【ブラウザのキャッシュを活用する】
は対策が比較的容易ですので、早めに手を打つことをオススメします。
■実際にキャッシュを活用していない場合は?

"修正が必要:"とのアドバイスをいただけます。

点数的評価で・・・

79%となります。

対策を行うと・・・

86%となりました!

■実際に何が良くなるの?
・静的なリソース(画像,JSファイル,CSSファイル,メディアファイル,pdfファイル等)をブラウザでキャッシュしておけば、複数回サイトにアクセスした場合に表示までの時間を短縮できます。

■対策の方法は?
⇒サーバー側でブラウザのキャッシュを有効にします。

方法1.Expires ヘッダー& Cache-Control: max-age ヘッダーの設定
⇒無条件で適用される「強いキャッシュ ヘッダー」
新しいバージョンがあるか、更新されているかを確認しません。
キャッシュ済みのリソースを使用できる期間を指定します。
キャッシュされた後に有効期限や最大期間に達するか、ユーザーが消去するまで、GETリクエストが発生しなくなります。


方法2.Last-Modifed ヘッダーと ETag ヘッダーの設定
⇒"経験則"を基にキャッシュするかどうか判断する、「弱い」キャッシュ ヘッダーです
キャッシュするファイルが同じかどうかをブラウザが判断する方法を指定してあげます。
・Last-Modifiedヘッダーでは日付、ETagヘッダーでは、リソースを一意に識別する値を用います。
条件付きのGETリクエストを発行し、完全なレスポンスが返るわけではないため、結果として速度は速くなります。

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


■Expiresヘッダーを設定
⇒.htaccess の記述でApache mod_expiresをONにしましょう

まずは、mod_expiresが使えるかどうか判断させましょう。

<ifModule mod_expires.c>
~
</ifModule>



そして、mod_expiresをONにします。

<ifModule mod_expires.c>
ExpiresActive On
</ifModule>



あとは、それぞれのリソースに対する設定を記述しましょう。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/jpg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType image/x-icon "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
</ifModule>



頻繁に更新されるものについては、注意が必要となりますが、これらの記述でブラウザキャッシュを用いてページの表示を行うようになります。

あもりにも遅いと感じたときに、試してみてはいかがでしょうか。

AliveCastIPのみ表示されます

OK

管理側

残り

javascript css html VIEW側

php matchルーチン