How Pinterest could perform better on mobile

Editor’s note: Keynote Systems’ Startup Shootout Index provides some insight into the three-screen challenge now facing anyone with a web presence. It’s the first website performance index to measure load times and completion percentages on desktops, smartphones, and tablets simultaneously. VentureBeat is Keynote’s exclusive media partner, so we’ll be bringing you a fresh set of data from Keynote every month. Check out previous Startup Shootout results.

Pinterest is one of the hottest startups in Silicon Valley right now. The virtual pin board startup raised $338 million in venture capital and is valued at $2.5 billion. It has 25 million active users and has an active and dedicated following. Despite this success, Pinterest is still not performing as well as it could on mobile.

The site has very impressive sub-second page load times on its desktop site, but has serious performance problems on mobile. We at Keynote see a large amount of content being loaded on the Pinterest mobile home page, and much of it below the fold (not visible unless you scroll down). The complete page load time is almost 42 seconds on average.

This opens an important topic for administrators of content-rich mobile sites.  According to some research, users prefer to scroll down to view content rather than swipe to the right or click on buttons to load additional pages. With this in mind, some mobile site owners intentionally load a large amount of content on one page, with most of it “below the fold”. Even if the complete page load takes longer, hopefully the content that displays on the screen at the top of the page is ready to go quickly. As the site visitor is reading the content at the top of the page, additional content can keep loading just out of sight. For this page design strategy to work effectively, it’s critical that the top content “above the fold” loads fast.

Pinterest

What we’re seeing with Pinterest’s mobile website is that it simply isn’t loading that critical “above the fold” content as quickly as it should be. Images and other content at the top of the page’s design is not loading in the correct order. The Pinterest site has certain design characteristics in common with Facebook, such as having a thumbnail photo of users displayed with their postings. We see the thumbnail pictures being requested over the network first – even ahead of the top level Pinterest logo, sign-in button, and other more critical page components. Thumbnail images that render “below the fold” are being requested earlier than critical content that loads “above the fold.”

In other words, the sequence of loading is not top-level first then second-level. Using the example above, you can load the slower items if they are below the fold, as long as the top items above the fold launch first and come in under the six second standard. The Pinterest logo, for example, is often not being requested until 18 seconds (or longer) after the initial request for the home page if the user is on a 3G mobile network connection.

Gilt

It doesn’t have to be this way. Another startup in the Keynote Startup Shootout Index that loads extensive “below the fold” content on their mobile-optimized home page is the retailer Gilt Group. Gilt’s home page displays thumbnail images for many different currently-running sales in a long list that requires scrolling to reach the end. But the Gilt page design prioritizes “above the fold” content ahead of the “below the fold” product images. This insures that site visitors can see a completely rendered screen as quickly as possible even if some content continues to load out of sight.

One other tip we frequently repeat is to make sure all of those analytics tags are loading at the end of the page to prevent delays. Just like loading a below-the-fold image can delay the load of an above-the-fold image, if a site is loading analytics tags (Google Analytics, Omniture, etc.) too early, those third-party calls can impact the users’ perception of the page load. The best approach is to load analytics tags after all critical content is loaded, either at the very end of the page load or at least after all of the “above the fold” content is loaded and rendered. Gilt is following this best practice for its site, and its mobile users have a better site experience as a result.

The sluggish mobile performance of Pinterest is a little bit surprising, given the impressive page load times for the desktop version of the Pinterest site. The mobile site itself looks clean and the design is visually appealing. The challenge is ensuring 3G mobile network users receive an outstanding user experience. The Gilt mobile website, on the other hand, is a great example of getting it right.

A best practice for sites that wish to load lots of “below the fold” content is to make sure the key components on the page – the logo, login icons, shopping cart icons – are right there up top at first load. This means making sure images are loaded in the correct order.  This is critical for those delivering a “long” mobile page.

To view the full range of Keynote Indices, visit here.  

Keynote tests the sites in the index hourly and around the clock from four locations over the three largest U.S. wireless networks, simulating visitors using three different devices. Data is collected from multiple locations and then aggregated to provide an overall monthly average in terms of both performance and availability.