Performance tips

Improving the website performance is important because the network speed is not unually stable. Here are several tips for fine tuning the performance.

1. Put all the <script> tag at the end of body.

Most script manipulate content and so there is no harm of putting the script after the content loading and rendering. Putting the script before loading the content may cause the content loading delayed because of the characteristic of the <script> tag.

Note that some JavaScript libraries do require placing before content rendering. Mondernizer is one of them.

2. Keep the external font face loading minimal.

External font-face could be an issue in low-speed network. Texts with custom font-face is not rendered at all until the font file is loaded. In mobile device, user may need to wait seconds before they can read anything. So external font-face loading should be minimal.

3. Rely on minimal 3rd party libraries.

Libraries is a handy tool. But think twice before relying on any 3rd party libraries. Do you really need this library to archive the task? I’m not against any libraries, just make sure you are not including a large file just for a small part of features.

4. Use accelerated animation and transition

If you need animation or transition for your views, choose the accelerated method. For example, moving DOM elements or changing styling transition can be done via the CSS transition. Furthermore the 3D translate is hardware accelerated and faster than the 2D one.

5. Lazy load unnecessary content

Some content may not be necessary for the main content. Take comment as example. Not every readers read commment. But they all read your main content when they load your web page. You might defer the loading of the comment area only after reader finish the content reading or request for it.