Presentation is loading. Please wait.

Presentation is loading. Please wait.

Social Web Design 1 Darby Chang Social Web Design & Research.

Similar presentations

Presentation on theme: "Social Web Design 1 Darby Chang Social Web Design & Research."— Presentation transcript:

1 Social Web Design 1 Darby Chang Social Web Design & Research

2 Performance 2 Improving Your Sites User Experience Social Web Design & Research

3 Do things fast… 3 but before that Social Web Design & Research

4 Do things right The W3C Markup Validation Service The W3C Markup Validation Service The W3C CSS Validation Service The W3C CSS Validation Service Social Web Design & Research 4

5 Outline Performance analysis tools An example of performance improvement –28 recommendations, 12 improved, 8 completely improved –the most important one: defer parsing of JS CSS sprite Analytics tools Social Web Design & Research 5

6 Performance analysis tools GTmetrix | Website Speed and Performance Optimization GTmetrix | Website Speed and Performance Optimization –most detailed Pingdom Tools Pingdom Tools –beautiful interface Speed Tracer - Google Web Toolkit Speed Tracer - Google Web Toolkit –Chrome only Which loads faster? Which loads faster? –uses GTmetrix, actually –especially useful when comparing alternative implementations You may use the built-in tools in Chrome and Firefox Social Web Design & Research 6

7 An example Your web site is slower than 83% of all tested websites Social Web Design & Research 7

8 8

9 The complicated handshaking 28 requests, 202.5kB and 8.17s DNS, SSL, Connect, Send, Wait and Receive Social Web Design & Research 9

10 What Social Web Design & Research 10 does the waterfall tells?

11 Grade Social Web Design & Research 11

12 Leverage browser caching Optimize caching Optimize caching Setting an expiry date for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network Social Web Design & Research 12

13 Leverage browser caching Implementation In lighttpd –Docs:ModExpire - LighttpdDocs:ModExpire - Lighttpd –server.modules += ( "mod_expire" ) $HTTP["url"] =~ "\.(css|gif|js|png)$" { expire.url = ("" => "access plus 1 weeks") } –grade from 0 to 96 –the file was left because it is in Google In Apache –mod_expires - Apache HTTP Servermod_expires - Apache HTTP Server – ExpiresActive On ExpiresDefault "access plus 1 year" Social Web Design & Research 13

14 Social Web Design & Research 14 Actually nothing you can do, unless you are the server administrator

15 Vary: Accept-Encoding header Optimize caching Optimize caching Bugs in some public proxies may lead to compressed versions of your resources being served to users that don't support compression. Specifying the Vary: Accept-Encoding header instructs the proxy to store both a compressed and uncompressed version of the resource. Accept-encoding: gzip ( ) Web myfile.html myfile.html myfile.html.gz Accept-encoding Social Web Design & Research 15

16 Vary: Accept-Encoding header Implementation In lighttpd –Docs:ModCompress - LighttpdDocs:ModCompress - Lighttpd –server.modules += ( "mod_compress" ) compress.filetype = ( "application/javascript", "text/css", "text/html" ) –grade from 62 to 95 –a file is left because it is too small In Apache –AddOutputFilterByType DEFLATE application/javascript text/css text/html Social Web Design & Research 16

17 17 The following improvements are according to GTmetrixGTmetrix Social Web Design & Research

18 Optimize images Properly formatting and compressing images can save many bytes of data Optimize images Optimize images Images saved from programs like Fireworks can contain kilobytes of extra comments, and use too many colors, even though a reduction in the color palette may not perceptibly reduce image quality. Improperly optimized images can take up more space than they need to; for users on slow connections, it is especially important to keep image sizes to a minimum. Social Web Design & Research 18

19 Optimize images Implementation jpegoptim OptiPNG PNGOUT I just used the files generated by GTmetrix Social Web Design & Research 19

20 Avoid CSS CSS Avoid Avoid Using in an external stylesheet can add additional delays during the loading of a web page allows stylesheets to import other stylesheets. When is used from an external stylesheet, the browser is unable to download the stylesheets in parallel, which adds additional round- trip times to the overall page load Implementation: use the tag Social Web Design & Research 20

21 Remove unused CSS CSS Remove unused CSS Remove unused CSS Removing or deferring style rules that are not used by a document avoid downloads unnecessary bytes and allow the browser to start rendering sooner Social Web Design & Research 21

22 Is there any reason Social Web Design & Research 22 for preserving unused CSS

23 23 If you have a common style sheet for the entire site, it may contain many CSS rules used for a single page Social Web Design & Research

24 Remove unused CSS Implementation I got a good grade, but the loading time is no difference –grade 53 99; loading time 2.23s 2.15s; overall grade from 93% 94% It somehow depends on how many requests the server can handle simultaneously Social Web Design & Research 24

25 Some minor recommendations Minify CSS: (GTmetrix-generated) [2.15s 2.79s] Minify CSS Specify image dimensions [2.79s 2.86s] Specify image dimensions – Inline small JavaScript (use the tag) [2.86s 2.45s] Inline small JavaScript Defer parsing of JavaScript [2.45s 1.53s, NOT minor!] Defer parsing of JavaScript Minify JavaScript (GTmetrix-generated) [1.53s 1.65s] Minify JavaScript –a file is left because it has been minified Minify HTML Minify HTML –I did not used the GTmetrix-generated files Social Web Design & Research 25

26 Defer parsing of JavaScript JavaScript Defer parsing of JavaScript Defer parsing of JavaScript In order to load a page, the browser must parse the contents of all tags, which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page. Social Web Design & Research 26

27 Defer parsing of JavaScript Implementation function l(s){ var e=document.createElement('script'); e.src=s; document.body.appendChild(e) } l('jquery min.js'); Use JavaScript (not jQuery) to create new DOM element and insert it to current page Watch when users get the control Social Web Design & Research 27

28 Social Web Design & Research 28

29 Social Web Design & Research 29

30 Recommendation summary (1/2) NameTypeFix Avoid bad requestsContent Defer parsing of JavaScriptJS100* Enable gzip compressionServer Enable Keep-AliveServer Inline small CSSCSS Inline small JavaScriptJS100 Leverage browser cachingServer100 Make landing page redirects cacheableServer Minify CSSCSS100 Minify HTMLContent93 Minify JavaScriptJS97 Minimize redirectsContent Minimize request sizeContent Optimize imagesImages100 Social Web Design & Research 30

31 Recommendation summary (1/2) NameTypeFix Optimize the order of styles and scriptsCSS/JS Put CSS in the document headCSS Remove query strings from static resourcesContent Remove unused CSSCSS99 Serve resources from a consistent URLContent Serve scaled imagesImages Specify a cache validatorServer Specify a character set earlyContent95 Specify a Vary: Accept-Encoding headerServer100 Specify image dimensionsImages100 Avoid Combine images using CSS spritesImages Prefer asynchronous resourcesJS Use efficient CSS selectorsCSS Social Web Design & Research 31

32 Worthy! (faster than 77%) Social Web Design & Research 32

33 Any Questions? Social Web Design & Research 33

34 34 There are many performance issues that cannot be easily detected Social Web Design & Research

35 CSS Sprite 35 Social Web Design & Research

36 36 Social Web Design & Research

37 37 Social Web Design & Research

38 38 Social Web Design & Research

39 Sprite In computer graphics, a sprite is a two-dimensional image or animation that is integrated into a larger scene Know as –Player-Missile Graphics, the term reflected the usage for both characters (players) and other objects (missiles) –The developer manuals for the Nintendo Entertainment System, Super Nintendo Entertainment System, and Game Boy referred to sprites as OBJs (short for "objects"), and the region of RAM used to store sprite attributes and coordinates was known as OAM (Object Attribute Memory). This still applies today on the Game Boy Advance and Nintendo DS handheld systems Sprite (computer graphics) - Wikipedia, the free encyclopedia Sprite (computer graphics) - Wikipedia, the free encyclopedia Social Web Design & Research 39

40 CSS Sprite In 2004, Dave Shea suggested a simple CSS-based approach to CSS sprites based on the practice established by those legendary video gamessuggested In this case, multiple images used throughout a website would be combined into the so-called master image To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed One HTTP request Prevent flickering of onMouseOver event Social Web Design & Research 40

41 A comprehensive article The Mystery Of CSS Sprites: Techniques, Tools And Tutorials The Mystery Of CSS Sprites: Techniques, Tools And Tutorials What Are CSS Sprites? Where Are CSS Sprites Used? Articles About CSS Sprites Screencasts about CSS Sprites CSS Image Maps With CSS Sprites CSS Sprites Techniques CSS Sprite Generators Bonus: How Does The background-position Property Work? Social Web Design & Research 41

42 Two resources Sprite Cow - Generate CSS for sprite sheets Sprite Cow - Generate CSS for sprite sheets is a jQuery plugin for creating dynamic character and background animation in pure HTML and JavaScript Social Web Design & Research 42

43 Any Questions? Social Web Design & Research 43

44 Another category of analysis tools 44 Social Web Design & Research

45 10 Useful Website Analytics Tools 10 Useful Website Analytics Tools Google Analytics Google Analytics –Domains & DirectoriesDomains & Directories –Tracking Multiple DomainsTracking Multiple Domains –Custom VariablesCustom Variables –How to Use Custom Variables in Google AnalyticsHow to Use Custom Variables in Google Analytics –Embed Analytics Using the Google Analytics APIEmbed Analytics Using the Google Analytics API Remember that Google Analytics is not the only choice Analytics Tools / Social Web Design & Research 45

46 Google Analytics Sign up for an account Set up account properties Set up account properties –add your property to the account –set up at least one profile for the property –optionally, add additional users to the profile –add the Analytics tracking code to property Set up your tracking code Social Web Design & Research 46

47 Can you tell Social Web Design & Research 47 the mechanism?

48 My experience Mirror sites –enable multiple domains –dynamically get current domain with JS Local Google Analytics JS –the suggestion from performance analytics tools –more beautiful loading code, but not update automatically Page flow (relation) –, –deal with onclick event, so you got ugly URLs –Removing Google Analytics cookie string from URLRemoving Google Analytics cookie string from URL One more evil trick… Social Web Design & Research 48

49 Todays assignment Social Web Design & Research 49

50 Make analytics for your site Apply Google Analytics account and install it on your site. After the mid-expo, please aims at an active society. Remember to be the first guest of other teams, which is really cheerful. You may also improve the performance and send the report to me. Reference –Google AnalyticsGoogle Analytics –GTmetrixGTmetrix Your web site ( will be checked not before 23:59 4/30 (Tue). You may send a report (such as some important modifications) to me in case I did not notice your features. Social Web Design & Research 50

Download ppt "Social Web Design 1 Darby Chang Social Web Design & Research."

Similar presentations

Ads by Google