How to Reduce Your Mobile Page Load Speed Time

Last Updated January 24, 2018
TLDR; Click here to jump directly to our 9 Mobile Site Speed Strategies.

Managing Milliseconds:
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.

According to the authoritative PageSpeed Insights blog on the Google Developer website, the gold standard today is creating pages that can render in under a second on any mobile network. A lofty goal to be sure, but very achievable if the correct practices are followed. For a start, adopting the Accelerated Mobile Page standards can rein in bloat that can occur in languages such as CSS and JavaScript, and reduce the resource consuming nature of external extensions and resource downloads. Beyond that, a variety of design and functionality criteria that support high-performance mobile website are emerging, many of which are described in meticulous detail by Google.

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

Just as re-directs can exact a toll on efficient page loading, round-trip time (RTT) is a similar death by a thousand cuts. The number of HTTP requests can be pared back dramatically through the use of CSS sprites, which combine multiple images into a single image file and minify and combine JavaScript and CSS files.

4. Make ‘Above the Fold’ Your Best Ally

As mentioned earlier, wise management of above the fold elements can achieve two useful goals: By ensuring that only Inline JavaScript and CSS is used above the fold, the page can be parsed without non-asynchronous or blocking external scripts slowing the process. Any JS or CSS required for additional functionality is best loaded after the above the fold content. Secondly, rendering above the fold quickly while delivering further content in the background avoids noticeable rendering delays as this below the fold real estate only appears when scrolled down to by the user.

5. Put CSS at the Top and JS at the Bottom

To most efficiently optimize the execution and rendering of JS and CSS, the order is presented is just as important as the leanness of the code. Because the CSS file must be rendered before the page can be displayed, it only makes sense to place your CSS as far to the top as possible. Conversely, since JS blocks browsers from parsing until it is fully loaded, all JavaScript should be positioned as far down the page as is feasible, ideally just below the close of the body tag.

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.