Making users happy is a goal that unifies everyone on the team. The key then is to establish metrics that reflect user happiness. In the world of performance, we haven’t always done a great job of this. Often, performance metrics track how our pages are built which might not be correlated with a joyous user experience, and we start optimizing our stack for the sake of optimizing our stack. Luckily, momentum is building around UX-centered metrics such as start render time, time-to-interact, and first meaningful paint. Steve Souders discusses these new metrics that help us build web apps that produce the fast, joyous experiences our users want.
An walk-through of several JavaScript loading techniques with a characteristics table for each and at the end a decision tree to help you decide which technique to use.
Also, Chrome's silly preload logic!
Making users happy is a goal that unifies everyone on the team. The key then is to establish metrics that reflect user happiness. In the world of performance, we haven’t always done a great job of this. Often, performance metrics track how our pages are built which might not be correlated with a joyous user experience, and we start optimizing our stack for the sake of optimizing our stack. Luckily, momentum is building around UX-centered metrics such as start render time, time-to-interact, and first meaningful paint. Steve Souders discusses these new metrics that help us build web apps that produce the fast, joyous experiences our users want.
An walk-through of several JavaScript loading techniques with a characteristics table for each and at the end a decision tree to help you decide which technique to use.
Also, Chrome's silly preload logic!
Web 2.0 ePortfolios that work for both students and educators: Strategies and...Hazel Owen
*NB: currently there is about 2 minutes of dead space at the beginning of the presentation. I hope to edit this out later.
To access the accompanying handout: http://www.scribd.com/full/20963840?access_key=key-tjhoooneoyc6p12igkx
Abstract:
The VET ePortfolio Roadmap was released in June 2009 to provide guidelines, specifications, and strategies for implementing ePortfolio initiatives. The Roadmap was published, in part, as a response to the increasing interest in the potential of ePortfolios to improve the Recognition of Prior Learning process, and expedite work-based learning, apprenticeships, and traineeships. Previous research studies into learners' use of ePortfolios endorse this response, suggesting that their levels of engagement, creativity, and feelings of empowerment are enhanced, thereby increasing retention and success. It all sounds extremely promising...but what does it actually 'look' like for students and educators? How are learners, practitioners and other stakeholders actually engaging with ePortfolios?
In this paper I have three main aims. The first is to provide some background by referring to an early initiative that was implemented between 2003 and 2006 with Foundation students at Dubai Men's College (DMC) where the students created a Career ePortfolio as part of an integrated Computer, Research Skills and Projects Course. The ePortfolios, however, were not interactive, were rather 'static', and the final artifact was primarily produced for assessment rather than self-reflection and development. Since this and similar early initiatives, the introduction of Web 2.0 social software elements to ePortfolios has helped realise additional benefits, including improved reflective practice, augmentation of the quality of final artifacts, and a heightened awareness of purpose and audience. As such, the second aim is to explore recent work with Web 2.0 ePortfolios with students and faculty at Unitec NZ (a multi-sector education institution in NZ), and some of the associated findings and implications. Finally, I will draw the threads together to discuss a number of key strategies and recommendations for the effective implementation of Web 2.0 ePortfolio initiatives, including targeted Professional Development for staff, and scaffolding and guidance to assist the students with self-reflection, collection and selection of evidence of achievements, while also fostering their personalised and creative life-long learning journeys.
Please cite as: Owen, H. (2009, October 16). Web 2.0 ePortfolios that work for both students and educators: Strategies and recommendations. Paper presented at the VET E-portfolios Showcase 09 - learning for life.
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Patrick Meenan
The amount of 3rd-party content included on websites is exploding (social sharing buttons, user tracking, advertising, code libraries, etc). Learn tips and techniques for how best to integrate them into your sites without risking a slower user experience or even your sites becoming unavailable.
Video is available here: http://www.youtube.com/watch?v=JB4ulhFFdH4&feature=plcp
Stefan Judis "HTTP headers for the responsible developer"Fwdays
To build inclusive websites, developers have to consider accessibility, performance and user flows. Crafted source code forms the foundation for thought-through UIs, but it’s not only about the code. Let’s have a look at HTTP, and to be specific, its headers that can have a direct impact on user experience.
SEO Tools of the Trade - Barcelona Affiliate Conference 2014Bastian Grimm
My talk at #BAC14 covering a massive set of 60+ tools for each and every aspect in and around SEO including crawling, auditing, link-building, competetive research and more!
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!"
While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.
How I learned to stop worrying and love the .htaccess fileRoxana Stingu
An introduction to .htaccess and what this file can do to help with SEO.
Redirects:
- Mod_alias and mod_rewrite
- Most common redirect types (domain migrations, subdomain to folder and folder renaming and how to deal with duplicate content).
Indexing & Crawling:
- Set HTTP headers for canonicals and meta robots for non-HTML files.
Website speed:
- Gzip and Deflate
- Cache control
This is Steve Souders's talk at Amazon which I couldn't read in it's original pptx format (http://stevesouders.com/docs/amazon-20091030.pptx) since Keynote sucks at importing. It seems to render well here.
Web 2.0 ePortfolios that work for both students and educators: Strategies and...Hazel Owen
*NB: currently there is about 2 minutes of dead space at the beginning of the presentation. I hope to edit this out later.
To access the accompanying handout: http://www.scribd.com/full/20963840?access_key=key-tjhoooneoyc6p12igkx
Abstract:
The VET ePortfolio Roadmap was released in June 2009 to provide guidelines, specifications, and strategies for implementing ePortfolio initiatives. The Roadmap was published, in part, as a response to the increasing interest in the potential of ePortfolios to improve the Recognition of Prior Learning process, and expedite work-based learning, apprenticeships, and traineeships. Previous research studies into learners' use of ePortfolios endorse this response, suggesting that their levels of engagement, creativity, and feelings of empowerment are enhanced, thereby increasing retention and success. It all sounds extremely promising...but what does it actually 'look' like for students and educators? How are learners, practitioners and other stakeholders actually engaging with ePortfolios?
In this paper I have three main aims. The first is to provide some background by referring to an early initiative that was implemented between 2003 and 2006 with Foundation students at Dubai Men's College (DMC) where the students created a Career ePortfolio as part of an integrated Computer, Research Skills and Projects Course. The ePortfolios, however, were not interactive, were rather 'static', and the final artifact was primarily produced for assessment rather than self-reflection and development. Since this and similar early initiatives, the introduction of Web 2.0 social software elements to ePortfolios has helped realise additional benefits, including improved reflective practice, augmentation of the quality of final artifacts, and a heightened awareness of purpose and audience. As such, the second aim is to explore recent work with Web 2.0 ePortfolios with students and faculty at Unitec NZ (a multi-sector education institution in NZ), and some of the associated findings and implications. Finally, I will draw the threads together to discuss a number of key strategies and recommendations for the effective implementation of Web 2.0 ePortfolio initiatives, including targeted Professional Development for staff, and scaffolding and guidance to assist the students with self-reflection, collection and selection of evidence of achievements, while also fostering their personalised and creative life-long learning journeys.
Please cite as: Owen, H. (2009, October 16). Web 2.0 ePortfolios that work for both students and educators: Strategies and recommendations. Paper presented at the VET E-portfolios Showcase 09 - learning for life.
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Patrick Meenan
The amount of 3rd-party content included on websites is exploding (social sharing buttons, user tracking, advertising, code libraries, etc). Learn tips and techniques for how best to integrate them into your sites without risking a slower user experience or even your sites becoming unavailable.
Video is available here: http://www.youtube.com/watch?v=JB4ulhFFdH4&feature=plcp
Stefan Judis "HTTP headers for the responsible developer"Fwdays
To build inclusive websites, developers have to consider accessibility, performance and user flows. Crafted source code forms the foundation for thought-through UIs, but it’s not only about the code. Let’s have a look at HTTP, and to be specific, its headers that can have a direct impact on user experience.
SEO Tools of the Trade - Barcelona Affiliate Conference 2014Bastian Grimm
My talk at #BAC14 covering a massive set of 60+ tools for each and every aspect in and around SEO including crawling, auditing, link-building, competetive research and more!
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!"
While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.
How I learned to stop worrying and love the .htaccess fileRoxana Stingu
An introduction to .htaccess and what this file can do to help with SEO.
Redirects:
- Mod_alias and mod_rewrite
- Most common redirect types (domain migrations, subdomain to folder and folder renaming and how to deal with duplicate content).
Indexing & Crawling:
- Set HTTP headers for canonicals and meta robots for non-HTML files.
Website speed:
- Gzip and Deflate
- Cache control
This is Steve Souders's talk at Amazon which I couldn't read in it's original pptx format (http://stevesouders.com/docs/amazon-20091030.pptx) since Keynote sucks at importing. It seems to render well here.
How many photo carousels have you built? Date pickers? Dynamic tables and charts? Wouldn't it be great if there was a way to make these custom elements encapsulated and reusable? Welcome to Web Components! The building blocks are well known: HTML templates, custom elements, HTML imports, and shadow DOM. It's fairly easy to build simple examples. But what happens when performance degrades? Join this discussion of the synchronous and asynchronous nature of web components, and how they can impact the rendering of the entire page.
PrettyFaces: SEO, Dynamic, Parameters, Bookmarks, Navigation for JSF / JSF2 (...Lincoln III
PrettyFaces: SEO, Dynamic Parameters, Bookmarks, and Navigation for JSF / JSF2 - As presented at JSFSummit2009 in Orlando Florida.
Why should we use PrettyFaces?
JBUG 11 - Django-The Web Framework For Perfectionists With DeadlinesTikal Knowledge
Django is a Python Web Framework gaining popularity among developers all over the world, due to its power & simplicity. In this session we will describe what makes the framework so attractive, and why you should consider it for your next Web application.
Presentation & Featured Video in Full Version.
Front End Development for Back End Java Developers - Jfokus 2020Matt Raible
Are you a backend Java developer that's being pushed into front-end development? Are you frustrated with all the JavaScript frameworks and build tools you have to learn to be a good UI developer? If so, this session is for you! We'll explore the landscape of UI development, including web standards, frameworks, and what’s on the horizon (e.g., micro frontends).
A presentation for Dundee University's Hack Day explaining the technologies to use and how to hack your own APIs by using Yahoo! Pipes and scraping RSS feeds.
1. Web Performance Optimization WPO stevesouders.com/docs/web20expo-20100505.pptx slideshare.net/souders/souders-wpo-web20expo Disclaimer: This content does not necessarily reflect the opinions of my employer. flickr.com/photos/mubashir/2616724942/
10. Site speed in search rank Screen shot of blog post …we've decided to take site speed into account in our search rankings. googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
52. top 10 WPO predictions 10. fast-by-default 9. visibility into the browser 8. consolidation 7. TCP, HTTP 6. standards 5. industry organizations 4. data 3. green 2. mobile 1. speed’s a differentiator flickr.com/photos/eole/380316678/
53. P3PC Performance of 3rd Party Content Ads Widgets Analytics flickr.com/photos/ntr23/729463293/
56. document.getElementsByTagName('head‘)[0] .appendChild(domscript); document.documentElement.firstChild .appendChild(ga); s = document.getElementsByTagName ('script')[0]; s.parentNode.insertBefore(ga, s); flickr.com/photos/amodiovalerioverde/425333516/ appendChild or insertBefore? - Souders (May 2008) - Google Analytics (Dec 2009) - Google Analytics (Feb 2010)
57. if (q.insertBefore) { var s = _get(q.insertBefore, id); if (s) { s.parentNode.insertBefore(n, s); } } else { h.appendChild(n); } - YUI Loader 2.6.0 (2008) flickr.com/photos/amodiovalerioverde/425333516/ appendChild or insertBefore?
58. b = this.getHardpoint(); f = document.createElement('script'); f.src = g; f.type = 'text/javascript'; f.async = true; b.appendChild(f); getHardpoint: function() { var c, b = document.getElementsByTagName('head'); if (b.length) { c = b[0]; } else c = document.body; this._hardpoint = c; } - Facebook (April 18, 2010) flickr.com/photos/amodiovalerioverde/425333516/ appendChild or insertBefore?
59. head = document.getElementsByTagName ("head")[0] || document.documentElement; // Use insertBefore instead of appendChild to circumvent an IE6 bug. // This arises when a base node is used (#2709 and #4378). head.insertBefore(script, head.firstChild); - jQuery flickr.com/photos/amodiovalerioverde/425333516/ appendChild or insertBefore?
60. var f=document.getElementsByTagName("script"); var b=f[f.length-1]; // b is last script tag if(b==null){ return; } vari=document.createElement("script"); i.language="javascript"; // i is a script element i.setAttribute("type","text/javascript"); var j=""; // j is a string j+="document.write('<scr'+'ipt language=quot;javascriptquot; src=quot;"+c+"quot;></scr'+'ipt>');"; var g=document.createTextNode(j); // not used b.parentNode.insertBefore(i,b); appendChild(i,j); function appendChild(a,b){ if(null==a.canHaveChildren||a.canHaveChildren){ a.appendChild(document.createTextNode(b)); } else{ a.text=b;} } - Collective Media flickr.com/photos/amodiovalerioverde/425333516/ appendChild or insertBefore?
61. “Frag Tag” Alex Russell snippet <FRAG> <script src=“snippet.js”></script> </FRAG> doesn’t block rendering asyncdocument.write JavaScript sandboxing just a twinkle in my eye frag tag flickr.com/photos/bestrated1/2141687384/
62. browser wishlist stevesouders.com/blog/2010/02/15/browser-performance-wishlist/ Frag tag SPDY non-blocking scripts SCRIPT attributes resource packages border-radius cache redirects link prefetch Web Timing spec remote JS debugging web sockets History progressive XHR anchor ping stylesheet, inline js inline script defer @import @font-face stylesheets,iframes paint events missing schema flickr.com/photos/eole/380316678/
76. Both combine scripts combine stylesheets add an Expires header gzip responses put stylesheets at the top put scripts at the bottom avoid CSS expressions make JS and CSS external reduce DNS lookups minify JS and CSS avoid redirects remove duplicate scripts make Ajax cacheable reduce cookie size use cookie-free domains don't scale images YSlow use CSS sprites use a CDN configure ETags use GET for Ajax requests reduce # of DOM elements no 404s avoid image filters optimize favicon Page Speed defer loading JS remove unused CSS use efficient CSS selectors optimize images optimize order of CSS & JS shard domains leverage proxy caching
77.
78.
79. speed matters a lot is coming in WPO guard against 3rd party content stevesouders.com/cache.php takeaways flickr.com/photos/34771728@N00/361526991/
80. Steve Souders @souders, souders@google.com stevesouders.com/docs/web20expo-20100505.pptx flickr.com/photos/nj_dodge/187190601/
Fred Wilson is Managing Partner of two venture capital firms, Flatiron Partners (Yoyodyne, Geocities) and Union Square Ventures (Twitter, delicious,Etsy, Feedburner).SpeedInstant utilitySoftware is mediaLess is moreMake it programmableMake it personalRESTfulDiscoverabilityCleanPlayful
“if we’re able to achieve a similar performance boost across ourothertoplanding pages, we’ll drive in excess of 60 million yearly Firefox downloads.”
This was a ~5 second speed up.
Time measurements from real users.
coops – similar to anti-spam coop, imagine Google Ajax Libraries API also supported on AWS,
