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.

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