I'm developing a web app with HTML5, css3 and backbone.js and expected lag issues on android mobiles, however my guess is the css causes all the lags, the app would run smoothly without any css. My question is: Is there anyway that can effectivly reduce lag on android by reducing css or other ways?
yes! You can uglify and minify CSS and slightly reduce the size of the file.
But more importantly, how many different CSS and JS files are you calling in your HTML file? Each CSS is a separate HTTP request and definitely slows down the page loading time. Generally you take the number of milliseconds that it takes to load on a desktop and multiply that by 10 for a fast mobile device. Look at the network tab of the Inspector in Chrome (there are similar features in Firefox and safari) and see what the added load of those extra css files are.
How do you reduce the number? By using SASS. Sass is a preprocessor framework for CSS that condenses all your CSS down to one file elegantly. I recommend using an app called Prepros to handle SASS rendering, more information is available on the Prepros and SASS officialy websites.
How many images are you loading? Using services like Tiny Png can reduce the size of the images without losing any visible quality, mobile devices have less ram and are forced to do compression on the front-end.
You can also use the minified backbone.js file, and minify any js you have yourself. this can be done again with Prepros (and the paid mac app Codekit) or you can use any number of online services.
Basically: You need to compress the size of the files you are using, reduce the number of requests for files, and finally keep working to optimize your own javascript to make it as fast as possible. The next step after that is to start simplifying your app and getting rid of features that aren't needed and focus on the core parts that make it useful and elegant.
Related
I have an HTML5 game I have been working on that is using a couple of JavaScript libraries that are approx 1.5mb combined (minified) and have approx 1.5mb of assets (3D models and PNG textures).
My actual game code adds a measly 50kb on top.
All in all it's a little over 3mb.
I have 2 questions:
While I am developing and testing the main 3rd party libraries and the game assets are not changing. Only the 50kb or so game logic is changing.
Can I test on a mobile device (in my case Safari in iPhone) and have all those libraries and assets loaded the once, and only download the revised game logic files?
If I share the URL with friends, are they going to be forced to download the whole lot every time they reload the page?
I guess bottom line is what, if any, caching options are there to avoid constant reload of static (unchanging) libraries/assets?
Any help / advice appreciated.
Thanks
Martin
JavaScript libraries - if it is a popular library, it will be more efficient to load them from CDN since it is more likely that the browser cached it from other site.
You can split the code to two minify/uglify files and for the file that is not likely to be changed add an Expires or a Cache-Control Header in server: https://developer.yahoo.com/performance/rules.html?guccounter=1#expires
Use Gzip (you can also find it in the above link) which will reduce the size of the response files.
You can add a service worker combined with Cache interface (service worker not supported on all browsers) to cache JS files including assets (e.g. images):
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
https://developer.mozilla.org/en-US/docs/Web/API/Cache
I'm working on a web project that uses webgl content generated with unity. When trying to load the required js files the browser freezes for around 30 seconds. The main js file has 35MB size unzipped so this seems to be the cause.
I want to avoid this freeze if possible but I couldn't manage to do it using WebWorkers since the script needs access to UI. My other possible solution is to try to split the js file into smaller ones but I don't know how to do it. Do you have any suggestions?
If you add async to your script tag like this <script async src="app.min.js"></script> it will not block rendering anymore. Also caching the script in the browser or delivering it from a CDN can help reduce the download time.
35MB are, however, way too much for a website. Are you sure there isn't a lot of unused stuff like libraries in it?
We recently wrote an article with web performance best practices, with explanations to critical rendering path and other fronted concerns here
35 MB just for the JS file seems ridiculous. It could be that the entire build is probably of that size (textures, media, etc.). Have a look here on how to reduce the build size.
Though 35 MB is wayyyy to much for a JS file, you can start by following pointers:
Create utilities and reuse the code. This can be at any level. Be it generic component (HTML generating code) or validation logic, if it can be configured using arguments, make a function and use it.
If you have Hard-coded JSON in your js, move them to .josn files and load them only when they are required.
Split files based on sections in view. In SPAs, there are cases when a section is not visible. For such cases, don't load such files. Spread your code base from 1 file to 100s of file.
If you have a lot of event listeners, move them to different file. You can have section_event.js, section_data.json, section_utils.js and section_index.js. If there involves lot of data parsing, you can even have section_parser.js
Basic Idea is to split code into multiple files. Then, make code more reusable. You can even look into loading libraries to reduce your load.
Also, load a resource only when required. SPA have stages. Load concerned files when they are needed. Split download from 1 time to partial, on-demand approach. Also look into webpack or grunt or gulp to minify js.
I am just getting started with Angular 2. It actually makes me think about the size of the page just for the Hello World.
Please look at the scripts which were actually needed and it already is 1.75 MB.
Offcourse with minification it would reduce 30-35% approximately.
Yet it would still be above 1 MB just for this junk Hello World type application. Adding bootstrap CSS / Jquery / Jquery UI at the minimal would take it even further plus add images depending upon the web application type.
Question is 1.75 MB of script without writing a single line of code pertaining to the application.
Is this the new web standard to make the page size on an average above 4-5 MB?
There are several strategies that will reduce the total size of your site.
Enable gzip compression for your assets. Most text files (like JS files) compress very well due to lots of strings that get repeated.
Use the minimised versions of libraries, as you identified.
Use CDN references to 3rd party libraries if possible. That way, the user may already have the file in their cache and don't need to refetch it. Some CDNs also support HTTP/2, meaning that more files can be requested in parallel.
Take advantage of the Ahead-Of-Time compilation (AOT, a.k.a. offline compilation) in Angular 2 RC 5, and swap to using the version of Angular 2 without the compiler. That saves about half of the size of the Angular 2 library file.
Use HTTP/2 yourself for your assets, and refer to each JS file individually, rather than bundling it. That way, if they haven't changed, the user won't need to download them again when they reload. And the first time, all the files can be fetched in parallel.
Use conditional comments or server side processing to remove the shims and other JS files that are only relevant to certain browsers like IE. That way, other browsers don't download those useless scripts.
Use something like Rollup or another tool that can do "tree shaking" to remove unused code.
There are probably other ways to save even more, but this is a good starting point.
Angular2 is going to get smaller in smaller now. See ngconf about this. Its mainly result of tree-shaking minification (loading only code, that really used).
Angular 2 seed project, wich in prod build loads with ~300kb is already available for use.
I am doing hybird JQM application using phone gap. Now to load index.html in webview it takes much time as there are 15-20 java script refences in html.
please suggest approches for minimizing JS loading time or any parallel loading
use BackboneJs and RequireJs for asynchronous loading of javascript files
Minify & merge your js files into 1-5 files. Currently I use a grunt + uglify via node in my applications for this.
If you're using tightly coupled code, you can do a single file, and use something stronger like google closure compiler for this... I find that uglify + merge is sufficient.
Alternatively, act like it's 2003 and pre-render your pages using server-side postbacks for mobile browsers.
I need a tool which can minify, optimize and munge many files of those possible types
HTML (minify only)
JavaScript (minify, optimize and munge)
CSS (minify)
The final result should be one HTML file only with all JavaScript and CSS embedded or in the worst scenario 3 files respectively for HTML, JS, and CSS.
I am aware of tools like YUI Compressor etc. What I currently have not found is the type of compressor which will work on all those file types and merge them in one huge file only.
If you're not using gzip yet, start using it already and we can close this thing out ;)
My suggestion would be to put all of the JavaScrpt inside a <script> in the header, and put all of the CSS in a <style> tag as well. Then optimize to the best of your ability and then minimize it on your own. No software will ever be able to handle every case. If you are trying to minimize the file size then just remove the newlines and non-necessary spaces.
I also found this, which should work on your file with all 3 in it.
Also be aware that if you start removing optional tags you could run into some problems. Some browsers don't cooperate as well as they are supposed to.
Gad, consider the drawbacks to minifying CSS. If you don't have a system where you edit normal/minify/ then deploy it can make later editing of CSS rather dicey.
I went through this whole argument on a big UI refresh project for an international bank. One site in particular was doing 1million+ visitors/day and bandwidth numbers were insane despite all our efforts to keep it minimal (every little bit adds up on a site that heavily trafficked) Upon business analysis by a large team of very talented minds, it was determined that we would take several steps, but NOT css minifying due to the added time it would take engineers to undo the minifying before fixing, minifying and redeploying for simple CSS tweaks. The numbers showed that even with a 5gb/day bandwidth improvement, it was still cheaper to not pay a UI engineer for the extra time.
We don't know your site's specifics, but there aren't terribly many that have to worry about the traffic my example uses. Run your site in Firebug's new speed analyzer and see what the real benefit could be from minifying.....now multiply that by your traffic. Usually, that number isn't too scary. Spend your time doing image sprites, combining css and js into respective files (better than mashing into individual php files due to caching benefits) to limit http requests, and ensuring that caching is properly setup. Run gzip compression. If after those steps you're not good, then take the site to a new level.
Keep it simple....it makes a huge difference in the update and maintenance portions of the site's lifecycle. With the time and headache saved, you can help us out with our questions :)
As far as I know there isn't such a tool. If you use PHP on the server side, however, you can try PHP Speedy (not actively developed, but works) or Minify for automated minification, caching and gzipping (HTML, CSS, JS).
edit: kangax's HTML minifier (as Badger suggested) only does HTML minification.
you can use jsCompressor to compress and minify multiple JavaScript files and CSS Compressor to compress/minify multiple Css files into one file.
and to optimize your HTML files you may send post request of your code to Google Clouser server which sends response with optimized Html code.
http://prettydiff.com/?m=minify will do exactly what you need, except that it only minify JavaScript and not obfuscate it.
I suggest you look at the build script that's included in the html5 Boilerplate: http://html5boilerplate.com/. With some minimal tweaking it'll do what you're looking to do.