rimantas liubertas

Priverskime tinklalapius krautis greičiau

• Žmonėms patinka ;)

• Amazon: -100ms — 1% daugiau pajamų

• Mozilla: -2.2s — 15.4% daugiau parsisiuntimų

• Yahoo: -400ms — 9% didesnis lankytojų srautas

• Google patinka

Kam to reikia?

•80-90% laiko — naršyklė krauna komponentus (CSS, JS, IMG)

•siųsti mažiau

•siųsti greičiau

•pradėti siųsti anksčiau

•Mažinkite HTTP užklausų skaičių

•2-6 resursai vienu metu

•2-4 domenai

•Sujunkite CSS

•Sujunkite JavaScript

•CSS spraitai (sprites)

Mažiau užklausų

•Sujunkite CSS http://sass-lang.com/



Mažiau užklausų

http://sass-lang.com/

•Sujunkite CSS



Mažiau užklausų

background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");

Data URI

•CSS į HEAD

•<link>, ne @import

•@media print {…}

•<script> prieš </body>

•Dinaminis Javascript krovimas

Neblokuokite

•CSS į HEAD

•<link>, ne @import

•@media print {…}

•<script> prieš </body>

•Dinaminis Javascript užkrovimas

Neblokuokite

var js = document.createElement('script');js.src = 'myscript.js';var head = document.getElementsByTagName('head')[0];head.appendChild(js);

•YUI Gethttp://developer.yahoo.com/yui/3/get/

•LAB.jshttp://labjs.com/

•RequireJShttp://requirejs.org/

http://developer.yahoo.com/yui/3/get/

http://requirejs.org/

Mažiau duomenų

•Javascript minimizavimas

•gzip

•YUI Compressorhttp://developer.yahoo.com/yui/compressor/

•Google Closure Compilerhttp://code.google.com/closure/compiler/

•UglifyJS https://github.com/mishoo/UglifyJS

http://developer.yahoo.com/yui/compressor/

https://github.com/mishoo/UglifyJS

Mažiau duomenų

•Javascript minimizavimas

•gzip

•Last-modified, ETag

•Expires, ExpiresDefault

•Cache-control: max-age

Kešavimas

HTTP/1.1 200 OK Last-Modified: Tue, 1 Dec 2010 01:00:00 GMT ETag: "3eeb06e3108ad126c09b2c" Content-Length: 12345GET /resource HTTP/1.1 Host: example.com If-Modified-Since: Tue, 1 Dec 2010 01:00:00 GMT If-None-Match: "3eeb06e3108ad126c09b2c"HTTP/1.1 304 Not Modified

Expires: Thu, 09 Apr 2011 14:00:00 GMTExpiresDefault "access plus 10 years"Cache-Control: max-age=3600

•Cookies

•Statinis turinys iš atskirų serverių

Ir dar…

•Stenkitės naudoti kuo mažiau elementų

•Naudokite HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Foo</title> <link href="style.css" rel="stylesheet" type="text/css" /></head><body><p>Bar</p><script type="text/javascript">…</script></body></html>

XHTML

http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd

http://www.w3.org/1999/xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Foo</title> <link href="style.css" rel="stylesheet" type="text/css" /></head><body><p>Bar</p><script type="text/javascript">…</script></body></html>

XHTML

http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd



<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Foo</title> <link href="style.css" rel="stylesheet"></head><body><p>Bar</p><script> …</script></body></html>

HTML5

Grafiniai elementai

• Pasirinkite tinkamą formatą (GIF beveik niekada netinkamas)

• Nedarykite „optimizacijos“ HTML (arba CSS)

• PNG

• Venkite MS filtrų

• Optimizuokite — JPEG kokybė, PNG spalvų skaičius

• Optimizuokite (pngcrush, optpng, pngout, jpegtran, gifsicle)

• Jokios grafikos — CSS3

•JPEG — nuotraukos, gradientai

•PNG — visam kitam ;)

•GIF — animacija, maži elementai

JPEG FAIL



• PNG





7448 baitai

1322 baitai



• PNG





http://ubuwaits.github.com/css3-buttons/

http://ubuwaits.github.com/css3-buttons/

CSS3• border-radius \o/

• gradientai

• RGBA

• box-shadow

• text-shadow

• border-image

• transformacijos, animacija

• -moz-, -webkit-, -o-, -ms-

JavaScript (jQuery)

•Naudokite naujausias bibliotekų versijas

•Kešuokite!

•Ribokite DOM manipuliacijų skaičių.

•Venkite DOM operacijų cikle

•.delegate()

$('#something').html('yeah!');$('#something').css('color', '#BADA55');$('#something').bind('click', function(){…});

var $something = $('#something');$something.html('yeah!');$something.css('color', '#BADA55');$something.bind('click', function(){…});

$something.html('yeah!') .css('color', '#BADA55') .bind('click', function(){…});


•Kešuokite!



•.delegate()

for (var i=0; i<some_list.length; i++) { $('<li/>').html(some_list[i]).appendTo($('#myul'));};

str = '';for (var i = 0, l = some_list.length; i < l; i++){ str += '<li>' + some_list[i] + '</li>';}$('#myul').html(str);

str = '<ul>';for (var i = 0, l = some_list.length; i < l; i++){ str += '<li>' + some_list[i] + '</li>';}$('#myul').replaceWith(str + '</ul>');


•Kešuokite!



•.delegate()

$("table").delegate("td", "hover", function(){ $

(this).toggleClass("hover");});

Įrankiai

•Firebughttp://getfirebug.com/

•Yslowhttp://developer.yahoo.com/yslow/

•PageSpeedhttp://code.google.com/speed/page-speed/

•Webkit Inspector

•dynaTracehttp://ajax.dynatrace.com/

•Expires

•gzip

•Mažiau HTTP užklausų

Svarbiausia:

Viskas. Ačiū :)

rimantas liubertas

Documents