rimantas liubertas
Post on 28-Nov-2014
1.079 Views
Preview:
DESCRIPTION
TRANSCRIPT
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/
•Sujunkite JavaScript
•CSS spraitai (sprites)
Mažiau užklausų
•Sujunkite CSS
•Sujunkite JavaScript
•CSS spraitai (sprites)
Mažiau užklausų
•Sujunkite CSS
•Sujunkite JavaScript
•CSS spraitai (sprites)
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/
Mažiau duomenų
•Javascript minimizavimas
•gzip
Mažiau duomenų
•Javascript minimizavimas
•gzip
(function(a,b){function ci(a){return d.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cf(a){if(!b_[a]){var b=d("<"+a+">").appendTo("body"),c=b.css("display");b.remove();if(c==="none"||c==="")c="block";b_[a]=c}return b_[a]}function ce(a,b){var c={};d.each(cd.concat.apply([],cd.slice(0,b)),function(){c[this]=a});return c}
•YUI Compressorhttp://developer.yahoo.com/yui/compressor/
•Google Closure Compilerhttp://code.google.com/closure/compiler/
•UglifyJS 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…
HTML
•Stenkitės naudoti kuo mažiau elementų
•Naudokite HTML5
•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
<!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
<!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
• 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
• 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
• 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
• 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
• 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
7448 baitai
1322 baitai
• 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
• 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
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()
•Naudokite naujausias bibliotekų versijas
•Kešuokite!
•Ribokite DOM manipuliacijų skaičių.
•Venkite DOM operacijų cikle
•.delegate()
•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(){…});
•Naudokite naujausias bibliotekų versijas
•Kešuokite!
•Ribokite DOM manipuliacijų skaičių.
•Venkite DOM operacijų cikle
•.delegate()
•Naudokite naujausias bibliotekų versijas
•Kešuokite!
•Ribokite DOM manipuliacijų skaičių.
•Venkite DOM operacijų cikle
•.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>');
•Naudokite naujausias bibliotekų versijas
•Kešuokite!
•Ribokite DOM manipuliacijų skaičių.
•Venkite DOM operacijų cikle
•.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ū :)
top related