Mobile HTML5 Optimization Guide

TMO Group

In this article we’ll talk about how to optimized your HTML5 website that makes better search engine ranking and user experience. Actually, it also applies to PC website.

Loading Optimization

Loading is the most time-consuming activity while open the website. Sometimes it takes up 80% of the time. As a result, it is the most important part.

  • Reduce the number of  HTTP requests – Because the maximum number of mobile browser request is at most 4 at the same time for Android, and 6 for after iOS 5. We can solve this by combining CSS, Javascript, small pictures and using CSS Sprite.
  • Cache – Using cache can reduce requests from server and save time. So all static resource need to be cached. Furthermore, we’d better use long cache because it can includes timestamp information.
  • Compress HTML, CSS, Javascript – Spaces also take up a byte. We can also set GZip in server.
  • Non blocking – Javascript which is put in HTML head will block the page render. CSS should be called by “Link” and Javascript should be put at the bottom.
  • First screen loading – In China, 3G speed on average is 2.71Mb/s. For better UEO, we’d better limit the loading time to 3 seconds. As a result, the size of first screen should less than 1014KB. We can use first screen loading to make a better user experience.
  • Pre loading – For some big pages (e.g. game sites), we can use pre loading. It won’t show all pages until it is totally loaded. But too long loading time probably cause the loss of users. We need to balance it.
  • Avoid redirects – Both 301 and 302 redirects have impact on the loading time.

CSS Optimization

  • Avoid adding “style” attribute
  • Avoid CSS expressions
  • Delete empty CSS rules
  • Avoid using Float – It takes up big calculations.
  • Avoid using Web Font – It need to be download while opening the website.
  • Declare few Font-size
  • It doesn’t need an unit with “0” value

Javascript Optimization

  • Reduce redraw and backflow
  • Cache Dom
  • Cache .length
  • Use ID selector
  • Use touch, touchend instead of click – Also need to mention that the fast speed will cause misoperation.

Script Optimization

  • CSS should be put between head. And Javascript should be put at the bottom.
  • Avoid reset images size – Reset images’ size in CSS, Javascript will affect the performance.
  • Avoid using DataURL – It takes a long time to load because of decode.

Render Optimization

  • Use Viewport in HTML – It can accelerate the page render by using the code < meta name=”viewport” content=”width=device-width, initial-scale=1″>
  • Animation optimization – Reasonable use requestAnimationFrame instead of setTimeout
  • Try to use CSS3 animation
  • High frequency events optimization – Use requestAnimationFrame to monitor changes. Make it rendered in correct time.
  • GPU acceleration – CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, Video can trigger events. We can reasonably make use of them in terms of power consumption.

 

Leave a Comment