Tyntを導入した

blogstormの記事を読んで

ここで紹介されているTyntというサイトのサービスのを導入した。

自分のWebSite上で、コピペ活動を追跡しやすいようにしてくれる。

具体的には、imageとtextのコピーを閲覧者にしてもらった時、コピーに独自のリンクを生成してくれる。そして、それが他のWeb上で自分への被リンクとなったかどうかをcheckしてくる。

なんか最初、理解できなかった。順番としては

  1. サイト運営者にtyntからのjavascript-codeをサイトに貼り付ける
  2. 閲覧者が、サイト上でコピーをする(イメージ、7語以上テキスト、7語以下テキスト。 address-barのコピーはpro向け。
  3. 閲覧者のclipboardには、コピーした情報+サイトのURL(テキストアンカーは続きを読む)+CreativeCommonsの注記 が入る。
  4. ペーストされたリンクをtyntが監視する(そのリンクがcllickされたかどうか)、crawlerか何かを使うの?そんなのいらないね、、
  5. clickされて自分のサイトに来た場合は、コピペしたものが黄色くマーキングされた表示にする。

という感じ。

試しに、自分のサイトのあるページ(//abc-analytics.com/レスポンス時間短縮の為の作業)で、コピペしてみると、

当たり前だけど、読み込みの遅いweb-pageはまずい。でも、どうやって改善したらいいかわからないから放置しがち。
続きを読む //abc-analytics.com/レスポンス時間短縮の為の作業#ixzz0YEJ35c95
Under Creative Commons License: Attribution

こんな感じに、ペーストされる。で、リンク先に行くと、

image

こんな感じで、コピペした部分が黄色の表示になる。urlはと、最後に#以下にアンカーが付く。

//abc-analytics.com/レスポンス時間短縮の為の作業#ixzz0YEJ35c95

一方、サイトの管理の為のページの方はというと、

image

コピーされた回数を見てる。

被リンクとなったものは、siliverに。

clickされるとgoldに成る。

生成された被リンクをランクに分けて表示してくるという事かな。

image

普通にpage-viewなんかもある。

Pro版にすれば、もっといろいろあるんだろうけど、このままでも満足度が高い。

挿入したscriptの動作が気になったけど、具体的な動きがよく分からない。Domのlevel2のselection機能とevent-listernerを使うような気がするけど、clipboardの書き換えなんかあったかな?

下は、chromeでprofileを出して,増加した関数を出してみたところ。nodeliset, mouseevent,range,xpathresultなんかが増加してる。

これ以上、突っ込むのはやめ。

image

レスポンス時間短縮の為の作業

2009/11/25 21:00 少し追加訂正

当たり前だけど、読み込みの遅いweb-pageはまずい。でも、どうやって改善したらいいかわからないから放置しがち。

で、わからないなりに、調べたり、手を動かしたり、放置してみた。

1.ホスティング側の問題?

レンタルサーバーはdreamhostを使ってるけど、パフォーマンスに波があるという話を聞いた。

計測方法? serverでuptimeを定期的に取って確認する?

現状 cronでuptimeを計測したのを見てると、2から8くらいまでの数値になっている。5前後が結構多い。これとresponseタイムの関係が、自分の所でまとまっていない。

対策  よくわかない。サーバーの引っ越しは大変そう。情報も出てこないので、放置。

2. wordpressの問題?

wordpressは、mysqlにデータを入れておいて、それを元にphpでhtmlを作るもの。このプロセスが遅い場合は?

計測方法? わからん。1と2を合わせたものが、対象URLのdocumentの読み込み時になると考えていいのかな。

対策 wordpress supercacheを使う。(日本語URIを使うと、動かないという話で敬遠してたけど、先ほどやってみたら動いた、手元では読み込み時間が1000ms以下になった 全然違った)。お手軽に静的ファイルをcacheに置く事ができた。
毎回、cacheを作ってるようだ、、これではだめ、、

3. renderingの問題?

ハイパフォーマンスWebサイトという本を見ながら、YSlowを入れて、いろいろやってみた。

  1. httpリクエストを減らす。 (F判定なんだけど、google 絡みのが大いので削れない、css-spriteはやれてない)
  2. CDNを使う (僕には関係ない)
  3. expireヘッダを設定する
    1. ExpiresActive On
    2. <FileMatch “.\.(gif|jpg|js|css|png)$”>
      ExpiresDefault “access plus 10 years”
      </FileMatch>
    3. js,cssなどで変更のあるものは、version番号が付いてるので、これで良しとする。
  4. html, javascritp, sytlesheetなどをgzipする (.htaccessで、SetOutputFilter DEFLATEと書いた)
  5. stylesheetを先頭に置く。 (stylesheetを<head>に持って行った)
  6. javascriptは最後に置く。 (<head>で読む必要はないので、<body>の最後に移した)
  7. stylesheetとjavascriptを外部ファイル化する (外部ファイルにして、まとめるものはまとめて、一ファイルにした)
  8. DNSルックアップを減らす。 (やれることはない?余分な外部サイトへの呼び出しを外していく?)
  9. javascriiptを縮小化する (jsminを使って縮小した)
  10. redirectを避ける (いくつか、被リンクのものを引き継いでるので、その分は放置)
  11. scriptの重複を避ける (wordpressのwp_enqueue_scriptで対応できるそうなんだけど、手で調整して重複を消した)
  12. ETagの設定を変更する (ETagの必要性がなさそうだったので、.htaccess に FileETag noneと入れた)
  13. ajaxをcache可能にする (ajaxは使ってない)

とりあえず、1.2の問題は、wordpress-supercacheの導入で良しとした。(Firebugで見る限り、1000ms以下 違った。)

それで、計測方法に、google analyticsを使う。 で完成といきたかったけど、上手くいかなかった。残念。

読み込み時間を計測して、サイト改善を考えてたけど、、

できなかった記事です。(2009/11/26訂正、下の方)

Google Analyticsを使用して、ページの読み込み時間と、ユーザーの行動(滞在時間)の関係を見る。

ユーザーの体感速度をGoogle Analyticsで可視化する

という記事があって、スクリプトまで載っていたので、コピペして使わせてもらいました。

おかげで、ユーザの体感速度(読み込みのみ)が可視化されたので、それをアクショナブルなものにしようとした。

  1. ページ事の読み込み時間の差を認識して、改善対象ページを特定する
  2. 読み込み時間の差が、サイト内行動に制約を与えてないかを特定する。

ぐらいは、簡単に評価できそうだった。で、この2つをやってみた。

1.ページ毎の読み込み時間を出す

数が少ないので、なんとも言えないけど、この場合だと一つのページは、DOM構築までに時間が掛かっているのがわかる。

改善対象が1ページなら、やる気も減退しないし、日にちを区切っていけば、問題の原因をつかめるかもしれない。

イベント値が、そのままdocumentのload開始から、contentLoadできるまでのミリ秒になります。

平均が見られるのは便利。一個、異常値がある。

image

2.読み込み時間とサイト内行動の制約

ユーザがストレスを感じて、クリックなどに影響が出てないかを見る。

滞在時間とページビューの差があれば、そのストレスを感じてるとする。

これは、利用状況を見れば良い。

image

数字をもう一度。

Dom構築まで page-view time_on_site サンプル数
-999 4.33 27:11 3
1000-1999 3.22 0:09:14 9
2000-2999 2.88 0:10:17 8
3000-3999 2.80 0:10:39 5
4000-4999 2.0 0:00:03 4
5000- 3.22 0:09:14 7

何とも言えないし、因果関係は逆で、page-viewが進めば(2番目のpage-viewから?)、cacheが効いて、読み込みが早くなる気がする。

なんとも言い難い。

などと考えていると、、、

サイト全体のセッション数が15、ページビューが32で、イベント発生数が16?

下の考えは間違い。ページビューのカウントが間違いぽい。原因は不明。イベントは、上書きされる事はなく、シンプルに送られた値が記録されていると考える方がいいみたい。よくわかってないので、こう考える方が自然。

ページを読み込む事にeventが発生してるはずなのだが、、、、

イベントのトラッキングは、セッション単位での計測になって、最後のページビューの数値しか残らない?

javascriptからはデータが送られているけど、Googleのデータ管理-レポートの段階で、ゴニョゴニョされてるよう。

セカンドディメンジョンに閲覧開始ページを出してみる(と言うことは、セッションでの管理という事???)

以下は、参考画像。

image

よくわからなくなった。

砂遊びって言葉が脳内に浮かんできた、、