jQuery
Plugins
UI
Meetups
Forum
Blog
About
Donate

All Forums
Recent Posts
Log In

Search jQuery

jQuery Forum

Move this topic

Forum :

Sub forum :

jQuery Mobile

greymatte..

Tips for speeding up jQuery Mobile

in jQuery Mobile • 9 years ago

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

What are you favorite links, tips and/or tricks for speeding up jQuery Mobile?

Replies(8)

greymatte..

Re: Tips for speeding up jQuery Mobile

9 years ago

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/

Re: Tips for speeding up jQuery Mobile

8 years ago

http://willjw.com/getdatauri - My friend made this site to convert image src attributes to data uri which has really speeded things up for me.

head.js is really good for deferring parsing of JS until page renderred and prevents page hanging while your header pulls in loads of js libs.

Also make sure gzip enabled on server to server content quicker and you get your js libs from a CDN or somewhere with a cookie less domain to speed stuff up more.

Leave a comment on mattyboyfedak's reply

bagman

Re: Tips for speeding up jQuery Mobile

8 years ago

The use of data URIs for images can be beneficial. However, something to keep in mind is that conversion to a data URI, results in a 1/3 increase in size over the original binary content when content is base 64 encoded. So, while you're avoiding the overhead of an additional request, you're also increasing the payload of that one request. YMMV depending on the content that you're delivering, so you should still test carefully to understand the results instead of just blindly converting binary content to data URIs.