Improving your mobile site could be the holy grail of reducing bounce rate and getting those people to dive even deeper on their smartphone. Imagine your website sells designer shoes for less and you’re hosting a grand sale of 20% off plus free shipping on every order. If a user lands on your mobile (regardless of paid or organic means), they’ll be less likely to stay on if it takes more than three to four seconds to load. They’ll end up going on that other guy’s site.
It’s been said over and over again. Design with mobile in mind. Consider Google’s micro-moments for a minute.
It’s your friend’s birthday and you were in charge of the gluten-free cupcakes. While ordering online last minute could be a possibility and you could pick up in-store…you want to take a look at the cupcakes in person before you make a decision. Besides, this friend is a picky eater. Here are the local results on desktop:
Now you’re interested. Guess it’ll be House of Cupcakes in Princeton. Switching to mobile now.
The page loaded pretty fast and mmm, those cupcakes look so delectable. They definitely got my attention. This will be a piece of cake, or…cupcake!
Now back to the basics!
What are the main factors that contribute to a great user experience?
This one is easy. Consider speed, intuitive design, and functionality. How exactly can improving mobile make a difference on your business? It can drive revenue, acquire new customers, and retain older ones. Why are we drilling this so hard? As previously mentioned, it helps reduce bounce rate. Remember, mobile sites are an investment in the future since 80% of users own a smartphone! (Source: ImpactBND)
How exactly does speed and performance affect your business?
Let’s give you an example. Remember that opening scene in Office Space where Peter is in his car, stuck in a traffic jam. Even if you haven’t seen this brilliant film, you’ve been in this situation. Peter tries to switch lanes, because the lane he switched into was going faster. As soon as he goes into that lane, the previous lane he was in starts going faster. He can’t win and he’s frustrated.
That feeling of utter frustration he feels prevents him from accomplishing his objective (to get into work) in a (sort of) timely manner. The end user has a goal in mind and when they can’t make it past your slow website, they tap “back” on their phone and choose your competitor. That’ll keep happening until you make some much-needed changes.
You must create a seamless experience to ensure that the user perceives your site as fast and responsive. All the valuable information (across platforms) should be above the fold.
What are the metrics that matter?
Speed index, total number of requests, and page weight.
What issues can get in the way? (Don’t worry, we’ll elaborate.)
Too many large images, requests, and/or loading above the fold.
How do we resolve these issues? Let’s take a look.
Problem: Images not optimized for a mobile experience – Images typically contribute to 60-65% of a page’s weight. Some common issues are that images may not be compressed before they’re added to your site or there are just too many image requests loading at once.
Solution: Your main images (like from landing pages) shouldn’t shouldn’t be larger than 100kb, but everything else should be in the 20-50kb range. Use a compression tool, like Optimizilla, to reduce the size of an image. If you have too many images, you could try adding smaller images or use a sprite, a larger image and several small images within in.
Problem: Too many requests – If you have more than 100 requests trying to load at once on your homepage or landing page, this may cause some issues. Too many mobile requests can require that a new TCP connection is opened every time for each request, unless they’re an HTTP/2 Protocol. In other words, the conversation (data exchanged) between the homepage and web server is too much, so it has to be sent in smaller batches, opening up a whole new conversation every time.
Solution: Chrome DevTools allows you to see the total number of requests for each main element. The main elements and their target request range are as follows:
- JS: <10 (not including pixels)
- CSS: <5
- Images: <30
- Font: 0-3
- Total = should equal 100
Review your total number of requests to assess if they’re all necessary. There may have been a few you just forgot about or never updated. It happens. You can also combine resources, where possible, to reduce the total number of requests.
Believe it or not, fonts can also make an impression on how a user views your website, especially if there are five or more fonts trying to load all at once. Ensure your website is using web fonts, and keep variation to a minimum. (If your brand requires a specialty font, don’t be deterred from using it. Keep in mind though, it may load differently for some users.)
Problem: Too much loading above the fold – This means that as soon as users land on your mobile page, your visible content (anything that doesn’t require scrolling) doesn’t load quickly enough. This will definitely increase bounce rate. Remember, the head and body of your HTML need to load in order.
Solution: First, check out this handy web page test site to see the first 3 seconds of a user’s mobile experience on your homepage. If it loads slowly, you have too many requests trying to load. So, you need to minimize these requests, found in the head and body of your HTML. You can either eliminate, shrink, or defer their download. If shrinking, reduce the amount of data used by your sources like compressing images, eliminate render blocking CSS and javascript, and reduce your total requests to less than 100.
What is your site’s mobile speed?
Testing your website speed has never been easier. Follow the steps below and find out how you stack up. Again, we’ll use House of Cupcakes as an example.
- Go to WebPagetest.org
- Click on Advanced Settings
3. Make sure you’ve filled out the following. It should mirror the next screenshot.
- Test Location: Nexus 5
- Browser: Nexus 5 – Chrome
- Connection: Mobile 3G
- Number of Tests to Run: 3
- Repeat View: First View Only
- Capture View: Checkmark
- Keep Text Private: Enter nothing.
- Label: Enter nothing.
Note: Keep in mind that you should have an index score that’s less than 5,000.
- This is the screen you should see once you hit run. Click on “Waterfall” to see the data behind how everything loads and click on “Video” to see how long it takes their side to load in real-time.
Take a look at how long is takes House of Cupcakes to load their page.
Now ask yourself: does this make you more likely or less likely to get cupcakes or other baked goods from them?
If you want some more tips on how to improve your mobile experience, reach out to our team via info@netelixir.com for a mobile audit. Don’t drive your potential clients away!
