Readers: web programmers, front-end developers.

An important issue currently for Web applications is page loading speed. If let people wait for a long time, they may feel uncomfortable and give up this site.

Page accelerate technology is to solve above issue and it is an important part of WPO (Web performance optimization) .

Generally, only the mobile devices have the issue because the desktop usually is very strong. However, most those methods may be used for desktop as well.

There are three related fields mobiles are obviously weak: CPU speed, network speed(or bandwidth), and memory. Memory limitation may cause problems when the page is using large amount of data, or large programs, or poor programming style, such as memory leaking. And as the results, that browser may collapse instead of slow down the page loading.

Really affecting the page loading speed are CPU, and network access. Particularly, the latter.

As a front-end or Web developer, we may reduce the burden on the network speed and CPU to improve page loading speed by below methods.

1)    Using external links for library, either CSS or JS since likely, they will be cached later instead of copying the contents directly inside the page(online).

2)    Using external links from CDN(Content Delivery Networks). It may help since they would be easily cached. Besides, the CDN site may be close to the users than your site.

3)    Merging as many files as possible to only one file for CSS and JS respectively. That can reduce HTTP calls.

4)    Uing minimum size files for CSS and JS, such as removing space and using ‘min’ file for JS.

5)    DNS translating IP address costs time so you may directly use the IP address for the links. Of course, you may still use the CDN display string for links displayed on the pages.

6)     HTTPS uses up a lot of resources so if possible, using HTTP, but implemening SSL for the important part, such as using HTTPS for AJAX.

7)    Using LocalStorage for bigger files and using cookies to store the names of files.

8)    Using front-end DB such as indexDB, and storing whole system/results on LocalStorage.

9)    Using catch for your HTML pages, in HTML5, it is straightforward and easily(.appcache). But also, you may need to set up/update expires in the header of the HTML pages.

10)  If possible, avoiding JS framework and library since they would not speed up the perfomance speed but cost source. Personally, I think jQuery is OK. However, for jQuery, you have to notice that a) not using selectors too broad, otherwise, too many tags would be used that would be costing. B) jQuery is automatic loops, so if not careful, the code would be wasting sources for too much loops.

11)  Using gzip to compress files for both text and binary.

12)  Avoiding using too many cookies which costs communication between client and server.

13)  For images, using JPG which is saving in size instead of other image formats.

14)  Using CSS3 sprites/translate tech --- using/downloading a big image and shift/viewport on a part on it according to requirement from program, instead of using multiple smaller images which needing multiple links.

15)  If possible, using HTML code and CSS code as much as possible, instead of using JavaScript. Forfunately, HTML5/CSS3 gives us more possibility for it. For example, for many light dynamic display, we may implement CSS class/psedoclasses. And in HTML5, there are many more powerful HTML tags, such as “range”,”date”,”progress”, which used to be made from JavaScript.

This, plus 14), meaning that for some simple animation we may not need JavaScript.

16)  JS script don’t need to work until the page loaded(display finished), so JS script/library should be placed after the HTML part is displayed. Dynamic CSS script has the similar issue but for static CSS part, it should be put inside header link or inline.

17)  Making pages as much static as possible. Doing as less back-end process as possible. For example, after login, the page would be the same to anyone. So the back-end code only needs to pick up information related to this particular user. And if the picking up would be time consuming(that is not good design already), you may load the page first and finally attached an external JS for the information of this guy. In short, any information pre-known before the next page calling, the server should prepare as much static as possible for pages. And of course, no redirection. This method may be the most important and need a bit high programming skills.

18)  Using cache in ajax.

19)  Using HTML web workers for multiple threats of JavaScript. The developer may need to carefully separate/distribute the JS code for it.

20)  For mobile, many pages in the beginning only display the top part and the user may scrolling down, so if need to speed up display, developer may design and load the the top part first.

21)  Changing AJAX to WbSocket which is a little faster. However, the change not only causes code changed in the front-end, but also you have to add a lot complex program on back-end.

22)  In JavaScript, doing smart programming, such as avoiding repeating some source costing call such “this” , so you can copy it to a variable like $this, smart strings concatenation, and some events such as resize, touchmove, one act may cause many events, so the code must smart enough to avoid all unnecessary event process. Besides, in binding event handler, don’t forget to unbind old one which may not cause bugs, but wasting sources. Finally, avoiding alert windows(and other pop HTML windows unless necessary), intead, using CSS windows, only cost less sources, but also, less annoying and easier to remove(after a while, or any touch event).