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
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
jQuery Mobile: Optimizing Perfromance
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. 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. 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. 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. 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. Bac
k
jQuery Mobile: Optimizing Performance
Forwar
d
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
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. Bac
k
jQuery Mobile: Optimizing Performance
Forwar
d
AT&T 3G
Service
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
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. 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. 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. 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. 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
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
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. 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
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Bac
k
jQuery Mobile: Optimizing Performance
Forwar
d
Now thats true native
behavior!
arschmitz@gmail.com
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
Notes de l'éditeur
Hi my name is Alex Schmitz and im going to talk about optimizing performance in jquery mobile.
a little bit about me...
im the jQuery mobile development lead i spend aprox 50% of my time on jQuery and the other 50% working with car dealerships to develop responsive web sites and custom sales solutions
like text messaging applications to answer customers questions who are on the lot when they are closed
so why is optimizing perfromance on jquery mobile so important...
well i hope you already have a good idea the answer to this question but incase you dont it comes down to two major concerns the speed of cellular connections and device hardware performance
this chart shows sunspider benchmark results for various mobile devices and desktop browser and averages for each category. these results are not meant to be quantative but just to give you an idea of the performance issues we face. developing for the mobile web.
this is the speedof.me result for my home TWC roadrunner connection we get approx 15 down and 1 up
now moving to a 3g cellular connection we see a huge drop in speed
looking at both of these sets of sample results we see that mobile devices are about 3 times slower on average in both tests.
One of the best performance tips i can give is to really look at the elements and widgets which you are placing in your page. Do all of them really need to be there? can you simplify it? On a very basic level the smaller your page and the simpler it is the quicker it will load.
one of the best ways to minimize the effects of a slow connection is to reduce http requests some quick best practice to do this are to combine and minify all scripts and css. And in jquery mobile dont include scripts in the body of your pages. many people do this in jquery mobile to work around the head pof pages not being used during ajax navigation. however this creates additional requests and can lead to a lot fo other problems i wont get into. Another jquery mobile specific thing to consider to reduce requests is to considder the multi page template.
the multi page template has the benifits of loading all your pages with a single request so it reduces the number of requests has near instant page loads after the first page and much faster transitions. however it does have its limitations
The multi page template has a slower inital page load, leads to a very large dom depending on the number of pages you have and uses a lot more memory to store all these pages. another limitation is that currently you cannot load multi page documents via ajax. so it really comes down to the complexity of your site or app and the number of pages you have. if you have a lot of pages or a complex app this is probably not for you.
so now lets look at the single page template. This is just the template copied directly from our demos site. it looks like a typical html document with just some special structure for the jquery mobile page model.
The down falls of the template become apparent when you start doing ajax navigation and look at the actual information sent with each request. with this template every thing is sent with every request even though the head is essentially discarded along with everything else execpt for the first div with a data role of page. so there is a lot of unused information sent with every request that is not only un-needed it just adds extra for us to parse.
so lets add a little server side magic to improve this this sample uses php but you can use whatever server side language you prefer. what i have added here is a check to the request with header to see if this is an ajax request. If it is an ajax request all we need to send back the page div because jquery mobile will just discard everything else anyway so why send it?
so now this is all we are sending back from the server if its an ajax request its a lot smaller in terms of transfer size and requires almost no parsing.
now starting in jquery mobile 1.4 we can take this template even a step further by including common navigation elements outside of the page.
so now our final version of the optimized single page template looks like this the page only contains our content and our toolbars are within the body and wrapped in this check for an ajax request. by also including these in our check we ensure that if someone refreshes all the needed information will be sent but if its an ajax request we no these are not needed. this not only saves bytes transfered but saves us from having to initalize these widgets on every page load improving our javascript performance.
so the information sent from the server in our final version of the template on an ajax request is just this. Is it just me or is this page looking empty compared to our initial version?
Our updated template now has the advantages of reducing the amount of data transferred it reduces the amount of markup that needs to be parsed to pull out what we need. it avoids re initializing common navigation elements on every page load. it has improved transition performance and faster pages loads.
One of the single most important steps you can take to improve your app performance is to use a custom build. i can almost guarantee that no one in here has a site or app that uses every single part of the library so if your not using a custom build your loading features you don't need? Custom builds will reduce your file size, reduce library initialization time reduce each pages initalization time by not needing to look for all kinds of widget that you know will never bee there and you get to just take out the parts you dont need!
Doing a custom build including these common components we can immediately see how big a difference this can make in the file size. our jaascript file has been reduced by 50% and our css has been reduced by an amazing 80%. A big part of why the css is so much smaller is transitions by default jquery mobile includes 14 transitions but in most places people only use 1 or 2
Another great performance improvment we have made in 1.4 is a simplified theme and markup structure. here you can see the markup you write just a simple button element and what it looked like after enhancement in 1.3 and what it looks like in 1.4. you will notice we have removed all wrappers and child elements and it is just a set of 3 classes. this avoids a ton of dom manipulation.
now you may be wondering looking at the final button well if all it is is 3 classes why do it with javascript at all? and you are right to wonder this and infact we encourage you to do it your self buttons and listviews are 2 of the most commonly used widgets in jquery mobile and now with the simplified structure you can skip autoenhancemnt of these widgets by not adding a data role and just adding the classes your self. this will allow you to avoide all dom manipulation and javascript completely and dramaticly improve your page load times.
another option we have given you in 1.4 is a new option called enhanced. This option tells the widget that you have already provided the markup in its final enhanced form so all we need to do is attach event handlers and set variables this avoids all inital dom manipulation to once again improve your page load times
unfourtanitly we didnt get to add this option to every single widget currently in jquery mobile we wanted to but we just ran out of time. so it is currently available on these widgets.
by setting data-defaults to true we will now skip checking for data attribute options. When we were looking at performance for 1.4 one thing we found is that check data attributes for options is a very slow process. and very often these options are never used because the defaults are fine. so now by setting defaults to true we will not check any other data attributes
these are variables we use internally to avoid js overhead. We found that we were calling the jquery function on window and document in a lot of places and while the jquery function is very fast calling it repeatedly on the same thing just adds process thats not needed when we can do it once and save a reference. so now you can take advantage of this in your own code too. just make sure you only use it in code that runs after jquery mobile is loaded
i this this is going to wrap it up for what i have today are there any questions?
