Last Updated October 25, 2016
TLDR; Click here to jump directly to our 9 Mobile Site Speed Strategies.
Breaking the One-Second Mobile Page Rendering Barrier
Delivering a satisfying mobile user experience is highly dependent on two basic and interconnected principles – webpages must render correctly on virtually any device, and content should be fully mobile optimized for fast load time. Both of these factors are important for garnering immediate user engagement, and are key to tipping the scales in favor of capturing the visitor’s interest instead of losing them forever.
With mobile users now spending more time engaged with apps than browsers, it’s imperative to design and build fast loading webpages that can compete with the app’s native advantage of functioning as software on the device. Although the debate over mobile web vs. mobile apps rages on, few can argue that because apps deliver an instantaneous, fluid and rewarding experience, they have ratcheted up user’s performance expectations and are increasingly putting websites at a decided disadvantage in comparison.
While web designers and marketers must ultimately take responsibility for the performance, and therefore, the effectiveness of the sites they build and promote, it’s useful to attack the mobile page load speed problem within the context of two immutable factors:
The first is a limitation
Namely the unavoidable network latency of today’s mobile networks. With the vast majority of users on aging 3G networks (and many providers deliberately throttling back on download speeds), over half of the allotted one-second or 1000 millisecond budget is eaten up by the 200ms to 300ms round-trip necessary to deliver data to the device.
According to Google’s speed tests, the DNS lookup consumes roughly 200ms, establishing the TCP connection another 200ms, and the HTTP request and response a further 200ms. With approximately 600ms gone, the developer now has a time budget of roughly 400ms for server response time and client-side rendering.
The second incontrovertible factor is actually an opportunity
Specifically focusing on delivering above the fold content, thereby improving the odds of rendering the page under the one-second mark. Meanwhile, additional content seen only by scrolling down is loaded progressively in the background.
Fortunately, testing your website’s performance has never been easier. To gain immediate insight into how it renders on actual mobile devices, the easy-to-use and eminently affordable Mobilizer service delivers actual images of screen renders on today’s most popular iPhone and Galaxy smartphones and tablets. By linking a Google Analytics account to Mobilizer, conversion and bounce rates, and other device-specific metrics are captured and displayed instantly.
Other online speed test resources include the previously referenced Google’s PageSpeed Insights, and the popular Website Grader, and GTMetrix.
Mobile1st offers mobile optimization services to increase your mobile website’s revenue/conversion by decreasing your shopping cart abandonment rate, reducing your page load speed, improving mobile UX and SEO, analyzing your mobile analytics, and more. Our team of mobile experts analyzes and improves your website across 35+ factors, A/B tests ideas, and can even (optionally) implement the design/code changes.
Get a mobile audit of your website today!
9 Mobile Site Speed Strategies
Although the AMP standards will continue to evolve and webpage development best practices for mobile are unquestionably a moving target, the following list of points are worth referencing during the build out and launch of webpages designed for today’s ultra-competitive, mobile environment:
1. Minimize Server Response Time
As the basic measurement of how long it takes the server to deliver the HTML of a web page, its critical to make the transaction as speedy as possible, ideally within 200ms, according to Google. Testing this process and largely automating it can be can be accomplished with Google’s PageSpeed Tools and services such as Yslow and SingleHop.
2. Avoid or Minimize Re-Directs
Allowing redirects creates additional HTTP requests, each of which can add extra network roundtrips and add significant latency. Many responsive websites automatically create a redirect from the main website to the mobile version. Google suggests eliminating redirects altogether or at least using an HTTP redirect for mobile users. To ensure Google finds and includes your mobile website in its rankings, use the <link rel=”alternate”> markup in your primary website.
3. Keep a Close Watch on Round-Trip Times
4. Make ‘Above the Fold’ Your Best Ally
5. Put CSS at the Top and JS at the Bottom
6. Optimize and Minify CSS and JS Files
Crafting webpages that can pass the one second test is a study in rooting out the inefficiencies that can creep unnoticed into the best laid plans. Overly complex scripts in JS should be identified through testing and eliminated by using the developer tools available in Chrome, Safari, Firefox and Edge. Both JS and CSS files can multiple when extensions or plug-ins are added. Consolidating all the files into a single JS or CSS file can yield performance gains as can
removing blanks, tabs and white spaces to reduce file size.
7. Benefit from Google Cache Being Your New Content Delivery Network
One of the pillars of Google’s AMP initiative is the availability of the Google AMP Cache, a free content delivery resource designed to encourage publishers, advertisers, and web developers to make their content AMP-compliant web pages so it can be stored and served from within their massive worldwide data centers. Although some worry that this perhaps cedes a bit too much control to Google, there is no denying that leveraging this unparalleled bandwidth for delivery your media files to mobile users worldwide is a big plus for making certain your content is aligned with the AMP standards.
8. Manage Your Images!
Not surprisingly, the larger the image, the longer the load time. The use of image editing tools can help to scale them appropriately and much more effectively than doing so with CSS which will result in images that are still loaded at full size. To be AMP-compliant, any externally loaded resources such as images are assigned a pre-determined size and position. By specifying width and height, images function as responsive page elements utilized according to screen size of the target mobile device.
9. KISS (Keep It Small, Sonny)
One undeniable benefit of the rush to optimize webpages for mobile display is the focus on efficiency it has brought to the process. Minimizing the number and size of files and overall reducing the amount of data needed to load a page has encouraged a healthy mindset that seeks speed and simplicity. By avoid heavy formats, slow loading images, fonts and templates, and using compression tools and other size-reducing utilities when possible, the user experience is greatly enhanced and a wider spectrum of content is made practical for use on mobile devices.
Clearly the competitive landscape for the mobile user’s attention is accelerating. When your competitors are measuring load times in milliseconds and a one-second render is moving toward being the baseline for performance, it goes without saying that optimizing your mobile website for speed and accurate rendering is now an imperative.
If you haven’t done so already, visit Google’s excellent PageSpeed Insights resource center to perform some of the tests and review the available mobile optimization tools and modules. As you begin to see the benefits of implementing these strategies, use the Mobilizer trial to measure your progress and see real world results on today’s most popular devices. We look forward to adding your one-second barrier websites to our upcoming Mobile1st’s One Second Website list.
Increase revenue and customer engagement with Mobilizer, the mobile user experience inspection tool. With Mobilizer, your team can see exactly what your website visitors are seeing on their phones and tablets. Easily identify display issues, monitor mobile performance metrics, and optimize the customer experience.