Your SlideShare is downloading. ×
0
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Rimantas Liubertas
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Rimantas Liubertas

856

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
856
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Priverskime tinklalapius krautis greičiau
  • 2.
    • Ž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?
  • 3.
    • 80-90% laiko — naršyklė krauna komponentus (CSS, JS, IMG)
  • 4.
    • siųsti mažiau
    • siųsti greičiau
    • pradėti siųsti anksčiau
  • 5.
    • Mažinkite HTTP užklausų skaičių
    • 2-6 resursai vienu metu
    • 2-4 domenai
  • 6.  
  • 7.
    • Sujunkite CSS
    • Sujunkite JavaScript
    • CSS spraitai (sprites)
    Mažiau užklausų
  • 8.
    • Sujunkite CSS http://sass-lang.com /
    • Sujunkite JavaScript
    • CSS spraitai (sprites)
    Mažiau užklausų
  • 9.
    • Sujunkite CSS
    • Sujunkite JavaScript
    • CSS spraitai (sprites)
    Mažiau užklausų
  • 10.
    • Sujunkite CSS
    • Sujunkite JavaScript
    • CSS spraitai (sprites)
    Mažiau užklausų
  • 11.  
  • 12.  
  • 13.  
  • 14. Data URI background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");
  • 15.
    • CSS į HEAD
    • <link>, ne @import
    • @media print {…}
    • <script> prieš </body>
    • Dinaminis Javascript krovimas
    Neblokuokite
  • 16.
    • CSS į HEAD
    • <link>, ne @import
    • @media print {…}
    • <script> prieš </body>
    • Dinaminis Javascript užkrovimas
    Neblokuokite
  • 17. var js = document.createElement('script');js.src = 'myscript.js';var head = document.getElementsByTagName('head')[0];head.appendChild(js);
  • 18.
    • YUI Get http://developer.yahoo.com/yui/3/get/
    • LAB.js http://labjs.com/
    • RequireJS http://requirejs.org /
  • 19. Mažiau duomenų
    • Javascript minimizavimas
    • gzip
  • 20. Mažiau duomenų
    • Javascript minimizavimas
    • gzip
  • 21. Text (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(&quot;<&quot;+a+&quot;>&quot;).appendTo(&quot;body&quot;),c=b.css(&quot;display&quot;);b.remove();if(c===&quot;none&quot;||c===&quot;&quot;)c=&quot;block&quot;;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}
  • 22.
    • YUI Compressor http://developer.yahoo.com/yui/compressor/
    • Google Closure Compiler http://code.google.com/closure/compiler/
    • UglifyJS https://github.com/mishoo/UglifyJS
  • 23. Mažiau duomenų
    • Javascript minimizavimas
    • gzip
  • 24.
    • Last-modified, ETag
    • Expires, ExpiresDefault
    • Cache-control: max-age
    Kešavimas
  • 25.  
  • 26. HTTP/1.1 200 OK Last-Modified: Tue, 1 Dec 2010 01:00:00 GMT ETag: &quot;3eeb06e3108ad126c09b2c&quot; Content-Length: 12345 GET /resource HTTP/1.1 Host: example.com If-Modified-Since: Tue, 1 Dec 2010 01:00:00 GMT If-None-Match: &quot;3eeb06e3108ad126c09b2c&quot; HTTP/1.1 304 Not Modified
  • 27.  
  • 28. Expires: Thu, 09 Apr 2011 14:00:00 GMT ExpiresDefault &quot;access plus 10 years&quot; Cache-Control: max-age=3600
  • 29.  
  • 30.
    • Cookies
    • Statinis turinys iš atskirų serverių
    Ir dar…
  • 31. HTML
  • 32.
    • Stenkitės naudoti kuo mažiau elementų
    • Naudokite HTML5
  • 33.
    • Stenkitės naudoti kuo mažiau elementų
    • Naudokite HTML5
  • 34. XHTML <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot; &quot; http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd &quot;> <html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;en&quot;> <head> <meta http-equiv=&quot; Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot; /> <title>Foo</title> <link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /></head> <body><p>Bar</p><script type=&quot;text/javascript&quot;> … </script></body></html>
  • 35. XHTML <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot; &quot; http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd &quot; > <html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;en&quot; > <head> <meta http-equiv=&quot; Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /> <title>Foo</title> <link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /></head> <body><p>Bar</p><script type=&quot;text/javascript&quot; > … </script></body></html>
  • 36. HTML5 <!DOCTYPE html><html><head> <meta charset=&quot;UTF-8&quot;> <title>Foo</title> <link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;></head><body><p>Bar</p><script> …</script></body></html>
  • 37. Grafiniai elementai
  • 38.
    • 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
  • 39.
    • 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
  • 40.
    • JPEG — nuotraukos, gradientai
    • PNG — visam kitam ;)
    • GIF — animacija, maži elementai
  • 41. JPEG FAIL
  • 42.
    • 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
  • 43.  
  • 44.  
  • 45.  
  • 46.
    • 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
  • 47.
    • 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
  • 48.
    • 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
  • 49. 7448 baitai
  • 50.  
  • 51. 1322 baitai
  • 52.
    • 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
  • 53.
    • 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
  • 54. http://ubuwaits.github.com/css3-buttons/
  • 55. CSS3
    • border-radius o/
    • gradientai
    • RGBA
    • box-shadow
    • text-shadow
    • border-image
    • transformacijos, animacija
    • -moz-, -webkit-, -o-, -ms-
  • 56. JavaScript (jQuery)
  • 57.
    • Naudokite naujausias bibliotekų versijas
    • Kešuokite!
    • Ribokite DOM manipuliacijų skaičių.
    • Venkite DOM operacijų cikle
    • .delegate()
  • 58.
    • Naudokite naujausias bibliotekų versijas
    • Kešuokite!
    • Ribokite DOM manipuliacijų skaičių.
    • Venkite DOM operacijų cikle
    • .delegate()
  • 59.
    • Naudokite naujausias bibliotekų versijas
    • Kešuokite!
    • Ribokite DOM manipuliacijų skaičių.
    • Venkite DOM operacijų cikle
    • .delegate()
  • 60. $('#something').html('yeah!');$('#something').css('color', '#BADA55');$('#something').bind('click', function(){…}); $('#something').html('yeah!');$('#something').css('color', '#BADA55');$('#something').bind('click', function(){…});
  • 61. var $something = $('#something');$something.html('yeah!');$something.css('color', '#BADA55');$something.bind('click', function(){…});
  • 62. $something.html('yeah!') .css('color', '#BADA55') .bind('click', function(){…});
  • 63.
    • Naudokite naujausias bibliotekų versijas
    • Kešuokite!
    • Ribokite DOM manipuliacijų skaičių.
    • Venkite DOM operacijų cikle
    • .delegate()
  • 64.
    • Naudokite naujausias bibliotekų versijas
    • Kešuokite!
    • Ribokite DOM manipuliacijų skaičių.
    • Venkite DOM operacijų cikle
    • .delegate()
  • 65. for (var i=0; i<some_list.length; i++) { $('<li/>').html(some_list[i]).appendTo($('#myul'));};
  • 66. str = '';for (var i = 0, l = some_list.length; i < l; i++){ str += '<li>' + some_list[i] + '</li>';}$('#myul').html(str);
  • 67. str = '<ul>';for (var i = 0, l = some_list.length; i < l; i++){ str += '<li>' + some_list[i] + '</li>';}$('#myul').replaceWith(str + '</ul>');
  • 68.
    • Naudokite naujausias bibliotekų versijas
    • Kešuokite!
    • Ribokite DOM manipuliacijų skaičių.
    • Venkite DOM operacijų cikle
    • .delegate()
  • 69. $(&quot;table&quot;).delegate(&quot;td&quot;, &quot;hover&quot;, function(){ $(this).toggleClass(&quot;hover&quot;);}); });
  • 70. Įrankiai
  • 71.
    • Firebug http://getfirebug.com/
    • Yslow http://developer.yahoo.com/yslow/
    • PageSpeed http://code.google.com/speed/page-speed/
    • Webkit Inspector
    • dynaTrace http://ajax.dynatrace.com /
  • 72.
    • Expires
    • gzip
    • Mažiau HTTP užklausų
    Svarbiausia:
  • 73. Viskas. Ačiū :)

×