Very High
Performance
Websites
The Next Competitive Advantage*



                                  Slide
Me




_Software Developer at SinnerSchrader
_JavaScript Victim Extraordinair
_http://nonblocking.io
_@cramforce
         ...
Faster,
more responsive
Websites
perform
significantly
better            Slide 3
Higher
Conversion   Slide 4
Longer,
Yes Longer
Duration on Site   Slide 5
More Page
Impressions   Slide 6
Load time now
a≠ects
Search Ranking


                 Slide 7
Go watch
http://www.youtube.com/watch?v=nCgQDjiotG0
Proof
500 ms slower
20% drop in
tra∞c

                Slide 10
100 ms slower
1% drop in
sales

                Slide 11
1000 ms faster
Download Page
2,7% better
conversion
                 Slide 12
5000 ms faster
12% better
conversion

                 Slide 13
Potential
8300 ms load
time
6000 ms time
wasted
               Slide 15
2900 ms load
time
2200 ms time
wasted
               Slide 16
What‘s a girl to do?
Win the War
in the Frontend   Slide 19
Backend
          Frontend



                Slide 20
Now Some Very
Easy Rules      Slide 21
Make fewer HTTP requests
Use a Content Delivery Network (CDN)
Add Expires headers
Compress components with gzip
Put CSS at...
If it is so Great,
why doesn‘t Everybody do it?
Because it is
HARD



                Slide 24
Slide 25
Web
Development
Finally is
Hard again    Slide 26
Hard =
Hard to Copy   Slide 27
Hard to Copy =
Potential USP    Slide 28
You can build a
better Website
than your
Competitor!       Slide 29
Cost
Revenue




          Slower   Faster
                       Slide 30
Not everything is a pareto distribution




20% of the
possible
optimizations
get you 50% of
the way                      ...
Take Aways
Performance is hard,
hire the right People!
                     Slide 33
3 Quick Wins to ask
your „Webmaster“




                      Slide 34
1. Do we do Domain-
Sharding?
2. Do we load all
JavaScript at the bottom
of the page?
3. Do we minimize the
JavaScript?   ...
Faster Websites =
_ More PIs
_ Higher Conversion
_ Better SEO
_ Better Karma
                  Slide 36
Steve Souders
http://stevesouders.com/


Fast by Default
http://www.slideshare.net/hashc0de/fast-by-default-2400000




St...
More Sources
http://en.oreilly.com/velocity2009/public/schedule/detail/7709


http://blog.mozilla.com/metrics/2010/03/31/f...
Thank You for
Listening!

http://nonblocking.io
@cramforce
Business Aspects of High Performance Websites
Upcoming SlideShare
Loading in...5
×

Business Aspects of High Performance Websites

7,188

Published on

Published in: Technology
1 Comment
24 Likes
Statistics
Notes
  • webdev, performance
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
7,188
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
226
Comments
1
Likes
24
Embeds 0
No embeds

No notes for slide

Business Aspects of High Performance Websites

  1. 1. Very High Performance Websites The Next Competitive Advantage* Slide
  2. 2. Me _Software Developer at SinnerSchrader _JavaScript Victim Extraordinair _http://nonblocking.io _@cramforce Slide 2
  3. 3. Faster, more responsive Websites perform significantly better Slide 3
  4. 4. Higher Conversion Slide 4
  5. 5. Longer, Yes Longer Duration on Site Slide 5
  6. 6. More Page Impressions Slide 6
  7. 7. Load time now a≠ects Search Ranking Slide 7
  8. 8. Go watch http://www.youtube.com/watch?v=nCgQDjiotG0
  9. 9. Proof
  10. 10. 500 ms slower 20% drop in tra∞c Slide 10
  11. 11. 100 ms slower 1% drop in sales Slide 11
  12. 12. 1000 ms faster Download Page 2,7% better conversion Slide 12
  13. 13. 5000 ms faster 12% better conversion Slide 13
  14. 14. Potential
  15. 15. 8300 ms load time 6000 ms time wasted Slide 15
  16. 16. 2900 ms load time 2200 ms time wasted Slide 16
  17. 17. What‘s a girl to do?
  18. 18. Win the War in the Frontend Slide 19
  19. 19. Backend Frontend Slide 20
  20. 20. Now Some Very Easy Rules Slide 21
  21. 21. Make fewer HTTP requests Use a Content Delivery Network (CDN) Add Expires headers Compress components with gzip Put CSS at top Put JavaScript at bottom Avoid CSS expressions Make JavaScript and CSS external Reduce DNS lookups Minify JavaScript and CSS Avoid URL redirects Remove duplicate JavaScript and CSS Configure entity tags (ETags) Make AJAX cacheable Use GET for AJAX requests Reduce the number of DOM elements Avoid HTTP 404 (Not Found) error Reduce cookie size Use cookie-free domains Avoid AlphaImageLoader filter Do not scale images in HTML Make favicon small and cacheable Slide 22
  22. 22. If it is so Great, why doesn‘t Everybody do it?
  23. 23. Because it is HARD Slide 24
  24. 24. Slide 25
  25. 25. Web Development Finally is Hard again Slide 26
  26. 26. Hard = Hard to Copy Slide 27
  27. 27. Hard to Copy = Potential USP Slide 28
  28. 28. You can build a better Website than your Competitor! Slide 29
  29. 29. Cost Revenue Slower Faster Slide 30
  30. 30. Not everything is a pareto distribution 20% of the possible optimizations get you 50% of the way Slide 31
  31. 31. Take Aways
  32. 32. Performance is hard, hire the right People! Slide 33
  33. 33. 3 Quick Wins to ask your „Webmaster“ Slide 34
  34. 34. 1. Do we do Domain- Sharding? 2. Do we load all JavaScript at the bottom of the page? 3. Do we minimize the JavaScript? Slide 35
  35. 35. Faster Websites = _ More PIs _ Higher Conversion _ Better SEO _ Better Karma Slide 36
  36. 36. Steve Souders http://stevesouders.com/ Fast by Default http://www.slideshare.net/hashc0de/fast-by-default-2400000 Stoyan Stefanov http://www.phpied.com/ High Performance Web Pages - 20 new best practices http://www.slideshare.net/stoyan/high-performance-web-pages-20-new-best-practices Don‘t make me wait http://www.slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications The Performance Business Pitch http://www.phpied.com/the-performance-business-pitch/ Nicole Sullivan http://www.stubbornella.org Designing fast Websites http://www.slideshare.net/stubbornella/designing-fast-websites-presentation Slide 37
  37. 37. More Sources http://en.oreilly.com/velocity2009/public/schedule/detail/7709 http://blog.mozilla.com/metrics/2010/03/31/firefox-page-load-speed-part-i/ http://en.oreilly.com/velocity2009/public/schedule/detail/7579 http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in- web-search-ranking.html Slide 38
  38. 38. Thank You for Listening! http://nonblocking.io @cramforce
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×