7 Ways To Improve Mobile Page Speed

In Mobile Testing, Responsive Design by Dan Engel

During holiday season, shoppers have just one critical mission. Just like in that old-time movie Jingle all the Way, featuring ex-governor, ex body-building champ and host of the Apprentice, Arnold Schwarzenegger, they strive mightily to get the killer gift for their beloved kid and grab it fast, before anyone else.

jingle mobile load timeYou too possess one critical mission amidst this mad rush of crazed consumers: lower your mobile page speed and convert that hoard of online shoppers into your happy buyers.

Google, Radware and mobile optimization experts have identified three seconds as the magic number for a mobile load time. Over three seconds, disasters strikes and all kinds of bad things start to happen: customers fleeing to competing websites, lower conversions, and a deteriorating brand name. Under three seconds, you’re good as gold and your customers are too!

Without wasting even a millisecond more of your time, let me outline the 7 key steps devised by the Mobile1st optimization team to sharply accelerate your mobile page speed.

1. Measure and minimize server response time

Mobile page speed is determined by your web coding but also depends upon a big, fat tech tool known as your server. Obviously the longer your server waits to respond to a request from a browser, the slower your page load time. Mobile1st along with the experts at Google and GTMetrix recommend your server starts transmitting the first byte of resources within 200 milliseconds of a request.

Also called “waiting time” or “time to first byte,” the time that passes before a response from the server is the first element in a waterfall chart.

mobile web loading speed

Web Performance Today provides an up-close look at waterfall chart, which shows all the element of a web page loading and their sequential timing.

There are three major methods for elevating your server response time:

  • Improve your web server software or configuration
  • Enhance the quality and scope of your web hosting service, and in particular ensure adequate CPU and memory resources
  • Reduce the resources required by your web pages

2. Avoid or minimize redirects to accelerate mobile page speed

Redirects are instructions that automatically take website visitors from one page to another location. Each redirect eats up valuable milliseconds, creating a slower page load. This is especially problematic on mobile devices because they often depend on less reliable networks than desktop users.

“We strongly encourage webmasters to minimize the number and ideally eliminate redirects entirely.”Google
301s – the most common type of page redirects – guide website visitors from outmoded web pages to newly designed pages with different URLs. While often needed, 301s can devour a major chunk of mobile load time. In fact, redirects are likely “the single biggest source of wasted time in your code and can dramatically affect your page speed,” reports Varvy.

The first step is simply to survey the number of redirects on your site by deploying such tools as Patrick Sexton’s redirect mapper.

3. Rigorously measure round-trip times

Wikipeida defines “round-trip time” (RTT) as the time necessary for a request for data to be transmitted from a desktop computer or mobile device to a target destination, such as a remote computer, and the complete return of that data.

RTT can be measured by pinging an address. The exact interval of an RTT depends on numerous factors like connection source, connection medium, physical distance between the actual source and the remote system, number of nodes between them, traffic amount, number of other requests handled by the server and so on.
Each RTT adds a quantum of time to your total mobile load time. Hence it’s a best practice to decrease the quantity of sequential roundtrips by making sure resources are transmitted in parallel and by eliminating excess weight. Besides avoiding the above-mentioned redirects, GlobalDots suggests combining scripts to avoid repeated time-consuming RTT, in particular by uniting in as few files as possible:

  • External JavaScripts
  • External CSS
  • Images using CSS sprites

4. Load above-the-fold content before below-the-fold content

The idea here is simple: your website should load the content a mobile user sees first prior to content they might see later. In particular, code your web pages so your server sends first the data necessary to display above-the-fold content. Even if a page is incomplete, the user will experience the content as ready sooner. In its mobile page speed tests, Google in fact calls out pages that fail to load above the fold first, recommending that you “prioritize visible content.”

pepper mobile load time

5. Put JS at the bottom and CSS at the top of HTML files

JavaScript brings interactivity to your online pages (such as buttons and their responses or data that is entered in forms, dynamic styling, and animation). JS scripts however prevent parallel downloads. When JS code is loading, the browser will not begin other downloads. To speed the page load, move JS scripts to the bottom of the page if possible. That will let HTML content display before the JavaScript is loaded, enabling you to display a page-is-loading spinner or other message to the mobile visitor.

CSS, or Cascading Style Sheets, detail how HTML elements are to be displayed on your web page. When you place stylesheets at the beginning of the programming document, your pages appear to be loading faster. By placing your CSS up front, the browser can display whatever content it has as soon as possible.

6. Optimize and minify CSS and JS files

More data and excess page weight means your pages will simply take longer to load, on average. That’s why ever web developer worth their salt know they need to optimize and minimize assets. Top of that list is optimizing and minimizing CSS and JS files.

“Minification” eliminates redundant or simply irrelevant data without affecting how a page displays. A variety of tools, as Google points out, can help filter your code and eliminate such redundancies.

The most prominent are:

7. Use gzip compression to reduce file size

In contrast to minifying, compressing data requires a un-compression step before it can be displayed. Yes, the code has been reduced from the original size and therefore transmits faster to the browser, but the additional decompression step adds to the mobile load time.

As of this writing, gzip is the compression method of choice among web developers. Gzipping will reduce the page weight and increase mobile page speed. Gzipping typically slashes page weight by 70% and is currently supported by the vast majority of browsers.

Lowering your mobile load time below the threshold of three seconds is mission critical. Adopt these seven steps and other recommended techniques to achieve this critical goal while elevating metrics that will drive your business to success. Issues? Questions? The mobile optimization team here at Mobile 1st is standing by to help.

Mobile1st is a leader in marketing technology and site optimization solutions. More than prioritizing and executing industry leading CRO practices, we do what makes the money; optimizing our Client’s digital commerce product toward consistent financial growth and ROI. All achieved through excellence in Lean UX, Analytics, Research, Experimentation and Development.
Contact Mobile1st Experts Now!