Following with the image optimization topic, I am going to have a deeper look to Facebook’s technique to create preview photos, and will show how WebP can simplify their solution.
tl;dr WebP produces tiny files when compressing small images. This makes it ideal for implementing preview photos. Check the demo.
You probably know already about the redesign Facebook will be carrying out to their News Feed. After reading some articles covering their presentation, there are lots of mentions to “clutter reduction”, “more space for pictures”, “more info about check-ins”, etc. What I personally think is that Facebook has decided, simply, to unify their layout across devices. 
This week Facebook announced an update for their iOS app whose main change is a faster overall experience. Going deeper into technical details, we have “Under the hood: Rebuilding Facebook for iOS“, a nice post explaining what changes have been done.
You can find a demo showing the default behaviour and the one using Facebook’s technique. Use an iPhone or iPod Touch to see the effect.
When clicking a link for ajax navigation on iPhone and iPod Touch, the navigation bar slides down and up for every link, even when they are enhanced to support ajax navigation and its click event is captured and we load content using XMLHttpRequest instead.
Yesterday I watched this Front End Tech Talk by Facebook. I found it very interesting because they explained how they faced the problem of having a lot of javascript code and how they managed to reduce it. I think this can be applied not only to a website of the size of Facebook’s, but also any other project where we could refactor existing code.
We had about 1MB of JS on the homepage
They realized they had a problem with so much JS code and they worked at different levels to shrink it. 
It’s been several weeks since I wrote a tutorial to implement BigPipe using C# and ASP.Net MVC. And I have just read a PDF from a presentation at Velocity China in which Changhao Jiang, from Facebook, explains some details about Bigpipe, as well as other techniques they use to improve Time to interact (both real and perceived), as well as data savings. These techniques (named Quickling and PageCache) are based on hijax and an intelligent update of specific content of the page instead of the whole page when data changes.
Parts of the tutorial
In this third part of the tutorial to carry out a technique similar to BigPipe I will cover the browser side. BigPipe is not only focused on server side, but it also sets how the different resources that our pagelets need have to be requested and loaded in the document.
Parts of the tutorial
In the previous post of this tutorial I made an overview explaining how Bigpipe works and why it can improve users’ perceived speed when loading our pages.
Parts of the tutorial
Through a series of posts I will explain how we can implement BigPipe Facebook using ASP.Net MVC.