Transcript Social Web Design 社群網站設計 Darby Chang 張天豪 Social Web Design 社群網站設計 Performance 效能 Social Web Design 社群網站設計.

Social Web Design
社群網站設計
Darby Chang
張天豪
Social Web Design 社群網站設計
1
Performance
效能
Social Web Design 社群網站設計
2
Do things fast…
but before that
Social Web Design 社群網站設計
3
Do things right

The W3C Markup Validation Service

The W3C CSS Validation Service
Social Web Design 社群網站設計
4
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
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 社群網站設計
6
An example

Your web site is slower than 83% of all tested
websites
Social Web Design 社群網站設計
7
Waterfall
Social Web Design 社群網站設計
8
http://tools.pingdom.com/fpt/
The complicated handshaking

28 requests, 202.5kB and 8.17s

DNS, SSL, Connect, Send, Wait and Receive
Social Web Design 社群網站設計
9
What
does the waterfall tells?
Social Web Design 社群網站設計
10
Grade
Social Web Design 社群網站設計
11
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 社群網站設計
12
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 On
ExpiresDefault "access plus 1 year"
</FilesMatch>
Social Web Design 社群網站設計
13
Actually nothing you can do,
unless you are the server administrator
Social Web Design 社群網站設計
14
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 社群網站設計
15
Vary: Accept-Encoding header
Implementation

In lighttpd
– Docs: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
The following improvements are according to GTmetrix
Social Web Design 社群網站設計
17
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 社群網站設計
18
Optimize images
Implementation

JPEGclub.org

jpegoptim

OptiPNG

PNGOUT

I just used the files generated by GTmetrix
Social Web Design 社群網站設計
19
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 roundtrip times to the overall page load
Implementation: use the <link> tag
Social Web Design 社群網站設計
20
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 社群網站設計
21
Is there any reason
for preserving unused CSS
Social Web Design 社群網站設計
22
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 社群網站設計
23
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
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 (PageSpeed tools family)
– I did not used the GTmetrix-generated files

Specify a character set early (<meta>)
– the analyzer has some problems with HTML5
Social Web Design 社群網站設計
25
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 社群網站設計
26
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 社群網站設計
27
Before
Social Web Design 社群網站設計
28
After
Social Web Design 社群網站設計
29
Recommendation summary (1/2)
Name
Avoid bad requests
Defer parsing of JavaScript
Enable gzip compression
Enable Keep-Alive
Inline small CSS
Inline small JavaScript
Leverage browser caching
Make landing page redirects cacheable
Minify CSS
Minify HTML
Minify JavaScript
Minimize redirects
Minimize request size
Optimize images
Type
Content
JS
Server
Server
CSS
JS
Server
Server
CSS
Content
JS
Content
Content
Images
Social Web Design 社群網站設計
Fix
100*
100
100
100
93
97
100
30
Recommendation summary (1/2)
Name
Optimize the order of styles and scripts
Put CSS in the document head
Remove query strings from static resources
Remove unused CSS
Serve resources from a consistent URL
Serve scaled images
Specify a cache validator
Specify a character set early
Specify a Vary: Accept-Encoding header
Specify image dimensions
Avoid CSS @import
Combine images using CSS sprites
Prefer asynchronous resources
Use efficient CSS selectors
Type
CSS/JS
CSS
Content
CSS
Content
Images
Server
Content
Server
Images
CSS
Images
JS
CSS
Social Web Design 社群網站設計
Fix
99
95
100
100
100
31
Worthy! (faster than 77%)
Social Web Design 社群網站設計
32
Any Questions?
Social Web Design 社群網站設計
33
There are many performance issues that cannot be easily detected
Social Web Design 社群網站設計
34
CSS Sprite
Social Web Design 社群網站設計
35
Let’s know Sprites first
36
http://www.explodingrabbit.com/forum/threads/mario-sonic-at-the-mushroom-world.14671/page-17
37
http://www.freewebs.com/rinicthefox/spritesheets.htm
38
http://gamemedia.wcgame.ru/game-sprite-sheet.html
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 社群網站設計
39
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 社群網站設計
40
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 社群網站設計
41
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 社群網站設計
42
Any Questions?
Social Web Design 社群網站設計
43
Another category of analysis tools
Social Web Design 社群網站設計
44
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

A trick…
Social Web Design 社群網站設計
45
Today’s assignment
今天的任務
Social Web Design 社群網站設計
46
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/ex9/ and
http://merry.ee.ncku.edu.tw/~xxx/cur/) 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