Presentation is loading. Please wait.

Presentation is loading. Please wait.

Social Web Design 1 Darby Chang Social Web Design.

Similar presentations

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

1 Social Web Design 1 Darby Chang Social Web Design

2 Performance 2 Social Web Design

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

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 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 JavaScript CSS sprite Analytics tools Social Web Design 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 6

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

8 8

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

10 What Social Web Design 10 does the waterfall tells?

11 Grade Social Web Design 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 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 13

14 Social Web Design 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 15

16 Vary: Accept-Encoding header Implementation In lighttpd –Docs:ModCompress - LighttpdDocs:ModCompress - Lighttpd –server.modules += ( "mod_expire" ) compress.filetype = ( "application/javascript", "text/css", "text/html" ) –garde 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 16

17 17 The following improvements are according to GTmetrix Social Web Design

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 18

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

20 Avoid CSS @import CSS CSS Avoid CSS @import Avoid CSS @import Using CSS @import in an external stylesheet can add additional delays during the loading of a web page CSS @import allows stylesheets to import other stylesheets. When CSS @import 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 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 21

22 Is there any reason Social Web Design 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

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 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 (PageSpeed tools family) Minify HTMLPageSpeed tools family –I did not used the GTmetrix-generated files Specify a character set early ( ) Specify a character set early –the analyzer has some problems with HTML5 Social Web Design 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 26

27 Defer parsing of JavaScript Implementation function l(s){ var e=document.createElement('script'); e.src=s; document.body.appendChild(e) } l('jquery-1.4.2.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 27

28 Social Web Design 28

29 Social Web Design 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 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 CSS @importCSS100 Combine images using CSS spritesImages Prefer asynchronous resourcesJS Use efficient CSS selectorsCSS Social Web Design 31

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

33 Any Questions? Social Web Design 33

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

35 CSS Sprite 35 Social Web Design

36 36

37 37

38 38

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 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 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 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 42

43 Any Questions? Social Web Design 43

44 Another category of analysis tools 44 Social Web Design

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 A trick… Analytics Tools / Social Web Design 45

46 Todays assignment Social Web Design 46

47 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 ( and will be checked not before 23:59 5/21 (Mon). You may send a report (such as some important modifications) to me in case I did not notice your features. Social Web Design 47

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

Similar presentations

Ads by Google