[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
SlideShare a Scribd company logo

Make your website 2 times faster

•
•
Satoshi Kikuchi
Satoshi Kikuchi

The document discusses various techniques for improving website performance, including: 1. Using CSS sprites and data URIs to reduce the number of HTTP requests by embedding images and other files directly in CSS or HTML code. 2. Optimizing the order of CSS and JavaScript links in the head section to allow pages to render more quickly. 3. Implementing techniques like OOCSS to better structure CSS rules and selectors for improved rendering speed and smaller file sizes. 4. Leveraging browser-specific optimizations like -moz-image-rendering in Firefox to improve how images are displayed. A variety of tools are also mentioned for analyzing page performance bottlenecks. In summary, the document covers strategies for front-

1 of 57
6 10 10 Apple Store Shinsaibashi
Make your website 2 times faster
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
Make your website 2 times faster
6 1. 2. 3. httpRequest 4. Js CSS 5. CSS 6.
•
Punyping
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
CSS Sprite
CSS Sprite http://ja.spritegen.website-performance.org/
CSS Sprite
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 <!--[if lt IE 8]> <img src=”logo.png” alt=”” /> <![endif]--> <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 li a{......} • li a{......} • a{.......}
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
Make your website 2 times faster
• Yslow ! - Firebug plugin • Google Page Speed - Firebug plugin • MS Fiddler - • AOL modsconcat - Apach • W3C linkchecker -
Make your website 2 times faster
Yslow!
W3C Link cheker
Make your website 2 times faster
-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+ */ }
Make your website 2 times faster
11 11 13 OOCSS Nicole Sullivan

More Related Content

Make your website 2 times faster