Mobile web page size
I have a developer designing a financial application to be us开发者_JAVA百科ed on a mobile phone via the phones browser. Now each page is 150kb which to my opinion is way to large. No images are used as it is mostly HTML buttons and CSS and possibly JavaScript. How can I minimize the page size?
minify your js/css/html. If is doesnt help, you will need to restructure your pages to show less info, as you said there are no images, so you cant do any optimization on that front
Enable HTML compression on your servers if it's not already done.
What software are on your target phones? If they have capable browsers, you could cut some weight by sending the relevant data down in JSON form and then having Javascript render the relevant HTML. If we're talking Mobile IE... maybe, maybe not.
And, as others have said, use minification.
At a higher level, are you sure you need this much data per page? On a mobile browser it's going to be a pain to navigate.
The major things have been said already but I would add this :
Clean up the Html markup. Check that there are no unnecessary nested tags, divs, and so on. It also helps the javascript to process faster when the DOM is lighter.
This is the problem I'm currently tackling, and I can tell you that you will absolutelly love the book High Performance Web Sites by Steve Souders.
The first thing you'll find out in the book is that you should make fewer HTTP requests and one of the ways to do that is to put images in so called "sprites" (although you said your designer doesn't use a lot of images, it would still help to push that few images to sprites).
To do that you would need some tool (cause doing it manually is just a waste of time), and for this I used compass, and the book Pragmatic guide to SASS was absolutelly great for this topic (it goes straight to the point and shows how to use compass to make sprites - also, I bet once you try SASS, you will never go back to vanilla css).
Also, as Midhat mentioned you should minify your js/css/html, but on top of that you should put all your js file to one file (cutting down on HTTP requests the browser has to make), all your css code to one css file. Also, you should put the stylesheets at the top of the page, and scripts at the bottom. Anyways the few things I listed and a total of 14 rules you'll find in Steve's book. so give it a try, you won't be dissapointed.
精彩评论