Have you noticed that some of the sites you use have been getting super fast lately? Web pages seem to respond almost too quickly. Try typing a search term into Google and see how quickly the suggested results come back.
A quick summary of what makes these pages so damn fast
When a user clicks on a normal web page, it works something like this:
Each time a user goes from page to page, pretty much the entire page gets sent back with new content. Some of this is remembered by the browser and doesn’t need to come back, but a significant part needs to come back down from the server each time.
When a user hits an Angular page, the process is a bit different:
The result? Instead of getting a new page every time, only the bits that change need to come from the web site. So the header, footer and navigation is loaded the first time. After that, the new content is squirted in as you move from page to page. Even this can get done in the background- so the page appears in the browser and then the content appears. What this means is that page loads are in milliseconds rather than seconds.
Still not convinced? Check these numbers out: I benchmarked an uncached page on a project were working on – the current version uses JQuery Mobile, the new is Angular with a Rails API providing content.
Jquery Mobile: 4 s
Angular: 450 ms
(Mum: if you’re reading this, 450ms is 0.45 seconds – about the reaction time a driver needs to brake when driving)
Why bother with all of this?
Don’t forget about the changing demographics of your audience. If your audience is anything like ours, more and more people are using mobile devices instead of desktop. And this number is probably going to keep on going up. The rise of mobile means that fast pages are even more important, since mobile devices typically have a slower network connection, smaller cache and lower processing power than desktop PCs. A page that might take 5 sec on desktop might take up to 10 sec on mobile – so quick pages matter. Not only does a slow page frustrate your mobile users, it will pull down your average page load speed, which one of the factors used to rank Google search results.
Fitting this in with an existing application framework like Ruby on Rails
On one project, we’ve changed the way the Rails application works, from being a regular Rails web application that controls everything that the user sees and does, to being a big API. This means that the main web app controls logic (what each user should see and when), and exposes this as a feed of data. The Angular front end uses this to show different pages and content to the user. Since we can compress the bejesus out the data feed, the actual data coming off the server is tiny – so super fast.