Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

What have you done for me lately?
Alex Schmitz IRC: arschmitz - Gi...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

About me:
•

16 Years experience in web
development

•

jQuery Mob...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Now to answer my own question…

➡
➡
➡
➡
➡

What have we done for y...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

I don’t know about you but waiting
drives me nuts!
Alex Schmitz IR...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Why is mobile
performance so
important?
This comes down to 2 main ...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexr...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Time Warner Cable Road Runner
Basic Service
Alex Schmitz IRC: arsc...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

AT&T 3G
Service

Alex Schmitz IRC: arschmitz - Github: arschmitz -...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

On average mobile devices are

3X
Slower!
Alex Schmitz IRC: arschm...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Simplify your pages!
➡
➡
➡
➡
➡

Reduce the widgets in each page
Re...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

To reduce download time and http
requests make sure you ...

➡
➡
➡...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Multi-Page Template
➡
➡
➡
➡
➡

Load all pages with single request
...
Bac
k

jQuery Mobile: Optimizing Performance

Multi-Page Template
Limitations
Limitations

➡
➡
➡
➡
➡

Forwar
d

Slower ini...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Typical Single-Page
Document
<!DOCTYPE html>
<html>
<head>
<title>...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Downfalls of Single Page

➡
➡
➡
➡

Everything sent with every requ...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Add some server side processing to optimize the template
<?php
if ...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

This reduces what is sent during
ajax requests to:
<div data-role=...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Starting in jQuery Mobile 1.4 widgets
can be used outside pages

S...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Final version of the single page
template

<?php
if (!isset($_SERV...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Making the final markup sent during an ajax request:

<div data-ro...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

The updated template...
➡
➡
➡
➡
➡

Reduces bytes transferred
Reduc...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Custom Builds...
➡
➡
➡
➡

Reduce files size
Reduce library initial...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

A custom build which includes...
•Full page and navigation support...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

1.4 brings a new theme to
minimize Dom manipulation
Pre-enhancemen...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Consider skipping auto-enhancement and widget use
for buttons and ...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

New in 1.4:
The enhanced option
Tells the frame work that the Dom ...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Widgets which currently support enhanced
option:

➡Textinput
➡Butt...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

New in 1.4 the defaults
flag.
by setting data-defaults=”true” you ...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

New in 1.4
$.mobile.window &
$.mobile.document
replaces $(window) ...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Don’t use auto initialization.

➡
➡
➡
➡

Easy short cut but sacrif...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

In addition…
➡
➡
➡
➡

Don’t use data-attributes for options
parsin...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

What we are looking into for the
future.
Alex Schmitz IRC: arschmi...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Initialization Free Widgets
➡
➡
➡
➡
➡

Makes it so you don’t need ...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

High Performance CSS framework
➡

➡
➡
➡
➡

Learned from original m...
Bac
k

jQuery Mobile: Optimizing Performance

Forwar
d

Now thats true native
behavior!

arschmitz@gmail.com
Alex Schmitz ...
Upcoming SlideShare
Loading in …5
×

jQuery Mobile: Optimizing Perfromance

12,540 views

Published on

Performance is a major concern on mobile platforms. jQuery Mobile 1.4 adds a number of performance related options and features to help you speed up your mobile site along with a new theme designed to make your site render as fast as possible. Learn Tips and tricks to make your site as fast as it can. Covered in this talk will be not only framework optimizations but server side tricks to minimize transfer but page initialization times.

Topics covered will include:

Custom Builds
Providing pre-rendered content to avoid dom manipulation (New in 1.4)
Skipping parsing data-attributes when defaults are OK (New in 1.4)
Including common navigation components outside the page to avoid re downloading and initializing on every page load (New in 1.4)
Avoiding sending unneeded page sections from server on ajax requests (while maintaining the ability to refresh)
Taking advantage of new theme to avoid need for enhancement (New in 1.4)
1.4.1 released

Upcoming work on performance:
New high performance css framework
initialization free widgets
General mobile performance best practices and tips

Published in: Technology

jQuery Mobile: Optimizing Perfromance

  1. 1. Bac k jQuery Mobile: Optimizing Performance Forwar d What have you done for me lately? Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  2. 2. Bac k jQuery Mobile: Optimizing Performance Forwar d About me: • 16 Years experience in web development • jQuery Mobile Development Lead • jQuery UI Team member • Current focus: Mobile and UI merger Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  3. 3. Bac k jQuery Mobile: Optimizing Performance Forwar d Now to answer my own question… ➡ ➡ ➡ ➡ ➡ What have we done for you lately?? jQuery Mobile 1.4.1 coming Lots of bug fixes Major swipe and panel fixes Over 60 bug fixes Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  4. 4. Bac k jQuery Mobile: Optimizing Performance Forwar d I don’t know about you but waiting drives me nuts! Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  5. 5. Bac k jQuery Mobile: Optimizing Performance Forwar d Why is mobile performance so important? This comes down to 2 main components 1.) Cellular connection 2.) Device hardware performance Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  6. 6. Bac k jQuery Mobile: Optimizing Performance Forwar d Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  7. 7. Bac k jQuery Mobile: Optimizing Performance Forwar d Time Warner Cable Road Runner Basic Service Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  8. 8. Bac k jQuery Mobile: Optimizing Performance Forwar d AT&T 3G Service Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  9. 9. Bac k jQuery Mobile: Optimizing Performance Forwar d On average mobile devices are 3X Slower! Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  10. 10. Bac k jQuery Mobile: Optimizing Performance Forwar d Simplify your pages! ➡ ➡ ➡ ➡ ➡ Reduce the widgets in each page Reduce the size of your pages Limit the size of your lists and tables Use pagination Just like this list should be reduced Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  11. 11. Bac k jQuery Mobile: Optimizing Performance Forwar d To reduce download time and http requests make sure you ... ➡ ➡ ➡ ➡ ➡ Combine all scripts Combine all css Minify all scripts and css Do not include scripts in the page Consider multi-page template Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  12. 12. Bac k jQuery Mobile: Optimizing Performance Forwar d Multi-Page Template ➡ ➡ ➡ ➡ ➡ Load all pages with single request Reduces Number of HTTP requests Faster page load Faster Transitions Has its limitations... Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  13. 13. Bac k jQuery Mobile: Optimizing Performance Multi-Page Template Limitations Limitations ➡ ➡ ➡ ➡ ➡ Forwar d Slower initial page download Leads to a large Dom Uses more system memory cannot load multi page via AJAX Not good for large # of pages Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  14. 14. Bac k jQuery Mobile: Optimizing Performance Forwar d Typical Single-Page Document <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html> Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  15. 15. Bac k jQuery Mobile: Optimizing Performance Forwar d Downfalls of Single Page ➡ ➡ ➡ ➡ Everything sent with every request Only first div with data-role=”page” used Unused information sent with requests Unused info leads to extra processing and bytes transferred Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  16. 16. Bac k jQuery Mobile: Optimizing Performance Forwar d Add some server side processing to optimize the template <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?> <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script> </head> <body> <?php } ?> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?> </body> </html> <?php } ?> Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  17. 17. Bac k jQuery Mobile: Optimizing Performance Forwar d This reduces what is sent during ajax requests to: <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  18. 18. Bac k jQuery Mobile: Optimizing Performance Forwar d Starting in jQuery Mobile 1.4 widgets can be used outside pages So lets take our updated template 1 step further... Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  19. 19. Bac k jQuery Mobile: Optimizing Performance Forwar d Final version of the single page template <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?> <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script> </head> <body> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <?php } ?> <div data-role="page"> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> </div><!-- /page --> <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </body> </html> <?php } ?> Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  20. 20. Bac k jQuery Mobile: Optimizing Performance Forwar d Making the final markup sent during an ajax request: <div data-role="page"> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> </div><!-- /page --> Is it just me or does this page look really empty??? Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  21. 21. Bac k jQuery Mobile: Optimizing Performance Forwar d The updated template... ➡ ➡ ➡ ➡ ➡ Reduces bytes transferred Reduces markup needing to be parsed avoids init of common nav elements Smoother transitions Faster page loads Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  22. 22. Bac k jQuery Mobile: Optimizing Performance Forwar d Custom Builds... ➡ ➡ ➡ ➡ Reduce files size Reduce library initialization time Reduce page initialization time Allow you to remove parts of the library you don’t need Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  23. 23. Bac k jQuery Mobile: Optimizing Performance Forwar d A custom build which includes... •Full page and navigation support •All custom events •Slide Transition •Flipswitch •Checkboxs and Radios •Textinputs •Listviews •Panels •Popups •Tables •Column Toggle Tables •Toolbars •Fixed Toolbars with Reduces JS by 50% Reduces CSS by 80% workarounds •Loading Widget Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  24. 24. Bac k jQuery Mobile: Optimizing Performance Forwar d 1.4 brings a new theme to minimize Dom manipulation Pre-enhancement <button>Button</button> 1.3 Post-enhance <div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false"> <span class="ui-btn-inner"> <span class="ui-btn-text">Button</span> </span> <button class="ui-btn-hidden" data-disabled="false">Button</button> </div> 1.4 Post-enhance <button class="ui-btn ui-shadow ui-corner-all" role="button">Button</button> Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  25. 25. Bac k jQuery Mobile: Optimizing Performance Forwar d Consider skipping auto-enhancement and widget use for buttons and listviews. ➡ ➡ ➡ ➡ ➡ Avoid all Dom-manip Avoid all associated JS Exclude widgets from custom build Only need to add classes Two of the most used widgets Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  26. 26. Bac k jQuery Mobile: Optimizing Performance Forwar d New in 1.4: The enhanced option Tells the frame work that the Dom is already in a post enhanced state. Removes the need for all Dom manipulation on initialization so all that needs to be done is attach handlers and set variables Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  27. 27. Bac k jQuery Mobile: Optimizing Performance Forwar d Widgets which currently support enhanced option: ➡Textinput ➡Button ➡Toolbars ➡Flipswitch ➡Controlgroup ➡Collapsible Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  28. 28. Bac k jQuery Mobile: Optimizing Performance Forwar d New in 1.4 the defaults flag. by setting data-defaults=”true” you can now skip the reading of data-attribute defaults. Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  29. 29. Bac k jQuery Mobile: Optimizing Performance Forwar d New in 1.4 $.mobile.window & $.mobile.document replaces $(window) & $(document) Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  30. 30. Bac k jQuery Mobile: Optimizing Performance Forwar d Don’t use auto initialization. ➡ ➡ ➡ ➡ Easy short cut but sacrifice performance Has to traverse the dom looking for attributes ( very slow selector ) Leave off data-roles and set keepNative Call widgets in js as you would in UI Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  31. 31. Bac k jQuery Mobile: Optimizing Performance Forwar d In addition… ➡ ➡ ➡ ➡ Don’t use data-attributes for options parsing these is very slow Make sure you set new Defaults flag pass options object to widget when you call it. Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  32. 32. Bac k jQuery Mobile: Optimizing Performance Forwar d What we are looking into for the future. Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  33. 33. Bac k jQuery Mobile: Optimizing Performance Forwar d Initialization Free Widgets ➡ ➡ ➡ ➡ ➡ Makes it so you don’t need to initialize a widget Write your markup and just works no need to call the widget looking into this for the far future http://tech.pro/tutorial/1660/initialization-free-widgets No current plans Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  34. 34. Bac k jQuery Mobile: Optimizing Performance Forwar d High Performance CSS framework ➡ ➡ ➡ ➡ ➡ Learned from original mobile theme, 1.4 theme, UI theme BEM class structure Rendering performance tests Shared by UI and Mobile Very early work Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  35. 35. Bac k jQuery Mobile: Optimizing Performance Forwar d Now thats true native behavior! arschmitz@gmail.com Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz

×