Make your website 2 times faster

6 10 10 Apple Store Shinsaibashi

AOL Money & Finance

AOL Shopping

Bing 50ms 200ms -0.3% -0.4% 500 500ms -0.6% -1.2% -1.0% -0.9% 1200 1000ms -0.7% -0.9% -2.8% -1.9% -1.6% 1900 2000ms -1.8% -2.1% -4.3% -4.4% -3.8% 3100

Google • • • UX • Velocity09 Merissa Mayer

Google

shopzilla.com • 2.5 3.5sUP • 7 12%UP • PV 25%UP

6 1. 2. 3. httpRequest 4. Js CSS 5. CSS 6.

•

Punyping

Punyping 80KB

Punyping

Punyping 80KB 56KB

Js CSS

Js CSS 300ms <head> <link rel="stylesheet" type="text/css" href="stylesheet1.css" /> <script type="text/javascript" src="scriptfile1.js" /> <script type="text/javascript" src="scriptfile2.js" /> <link rel="stylesheet" type="text/css" href="stylesheet2.css" /> <link rel="stylesheet" type="text/css" href="stylesheet3.css" /> </head>

Js CSS 200ms <head> <link rel="stylesheet" type="text/css" href="stylesheet1.css" /> <link rel="stylesheet" type="text/css" href="stylesheet2.css" /> <link rel="stylesheet" type="text/css" href="stylesheet3.css" /> <script type="text/javascript" src="scriptfile1.js" /> <script type="text/javascript" src="scriptfile2.js" /> </head>

http • CSS Sprite • Data URI • CSS

CSS Sprite • background-position • Http • Sprite

CSS Sprite

CSS Sprite http://ja.spritegen.website-performance.org/

CSS Sprite

Data URI data URI(RFC2397) inline image URI http IE6,7

Data URI <img class=”data-uri” src=”data:image/ png;base64,....R0lGO” alt=”” />

Data URI  <img class=”data-uri” src=”data:image/gif;base64,R0lGO” alt=”” />

Webfonts

Webfont @font-face { font-family: Makiba; src: url(MakibaFont13.eot); /* IE */ src: local("Makiba"), /* webkit*/ url(MakibaFont13.ttf) format("truetype"); }

Data URI

CSS • ul li a{......} • li a{......} • a{.......}

CSS • ul#gloabal-navigation li a{display:block;} • ul#footer-navigation li a{display:block;} • .navigation-link{display:block;}

CSS

CSS • •

OOCSS

OOCSS CSS YUI Grid CSS OOCSS Grid CSS Nicole Sullivan Facebook

OOCSS

OOCSS unit line sizeXofY

OOCSS OOCSS

OOCSS

• Yslow ! - Firebug plugin • Google Page Speed - Firebug plugin • MS Fiddler - • AOL modsconcat - Apach • W3C linkchecker -

Yslow!

W3C Link cheker

-moz-image-rendaring

-moz-image-rendaring •Firefox 3.6 •auto •optimizeQuality •optimizeSpeed •-moz-crisp-edges

-moz-image-rendaring img { image-rendering: optimizeSpeed; /* Firefox, (Gecko 1.9.2) */ -ms-interpolation-mode: nearest- neighbor; /* Internet Explorer 7.0+ */ } ‣IE7 ‣Firefox 3.6

-moz-image-rendaring img[src$=".gif"] { image-rendering: -moz-crisp-edges; /* Fx, (Gecko 1.9.2) */ -ms-interpolation-mode: nearest- neighbor; /* IE 7+ */ }

11 11 13 OOCSS Nicole Sullivan

Make your website 2 times faster

0 comments

Notes on slide 1

1 Favorite