You might not have noticed it, but depending on the phone platform you use, your Facebook mobile app is about 10 to 15 faster than it used to be. How’s that? Facebook has tweaked its app for both iOS and Android to render pictures and your overall News Feed faster than before.
On the [company]Apple[/company] iOS side, [company]Facebook[/company] said in a blog post on Wednesday that its software uses 10 percent less data and displays images 15 percent quicker. The company now uses the PJPEG, or Progressive JPEG, image format to display pictures. PJPEG has been around for a while in browsers and it speeds things up by having multiple scans of the same image but at different quality levels.
When an image first appears in Facebook, the app may use a lower resolution scan to display a full image quickly, which can also save on bandwidth since less data is sent. Then, if needed, Facebook can re-render a higher-resolution scan without fulling a full screen refresh. Here’s an example from Microsoft with the left image rendered at the lowest-quality scan while the right image is a full high-res scan.
Facebook said it considered using [company]Google[/company]’s WebP image format but chose not to because it doesn’t support progressive rendering. And according to Facebook, it had to build its own way to render progressive images in iOS because there’s no readily available solution to do so on Apple’s mobile platform.
iPhone and iPad owners aren’t the only ones reaping benefits from Facebook’s latest efforts; on Android, the News Feed should be more stable and smoother to scroll through.
The News Feed uses a ListView object on the Android app; a fairly common tool to display data. But in order to maintain a 60 frames per second scroll rate, Facebook’s ListView usage has to do a bunch of things in a short time: Under 16.7 milliseconds, the company says. Getting access to all of the required News Feed content in that time is tricky:
Whenever a new view goes into the viewport in your ListView, the ListView will call its adapter’s getView method. That method, in turn, has to get a view, and bind all its content into it, and this thing must happen in less than the 16.7ms mark (In fact, since other actions have to happen, such as measuring and drawing, there’s even less time). This is easily achievable for simple content, such as the views that contain text only. It becomes challenging when trying to render rich content which contains complicated views — a lot of text and images, for example.
How does Facebook manage it? In 2012, the company decided it couldn’t use a web-view approach so it began working on a native solution. That helped but still wasn’t ideal, so last year, Facebook added two more items to News View rendering.
The first is splitting each News Feed story into several items, such as the header and the content. This helps with Android’s memory management. Second, the company reworked the various parts of a story in the News Feed, creating different class objects and then recursively creating stories faster.
The end result? Facebook says there are 17 percent fewer out-of-memory errors and 8 percent fewer app errors overall. And the new, recursive approach speeds up the News Feed load by 10 percent.
Will you notice these small improvements? Maybe, maybe not. But there’s a big story behind all of those stories in your Facebook app and it’s interesting to see how the company is trying to improve the overall app experience.