Mobile and web optimization + Drupal

  • 194 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
194
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
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. Web & Mobileoptimization by Kirill Cebotari drupal.org @oresh
  • 2. Content table1. Why optimize?2. Javascript optimize.3. CSS optimization.4. Image optimization.5. Http requests.6. Drupal modules.7. Demo
  • 3. Why optimize?
  • 4. i can run 2.37 mileswhile i get to the contacts page im still loading...
  • 5. — No need to worry, just running by...
  • 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. Traffic can be expensive
  • 8. Javascript optimization
  • 9. Its 3.57 PetaFlops, Chubaka!
  • 10. Make tests http://jsperf.com/math-floor-vs-math-round-vs-parseint/5
  • 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. Use JSLintJSLint is a JavaScript program that looks forproblems in JavaScript programs. It is a codequality tool. Like a Boss.
  • 13. Keep experimenting.http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/
  • 14. CSS optimization
  • 15. Use SMACSS or similar principles chop chop chop chop...
  • 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. 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. 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. Whyyyy so slow?!??!?!
  • 20. Use SASS or LESS
  • 21. Y U No let me use !important ?!
  • 22. Image optimization
  • 23. Image impact: simple page with images simple page without images optimized simple page without images
  • 24. 5MB image onfrontpage? Sure!
  • 25. Use tiny png *hell eat out all your KBytes
  • 26. Choose wisely *http://luci.criosweb.ro/riot/
  • 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. love sprites
  • 29. Use CSS3 Gradients *css is awesome!
  • 30. HTTP requests
  • 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. Review your files
  • 33. Parallel Downloadshttp://yuiblog.com/blog/2007/04/11/performance-research-part-4/http://css-tricks.com/images-on-a-subdomain/
  • 34. Drupal projects.
  • 35. Break pointshttp://drupal.org/project/breakpoints
  • 36. Responsive images
  • 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. 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. Demo and browser tools.
  • 40. Thank you!Kirill Cebotaridrupal.org @oreshirc: #drupal-mobile