Faster front end performance
•
0 gostou•591 visualizações
Faster front end performance for Drupal sites from DrupalCon Chicago.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Faster front end performance
Semelhante a Faster front end performance (20)
Mais de Matthew Farina
Mais de Matthew Farina (19)
Último
Último (20)
Faster front end performance
- 1. Faster Front End Performance Dan Mouyard Matt Farina
- 2. Varnish Web Heads Cluster Web Heads MySQL Slave CDN Opcode Cache Memcache
- 6. Dan Mouyard (dcmouyard) TerpSys Accessibility & Performance Focused Themer 3 Years With Drupal World Champion Old-Time Piano Player
- 7. Matt Farina (mfer) Palantir.net Co-Author of Drupal 7 Module Development Core Contributor Over 5.5 Years With Drupal
- 8. Who sees slow sites? http://www.flickr.com/photos/valeriebb/3006348550/
- 10. Other Browsers Internet Explorer 44% 56% http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
- 12. Slow Connection Speeds http://www.flickr.com/photos/csessums/4460821479/
- 13. Why Does It Matter?
- 15. SEO
- 17. YSlow
- 18. Page Speed
- 20. Logged In
- 22. JSMin YUI Compressor Google Closure Compiler UglifyJS
- 26. 6 Connections Per Domain
- 27. IE 6/7 Two Per Domain
- 28. Slow High Speed Connections? 48 KiB/s 384 kbps
- 29. Real World Numbers 49 - 514 KiB/s 392 - 4112 kbps
- 33. Under Slow 3G Speeds
- 34. Images
- 35. Quantity
- 36. Filesize
- 37. Graphics Interchange Format GIF
- 38. JPEG Joint Photographic Experts Group
- 39. PNG Portable Network Graphics
- 40. Graphics
- 42. Photographs
- 46. PNG Transparency
- 47. PNG Transparency No AlphaImageLoader for IE6!
- 50. Image Styles
- 51. CSS Sprites
- 52. CSS Sprites
- 53. CSS Sprites
- 57. 269.6 kb 37 CSS Images
- 58. 88.7 kb 4 CSS Images
- 59. Cache Theme Images .htaccess, web.config
- 60. CSS & JS
- 61. page.tpl.php Placement in Drupal 6 <html> <head> $styles </head> <body> $scripts $closure </body> </html>
- 62. html.tpl.php Placement in Drupal 7 <html> <head> $styles </head> <body> $scripts $page_bottom </body> </html>
- 64. Quick! Get that link! <div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div>
- 65. Quick! Get that link! <div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> div#nav ul.nav-‐list li a
- 66. Quick! Get that link! <div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> #nav .nav-‐list li a
- 67. Quick! Get that link! <div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> #nav > .nav-‐list > li > a
- 68. Quick! Get that link! <div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> #nav a
- 69. Quick! Get that link! <div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> #nav a * Never use the universal selector!
- 70. Quick! Get that link! <div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> #nav .nav-‐link
- 71. Quick! Get that link! <div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> #nav #menu-‐link-‐42
- 72. Quick! Get that link! <div id="nav"> <ul class="nav-‐list"> <li class="nav-‐item"> <a id="menu-‐link-‐42" class="nav-‐link"></a> </li> </ul> </div> #menu-‐link-‐42
- 73. Resources • Even Faster Websites by Steve Souders • Steve Souders blog - http://stevesouders.com/ • Web Performance Best Practices - http:// People view web pages in browsers code.google.html, com/images, speed/css, js page-speed/docs/ rules_intro.server html side performance != seen performance for users • YDN Performance - http://developer.yahoo.com/ performance/
- 74. Q&A
- 75. What did you think? Locate this session on the DCC website: http://chicago2011.drupal.org/sessions Click the “Take the Survey” link. Thanks!