How to Render a Mobile Site in 0.7 Seconds

Since its inception, Marfeel has always been committed to being blazingly fast. 

In a mobile-first world where speed is vital, Marfeel is dedicated to serving the first meaningful paint (the primary content that allows the user to start reading) in 0.7 seconds and now, we're putting our money where our mouth is

Marfeel premium publishers now score in the top 1% of the world's fastest sites on the net because of some game-changing enhancements Marfeel has made to their infrastructure and is making extensible to partners.

Tested under a 3G Connection at https://testmysite.withgoogle.com/intl/en-gb

Why is speed so important?

Instantaneous speed is critical for publishers because of its impact on SEO. Facebook will soon be using load speed as a signal for their ranking algorithms. Google is moving towards the same

Page speed also has an undeniable correlation with engagement. In this Google article, there is overwhelming evidence that suggests the longer a site takes to load, the more bounces publishers can expect to see. Some sobering statistics include:

  • 53% of mobile visits are abandoned for pages that take longer than 3 seconds to load
  • Sites that take 5 seconds to load when compared to sites that loaded in 19 seconds demonstrated:
    • a 25% increase in ad viewability
    • a 70% boost in average session time
    • a 35% decrease in bounce rates
    • double the mobile ad revenue 

Just being fast for users on 4G and in well-connected areas isn't enough. A publisher's audience is across the globe which means you have to be fast everywhere, especially considering 70% of cellular connections will occur at 3G speeds or slower until 2020, according to Google.

Lastly, the compelling nature and magnetism of blazing mobile speed can't be argued. Who doesn't like the lightning-quick page speed of Google AMP and Facebook Instant Articles? Well now, Marfeel premium publishers can be even faster.

How Marfeel takes publishers to the pinnacle of speed and smoothness

Historically, Marfeel served a lot of the mobile site resources from its infrastructure to optimize speed and performance. However, a publisher's Marfeel mobile version was still dependent on assets - like images and media that make up 80% of the total bytes downloaded - that were hosted and delivered by the publisher's infrastructure.

This meant that Marfeel couldn't use their sophisticated techniques to optimize these media assets and further improve speed and performance. 

With the new Marfeel CDN package for premium publishers, Marfeel's activation and serving logic has been moved to the server-side. This is the key that allows Marfeel to be so blazingly fast and elegantly smooth. This enables Marfeel with integral abilities like device detection on the server-side and asset optimization. 

Device detection on the server-side

In the past, device detection was performed on the publisher-side with a JavaScript snippet. Marfeel is an adaptive web solution that promotes the creation of multiple, highly optimized versions of a publisher's website. Depending on the device being used, one version or another must be rendered.   

Marfeel now detects devices at the server level. This means that the right version to display to the user is executed on the first roundtrip and pushed "down the wire," saving several seconds of loading time and getting Marfeel closer to their goal of 0.7s.

Additionally, moving the activation logic from JavaScript to the server also avoids sending unnecessary and unoptimized assets meant for desktop. Some browsers start rendering and pre-fetching heavier resources for desktop when a user is browsing on their mobile. By detecting devices on the server-side, Marfeel eliminates these external techniques used by browsers to further reduce Marfeel's loading time. 

Optimize media assets

As Marfeel no longer has any dependencies on publisher servers, the first request is able to return fully optimized assets. The latest technology is used like WebP; a new image format that is 26% smaller than PNGs and 34% smaller than JPEGs, while providing lossless compression for images on the web.

Marfeel also delivers responsive media. This refers to rescaling media depending on the device the reader is using which includes both different-sized images and media that's optimized differently.

With all these infrastructure changes, Marfeel also optimizes assets with Brotli. Brotli is the newest and most cutting-edge version of ZIP. It's a compression algorithm invented by Google and used by Marfeel that can save up to 26% of space when compared to Zopfli.  

Remove unnecessary DNS resolutions

Traditionally, publisher servers were also responsible for the time to first byte - meaning how fast a connection can be established to respond to a request, which includes DNS resolution times and an SSL handshake. 

To display the Marfeel mobile version, Marfeel had to make two DNS resolutions. One was made by the publisher server when the first request was made and a mobile user was detected.

With the Marfeel CDN package and server-side device detection, Marfeel removes an entire DNS resolution and makes the only one that's needed in 50ms.

Servers as close to users as possible

To deliver optimal speed and performance, a publisher's servers need to be as close as possible to their readers. 

For example, if you're an American-based publication with European readers, a user accessing your content from London would need a trans-oceanic connection that takes two seconds in some cases, but can also take three or four to make a round trip to the origin server.

To bring a publisher's content as close to their audience as possible, the Marfeel CDN package equips publishers with POPs (points of presence) all over the world. For a comprehensive overview of Fastly's network map and strategic points of presence locations, see the Fastly POP locations article.   

Tests and audits

With Marfeel's infrastructure changes, publishers' mobile sites now score optimally in testmysite.withgoogle.com even when testing on 3G connections.  

Speed alone however, isn't enough. Marfeel's CDN package isn't only about downloading the first byte as fast as hell, it's also about delivering a smooth UX and fluid interaction. To ensure that Marfeel delivers the smoothest UX possible, they use Google's Lighthouse test to continually assess themselves, where optimal scores can only be achieved by optimizing JavaScript. 

When compared to the world's leading publishers, Marfeel significantly outscores them. There is also a reverse correlation that can be observed with large publishers: Any publication that scores very highly in the PWA (Progressive WebApp) category, scores low in Performance and vice versa. Marfeel however, scores optimally in both.

Overcoming the challenge

The reason for this disparity in the Lighthouse test is that to put the features in place that define PWAs, a lot of JavaScript (JS) is needed. The Performance portion of the Lighthouse test measures that the JS is not being used, meaning that the more features in place for PWAs, the less optimized a publisher's solution will be. The more features a site has, the lower it scores in Performance.  

Getting high scores in both PWA and Performance is a difficult challenge because they normally cannibalize each other. Marfeel however is able to achieve optimal scores in both by optimizing JavaScripts while delivering mobile's latest tech and features, like service workers.

What Marfeel premium publishers get

With the innovative changes Marfeel has introduced to their infrastructure, Marfeel premium partners get the fastest and smoothest sites available. 

They also get the Marfeel CDN package which makes game-changing abilities possible. Marfeel's partnership with Fastly - the same CDN used by the likes of the New York Timesthe GuardianBuzzfeedPinterestWenner Media, Wired, Twitter, Airbnb,  and GitHub - means that premium publishers get the true sophistication and full potential of the Marfeel solution. Marfeel also covers the cost of the CDN package for their premium partners for both their mobile and desktop traffic, as part of the Marfeel CDN package. We said we were putting our money where our mouth is, and we meant it.