1. PC optimization methods are equally applicable in the Mobile side
2. On the Mobile side we propose three seconds to complete the first screen rendering index
3. Based on the second point, the fold loading Loading or three seconds.
4. Unicom 3G network based on an average of 338KB / s (2.71Mb / s), so that resources should not exceed the fold 1014KB
5. Mobile phone configuration side due to the reasons, in addition to loading external rendering speed is optimized focus
6. Based on the fifth point, reduced to a reasonable rendering processing code loss
7. Based on the second, fifth point, all the impact load and render fold code should post processing logic
8. loaded using the user interaction is also to be noted properties
Optimization Guide
[Load Optimized]
Loading process is the most time-consuming process, could account for 80% of total time of time, so the focus is to optimize
Reduce HTTP requests
Because mobile browser at the same time respond to the request for the four requests (Android support 4, iOS
After 5 supports six), so to minimize the number of requests page is first loaded at the same time requests can not be more than 4
a) the merger CSS, JavaScript
b) with small pictures, use Sprite map
· Cache
Use cache can reduce the number of requests to the server, saving load times, so all static resources must set the cache on the server side, and try to use long Cache (Cache updated resource can be used long time stamp)
a) caches all cacheable resources
b) the use of long Cache (using the timestamp update Cache)
c) using an outer-coupled referenced CSS, JavaScript
Compression HTML, CSS, JavaScript
Reduce the size of the resource can speed up page display speed, so for HTML, CSS, JavaScript and other code compression, and set up the server side GZip
a) compressing (e.g., extra spaces, line breaks and indentation)
b) Enable GZip
· Non-blocking
Written in JavaScript HTML head (not asynchronous), and written in HTML tag Style block the page rendering, so the CSS on the head of the page and use the Link mode is introduced, to avoid writing Style in the HTML tags, JavaScript on Last page
Or asynchronously loading portion
Use the first screen to load
The first screen to quickly display, can greatly enhance the user's perception of the speed of the page, and therefore should be optimized for fast display of the first screen
· Load Demand
The first screen will not affect the current screen of resources and resource unused resources into user needs only to load, can greatly improve the display speed of important resources and reduce the overall flow
PS: demand loading can cause a lot redraw impact rendering performance
a) LazyLoad
b) Scroll loaded
c) loaded via Media Query