At work, we recently encountered 2 very slow pages, both of them revolved around loading a list of accounts in HAML (around +2000). One page was loading them into a table and using jQuery DataTables to turn the table into an interactive interface. The other page was loading those accounts in a select tag and using Select2 to make them easily searchable.
Early on, when they were loaded by AJAX. It was premature optimised since it was only loading 200-300 accounts, so we decided to render it in HAML. But now, it became a bit of a problem when the app got bigger:
- Users, about 80 of them, started complaining when all of them accessed these pages.
- Pages loaded at an average of 7-8 seconds, at worst some waited for 15 seconds.
- Server-side wise, ActiveRecord pulls these records under 100ms, so improvements needed to happen on the browser-side.
- By the way, these were easily pinpointed by NewRelic and Airbrake :)
- The asset pipeline has already minified and served the assets as single files (css/js).
Some action steps:
- Use AJAX and pull down the data, set the cache to true, serve the page up first, process and load the DOM later from the data pulled down by AJAX.
- Enable GZip Compression in your web server.
- Cache-header, expire them in the far future.
- Use
stale?, use E-Tag headers (304 Not Modified), it lessens stress at server-side.
Safe to say, we brought it down to a page load of 1-2 seconds tops, and we can still improve on that by refactoring and re-strategising.