
Tip 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.
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.





