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

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

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 JPEGclub.org jpegoptim OptiPNG PNGOUT I just used the files generated by GTmetrix Social Web Design & Research 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 & Research 20

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

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-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 & Research 27

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

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

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 (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.http://merry.ee.ncku.edu.tw/~xxx/cur/me Social Web Design & Research 50