Category:User experience -> UX strategy -> Implement -> Performance
Performance matters (Nicole Sullivan, An Event Apart, Boston 2010)
- Yahoo! tweaked pages for a 400ms page-load reduction resulted in 5-9% rise in page views.
- Shopzilla tweaked pages for a 3.5 second page-load reduction resulted in 7-12% higher conversion rate and 25% rise in page views.
- Google found that over time if you slow down your user experience, people will use your site less.
- Abandonment, searches, page views, and conversions are impacted by performance. Active users are most affected. Your users care about your performance, they may not be able to express it in words, but they express it in their behavior.
- Biggest fixes: File size and HTTP requests. CSS is one of the biggest factors in both of these.
- Things that are wrong with CSS and how we write it:
- Code is too fragile
- Requires expert ability just to begin
- Code reuse is almost non-existent
- File size keeps getting larger
- Understanding the CSS cascade:
- Browsers have different default stylesheets. They renders things differently. Invalid rules are skipped.
- The order of classes makes no difference. The order of properties does make sense. Same as the order of selector de?nitions. Same as the order of the stylesheets. Rules are inherited from parent tags.
- ID vs. Class: the ID will always win. Inline styles are stronger than almost anything in a stylesheet. Using !important is stronger than inline styles.
- Avoid ID, inline, and !important to allow cascade ordering to determine the winner.
- Three goals for stylesheet sanity:
- Reduce duplication
- Improve predictability
- Avoid CSS kudzu
- Avoid styling IDs, they also impact specificity and they cannot be reused.
- Avoid styling elements directly; style classes instead.
- Avoid !important whenever possible.
- Give rules the same strength.
- Using CSS sprites is a great way to reduce HTTP requests. You can analyze your user ?ows and anticipate the images to be used and preload those when possible.
- When defining vendor-specific CSS, put the non-prefixed version last so that when those vendors support things, the generic one trumps all.
Articles in category "User experience -> UX strategy -> Implement -> Performance":
There is 1 article for this category
