PerfAudit: Panda App
Hey folks! Today we have come up with the case study for the very famous Panda app (also available as browser extension), the newsfeed dashboard for 130,000+ designers, developers and entrepreneurs.
It aggregates content from sources like Hacker News, Product Hunt, Dribbble and various other channels, making it easier for you to stay informed and inspired.
##How fast does Panda app load on average?
When tested via WebPageTest, it had a start render time of 687ms, though usable information was displayed at around 7th second, while all the resources were completely downloaded after 17.221 seconds, which displays a great margin of improvement.
Network profiling
Initially the entire screen gets painted with a light color.
After around 6.49s, we are able to see an empty skeleton of the newsfeed, yet to be populated by the data fetched from the newsfeed source and the designfeed source.
Network waterfall chart:
As JavaScript and CSS were not loaded via CDN, it was taking an average of 3-4 seconds to load. Using CDN should reduce this time drastically.
Desktop pagespeed score for Panda app is just 9 out of 100, which specifies a tremendous scope for improvement. Panda app is an image heavy app, and displays loads of animated gifs and pngs fetched directly from the CDNs of popular design platforms.
Maximum compression, suitable resizing and caching of image resources should be their primary action, which is verified by PageSpeed’s recommendation which says:
Optimize the following images to reduce their size by 4.8MB (73% reduction).
4.8MB of size reduction just through compression and resizing of static images must be tackled on priority.
While it is easy for the Panda app to directly use the images available from the CDNs of design platforms, they have an option to use a proxy CDN that gets them a resized version of the original image which may be much lighter in comparison.
Mobile Specific Issues
Compression and Resizing of images is again highlighted in the page speed issues, which has already been discussed in the issues listed above.
Other necessary optimizations possible for Panda app include:
- Eliminate render-blocking JavaScript and CSS in above-the-fold content
- Leverage browser caching of static resources with appropriate response headers.
Offline Experience
Another important aspect is the offline experience, which is currently missing in the Panda app, not just in the web app but from the browser extension as well.
A browser extension already works when offline, the only missing piece to fix in this case is Caching of the content for the News feed using LocalStorage or IndexedDB on the client side. Static resources such as images can be cached either by applying suitable headers via Proxy CDN or by using the combination of Service workers and App Cache for the same.
For the web app, service workers can be deployed to provide offline experience i.e. cache all static resources and data to build the newsfeed.
Profiling Rendering Performance
Let’s enable paint flashing and see as to what elements are getting repainted with different interactions on the webpage.
Following is the screenshot displaying the elements that get repainted, when the left most column is scrolled.
You can see the entire left most column getting repainted, which may cause a jank while interacting with the elements of the left most column, as a major portion of the page is getting repainted while a user scrolls.
Similar repaints are observed while scrolling the right most column, and it may also be a potential cause of jank.
Below we have displayed the timeline recording while we interacted with one of the columns continously getting repainted.
You may see several frames exceeding 16ms time window.
As in previous case studies, this can be simply fixed using the transform: translateZ(0) or will-change: transform hack, which will promote the element to its own layer making it hardware accelerated while removing the probability of its contribution in causing jank.
Animated GIFs
Animated GIFs get repainted, every time the frame changes. In the following screenshot, the green bordered elements are the continously repainted elements.
As mentioned before in previous case studies, a solution to this issue, already in use by many other popular websites which render GIFs such as 9gag.com, in this case animated gifs are disabled by replacing their source with another non-animating image when they are not visible i.e. not present in the view port of the screen.
This practice reduces the repaint operations happening when the animated image is out of the viewport.
That is it for Panda app from our side. Till next perf study!
Comments