1Social Web Design & Research

Social Web Design社群網站設計

Darby Chang

張天豪

2Social Web Design & Research

Performance效能

Improving Your Site’s User Experience

3Social Web Design & Research

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

Whatdoes the waterfall tells?

Social Web Design & Research 11

Grade

Social Web Design & Research 12

Leverage browser 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 13

Leverage browser caching

Implementation In lighttpd

– Docs: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 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 header

Implementation 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

17Social Web Design & Research

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 images

Implementation 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 reasonfor preserving unused CSS

23Social Web Design & Research

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

Implementation <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)Name Type FixAvoid bad requests ContentDefer parsing of JavaScript JS 100*Enable gzip compression ServerEnable Keep-Alive ServerInline small CSS CSSInline small JavaScript JS 100Leverage browser caching Server 100Make landing page redirects cacheable ServerMinify CSS CSS 100Minify HTML Content 93Minify JavaScript JS 97Minimize redirects ContentMinimize request size ContentOptimize images Images 100

Social Web Design & Research 31

Recommendation summary (1/2)Name Type FixOptimize the order of styles and scripts CSS/JSPut CSS in the document head CSSRemove query strings from static resources ContentRemove unused CSS CSS 99Serve resources from a consistent URL ContentServe scaled images ImagesSpecify a cache validator ServerSpecify a character set early Content 95Specify a Vary: Accept-Encoding header Server 100Specify image dimensions Images 100Avoid CSS @import CSS 100Combine images using CSS sprites ImagesPrefer asynchronous resources JSUse efficient CSS selectors CSS

Social Web Design & Research 32

Worthy! (faster than 77%)

Social Web Design & Research 33

Any Questions?

34Social Web Design & Research

There are many performance issues that cannot be easily detected

35Social Web Design & Research

CSS Sprite

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

Let’s know Sprites first

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

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

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

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

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

Any Questions?

44Social Web Design & Research

Another category of analysis tools

Social Web Design & Research 45

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

Analytics Tools / 解析工具

Social Web Design & Research 46

Google Analytics Sign up for an account 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 47

Can you tellthe 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.