Solid Internet backbone status and performance both start with a well designed mobile website. While this can be difficult given that consumers have come to expect instant responsiveness with lower throughput, the savvy developer should still make every attempt to optimize mobile pages to load in just two seconds. Here’s how you can build a mobile website for the best user experience possible.
Hook, Line, and Sinker
To get and keep your customer’s attention, all immediately visible or above the fold content of the critical rendering path must display and be functional right away. To render a useful page quickly, focus on speeding up the delivery of:
- Images
- Base HTML
- CSS
- JavaScript
- Third party tags.
In order to accelerate delivery of above and below the fold content, developers must be ready to tackle six different technological aspects: overall architecture, render times, page size, latency, and return visitor experience.
Consider Overall Architecture
While every page follows the same series of steps when loading, there is opportunity for improvement and acceleration at every turn. The best way to build your website is to keep domains to a minimum. Use no more than two domains per page wherever possible to reduce the required number of DNS lookups. It’s also a good idea to enable HTTP Keep Alive in all scenarios.
Speed Up Initial Render
Initial render is important because it serves as a first impression to users. If your initial render is slow, it could cost you a customer. Try to deliver all above the fold content as quickly as possible in order to speed things up. Then, be sure to correctly incorporate HTML, CSS, and JavaScript into the overall architecture of your page.
Reduce Additional Render Times
While initial render speed is the most important, it’s always good to reduce render times on all other pages wherever possible. For example, while JavaScript and third party tags can enhance the user experience, they can also create loading delays. Avoid this by limiting external JavaScript calls to four per page and third party tags to two per page.
Minimalize Page Size
Requests are generally more important than page size, but it’s no secret that an overloaded page correlates to poor performance. Avoid this by limiting overall page size to 200KB or 400KB if your site is mobile-optimized. Keep images to 10KB each.
Avert Latency
One of a designer’s top priorities should be to reduce the number of round trips necessary per page. On a basic 3G network, latency can be as many as 10 times worse than on a wired network connection. Responses and DNS lookups that take 30ms on a wired connection could take 300ms or longer via 3G. Avoid these latencies by using redirections, images, HTTP requests, and content delivery networks.
Improve Return Visitor Experience
Managing cache is a great way to reduce round trips and delays for return visitors. You can tune your caching by using far future Expires headers, removing ETags, and limiting the use of “no cache” headers. Other options include using offline storage for cache and local storage instead of cookies.
These are just some of the best ways designers can build fast, effective, mobile optimized web pages.