Tips for speeding up jQuery Mobile

Several people ask about how they can speed up jQuery Mobile, so I figured there should be a thread on tips for speeding up your jQuery Mobile projects.

ELIMINATE WASTE:

Decouple jQuery Mobile elements you're not using (BONUS: Less memory!):

http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/#features

Compress your Javascript, jQuery, and CSS (but keep a formatted version for editing!):

http://www.refresh-sf.com/yui/

http://yui.2clics.net/

Compress your HTML (but keep a formatted version for editing!):

http://www.textfixer.com/html/compress-html-compression.php

Optimizing the web...start with the images!:

http://www.stoimen.com/blog/2010/01/13/optimizing-the-web-start-with-the-images/

JPEGmini - JPEGs with reduced file size but NOT quality:

http://www.jpegmini.com/main/home

EFFICIENT DESIGN:

Put your Javascript/jQuery script calls at the end of the file:

http://robertnyman.com/2008/04/23/where-to-include-javascript-files-in-a-document/

Learn to design and use CSS Sprites:

http://css-tricks.com/158-css-sprites/

CSS Sprite generators:

http://www.designdim.com/2011/02/8-best-css-sprites-generator-resources/

My favorite:  http://spritegen.website-performance.org/

Learn about and design custom CSS buttons using NO images (110 different ways should keep you busy!):

http://www.webdesignshock.com/css-button

Imageless buttons...with icons?!? (The secret? HTML entities!):

http://www.red-team-design.com/just-another-awesome-css3-buttons

The Comprehensive Guide to Saving Images for the Web:

http://sixrevisions.com/web_design/comprehensive-guide-saving-images-for-web/

REDUCE EXTERNAL FILE ACCESS:

Adding Javascript, jQuery, and your plugins inline, while keeping XHTML valid:

http://blog.ryanrampersad.com/2008/07/30/cdata-and-inline-javascript/

Adding CSS inline:

http://www.webdesign.org/html-and-css/tutorials/embedding-css-into-an-html-document.11106.html

Base64 - including image files with the HTML itself:

http://www.stoimen.com/blog/2009/04/23/when-you-should-use-base64-for-images/

GREAT TIP! Encode CSS Sprites as base64:

http://www.stoimen.com/blog/2010/02/05/css-sprites-go-beyond-the-limits-with-base64/

Online image-to-base64 converter:

http://webcodertools.com/imagetobase64converter

More good speed tips:

FASTER DOM TRAVERSAL:

Detailed posts:

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

http://www.artzstudio.com/2009/04/jquery-performance-rules/

http://www.learningjquery.com/2006/12/quick-tip-optimizing-dom-traversal

The short version:

http://engineeredweb.com/blog/10/12/3-tips-make-your-jquery-selectors-faster

http://jonraasch.com/blog/5-performance-tuning-tricks-for-jquery

ASSORTED SPEED-UP TIPS:

http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

http://developer.yahoo.com/performance/rules.html  (Not specific to jQuery, but still good.)

PLUG-INS:

http://headjs.com/