Speed and Smoothness
Google PageSpeed has set the threshold of the above the fold (ATF) content load at under 1 second.
Optimal load speed and a smooth UX has always been a key cornerstone of the Marfeel offer, helping some Marfeel customers decrease load time by -42% or increase page speed by 200%. To deliver these principles to publishers that increase readership, traffic, and user engagement, the Marfeel solution employs these 4 practices in its design and technical approach:
1 - No JavaScript or CSS Dependency
While there is extensive use of JavaScript and CSS, the first file that Marfeel returns is self-contained. The index.html embeds the above-the-fold styles and the minimum amount of CSS style sheets that are needed to render the first viewports of content don't cause any JavaScript file to load. This means that the user can start reading with roughly 40KB and also prevents content shifting or flickering.
From that point, everything starts loading in an asynchronous and non-blocking way.
Publishers that have had a Marfeelized version of their website demoed can see the above-the-fold in action by adding a parameter to the URL of our URLs ?marfeeldt=s and simulate in a smartphone. This is an optimization that can't be added in our demos but once a publisher goes live with their Marfeel mobile site, it's applied.
2 - Optimized Resources
Another key technique used is to reduce the number of round trips to the server by minimizing resources. JavaScript files are also optimized with an in-house compiler.
This contributes to Marfeel's vital focus of eliminating layout thrashing and scroll jank to keep the viewing experience as seamless and smooth as possible.
3 - No m. redirection
Marfeel resides in the main domain, removing the need to redirect a user to an m. site.
This is extremely important from a loading time perspective because it normally means improving the load time by roughly 1-second and limits the threat of non-responsive content.
4 - Lazy loading
To minimize loading times and provide a seamless experience, the Marfeel solution lazy loads most of the page assets. For more information, see the Lazy Loading article.