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).
|
