Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A Designer's Guide to Web Performance


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

A Designer's Guide to Web Performance

  2. 2. Speed is one of the most overlookedaspects when it comes to websites andweb apps. Today, users expect awebsite to load in 2 seconds or less.In fact, a 1-second delay in page load time equals a3% drop in revenue per visitor, 7% fewerconversions, and a 16% decrease in customersatisfaction. When it comes to web performance,every millisecond counts.Why Web PerformanceMATTERS FOR DESIGNERSChapter 11A DESIGNER’S GUIDE TO WEB PERFORMANCE
  3. 3. Speed is the most importantfeature. If your application isslow, people won’t use it.Fred Wilson, Managing Partner @ Union Square Ventures“ 2A DESIGNER’S GUIDE TO WEB PERFORMANCESo, why should designers care? Because 80%-90% of performance occurson the front-end of websites, which is where designers operate. Only10%-20% happens via back-end performance, which falls under theresponsibility of developers and operations. In other words, all of thecontent a designer is responsible for creating and building - HTML, CSS,JavaScript, images, etc. -- accounts for almost all of a pages load time.
  4. 4. -20%-16%-12%-8%-4%0%AVG IMPACT OF 1-SECOND DELAY IN PAGE LOAD TIMEA faster website or web app will produce better business results and a betteruser experience. It will significantly increase visitors, conversions, average ordersize, and revenue both in the short and long-term. Here are some case studiesand statistics that highlight the importance of web performance.3A DESIGNER’S GUIDE TO WEB PERFORMANCERevenue Conversions Pageviews User Satisfaction
  5. 5. CASE STUDY #14A DESIGNER’S GUIDE TO WEB PERFORMANCE100msDECREASE IN PAGE LOAD TIME1%DROP IN TOTAL REVENUE=Amazon found that a 100ms delay in page load time causeda 1% drop in total revenue -- thats millions of dollars forthem!
  6. 6. CASE STUDY #25A DESIGNER’S GUIDE TO WEB PERFORMANCE12%INCREASE IN REVENUE25%INCREASE IN PAGEVIEWSShopzilla sped up its average page load time from 6seconds to 1.2 seconds and experienced a 12% increase inrevenue and a 25% increase in pageviews.+
  7. 7. CASE STUDY #36A DESIGNER’S GUIDE TO WEB PERFORMANCE15.4%INCREASE IN CONVERSIONS60millionMORE DOWNLOADS PER YEARMozilla shaved 2.2 seconds off their landing pages,increasing their download conversions by 15.4%, which willresult in 60 million more Firefox downloads per year.=
  8. 8. There are several key reasons whybuilding a fast website or web app hasbecome so challenging for designers.First, the creation of content decreases performance.The more content a webpage has, the worse it willperform. As Steve Souders, legendary webperformance optimization guru, once said, "Thefastest HTTP request is the one not made."Why Designers Struggle toBUILD FAST WEBSITESChapter 27A DESIGNER’S GUIDE TO WEB PERFORMANCE
  9. 9. The fastest HTTP request is theone not made.Steve Souders, Head Performance Engineer @ Google“ 8A DESIGNER’S GUIDE TO WEB PERFORMANCESo, the best way to optimize web performance, in theory, is to have nocontent at all. But, users now expect websites to contain more content,media, and interactivity than ever before. Striking a balance of fastperformance and content-rich sites is one of the biggest challenges torunning a great website today.
  10. 10. Second, many designers are unaware of theperformance consequences that their assetscreate.They lack the visibility and insight into their webperformance issues - for example, knowing that aspecific JavaScript file is slowing down their pageload time by 3 seconds. They dont have or use thetools necessary to assess their web performance.Additionally, many designers do not know whatsteps they must take to fix these performanceproblems -- such as moving that specific piece ofJavaScript to the bottom of their HTML code toprevent it from blocking the rest of the pagedownloading.A DESIGNER’S GUIDE TO WEB PERFORMANCE 9
  11. 11. Lastly, without the help of a third-partyservice, the methods and techniques used tomanually optimize a website are very timeconsuming.With tight deadlines and limited cycles, manydesigners do not take the time necessary or make ita priority to build a high performance website.Maintaining fast and consistent performance is ahighly complex and demanding job. As a reference,Google, who is renowned for their fast performanceand user experience, has a team of over 100engineers whose sole job is focused on webperformance optimization!10A DESIGNER’S GUIDE TO WEB PERFORMANCE
  12. 12. There are 3 key metric areas for webperformance: back-end performance,front-end performance, and contentcomplexity.Each key area contains several metrics that willprovide actionable insight to improve the webperformance and page load times of websites.Understanding Key WebPERFORMANCE METRICSChapter 311A DESIGNER’S GUIDE TO WEB PERFORMANCE
  13. 13. BACK-END PERFORMANCE METRICS12A DESIGNER’S GUIDE TO WEB PERFORMANCEBack-end performance refers to the connection and delivery of a webpagescontent. This accounts for about 10%-20% of web performance and is not visibleto an end user.DNS Resolution TimeTime elapsed for a DNS provider to executeits service - to process a visitors URLrequest and return the matching IP address.Time to ConnectTime elapsed from initial request towhen the connection between thevisitors browser and an origin serveris established.Waiting TimeTime elapsed from establishing aconnection to delivering the firstbyte of a webpage.Receiving TimeTime elapsed from downloadingthe first byte to the last byte of awebpage.Time to Last ByteTime elapsed when every byteof a website has made it to thevisitors browser.Time to First ByteTime elapsed for the first byte ofa website to make it to thevisitors browser.
  14. 14. FRONT-END PERFORMANCE METRICS13A DESIGNER’S GUIDE TO WEB PERFORMANCEFront-end performance refers to how quickly a visitors browser executes andrenders a webpages content. Front-end metrics are measured from the momenta request for the site is made -- when the visitor clicks a link or enters a URL.Time to TitleTime elapsed when a users browserdownloads the first byte of your website andthe webpages title displays in the browser.Time to Start RenderTime elapsed when the first visibleelement appears on the blank page.Time to DisplayTime elapsed when all visualelements of the page are in place.Time to InteractTime elapsed when a user hasgained control of a webpage andcan interact with content.
  15. 15. CONTENT COMPLEXITY METRICS14A DESIGNER’S GUIDE TO WEB PERFORMANCEContent complexity refers to how complex a website’s composition is in terms ofthe number and the size of requests, assets, and files. The more requests and theheavier a website’s assets are, the more complex the website is, and vice versa.Total # of AssetsRequestsDomainsHTMLJavaScriptCSSImagesMedia (Video, Audio, etc.)OtherTotal Size (KB)Page Size (Sum of All Assets’ Sizes)HTMLJavaScriptCSSImagesMedia (Video, Audio, etc.)Other
  16. 16. What are the main culprits of poorperformance? What components on thefront-end cause the biggest problems?The key area we are focusing on improvingperformance of in this eBook is a websites contentcomplexity. Designers should mainly be concernedwith optimizing assets such as HTML, CSS,JavaScript, and image files.What Causes PoorWEB PERFORMANCE?Chapter 415A DESIGNER’S GUIDE TO WEB PERFORMANCE
  17. 17. If your site is 15MB, it’s notHTML5 – it’s stupid.Christian Heilmann, Principal Developer Evangelist @ Mozilla“ 16A DESIGNER’S GUIDE TO WEB PERFORMANCEAs we previously noted, a high number of files or assets is thebiggest indicator of poor performance. Reducing the number ofround trips and requests the browser needs to take to downloada webpage will make the biggest impact on improving webperformance.
  18. 18. Picture yourself going to get a bunch ofmail from your mailbox.In this example, you are like the browser,having to make trips to retrieve all of theassets needed to download your webpage.Would it make sense to make a separate tripto get every single piece of mail in yourmailbox? No. But thats how a browser isprogrammed to behave when it downloadsassets of a webpage -- it makes a separate tripfor every individual file. Granted, the browserdoes this very quickly -- often, in milliseconds.But the more individual files there are, thelonger it will take the browser to process all ofthose requests.17A DESIGNER’S GUIDE TO WEB PERFORMANCE
  19. 19. # OF ASSETS BREAKDOWN18A DESIGNER’S GUIDE TO WEB PERFORMANCE59AVG # OF ASSETSAVG # OF IMAGESAVG # OF JAVASCRIPT FILESAVG # OF CSS FILESAVG # OF OTHER FILES (VIDEO, AUDIO, ETC.)3311510When optimizing for performance, designers should reduce the number of filesabove all else as the number one priority. The key method to reduce the totalnumber of assets on a webpage is combining files.-5101520251-25 26-50 51-100 100-200 201+Number of Assets vs. Page Load Time (sec)PageLoadTime(sec)
  20. 20. Large page size is another key indicator of poor performance. Bigger files takemore time for browsers to download. Lets return to the mailbox analogy we justused. Its easy to carry a few envelopes of mail. But what if there were severalheavy boxes and packages? All of a sudden, you wont be able to carry your mailas quickly or easily. The same holds true for browsers. If you have massive fileson your website, browsers will have a tougher time downloading and deliveringthem to end users. So, designers need to compress and reduce file size as muchas possible to achieve the fastest page load time possible.19A DESIGNER’S GUIDE TO WEB PERFORMANCE1.2MB VS.121KBWINNER
  21. 21. ASSET SIZE BREAKDOWN20A DESIGNER’S GUIDE TO WEB PERFORMANCE1.1MBAVG PAGE SIZEAVG SIZE OF TOTAL IMAGESAVG SIZE OF TOTAL JAVASCRIPT FILESAVG SIZE OF TOTAL CSS FILESAVG SIZE OF TOTAL OTHER FILES653 KB173 KB34 KB260 KB051015202530<250 KB 250-500 KB 500-750 KB 750-1,000 KB 1,000 - 2,000KB2,000 - 4,000KB4,000 - 8,000KB8,000+ KBPageLoadTime(sec)Page Size (KB) vs Page Load Time (sec)
  22. 22. JAVASCRIPT BREAKDOWN21A DESIGNER’S GUIDE TO WEB PERFORMANCEJavaScript is generally the worst offender of poor performance, especially asit relates to the number of JavaScript files.0246810120 1 2 3 4 5 6 7 8 9 10 11+PageLoadTime(sec)# of Javascripts# of Javascripts vs Page Load Time (sec)
  23. 23. IMAGES BREAKDOWNA DESIGNER’S GUIDE TO WEB PERFORMANCEA high number of images and large image sizes are also top culprits when itcomes to slowing down page loads.0481216200 - 50KB 50 - 100 KB 100 - 200 KB 200 - 500 KB 500 - 1,000KB1,000 - 2,000KB2,000 - 5,000KB>5,000 KBPageLoadTime(sec)Image Size (MB)Image Size vs. Page Load Time (sec)22
  24. 24. CSS BREAKDOWN23A DESIGNER’S GUIDE TO WEB PERFORMANCECSS can be a contributing factor of poor performance, especially in terms ofits size. Since CSS paints the visual display of a webpage, larger CSS fileshave more display work needed to be executed by the browser.-246810120 1 - 5 KB 5 - 25 KB 25 - 100 KB 100+ KBPageLoadTime(sec)CSS Size (KB)CSS Size vs. Page Load Time (sec)
  25. 25. There are many key methods and tacticsyou can use to optimize your webperformance.Let’s take a deep dive into the best practices tooptimize the individual assets of HTML, CSS,JavaScript, and images.How to Optimize YourWEBSITE ASSETSChapter 524A DESIGNER’S GUIDE TO WEB PERFORMANCE
  26. 26. The best strategy is to considerspeed a feature just like one ofthe other features on your site.Stoyan Stefanov, Engineer @ Facebook & Author“ 25A DESIGNER’S GUIDE TO WEB PERFORMANCERemember, as we discussed in the previous chapter, there aretwo key factors that will help improve our performance: ( 1 )Reducing the total number of requests and ( 2 ) reducing theoverall asset size. These will be the main actions we focus on foroptimizing our web performance as designers.
  27. 27. OPTIMIZE ORDER OF EXECUTION26A DESIGNER’S GUIDE TO WEB PERFORMANCEAlways load your external CSS files first, and then your external and inlineJavaScript second in your <head>. JavaScript files are generally larger than CSSfiles and take a longer time to download, which delays the download of otherassets.<head><link rel="stylesheet" type="text/css" href=”stylesheet1.css" /><link rel="stylesheet" type="text/css" href="stylesheet2.css" /><link rel="stylesheet" type="text/css" href="stylesheet3.css" /><link rel="alternate" type="application/rss+xml" title="Say hello" href="front.xml" /><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><script type="text/javascript">document.write("Hello world!");</script></head>
  28. 28. COMBINE CSS FILES27A DESIGNER’S GUIDE TO WEB PERFORMANCECombining, or “concatenating,” CSS files together decreases the number ofrequests and round trips the browser has to make, which subsequently decreasesthe page load time and reduces latency.<link rel="stylesheet" type=“text/css” href=”stylesheet1.css"><link rel="stylesheet" type=“text/css” href=”stylesheet2.css"><link rel=“stylesheet” type=“text/css” href=“stylesheet3.css”><link rel=“stylesheet” type=“text/css” href=“combined.css”>
  29. 29. 28A DESIGNER’S GUIDE TO WEB PERFORMANCEJust like CSS, combining or “concatenating” JavaScript files together decreasesthe number of requests and round trips the browser has to make, whichsubsequently decreases the page load time.<script type="text/javascript" src=“javascript1.js"></script><script type="text/javascript" src=“javascript2.js"></script><script type="text/javascript" src=“javascript3.js"></script><script type="text/javascript" src=“combined.js"></script>COMBINE JAVASCRIPT FILES
  30. 30. COMBINE IMAGES USING CSS SPRITES29A DESIGNER’S GUIDE TO WEB PERFORMANCEUse CSS sprites to combine many image files into one. This significantly reducesthe number of image requests and overall total page size. This technique alsoallows for faster parallelization of asset downloads.Here are some great free CSSsprite creator tools:•  SpriteMe•  Compass•  SpritePad•  Spritebox
  31. 31. MINIFY HTML30A DESIGNER’S GUIDE TO WEB PERFORMANCECompressing your HTML file to remove comments, whitespace between tags, andunnecessary closing tags (such as </li>) can reduce the overall HTML file size andspeed up the parsing and execution of a webpage.Here are some great tools to automatically minify your HTML files:•  HTML Compressor•  Google HTML Compressor and Minifier•  TextFixer
  32. 32. MINIFY JAVASCRIPT31A DESIGNER’S GUIDE TO WEB PERFORMANCECompressing, or “minifying,” your JavaScript files includes eliminatingunnecessary line breaks, extra spaces, and indentation, which reduces the overallsize of the JavaScript files and increase page load time.Here are some great tools to automatically minify your JavaScriptfiles:•  JavaScript Compressor•  JSCompress•  Online YUI Compressor
  33. 33. MINIFY CSS32A DESIGNER’S GUIDE TO WEB PERFORMANCECompressing, or “minifying,” your CSS files includes removing all whitespace andsemicolons for the last property of a CSS declaration, which reduces the overallsize of the CSS files and increases page load times.Here are some great tools to automatically minify your CSS files:•  CSS Compressor•  CSS Drive•  Minify CSS•  Online YUI Compressor
  34. 34. COMPRESS IMAGES33A DESIGNER’S GUIDE TO WEB PERFORMANCECompress the file size of your images. You can manually tune the save settingsfor your images in design software such as Photoshop, Illustrator, etc. Or, you canuse free online tools that automatically compress your images.Here are some great tools to automatically compress your images:•  Yahoo!•  JPEG-Optimizer•  Trimage
  35. 35. AVOID CSS @import34A DESIGNER’S GUIDE TO WEB PERFORMANCEUsing CSS @import prevents the browser from being able to download the CSSfiles in parallel, which increases the number of requests the browser needs tomake. Always use the traditional <link> tag for CSS to ensure parallelizeddownloads.<link rel="stylesheet" href=”stylesheet1.css"><link rel="stylesheet" href=”stylesheet2.css">@import url(“stylesheet2.css”)
  36. 36. AVOID BAD REQUESTS35A DESIGNER’S GUIDE TO WEB PERFORMANCEBe sure to remove any broken links, missing images, or other asset requests thatresult in 404 errors. Failing to do so creates a (higher) number of requests for non-existent assets that slows down the loading of the page.
  37. 37. USE DATA URIs36A DESIGNER’S GUIDE TO WEB PERFORMANCEFor smaller images, data URIs are a great technique to cut down image requestsby “inlining images” into HTML or CSS files. The image is immediately availablewhen its host document is downloaded. Data URIs use Base64 encoding andfollow this basic format:data:[<mime type>][;charset=<charset>][;base64],<encoded data>
  38. 38. LOAD 3RD-PARTY ASSETS ASYNCHRONOUSLY37A DESIGNER’S GUIDE TO WEB PERFORMANCEAssets that aren’t needed to construct the display of a webpage, most notablyJavaScript files, can be loaded asynchronously so they do not block importantresources from loading. These types of assets are typically social share widgets(Facebook, Twitter, etc.) and analytics tracking (Google Analytics, etc.)<script>var node = document.createElement(script);node.type = text/javascript;node.async = true;node.src = example.js;// Now insert the node into the DOM, perhaps using insertBefore()</script>
  39. 39. SPECIFY IMAGE DIMENSIONS38A DESIGNER’S GUIDE TO WEB PERFORMANCEWhen possible, you should specify image dimensions in the HTML or CSS andserve a properly resized image that fits such dimensions. This will reduce theactual image file size and also prevent reflows the browser needs to make whenloading the images.<img src=“myimage.jpg” height=“225” width=“150”>
  40. 40. USE EFFICIENT CSS SELECTORS39A DESIGNER’S GUIDE TO WEB PERFORMANCEYou should write your CSS so that it is as efficient as possible. This includesavoiding a universal key selector (*), using class and ID selectors over tagselectors, removing redundant qualifiers, and avoiding the use of descendantselectors. The goal is to always be as specific and individual with your CSS aspossible. For example:.unordered-list-item {color: blue;}.ordered-list-item {color: red;}ul li {color: blue;}ol li {color: red;}
  41. 41. SPECIFY A CHARACTER SET40A DESIGNER’S GUIDE TO WEB PERFORMANCEBy specifying a character set in the HTTP response headers of your HTMLdocument, you allow the browser to begin parsing HTML and executing scriptsimmediately.<meta http-equiv="content-type" content="text/html;charset=utf-8">
  42. 42. PUT CSS IN <HEAD>41A DESIGNER’S GUIDE TO WEB PERFORMANCEIt’s a best practice to always place your CSS in the <head> section of your HTMLdocument. Removing inline style blocks and using <link> CSS files in the <head>section improves the browser render and display load times.<p style=“font-size: 1.2em; font-weight: bold; font-family: arial, helvetica;”><head><link rel=“stylesheet” type=“text/css” href=“stylesheet.css”></head>
  43. 43. In order to make major performanceimprovements, you will need tocontinually test and monitor your webperformance.How to Monitor YourWEB PERFORMANCEChapter 642A DESIGNER’S GUIDE TO WEB PERFORMANCE
  44. 44. If you can’t measure it, you can’timprove it.Lord Kelvin, 19th Century Physicist and Engineer“ 43A DESIGNER’S GUIDE TO WEB PERFORMANCEThe first thing you should do is test your website to establish abaseline of your current performance. You need to understandhow your website and its assets load and where there are areasto improve. There are several key factors you should test yourwebsite against: different browsers, locations, and connectivities.
  45. 45. Testing your website only provides a single snapshot in time, however. To capturea holistic view, youll need to monitor and track your performance over time. Thisway, you can understand your performance trends -- how your website performsacross the world, with various browsers, different connectivities, and traffic spikes.44A DESIGNER’S GUIDE TO WEB PERFORMANCEHere’s a list of free resources to test and monitor your webperformance:•  Yottaa Site Monitor••  YSlow•  Mobitest•
  46. 46. The ultimate goal of this eBook is tocreate a fundamental shift in how youapproach design: to design withperformance as a priority.By looking at web design through the lens ofperformance, you’ll be able to build better, faster,and more scalable websites and web apps.Design With PerformanceAS A PRIORITYChapter 745A DESIGNER’S GUIDE TO WEB PERFORMANCEImprove UserExperienceOptimize WebPerformance_____
  47. 47. Exceptional performance meansbeing faster than a user expectsus to be.Alois Reitebauer, Product Manager & Evangelist @ Compuware“ 46A DESIGNER’S GUIDE TO WEB PERFORMANCEWhat is the goal of design? Design should help users achieve tasks as fastas possible. Therefore, performance should be an integral part of yourdesign process that drives decisions. Build performance best practicesinto your daily design habits. Reframe your mindset so you are constantlythinking: "Do I really need this image on the webpage at all? How can Irewrite and condense this CSS file? Whats the best way to implement thisdesign so it loads fast?”
  48. 48. 47A DESIGNER’S GUIDE TO WEB PERFORMANCEWEB PERFORMANCE CHECKLIST  OPTIMIZE HTML  OPTIMIZE CSS  OPTIMIZE JAVASCRIPT  OPTIMIZE IMAGESPERFORMANCE GOALS  LOAD IN 2 SECONDS  INCREASE CONVERSIONS BY 5%  INCREASE USER SATISFACTION BY10%Here are a few ways you can keepperformance at top of the mind in yourdesign process:•  Create a performance checklist forevery design or asset you create•  Build a performance budget for yourwebsite (i.e. our website must load in 2seconds. If it doesn’t, we must deliverour content in a way that it does meetthis goal or we must remove someassets altogether)•  Conduct a regular review of yourwebsite performance and try to improveit just by optimizing your assets
  49. 49. FREE GUIDE9 TIPS FOR BENCHMARKINGYOUR WEB PERFORMANCEThis guide gives you 9 key tips toensure you get the most actionableinsights from your benchmarkingprogram!DOWNLOAD GUIDE NOWFREE EBOOKHOW TO MANAGE A WPOPROJECT: A STEP-BY-STEP GUIDEDesigned to help web developersand website owners understand theentire WPO process, this eBook willhelp you to put together your ownaction plan to improve performance.DOWNLOAD EBOOK NOW* FREE BONUS RESOURCES *FREE TRIALSEE HOW MUCH FASTER YOURWEBSITE COULD BE ON YOTTAAAccelerate your page load times,prevent website downtime, andbenchmark your web performanceagainst competitors with a free 7-daytrial of Yottaa Site Optimizer.FREE 7-DAY TRIAL
  50. 50. OPTIMIZE, PROTECT,& MONITOR YOURWEBSITECREATE MY FREE ACCOUNTShare this eBook with your friends!Get free 24x7 performance monitoring of yourwebsite from any browser, device, & location!