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 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.
- 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.
- 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.
- Compress pictures – Picture already made up 60% of whole Internet. But some compressing process may break pictures’ quality. We can also find other ways to take place of pictures by CSS, SVG or IconFont.
- Avoid redirects – Both 301 and 302 redirects have impact on the loading time.
- 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
- 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.
- Avoid using DataURL – It takes a long time to load because of decode.
- 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.