1 / 50

Social Web Design 社群網站設計

Social Web Design 社群網站設計. Darby Chang 張天豪. Performance 效 能. Improving Your Site’s User Experience. Do things fast…. but before that. Do things right. The W3C Markup Validation Service The W3C CSS Validation Service. Outline. Performance analysis tools

bridie
Download Presentation

Social Web Design 社群網站設計

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Social Web Design社群網站設計 Darby Chang張天豪 Social Web Design & Research

  2. Performance效能 Improving Your Site’s User Experience Social Web Design & Research

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

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

  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

  6. Performance analysis tools • GTmetrix | Website Speed and Performance Optimization • most detailed • Pingdom Tools • beautiful interface • Speed Tracer - Google Web Toolkit • Chrome only • 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

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

  8. Waterfall Social Web Design & Research

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

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

  11. Grade Social Web Design & Research

  12. Leverage browser caching • 控制瀏覽器暫存 • Optimize caching • Setting an expiry datefor static resources instructs the browser to load previously downloaded resources from local disk rather than over the network Social Web Design & Research

  13. Leverage browser cachingImplementation • In lighttpd • Docs:ModExpire - Lighttpd • server.modules += ( "mod_expire" )$HTTP["url"] =~ "\.(css|gif|js|png)$" { expire.url = ("" => "access plus 1 weeks")} • grade from 0 to96 • the file was left because it is in Google • In Apache • mod_expires - Apache HTTP Server • <FilesMatch"\.(css|gif|js|png)$">ExpiresActive OnExpiresDefault"access plus 1 year"</FilesMatch> Social Web Design & Research

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

  15. Vary: Accept-Encoding header • 支援壓縮內容 • 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

  16. Vary: Accept-Encoding headerImplementation • In lighttpd • Docs: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 DEFLATEapplication/javascript text/css text/html Social Web Design & Research

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

  18. Optimize images • 圖檔最佳化 • Properly formatting and compressing images can save many bytes of data • 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

  19. Optimize imagesImplementation • JPEGclub.org • jpegoptim • OptiPNG • PNGOUT • I just used the files generated by GTmetrix Social Web Design & Research

  20. Avoid CSS @import • 避免在 CSS 檔中匯入其他 CSS 檔 • 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 <link> tag Social Web Design & Research

  21. Remove unused CSS • 移除無用的 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

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

  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 CSSImplementation • 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

  25. Some minor recommendations • Minify CSS: (GTmetrix-generated) [2.15s  2.79s] • Specify image dimensions [2.79s  2.86s] • <img alt="..." height="..." src="..." width="..." /> • Inline small JavaScript (use the <script> tag) [2.86s  2.45s] • Defer parsing of JavaScript [2.45s  1.53s, NOT minor!] • Minify JavaScript (GTmetrix-generated) [1.53s  1.65s] • a file is left because it has been minified • Minify HTML • I did not used the GTmetrix-generated files Social Web Design & Research

  26. Defer parsing of JavaScript • 延後分析 JavaScript • Defer parsing of JavaScript • In order to load a page, the browser must parse the contents of all <script> 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

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

  28. Before Social Web Design & Research

  29. After Social Web Design & Research

  30. Recommendation summary (1/2) Social Web Design & Research

  31. Recommendation summary (1/2) Social Web Design & Research

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

  33. Social Web Design & Research

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

  35. CSS Sprite Social Web Design & Research

  36. Let’s know Sprites first Social Web Design & Research http://www.explodingrabbit.com/forum/threads/mario-sonic-at-the-mushroom-world.14671/page-17

  37. Social Web Design & Research http://www.freewebs.com/rinicthefox/spritesheets.htm

  38. Social Web Design & Research http://gamemedia.wcgame.ru/game-sprite-sheet.html

  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 Social Web Design & Research

  40. CSS Sprite • In 2004, Dave Sheasuggested a simple CSS-based approach to CSS sprites based on the practice established by those legendary video games • 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

  41. A comprehensive article • 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 Thebackground-position Property Work? Social Web Design & Research

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

  43. Social Web Design & Research

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

  45. Analytics Tools / 解析工具 • 10 Useful Website Analytics Tools • Google Analytics • Domains & Directories • Tracking Multiple Domains • Custom Variables • How to Use Custom Variables in Google Analytics • Embed Analytics Using the Google Analytics API • Remember that Google Analytics is not the only choice Social Web Design & Research

  46. Google Analytics • Sign up for an account • Set up account properties • add your property to theaccount • 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

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

  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 URL • One more evil trick… Social Web Design & Research

  49. Today’s assignment今天的任務 Social Web Design & Research

  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 Analytics • GTmetrix • Your web site (http://merry.ee.ncku.edu.tw/~xxx/cur/) 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

More Related