I’m looking for ways to optimize Ember app boot speed. I have tested my deployed app with throttling (regular 3G - 750kb/s). The results are terrifying: Screenshot - 2e1b3677fe8460e38cfad348fdffc4c6 - Gyazo. Red arrow shows time when app become usable for users (~9s). Ofc, with cache it not so bad - 2.5s, but still, I think it’s too much for fully cached web app.
Now I see a few bottlenecks that can be potentially optimized.
Vendor.js - size ~280kb (with gzip, and 1.1mb without). Is there a way to minify/uglify harder then default by ember cli?
EmberJS initializing & rendering. It is hard to me to measure its time correctly, but I believe that took good part of init time. Are there some rules/tricks/best practices to optimize this?
Also I will glad to hear any advices about performance optimization.
If your vendor.js contains code which is only needed in certain parts of the application, you could switch to loading that on-demand. But the bulk of that code is Ember and Ember Data and jQuery, and the bottom line is you are looking at an over-engineered framework with excessive levels of functionality which is just really, really big. At this point, you’ve made your bed and you’re going to have to sleep in it. You are likely to find additional terrible bottlenecks as you move ahead, notably on Android and especially if you’re using Ember Data to handle large amounts of data.
Not very optimistic =). Yeah, I already have faced with Android performance problems.
So, for example, if I find a way to get rid of a Ember Data (for example, by using some lightweight alternative) it will give me a good performance boost?
After all I have removed EmberData from my project totally (replaced with ember-cli-simple-store). It has reduced vendor.js size by 10% (100kb). But I didn’t see difference in app performance in general.
Looking at the image it appears styles are taking 1.1sec and a pattern.jpg around 1sec as well. You can probably shave those two off using critical path css and lazy loading of images. Same goes for your webfonts, try using the webfontobserver.
In addition to removing extra libraries, designing good loading screens can actually make the 5-9 secs bearable. Depending on what you’re building, of course.
Thanks for advises. But, unfortunately, I’m not very experienced js developer and have no clue how to use “critical” library with ember app. Do I need to add “critical.generate” call somewhere in ember-cli-build.js? Are there some examples of ember.js with critical?
Your printscreen says that the total payload of the website is 750kb. With 3g speeds of ~350 kb/s (slowest according to 3G - Wikipedia) this shouldn’t take more than ~2 seconds to load.
Looking at the print-screen it also seems like the fonts take quite a bit of time to load.
Since it takes 9 seconds I’d look into using a CDN for faster loading (CloudFlare, Fastly and CloudFront are popular), I think that may help quite a bit.
Second step may be to get http/2 (e.g. via CloudFlare) for multiplexing (faster downloading of multiple files).
I don’t think the size of vendor.js is the main issue here.
For a better user experience we pre rendered the ember app to an html prepage with benefit: 1) users can see the screen after a second whyle the app is loading and taking over screen when ready 2) HTML is easier crawld then ember. Any suggestions for more speed for our web app is welcome. please check www.huishoudelijke-hulp.nl and let me know if you can improve more
