Website rendering has evolved- We can render websites on client side using Javascript MVC (Backbone.js, Ember.js) or we can use server side mechanism (like Perl, Java) to generate the website.
Last year, I worked on building a modern single-page JavaScript App, wherein most of the Code is run in the browser (client side) to provide a more interactive and app like experience to customers. This approach has some limitations. I’d like to dive deep into the issues and present to you an approach I came up with to make it faster for performance.
Before looking into those, lets take a look at different ways of rendering:
Server Side Rendering (Traditional)
A Web browser requests a page (www.yahoo.com) and a server (written in Java, Perl, Ruby) on the internet will generate an HTML page and send it back to the browser.
The server is responsible for talking to various underlying services, gathering information and building HTML for the browser. In case of Yahoo, it can be gathering sports news, finance news, political news, placing them in their respective columns in HTML and then sending this back to the browser, which is responsible for displaying it. There is a layer of JavaScript, that helps in showing interactive buttons, rendering different portion of the Page, recording Clicks and other stuff.
Any links, buttons will go to the web server, and the web server builds the page and sends it back to the browser.
Client Side Rendering (Modern)
The Web has evolved at a very rapid pace. Advances in browser like Javascript Runtime – Chrome V8 engine, HTML-5 has enabled web to be a fully featured application platform. Developers can now build rich experiences comparable to native platforms on Web.
The way this works is whenever a user goes to a website (www.gmail.com), the webserver takes care of authentication and returns a barebone HTML page, with all the JavaScript. The JS is then downloaded and executed. It makes all the API calls, gathers the data, and displays it in the browser by using a templating language. After that, any links, buttons will make an Ajax request for Data and the JavaScript code, will generate a new template, change the URL and replace the content with the new content. GMail is the best example of JavaScript App.
The availability of libraries like Backbone, and Angular has made the creation of JavaScript Apps in MVC or MVVM fashion, which helps separation of concerns and very good maintainability.
Limitations
Performance
User studies have proven that there is a mental context switch if something takes more than 1 second to load. Amazon claims that every 100ms reduction in page load times, improves the sale by 1%.
Slide from Ilya Grigorik’s presentation Breaking the 1000ms Mobile Barrier which he presented at Velocity 2013 in New York.
For the first time, the browser has to download and execute JavaScript files. The customer experiences a few seconds of blank page or spinner before seeing content on the page. This time is super critical as it can take away your customers to your competitor websites.
Mobile
Network speed on Mobile is slow. And the browsers are not as advanced on all the Phones (especially the Android ones).
A lot of what you see on the internet, you like to share it with your friends on Facebook/Twitter. When a link is clicked on these Apps, they open it in the Web View which is even slower than the native browser.
SEO
In my case, I was building a site to view or share personal content and so I didn’t had to do much SEO. However, Web Crawlers cannot find or crawl content if the website can only run on Client Side, thus affecting SEO. There are some workarounds here to have SEO in place.
Pagination
Infinite Scrolling is a super cool way of showing content these days. Depending on the content your customers are expected to consume, you might want to think about this strategy from experience standpoint. For Facebook, LinkedIn and Twitter News Feed, a customer is expected to see what their friends have posted in the last day or something. But if your web product is something where the user is seeing their own content, it makes a lot more sense to have a Timeline like approach. A very good example of this is UI of Dropbox Photos.
Memory
Infinite Pagination, if not managed effectively in terms of Data manipulation, data caching strategy, can cause the memory of browser to balloon and effectively crash the browser.
Also, the way you use library functions (like Backbone Collections to store data), can affect your memory footprint.
Approach to Fix Performance Issues
For us, slow rendering during startup was most hurtful. I recognized this very early as I was building features on my development environment. Prior to this project, I built Cloud Drive Subscription Pipeline which uses server side rendering and I’d not seen any such issues there. So I came up with an idea to use an hybrid approach of rendering the Landing Page Server Side and lazy loading JavaScript App in the background to give it a Modern Single Page Feeling. To convince the management, I was finding data and examples and came across this amazing Blog written by Twitter where they changed their strategy to use server side rendering instead of client side and manage to improve their perceived performance by 5 times.
I got an intern to work with me on this, and as expected we saw the latency of our landing page reduced to half in side by side comparison. At 99 percentile, I think we will see an improvement comparable to what twitter saw for them.
One of the major disadvantage of having an hybrid approach is – you have to maintain Rendering Codes on both the server side as well as the client side. However with the use of NodeJS on the server, we have seen examples of Companies like Airbnb using JavaScript to render on Server side, thus running the same code both on server and client. I’d like to explore more on this area as this can be a very helpful strategy long term.
Apart from this, various other things that can be done are:
Pagination Strategy
There was a good example on Hacker News last week on how the pagination strategy should be in the case of infinite scrolling app. This is very similar to how Dropbox Photos does the Pagination of their site.
While browsing through the infinite scroller, its a good idea to get rid of the pages (or content chunks) that are not in view.
Effective using of debounce and throttle can help prevent requests getting fired when they are not required or firing it once.
Also, event/request cancellation can be a very effective strategy especially if we are browsing from one page to another. To go to the clicked page faster, its a good idea to cancel request. Youtube has done some amazing work, when you click on any of the videos to watch while you are watching another video.
Memory & Cache
There are cases wherein the Single Page App, takes up a lot of memory and causing the browser to crash. Infinite scrolling is also one reason. Getting rid of pages can definitely help reducing it. But a good cache strategy – removing data that are older and also a fix size cache will help reduce memory footprint thus keeping the Website stable. GMail has a good video and article explaining, how they manage the Memory footprint.
URL
Depending on your app, you can decide your URL strategy. JavaScript apps, would use links with # or #! in the URL. However Push State API availability in most browsers, can help you use normal links. This can be very helpful in SEO.
Tools
There is nothing better than getting a good visualization and data of where your app, is causing problems.
- Making yourself familiar with Chrome Dev Tools will help detect a lot of problems with your website.
- To test your website with different network speed and from different region, WebPageTest.org is a very good tool.
- Also YSlow or PageSpeed are good to analyze performance.
Hardik Shah 