Tips and tricks for optimizing their HTML5 applications

HTML5 applications are considered slow. This is usually the case. However, This is not inevitable. With some good advice and lots of knots to the brain, it is possible to have reactive HTML5 applications on the mobile.

"Application of reactive" usually means that the user must have less than a second to feedback:

Except that most of the applications uses data from a server.

And the network is that it is difficult to have a sensible application. True, if we remove the time server and network, it has only 200 milliseconds : then like?

Here are some tips that can help you to...

Change the frame for a lighter!

If you missed it, see my other article on this subject.

Careful with exaggerations!

Ah! the magic of CSS3, is beautiful, you can do anything! But be careful : gradients can paddle, shadows and border radius also, flexbox also.

Unfortunately, not all are the last device in the mode.

Pay attention to the modification of the DOM

Each modification of the DOM or the style of your page is expensive. In fact, the "repainted" browser regularly your page depending of the changes that do. Think about this: sometimes the best thing is to build for example a list of items in memory, the DOM, then injected them suddenly.

Use a css sprite for all your images

The image once loaded is stored in cache for the entire application, the icons will be displayed instantly, gives an undisputed speed effect. With a bit of hacking a sprite for each device resolution.

And then there are the generators of sprite.

Download your images

IOS, images are not downloaded from the memory of the browser when they are outside the visible area of the screen. If you have tons of photos, you can replace an invisible pixel blank image sources, in order to relieve the browser. See the article on linkedin in grain of actu HTML5.

Use vanillaJS

No, this is not another javascript framework! It is the wind. To remind us that for a small application, nothing as good old javascript.

Inline css tips

In these slides, Patrick Hamann recommends this technique to show the top of the page, while the rest of loads.

 

After all, why not. Sometimes, between "application to rowing" and "test application" there isn't much. It is also his presentation which are part of the image above.

Verify that you are using your frames

In these old slides, Paul Irish reminds us on the agenda over time. Because we use jQuery badly. Is strong, Paul.