Mobile and web optimization + Drupal

579 views

Published on

You may have a great user interface, good content and an excellent idea to share with the world – but it will all be for nothing if your users leave your website because of slow load times. This is even more true for people accessing your website through a mobile device.
If you wish to retain your visitors, you have to think optimization. Period.

This talk will be mainly about reducing page load times, with a focus on mobile devices. We'll look at CSS and Javascript optimization, and touch a bit on image optimization. We'll check out some of the tools that Drupal provides for testing and improving performance, and we'll write some code of course.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
579
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile and web optimization + Drupal

  1. 1. Web & Mobileoptimization by Kirill Cebotari drupal.org @oresh
  2. 2. Content table1. Why optimize?2. Javascript optimize.3. CSS optimization.4. Image optimization.5. Http requests.6. Drupal modules.7. Demo
  3. 3. Why optimize?
  4. 4. i can run 2.37 mileswhile i get to the contacts page im still loading...
  5. 5. — No need to worry, just running by...
  6. 6. ok, open this page waiting... Im hungry cook something for dinner meeh... Im going to Mos *going away 1 second is the focus time
  7. 7. Traffic can be expensive
  8. 8. Javascript optimization
  9. 9. Its 3.57 PetaFlops, Chubaka!
  10. 10. Make tests http://jsperf.com/math-floor-vs-math-round-vs-parseint/5
  11. 11. Follow good practiceshttp://www.javascripttoolbox.com/bestpractices/http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/http://www.html5rocks.com/en/tutorials/speed/v8/http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakashttp://net.tutsplus.com/tutorials/javascript-ajax/24-javascript-best-practices-for-beginners/http://docs.webplatform.org/wiki/javascriptAnd many others...
  12. 12. Use JSLintJSLint is a JavaScript program that looks forproblems in JavaScript programs. It is a codequality tool. Like a Boss.
  13. 13. Keep experimenting.http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/
  14. 14. CSS optimization
  15. 15. Use SMACSS or similar principles chop chop chop chop...
  16. 16. Dont slow down your selectors two more divs and Im home...body div#content .content > div > div> ul.menu li[class~="item"] ul li
  17. 17. 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 )
  18. 18. 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 )
  19. 19. Whyyyy so slow?!??!?!
  20. 20. Use SASS or LESS
  21. 21. Y U No let me use !important ?!
  22. 22. Image optimization
  23. 23. Image impact: simple page with images simple page without images optimized simple page without images
  24. 24. 5MB image onfrontpage? Sure!
  25. 25. Use tiny png *hell eat out all your KBytes
  26. 26. Choose wisely *http://luci.criosweb.ro/riot/
  27. 27. Optimize your imagesbefore uploadinghttp://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
  28. 28. love sprites
  29. 29. Use CSS3 Gradients *css is awesome!
  30. 30. HTTP requests
  31. 31. It really mattersIE 6/7: 2IE 8: 2 on dialup, 6 on broadbandIE 9: 6IE 10: 8Firefox: 6-8Safari: 4-6Chrome: 6-12
  32. 32. Review your files
  33. 33. Parallel Downloadshttp://yuiblog.com/blog/2007/04/11/performance-research-part-4/http://css-tricks.com/images-on-a-subdomain/
  34. 34. Drupal projects.
  35. 35. Break pointshttp://drupal.org/project/breakpoints
  36. 36. Responsive images
  37. 37. Responsive images and stylesproject:http://drupal.org/project/resp_imgvideo:http://modulesunraveled.com/responsive-images/part-1-installationdocumentation:http://drupal.org/node/1904690
  38. 38. Simular projects1) Responsive Images - works as a field formatter - only supports 2 sizes2) Adaptive Image - works with screen size, not window size3) Adaptive Image Styles (ais) - needs .htaccess rules4) Client-side adaptive image - works as a field formatter5) Media: Responsive - works only on media field - set as maximum width - uses css for the smaller variants
  39. 39. Demo and browser tools.
  40. 40. Thank you!Kirill Cebotaridrupal.org @oreshirc: #drupal-mobile

×