Improve Performance

[raytiley]

We've received some feedback that the initial load of the site is too slow. This is expected since we never got around to profiling / optimizing for performance before the 6.0 release. Additionally most of our testing was done against internal servers where internet latency isn't really a factor. Plus our usual DB, tighty.tv is pretty small, and therefore fast.

I did a bit of profiling and a some investigating and have some ideas on how we can make the site feel faster, probably much faster. The TLDR of some things we do is below followed my more details.

• Serve index file with colors CSS already defined
• Provide skeleton UI in index and hide on ember app boot
• Coalesce thumbnail requests
• Don't block initial render on search requests

Serve index file with colors CSS already defined

We currently block the application's first render on waiting for the custom css to load. This is because if we render first, the user will get a weird flash of the default color scheme. The best way around this is to change how the pages are served, and place a style tag with the colors css in the served html. This would allow the colors css to apply to the skeleton UI I'm proposing below.

Provide skeleton UI in index and hide on ember app boot

This is just a good practice that we forgot todo. We basically don't show anything while the JS downloads since we are a js app :) What we could do is provide a minimal layout with an SVG loading spinner or something to at least provide an initial UI. Then when the JS has processed we can hide this UI and render the full site.

Coalesce thumbnail requests

We are currently doing individual api request to get the thumbnail records. On the main site this can be 50 requests between the gallery and the slide show. This was just an oversight that was fixed in the API in 6.0.2. We just need to take advantage of it by using thumbnail when requesting the show records.

Don't block render on search requests

Currently the we block on loading basically all the data for the main page in the application route in order to load the saved searches. We also do the same thing for the search page. We should instead not return promises from the model hooks and just use the promise properties to render loading indicators where the gallery / slide show / search results go. This would allow us to render much more quickly, and give some feedback that we are waiting on API data.