How to Make Smartphone Sites Load Fast?

By : Unknown

On : 16:07

In : Blogger tricks

0 Comments

According to the latest researches, it is estimated that around 15% of all internet users are mobile users who typically use smartphones or tablets to browse the internet. And a large majority of those mobile users need to find instant results. Indeed, the whole point of using internet on a smartphone is it's quick mobility and its convenience. Hence, site load speed makes all the difference in the mobile web. The average mobile page takes around 7 seconds to loads. But wouldn't it be great if you could greatly reduce that time to under 1 second for a decreased bounce rate? Today, we'll talk about how Google is helping webmasters optimize their website for mobile, and decrease their load time.

Google has provided some latest guidelines, and has introduced a new tool as well called the PageSpeed Insights Tool. These two aim at providing webmasters with all the help they need to increase their page speed for mobile pages.

Tips for improving load-time

The 1 second time budget is incredibly hard to achieve. But for mobile sites, it is essential. Therefore, a different-than-conventional approach has to be used. The ideas is to deliver the Above-The-Fold content very quickly, so that users can start interacting with the website as soon as possible. The rest of the content can then be loaded in the background in the meantime.

Here are a few approaches that can be taken to achieve a sub-second rendering.

Quick server response - The quicker the web server takes to return the initial HTML and content, the better. Ideally, server response should be below 200 milliseconds, And this does not count network transfer speed. So port to a faster web hosting server to enhance mobile load speed.

Avoid HTTP redirects - Each redirect requires an addition roundtrip to the server, two if an addition DNS lookup is needed. This wastes a lot of time, and often times accounts for times over one second.

Keep ATF data below 14k - The nature of TCP is such that when a client makes a request, it doesn't immediately start sending out as many data packets as is allowed by the bandwidth. This phenomenon is called TCP Slow Start, and it initially sends out only a few (for e.g. 10) packets until it receives acknowledgement from the client and fills up the bandwidth in response. Due to this behaviour, it is important that your initial, Above-The-Fold content fits under 14 KB. This will minimize the roundtrips needed to get the initial data. Also make sure your server is running the latest version of TCP, because older versions only send out 3-4 packets on a Slow Start!

Avoid external blocking JS and CSS - JavaScript and CSS renders that require clients to download an external resource not only take up download time, they also increase the number of roundtrips made, hence slowing down the page load-up. A better approach is to use inline JS and CSS for ATF content, and use external blocking JS and CSS later.

Optimize your code - Complex and inefficient JavaScript codes can take up hundreds of milliseconds. Always make sure you use the best practices, and try to avoid doing complex JS computations, at least on the ATF content.

Reserve time for browser rendering - Client machines also take time to render the HTML, CSS and JS content. The rendering time depends upon the specific machine a user is using. But reserve a minimum of 200 milliseconds when optimizing your mobile site, and trying to achieve the 1 second target.

After you've made these optimizations, you can test them out in the Google PageSpeed Insights Tool. We'll leave it as an exercise for you for now to use this tool, and understands the insights it generates for improving your load speed. And as always, if you have questions, please feel free to ask in the comments section below. Cheers :)