Web Performance - Mobile

Web Performance - Mobile

README

Due to the limited CPU capabilities of mobile devices, the high round-trip times of mobile networks, and the rapid growth of mobile usage, it is even more critical to understand and optimize for mobile performance than for the desktop. Basically it’s recommendable to put attention to Defer parsing of Javascript and Landing page redirects caching.

Avoid Javascript blocking

In order to load a page, the browser must parse the contents of all scripts tags, which adds additional time to the page load; it can avoided by:

  • Defer loading of Javascript until it is needed.
  • Use the script async attribute where appropriate, which prevents parsing from blocking the initial page load by deferring it until the browser’s UI thread is not busy doing something else.
  • Load Javascript code in comments and later use eval() when it is needed.
  • Store Javascript code in string literals; where the code is only parsed when needed, again by calling eval().

Moving our script code to the end of the page is sub-optimal, since the browser will continue to show a busy indicator until the page has finised parsing this Javascript.

Landing page redirects cacheable

While the best practice with redirects is to remove them wherever possible, it can sometimes be difficult to eliminate landing page redirects, especially redirects to mobile-specific sites, from www.example.com to m.example.com. For instance, the mobile version of a site may be served from a different web server, which can require redirecting to a different hostname. In these cases, it’s important to make the redirect to the mobile-specific site cacheable, to reduce page load times for repeat visitors. If the mobile version of your web site is served from the same web server as the desktop version of your site, you should instead eliminate mobile-specific redirects and serve from the same URL as your desktop page.

Do you have a project idea? Let's make it together!