High Performance Websites

713 views

Published on

Co-authored and co-presented with Alla Gringaus and Dan Mendelsohn, basically the most important parts of Steve Souders' work.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
713
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

High Performance Websites

  1. 1. High Performance WebsitesAlla GringausDaniel MendelsohnAaron GroggTime Inc. InteractiveFront-end Web Development Team.Lunch & Learn.02.12.2008
  2. 2. In the blink of an eye… You only have one chance to make a first impression. "In the blink of an eye" your site (blog or website) is judged. With so many sites and blogs to choose from, a site that loads at a snails pace or is hard to navigate will send frustrated potential visitors on to their next destination. Good design, effective usability and speedy site performance are three very important considerations for building and keeping an audience. They add to your credibility and help build your audience’s trust, which is the only way to achieve user loyalty.
  3. 3. How much information is out there? How large is the Web? Tens of billions of documents? Hundreds? 10KB/doc => 100s of Terabytes Email, personal files, databases, broadcast media, archives Estimated 5 Exabyte/year (growing at 30%) 800MB/Year/Person – 90% in magnetic media Web is just a tiny starting point Google is working on how to organize all this information
  4. 4. Innovation in wireless products is accelerating Apple iPhone, 3 Skype Phone, Amazon Kindle, Google ‘GPhone’… 91% of mobile users keep phone within 1 met reach 24x7 15-20% of mobiles have GPS, 50% within 5 years Watch for new generation of Internet leaders to capitalize on growing access to fast Internet access on mobiles
  5. 5. Broadband Statistics
  6. 6. Broadband StatisticsIn high traffic site, if pages are optimized forlower weight, the company can save a lot ofmoney on bandwidth charges. And why shouldFor example, 100,000 pages of 150Kb weight will I care?need twice the bandwidth as the same number ofpages at 75Kb. So, if the ISP, charges by the amount of bandwidth we use, that’s how reducing page weight can save the company big time on monthly bandwidth charges.
  7. 7. Impatience Index There are still a large number of outdated computers and slower speed connection than advanced reliable computers and fast connection. Connection Speed 20kb Page Weight 40kb Page Weight 100kb Page Weight 128 kbps (DSL) 1 second 2 seconds 6 seconds 256 kbps (DSL) < 1 second 1 second 3 seconds Time to Download a Page Percent of users who wait for download 10 seconds download 84% 15 seconds download 51% 20 seconds download 26% 30 seconds download 5% Poor website performance can be costly in many ways: downtime, slow response times, increased bailout rates ($$$$$!!!). Page weight has a direct correlation to the download times of your landing page and every other page within your site.
  8. 8. Benefits of Maximizing Performance• Better User Experience • Improved Visitor Retention Rate• Conversion Rate • Increased Visibility• PageRank • Increased Positive Responses• Search Engine Placement • Increased Brand Awareness• Reduced Development Cost • Increased Traffic• Reduced Maintenance Cost • Improved Ad Sales• Lower Bandwidth Charges • Increased Revenues
  9. 9. How the web works in 5 minutes, hold on tight...
  10. 10. DNS
  11. 11. DNS152.255.255.37
  12. 12. DNS HTML
  13. 13. HTML
  14. 14. DNS HTML CSS
  15. 15. CSS
  16. 16. DNS HTML CSS JS
  17. 17. JS
  18. 18. DNS HTML CSS JS IMAGES
  19. 19. IMAGES
  20. 20. DNS HTML IMAGES CSS JSIMAGES JS JS DNS IMAGES
  21. 21. Optimization Strategies Reduce Latency Time HTTP Requests Server-Side Optimization (Expired Headers, E-tags) Reduce Download Time K-Size of page objects (HTML, JS, CSS, Images) Improve Page Rendering Load order Code execution UI and Design Elements Page Architecture (Hidden Content, Image-based headers Less Images-involved Design, more use of CSS
  22. 22. Optimization Strategies Latency time is reduced by making as few Reduce Latency Time requests for objects as possible: HTTP Requests For code, this means consolidating JavaScript Server-Side Optimization and CSS files into global, site, and page- (Expired Header, E-tags) specific libraries. For design, it means combining graphics, and Reduce Download Time using less of them. K-Size of page objects (HTML, JS, CSS, Images) On the server, putting cache controls on objects can greatly improve the user’s return Improve Page Rendering experience. Load order Code execution UI and Design Elements Page Architecture (Hidden Content, Image- based headers Less Images-involved Design, more use of CSS
  23. 23. Optimization Strategies HTML redirect HTML
  24. 24. Optimization Strategies the slash of DOOM http://www.ew.com/ew/tv http://www.ew.com/ew/tv/
  25. 25. Optimization Strategies Effective Caching Expires Cache Controls Etags
  26. 26. Optimization Strategies HTTP Response Headers Server: Apache Last-Modified: Thu, 18 Jan 2007 12:35:23 GMT Accept-Ranges: bytes Content-Length: 627 Content-Type: application/x-javascript Date: Tue, 12 Feb 2008 14:42:13 GMT Connection: keep-alive Etag: "9cd9a-273-45af698b" Cache-Control: max-age=315360000 Expires: Thu, 12 Feb 2009 20:00:00 GMT
  27. 27. Optimization Strategies Reduce Latency Time HTTP Requests Download time is reduced by making every Server-Side Optimization byte count in every object sent down the (Expired Header, E-tags) pipe. For code, this means using as few characters Reduce Download Time as possible. K-Size of page objects For design, it means ensuring images are as (HTML,JS, CSS, Images) compressed as they possibly can be, and using less of them. Improve Page Rendering Optimizations such as GZip can also be made Load order on the server side to improve download time. Code execution UI and Design Elements Page Architecture (Hidden Content, Image- based headers Less Images-involved Design, more use of CSS
  28. 28. Optimization StrategiesHTML, CSS, JS, XML, JSON, TXT Reduce white-space Remove comments Minify / Obfuscate
  29. 29. Optimize images Use SpritesReplace with CSS
  30. 30. Optimization Strategies GZip on servers Compress: HTML, CSS, JS, XML,JSON, TXT Don’t compress: JPEG, GIF, SWF, PDFServer-side compression can be made to improve download times.This effective technique requires additional work and projectmanagement but undoubtedly impacts your bottom line (seeBenefits of Maximizing Performance)
  31. 31. Optimization Strategies Reduce Latency Time HTTP Requests Server-Side Optimization (Expired Header, E-tags) Reduce Download Time K-Size of page objects Page rendering can be improved by the (HTML,JS, CSS, Images) semantic and valid use of XHTML and other web standards. Improve Page Rendering Design can impact rendering by using CSS Load order styles as opposed to art. Code execution Technologies such as JavaScript and Flash can be optimized to control when objects are UI and Design Elements downloaded, affording the best progressive load experience. Page Architecture (Hidden Content, Image- based headers Less Images-involved Design, more use of CSS
  32. 32. Optimization Strategies HTML Aside from ads, external CSS / JS mostly good Move JS/CSS from page CSS JS to external files Link CSS, do not @import Internal code cannot be cached
  33. 33. Optimization Strategies CSS HTML CSS goes at the top Browser won’t render until all CSS is downloaded
  34. 34. Optimization Strategies HTML JS JS can go at the bottom JS downloads disable parallel downloads Browser stops all processing until JS is downloaded Allows content to download before JS files Issue with ads
  35. 35. Optimization Strategies Reduce Latency Time HTTP Requests Server-Side Optimization (Expired Header, E-tags) Reduce Download Time K-Size of page objects (HTML,JS, CSS, Images) Improve Page Rendering Load order Code execution Anything styled using code shows up first in UI and Design Elements the load order, allowing the user to get a feel for the page faster. Page Architecture Hidden Content (SEO) Reducing art assets saves on “latency time”, No image-based headers which could grow exponentially in bad network conditions, even if “cached.” More use of CSS
  36. 36. Hidden content (tabs, slideshows)Download only when needed or post-load Be mindful of SEOImage-less headers: use text, not images (SEO-friendly pages) Reduce image-heavy designs Use CSS when possible: Fonts, Borders, Backgrounds
  37. 37. Image-heavy Design: Back to Latency
  38. 38. The number of assets on page and latency impactThis chart shows theaverage latency timewhen averaged acrossthe page’s assets.
  39. 39. Photo Optimization
  40. 40. Photo Optimization
  41. 41. Leaderboard Optimization: GOLF.com Before After “What’s a few seconds of wait time among friends”, Given GOLF.com lives under older technology right? Well, the difference in download times has a platform, we could only implement a few steps to direct impact on the number of GOLF.com optimize the Leaderboard landing page, which tournament’s fans who actually may not stick around kept traffic up, page down, and encouraged much while the blue line makes its slow crawl from left to more visitors to return and stay on site much right. We captured the movie clip of ‘Before’ the longer than previously… landing page optimization. If you’re curios, shoot us an email: tii-frontend@timeinc.net
  42. 42. Why Maximize Performance A few, small improvements to the overall page weight can deliver substantial improvements to your visitor retention rate, conversion rate and PageRank, moving us up on the results page generated by a user query. And, since most SE users rarely look beyond the first or second page of search results delivered by any search engine, getting the site listed higher in the results page is a guarantee of increased site traffic. And, that gets us to the bottom line
  43. 43. Benefits of Maximizing Performance• Better User Experience • Improved Visitor Retention Rate• Conversion Rate • Increased Visibility• PageRank • Increased Positive Responses• Search Engine Placement • Increased Brand Awareness• Reduced Development Cost • Increased Traffic• Reduced Maintenance Cost • Improved Ad Sales• Lower Bandwidth Charges • Increased Revenues
  44. 44. ‘s 10 Rules1. Focus on user and all else will follow2. It’ best to do one thing really do really really well3. Fast is better than slow4. Democracy on the web works5. You don’t need to be at your desk to need an answer6. You can make money without doing evil7. There is always more information out there8. The need for information crosses all borders9. You can be serious without a suit10. Great Just isn’t good enough
  45. 45. We picked 3 for a better online performance 1. Focus on user and all else will follow 3. Fast is better than slow 6. You can make money without doing evil
  46. 46. “…and likewise all parts of the system must be constructed with reference to all other parts,since, in one sense, all the parts form one machine…” Thomas Edison

×