Mobile and web optimization + Drupal

Web & Mobile optimization

by Kirill Cebotaridrupal.org @oresh

Content table

1. Why optimize?2. Javascript optimize.3. CSS optimization.4. Image optimization.5. Http requests.6. Drupal modules.7. Demo

Why optimize?

i can run 2.37 miles while i get to the contacts page

i'm still loading...

— No need to worry, just running by...

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

Traffic can be expensive

Javascript optimization

It's 3.57 PetaFlops, Chubaka!

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

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/javascript

And many others...

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

Use JSLint

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

Keep experimenting.

CSS optimization

Use SMACSS or similar principles

chop chop chop chop...

Don't slow down your selectors

body div#content .content > div > div> ul.menu li[class~="item"] ul li

two more divs and I'm home...

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 )

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 )

Whyyyy so slow?!??!?!

Use SASS or LESS

Y U No let me use !important ?!

Image optimization

Image impact:

simple pagewith images

simple pagewithout images

optimized simple page

without images

5MB image on frontpage? Sure!

Use tiny png

*he'll eat out all your KBytes

Choose wisely

*http://luci.criosweb.ro/riot/

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

love sprites

Use CSS3 Gradients

*css

is a

wes

ome!

HTTP requests

IE 6/7: 2IE 8: 2 on dialup, 6 on broadbandIE 9: 6IE 10: 8Firefox: 6-8Safari: 4-6Chrome: 6-12

It really matters

Review your files

Parallel Downloads

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

Drupal projects.

Break pointshttp://drupal.org/project/breakpoints

Responsive images

Responsive images and stylesproject:http://drupal.org/project/resp_img

video:http://modulesunraveled.com/responsive-images/part-1-installation

documentation:http://drupal.org/node/1904690

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

Demo and browser tools.

Thank you!

Kirill Cebotaridrupal.org @oresh

irc: #drupal-mobile