Movatterモバイル変換


[0]ホーム

URL:


Koji Ishimoto, profile picture
Uploaded byKoji Ishimoto
3,648 views

Long Life Web Performance Optimization

Embed presentation

Downloaded 16 times
心理学から考えるWebパフォーマンスLong LifeWeb Performance OptimizationKoji IshimotoWeb DesignerSeptember 25, 2010dotcoder session 4October 16, 2010WCAF Vol.4
Machine機械は変わるHuman人間は変わらないNews最近のパフォーマンス事情PracticeプラクティスConclusionまとめ
Web Performance is Dead?
Web Performance NewsW3C Web Performance WGAPI for Measuring PerformanceBoomerang.jsBeyond Design
Web Performance NewsW3C Web Performance WGAPI for Measuring PerformanceBoomerang.jsBeyond Design
Navigation TimingResource TimingUser TimingWeb Performance NewsW3C Web Performance WGAPI for Measuring PerformanceBoomerang.jsBeyond Design
PhilipTellis at Yahoo!Web Performance NewsW3C Web Performance WGAPI for Measuring PerformanceBoomerang.jsBeyond Design
PhilipTellis at Yahoo!<head><script type=”text/javascript”>var start = (new Date).getTime();</script></head><body><script type=”text/javascript”>var pageLoad = (new Date).getTime() - start;</script></body>Web Performance NewsW3C Web Performance WGAPI for Measuring PerformanceBoomerang.jsBeyond Design
PhilipTellis at Yahoo!<script src="boomerang.js"></script><script type="text/javascript">BOOMR.init({user_ip: "<user's ip address>",beacon_url: "/path/to/beacon.php"});</script>Web Performance NewsW3C Web Performance WGAPI for Measuring PerformanceBoomerang.jsBeyond Design
Web Performance NewsW3C Web Performance WGAPI for Measuring PerformanceBoomerang.jsBeyond Design
“ Speed is the most important feature.If your application is slow, people won’tuse it. I see this more with mainstreamusers than I do with power users. ”Fred Wilson (Union SquareVentures)
WPO常に最重要課題である
The Machine Improve
Moore’s Law
イメージマップCSSスプライトインライン画像スクリプトおよびスタイルシートの結合HTTPリクエストを減らす
Reducing HTTP RequestsCSS 3Application CacheResource PackageSPDYiPhone4をCSS3で描いてみた! - Re:DzineIE8 Safari
Web Metrics: Number of Resourcesby Googleother4.21Styleshhets3.22Scripts7.09Images29.39
Reducing HTTP RequestsCSS 3Application CacheResource PackageSPDY
<!DOCTYPE HTML><html manifest="cache.manifest">cache.manifest-----------------------------------CACHE MANIFESThelp.htmlstyle/default.cssimages/logo.png-----------------------------------Reducing HTTP RequestsCSS 3Application CacheResource PackageSPDY
Reducing HTTP RequestsCSS 3Application CacheResource PackageSPDY
<link rel="resource-package"type="application/zip"href="site-resources.zip" />manifest.txt-----------------------------------javascript/jquery.jsstyles/reset.cssstyles/main.cssimages/save.pngimages/info.png-----------------------------------Reducing HTTP RequestsCSS 3Application CacheResource PackageSPDY
SPDY:An experimental protocolfor a faster webReducing HTTP RequestsCSS 3Application CacheResource PackageSPDY
SPDY:An experimental protocolfor a faster web多重化ストリームリクエストの優先付けHTTPヘッダー圧縮Reducing HTTP RequestsCSS 3Application CacheResource PackageSPDY
( ・ω・`)...常に走り続けなければならない
The Human Doesn’t Change
>>>
Perception認知・知覚・感受・体感
チェッカーシャドウ錯視
チェッカーシャドウ錯視#6B6B6B
エビングハウス錯視
エビングハウス錯視
20 year old are in reality3:0360 year old are in reality3:40Perceived 3 minutesWhy time flies in old age - New Scientist
年齢地理的条件文化・気候体温Time Perception
About.com, rated slowest by our users,was actually the fastest site (average: 8 seconds).Amazon.com, rated as one of the fastest sites by users,was really the slowest (average: 36 seconds).The Truth About Download Time
Speedスピードは重要じゃない!?
1934年 フィウメで生まれる1956年 アメリカ合衆国に渡る1970年 シカゴ大学心理学科教授1999年 シカゴ大学を定年退職クレアモント大学院大学教授に就任Mihaly Csikszentmihalyi
flow
1つの活動に深く没入しているので他の何ものも問題とならなくなる状態注意が自由に個人の目標達成のために投射されている状態What is “FLOW”?
明確な目的専念と集中活動と意識の融合時間感覚のゆがみ直接的で即座な反応能力の水準と難易度とのバランス自分で制御している感覚活動に本質的な価値があるComponents of Flow
明確な目的専念と集中活動と意識の融合時間感覚のゆがみ直接的で即座な反応能力の水準と難易度とのバランス自分で制御している感覚活動に本質的な価値があるComponents of Flow
( ・ω・`)...人間は曖昧である
Practice
Interface
DesigningWebInterfaces直接的で即座な反応自分で制御している感覚
Feedbackフィードバック
Feedback PatternLive PreviewProgressive RenderingProgress IndicationTWITTERPASSWORDCONFIGURATION
Feedback PatternLive PreviewProgressive RenderingProgress Indication
Visual Header - Fast to computeResults - Slower to compute
Visual Header - Fast to computeResults - Slower to computeTime to Click ~9% fasterQuery refinement +2.2%Clicks overall! +0.7%Pagination! +2.3%Satisfaction! +0.7%
Feedback PatternLive PreviewProgressive RenderingProgress Indication
Clear navigationMatch challenge to skillsSimplicityImportanceDesign for fun and utilityAvoid cutting-edge technologyMinimize animationFlowinWebDesign
Conclusion
Browserブラウザは進化し続けている
Psychology知覚や認知についても考える
Long Life Web Performance Optimization
Thank you!http://t32k.com/molhttp://twitter.com/t32k
http://standards.mitsue.co.jp/archives/001473.htmlhttp://yahoo.github.com/boomerang/doc/http://www.google.com/intl/ja/events/io/2010/sessions/beyond-design-user-experience.htmlhttp://ja.wikipedia.org/wiki/ムーアの法則http://code.google.com/intl/ja/speed/articles/web-metrics.htmlhttp://hacks.mozilla.org/2009/11/a-proposal-resource-packages-to-improve-performance/http://www.chromium.org/spdyhttp://ja.wikipedia.org/wiki/チェッカーシャドウ錯視http://ja.wikipedia.org/wiki/エビングハウス錯視http://www.newscientist.com/article/mg15220571.700-why-time-flies-in-old-age.htmlhttp://www.uie.com/articles/download_time/http://ja.wikipedia.org/wiki/フローhttp://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.htmlURLs
http://www.flickr.com/photos/uxud/3838080583/http://www.flickr.com/photos/kretyen/2526860812/http://en.wikipedia.org/wiki/File:PPTMooresLawai.jpghttp://www.flickr.com/photos/titlap/3787618739/http://www.flickr.com/photos/thepaperboy/4436923663/http://www.flickr.com/photos/shiyazuni/3406692752/http://www.flickr.com/photos/helleum/4350240392/http://www.flickr.com/photos/mariachily/3382807043/http://www.klett-cotta.de/uploads/tx_autoren/Csik_schreibtisch.jpghttp://www.flickr.com/photos/ficken/2181846165/http://www.flickr.com/photos/nikio/3899114449/http://www.flickr.com/photos/the_tahoe_guy/4183278431/http://www.flickr.com/photos/uxud/4235288699/http://www.flickr.com/photos/prettypetal/4306983458/Credits

Recommended

PDF
ウェブアプリケーションのパフォーマンスチューニング
PDF
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
PDF
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
PPTX
EC2でNginxを使ってみよう JAWS大阪第9回勉強会資料
PDF
Application development with c#, .net 6, blazor web assembly, asp.net web api...
PPTX
第2回勉強会資料 岩本(配布用)
PDF
Build insider testingwithvs
PDF
WebAssemblyが切り拓くフロントエンドWeb開発の未来
PDF
モバイル制作におけるパフォーマンス最適化について
PDF
Service worker が拓く mobile web の新しいかたち
PPTX
Web Intents入門
PDF
ASP.NETの進化とASP.NET Core Blazorの凄さ
PDF
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
PPTX
Myfirst cloudfoundry intro_20161201
PPTX
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
PPTX
ノンプログラミングで API はじめて体験!_築山 春木氏
PPTX
CircleCIコミュニティミートアップLT資料
PDF
松本克彦 ピグにおけるリアルタイムランキングの導入
PDF
スマートフォンWebアプリ最適化”3つの極意”
KEY
Keynote 20120316
PDF
【LED】勉強会①「フロントエンドパフォーマンス向上ルール」
 
PDF
Aqua ion press_tech_20121116_publish
PDF
コンバージョン心理学によるウェブ・デザイン
PDF
Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)
PDF
中堅Webクリエイティブ職のキャリアを考える(序章)
PDF
サイトオーナーが片手間で実践できる効果測定と改善メソッド
PDF
WordBench Saitama vol.6
PPT
2013/2/15 gooya社内ディスカッション「早いサイト」石川チーム資料
 
PDF
Web Site Optimization for Beginners
PDF
WordCamp Yokohama 2010 Komori

More Related Content

PDF
ウェブアプリケーションのパフォーマンスチューニング
PDF
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
PDF
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
PPTX
EC2でNginxを使ってみよう JAWS大阪第9回勉強会資料
PDF
Application development with c#, .net 6, blazor web assembly, asp.net web api...
PPTX
第2回勉強会資料 岩本(配布用)
PDF
Build insider testingwithvs
PDF
WebAssemblyが切り拓くフロントエンドWeb開発の未来
ウェブアプリケーションのパフォーマンスチューニング
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
EC2でNginxを使ってみよう JAWS大阪第9回勉強会資料
Application development with c#, .net 6, blazor web assembly, asp.net web api...
第2回勉強会資料 岩本(配布用)
Build insider testingwithvs
WebAssemblyが切り拓くフロントエンドWeb開発の未来

What's hot

PDF
モバイル制作におけるパフォーマンス最適化について
PDF
Service worker が拓く mobile web の新しいかたち
PPTX
Web Intents入門
PDF
ASP.NETの進化とASP.NET Core Blazorの凄さ
PDF
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
PPTX
Myfirst cloudfoundry intro_20161201
PPTX
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
PPTX
ノンプログラミングで API はじめて体験!_築山 春木氏
PPTX
CircleCIコミュニティミートアップLT資料
PDF
松本克彦 ピグにおけるリアルタイムランキングの導入
モバイル制作におけるパフォーマンス最適化について
Service worker が拓く mobile web の新しいかたち
Web Intents入門
ASP.NETの進化とASP.NET Core Blazorの凄さ
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Myfirst cloudfoundry intro_20161201
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
ノンプログラミングで API はじめて体験!_築山 春木氏
CircleCIコミュニティミートアップLT資料
松本克彦 ピグにおけるリアルタイムランキングの導入

Similar to Long Life Web Performance Optimization

PDF
スマートフォンWebアプリ最適化”3つの極意”
KEY
Keynote 20120316
PDF
【LED】勉強会①「フロントエンドパフォーマンス向上ルール」
 
PDF
Aqua ion press_tech_20121116_publish
PDF
コンバージョン心理学によるウェブ・デザイン
PDF
Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)
PDF
中堅Webクリエイティブ職のキャリアを考える(序章)
PDF
サイトオーナーが片手間で実践できる効果測定と改善メソッド
PDF
WordBench Saitama vol.6
PPT
2013/2/15 gooya社内ディスカッション「早いサイト」石川チーム資料
 
PDF
Web Site Optimization for Beginners
PDF
WordCamp Yokohama 2010 Komori
PDF
Cloudflareを活用したWebパフォーマンスチューニング
PDF
企業のビジネス戦略を体系化するWebサイト設計とは
PDF
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
PDF
IAチャンネル:nissenのIA最適化事例その1
PDF
いまさら聞けない!ホームページの立ち上げから運用体制構築
PDF
思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)
PDF
【発表用】Lpoワークショップ~組織でサイト改善をする方法~
PDF
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
スマートフォンWebアプリ最適化”3つの極意”
Keynote 20120316
【LED】勉強会①「フロントエンドパフォーマンス向上ルール」
 
Aqua ion press_tech_20121116_publish
コンバージョン心理学によるウェブ・デザイン
Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)
中堅Webクリエイティブ職のキャリアを考える(序章)
サイトオーナーが片手間で実践できる効果測定と改善メソッド
WordBench Saitama vol.6
2013/2/15 gooya社内ディスカッション「早いサイト」石川チーム資料
 
Web Site Optimization for Beginners
WordCamp Yokohama 2010 Komori
Cloudflareを活用したWebパフォーマンスチューニング
企業のビジネス戦略を体系化するWebサイト設計とは
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
IAチャンネル:nissenのIA最適化事例その1
いまさら聞けない!ホームページの立ち上げから運用体制構築
思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)
【発表用】Lpoワークショップ~組織でサイト改善をする方法~
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」

More from Koji Ishimoto

PDF
マイクロインタラクション事始め以前
PDF
JavaScript/CSS 2015 Autumn
PDF
Evaluating your stylesheets
PDF
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
PDF
WebデザイナーのためのSass/Compass入門
PDF
パフォーマンスから考えるSass/Compassの導入・運用
PDF
TumblrTouch
PDF
大規模サイトにおけるGoogleアナリティクス導入から成果まで
PDF
tissa for iOS
PDF
Using Google Analytics with jQuery Mobile
KEY
mobile first
KEY
Communities of Practice – kanazawa.js結成までの軌跡 -
PDF
Coding Web Performance
PDF
ビジネスにおけるウェブパフォーマンス
PDF
High Performance Web Design
PDF
Webスライスから始めるmicroformats
マイクロインタラクション事始め以前
JavaScript/CSS 2015 Autumn
Evaluating your stylesheets
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
WebデザイナーのためのSass/Compass入門
パフォーマンスから考えるSass/Compassの導入・運用
TumblrTouch
大規模サイトにおけるGoogleアナリティクス導入から成果まで
tissa for iOS
Using Google Analytics with jQuery Mobile
mobile first
Communities of Practice – kanazawa.js結成までの軌跡 -
Coding Web Performance
ビジネスにおけるウェブパフォーマンス
High Performance Web Design
Webスライスから始めるmicroformats

Long Life Web Performance Optimization


[8]ページ先頭

©2009-2025 Movatter.jp