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.

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

3. Why optimize?

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

9. Javascript optimization

10. It's 3.57 PetaFlops, Chubaka!

12. Make tests http://jsperf.com/math-floor-vs-math-round-vs-parseint/5

13. Follow good practices
http://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-zakas
http://net.tutsplus.com/tutorials/javascript-ajax/24-javascript-best-practices-for-
beginners/
http://docs.webplatform.org/wiki/javascript
And many others...

14. Use JSLint
JSLint is a JavaScript program that looks for
problems in JavaScript programs. It is a code
quality tool. Like a Boss.

15. Keep experimenting.
http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/

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 )

21. Whyyyy so slow?!??!?!

22. Use SASS or LESS

23. Y U No let me use !important ?!

24. Image optimization

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

34. Review your files

35. Parallel Downloads
http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
http://css-tricks.com/images-on-a-subdomain/

36. Drupal projects.

37. Break points
http://drupal.org/project/breakpoints

38. Responsive images

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