Mobile and web optimization + Drupal
0 likes669 views
The document discusses web and mobile optimization with a focus on JavaScript, CSS, image optimization, and HTTP requests. It emphasizes the importance of performance improvements and offers resources and best practices for optimizing each aspect effectively. Additionally, it highlights Drupal modules that facilitate responsive image handling and performance enhancements.
![Don't slow down your selectors
two more divs
and I'm home...
body div#content .content > div > div> ul.menu li[class~="item"] ul li](https://image.slidesharecdn.com/mobileandweboptimization-130406225313-phpapp02/85/Mobile-and-web-optimization-Drupal-18-320.jpg)
![CSS Selectors speed
I. ID ( #top )
II. Class ( .container )
III. Node/Element Type ( div )
IV. Sibling ( p + img )
V. Child ( ul > li )
VI. Descendant ( p strong )
VII. Universal ( * )
VIII. By Attribute ( [type="text"] )
IX. Pseudo Elements/Classes ( a:hover )](https://image.slidesharecdn.com/mobileandweboptimization-130406225313-phpapp02/85/Mobile-and-web-optimization-Drupal-19-320.jpg)
![I. ID ( #top )
II. Class ( .container )
III. Node/Element Type ( div )
IV. Sibling ( p + img )
V. Child ( ul > li )
VI. Descendant ( p strong )
VII. Universal ( * )
VIII. By Attribute ( [type="text"] )
IX. Pseudo Elements/Classes ( a:hover )](https://image.slidesharecdn.com/mobileandweboptimization-130406225313-phpapp02/85/Mobile-and-web-optimization-Drupal-20-320.jpg)
Mobile and web optimization + Drupal
- 1. Web & Mobile optimization by Kirill Cebotari drupal.org @oresh
- 2. Content table 1. Why optimize? 2. Javascript optimize. 3. CSS optimization. 4. Image optimization. 5. Http requests. 6. Drupal modules. 7. Demo
- 4. i can run 2.37 miles while i get to the contacts page i'm still loading...
- 5. — No need to worry, just running by...
- 7. ok, open this page waiting... I'm hungry cook something for dinner meeh... I'm going to Mo's *going away 1 second is the focus time
- 8. Traffic can be expensive
- 10. It's 3.57 PetaFlops, Chubaka!
- 12. Make tests http://jsperf.com/math-floor-vs-math-round-vs-parseint/5
- 14. Use JSLint JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool. Like a Boss.
- 16. CSS optimization
- 17. Use SMACSS or similar principles chop chop chop chop...
- 18. Don't slow down your selectors two more divs and I'm home... body div#content .content > div > div> ul.menu li[class~="item"] ul li
- 19. CSS Selectors speed I. ID ( #top ) II. Class ( .container ) III. Node/Element Type ( div ) IV. Sibling ( p + img ) V. Child ( ul > li ) VI. Descendant ( p strong ) VII. Universal ( * ) VIII. By Attribute ( [type="text"] ) IX. Pseudo Elements/Classes ( a:hover )
- 20. I. ID ( #top ) II. Class ( .container ) III. Node/Element Type ( div ) IV. Sibling ( p + img ) V. Child ( ul > li ) VI. Descendant ( p strong ) VII. Universal ( * ) VIII. By Attribute ( [type="text"] ) IX. Pseudo Elements/Classes ( a:hover )
- 22. Use SASS or LESS
- 23. Y U No let me use !important ?!
- 25. Image impact: simple page with images simple page without images optimized simple page without images
- 26. 5MB image on frontpage? Sure!
- 27. Use tiny png *he'll eat out all your KBytes
- 28. Choose wisely *http://luci.criosweb.ro/riot/
- 29. Optimize your images before uploading http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization- techniques/ http://sixrevisions.com/tools/8-excellent-tools-for-optimizing-your-images/ http://www.imageoptimizer.net/Pages/Home.aspx
- 30. love sprites
- 31. Use CSS3 Gradients *css is awesome!
- 32. HTTP requests
- 33. It really matters IE 6/7: 2 IE 8: 2 on dialup, 6 on broadband IE 9: 6 IE 10: 8 Firefox: 6-8 Safari: 4-6 Chrome: 6-12
- 36. Drupal projects.
- 39. Responsive images and styles project: http://drupal.org/project/resp_img video: http://modulesunraveled.com/responsive-images/part-1-installation documentation: http://drupal.org/node/1904690
- 40. Simular projects 1) Responsive Images - works as a field formatter - only supports 2 sizes 2) Adaptive Image - works with screen size, not window size 3) Adaptive Image Styles (ais) - needs .htaccess rules 4) Client-side adaptive image - works as a field formatter 5) Media: Responsive - works only on media field - set as maximum width - uses css for the smaller variants
- 41. Demo and browser tools.
- 42. Thank you! Kirill Cebotari drupal.org @oresh irc: #drupal-mobile