CODEWITHSUNDEEP
ember.js
Benisburgers
Benisburgers

Reputation: 352

How to force ember.js to fully load all routes before it renders the index route?

I've recently created my first web app with ember.js. When I move between routes, they take too long to load which creates some ugly and not very app-like effects.

Unfortunately I am still very new to ember.js and therefore I'm unsure of which keywords to look and search for.

Feel free to check out this project at http://elephants.surge.sh/home.

Is there a method to load all routes, nested routes, templates, and components at once, while showing a loading template and before rending the index route?

Upvotes: 0

Views: 209

Answers (2)

real_ate
real_ate

Reputation: 11289

I've taken a look at your website and I would like to expand on what @mistahenry has said and hopefully it will result in some performance gains on your website 🎉

Firstly @mistahenry is right, it does seem that your site is not using the minified version of your app. By default, if you build your app for production it will minify your JavaScript and do a whole bunch of other optimisations. You will not need to edit your ember-cli-build.js file, but instead you will need to make sure that when you're building your app you pass the correct arguments: 

ember build --env production

You can read a bit more about this command in the official Ember Guides. I am not familliar with how http://surge.sh/ works when it comes to deployment but if you could configure it to build your app in production mode that would be the way forward.

I would also recommend taking a look at Netlify for deployments because it also has a free hosting option and I know from experience that it by default builds your Ember apps correctly 🎉

Another thing that I noticed on your website is that when you go to http://elephants.surge.sh/home it shows up as a 404 (Not Found) error. You will see that if you go to http://elephants.surge.sh/ it works fine (and seems to redirect you correctly to /home) but then when you refresh it breaks again. This is not something that is specific to EmberJS, this is something that is common to all Single Page Applications and it just means that you need to specify the /index.html file as your custom 404 page so that the application boots correctly. If you do end up trying Netlify it has more information in their documentation about this specific type of issue. Unfortunately, I don't know how to solve this same issue on http://surge.sh/

Once you apply these changes you will find your app is loading significantly faster 🎉 but when it comes to performance there are always a few more things that you can do to improve things 😂

We actually ended up answering this question on "May I Ask a Question" Season 2 Episode 2 and went into a bit more detail about some of the other solutions that might help you. If you would like to see us discuss this answer in full you can check out the video here: https://youtu.be/9kMGMK9Ur4E and if you have any other questions you can always join the Ember Community Discord and reach out to me (@real_ate) and I will walk you through making your site lightning fast ⚡️

You can find more information about the Ember Community Discord on the Community Page of the Ember website

Upvotes: 2

mistahenry
mistahenry

Reputation: 8724

After looking at your website, it's pretty clear that you've misdiagnosed the problem :) The laggy behaviors you are experiencing are not related to ember being slow to change routes...rather, your experiencing network lag. You can tell visually by seeing the text render instantly but your images taking forever to load.

Open up the network inspector of your browser of choice. Your vendor.js is 1.1MB and took 4.31 s for me to load. You have various images that took significant time to load (286KB in 2.47 s). So get a server that actually has decent bandwidth!

Besides better hardware, you're leaving a lot of optimizations on the table. You could minify your js and css in your ember-cli-build.js file:

module.exports = function(defaults) {
    var app = new EmberApp(defaults, {
        minifyJS: EmberApp.env() === 'production',
        minifyCSS: EmberApp.env() === 'production'
    });
};

Make sure your web server is also gzip compressing your files before serving them. This will improve performance.

Your images are also way overly sized. For instance, portrait.jpg on the home page is 1366 x 2048 px despite showing 370 x 500 img on my 15 inch mac book pro. Using a tool like ImageMagick, you could properly size these images for the web:

convert -resize 600 -quality 70 portrait.jpg convert.jpg

That's not even aggressive and drops the image from 157 KB to 51K. Drop the size / quality depending where your eyes draw the line.

Try using a tool like google page insights to further see places to improve.

PS. You need to make your http server fallback to index.html whenever it doesn't find a resource (since the route specific paths don't actually exist on the server). With apache that's just: FallbackResource /index.html. The link you sent doesn't work (only / does). Try refreshing on any of your routes and you'll see the problem

Upvotes: 3

Related Questions