For websites with a large number of visits, front-end optimization is a must. Even optimizing the size of 1KB will have a great impact on it. Let's take a look at the HTML5 front-end optimization of the mobile phone platform from ISUX. Maybe Helpful and inspiring to you.
Overview
- PC optimization methods are also applicable on the mobile side
- On the mobile side, we propose a three-second rendering completion indicator for the first screen.
- Based on the second point, the first screen is loaded in 3 seconds or using Loading
- Based on the average 338KB/s (2.71Mb/s) of China Unicom’s 3G network, the first screen resource should not exceed 1014KB
- On the mobile side, due to mobile phone configuration reasons, in addition to loading, rendering speed is also the focus of optimization.
- Based on the fifth point, the code should be processed reasonably to reduce rendering loss.
- Based on the second and fifth points, all code that affects the loading and rendering of the first screen should be placed behind the processing logic.
- After loading is complete, users also need to pay attention to performance when interacting with each other.
Optimization Guide
[Loading optimization]
The loading process is the most time-consuming process and may account for 80% of the total time, so it is the focus of optimization.
Reduce HTTP requests.
Because the mobile browser responds to 4 requests at the same time (Android supports 4, iOS 5 and later can support 6), it is necessary to reduce the number of requests for the page as much as possible. The number of simultaneous requests for the first load cannot exceed 4 a)
Merge CSS, JavaScript
b) Combine small images and use sprite images
Cache
The use of cache can reduce the number of requests to the server and save loading time, so all static resources must be cached on the server side, and try to use long Cache (time stamps can be used to update long Cache resources) a) Cache everything
that can be cached Resources
b) Use long Cache (update Cache using timestamp)
c) Use out-of-line references to CSS and JavaScript
Compressing HTML, CSS, JavaScript
to reduce resource size can speed up web page display, so code compression should be performed on HTML, CSS, JavaScript, etc., and set GZip on the server side
a) Compression (for example, extra spaces, newlines and indents)
b) Enable GZip
Non-blocking
JavaScript written in the HTML header (no asynchronous) and Style written in HTML tags will block the rendering of the page. Therefore, CSS is placed at the head of the page and introduced using Link to avoid writing Style and JavaScript in HTML tags. Put at the end of the page
Or use asynchronous loading.
Use the first screen to load
. The fast display of the first screen can greatly improve the user's perception of page speed. Therefore, you should try your best to optimize the fast display of the first screen.
Loading on demand. Loading
resources that do not affect the first screen and resources that are not currently used on the current screen until the user needs them can greatly improve the display speed of important resources and reduce the overall traffic. PS: Loading on demand will cause a large number of redraws and affect rendering
. Performance
a) LazyLoad
b) Scroll loading
c) Loading through Media Query
Preloading
Large resource-heavy pages (such as games) can use the method of adding Loading, and then display the page after the resources are loaded. However, if the loading time is too long, it will cause user loss.
For user behavior analysis, the next page of resources can be loaded on the current page to improve the speed.
a) Perceptible Loading (such as loading into space games)
b) Invisible Loading (such as early loading) Next page)
Compressed pictures
Pictures are the resources that occupy the most traffic, so try to avoid using them. When using them, choose the most appropriate format (judge by size based on the premise of realizing the requirements), the appropriate size, and then use Zhitu compression, and use it in the code. Srcset to display PS on demand
: Excessive compression of image size affects the image display effect
a) Use Zhitu ( http://zhitu.tencent.com/ )
b) Use other methods to replace images (1. Use CSS3 2. Use SVG 3. Use IconFont)
c) Use Srcset
d) Choose the appropriate image (1. webP is better than JPG 2. PNG8 is better than GIF)
e) Choose the appropriate size (1. First load is no larger than 1014KB 2. No wider than 640 (based on mobile phone Normal screen width))
Reducing Cookies
Cookies will affect loading speed, so static resource domain names do not use Cookies
Avoid redirection.
Redirection will affect the loading speed, so set it correctly on the server to avoid redirection.
Asynchronous loading of third-party resources.
Uncontrollable third-party resources will affect the loading and display of the page, so third-party resources must be loaded asynchronously.
[Script execution optimization]
Improper handling of scripts will block page loading and rendering, so when using it, you need to pay attention to writing CSS at the head and JavaScript at the end or asynchronously.
Avoid empty Src for pictures and iFrames.
Empty Src will reload the current page, affecting speed and efficiency.
Try to avoid resizing the image.
Resizing the image refers to resizing the image multiple times in the page, CSS, JavaScript, etc. Resizing the image multiple times will cause the image to be redrawn multiple times, affecting performance.
Try to avoid using DataURL for images.
DataURL images that do not use the image compression algorithm will make the file larger and need to be decoded before rendering, which makes loading slow and time-consuming.
[CSS optimization]
Try to avoid writing the Style attribute in HTML tags
Avoid CSS expressions.
The execution of CSS expressions needs to jump out of the rendering of the CSS tree, so please avoid CSS expressions.
Remove empty CSS rules.
Empty CSS rules increase the size of CSS files and affect the execution of the CSS tree, so empty CSS rules need to be removed.
Correct use of Display attributes.
Display attributes will affect the rendering of the page, so please use them reasonably.
a) width, height, margin, padding and float should not be used after display:inline.
b) float should not be used after display:inline-block.
c ) Vertical-align should not be used after display:block
d) Margin or float should not be used after display:table-*
Don’t abuse Float.
Float requires a lot of calculations when rendering, so use it as little as possible.
Do not abuse Web fonts.
Web fonts need to be downloaded, parsed, and redrawn on the current page. Use them as little as possible.
Do not declare too many Font-sizes.
Too many Font-sizes cause the efficiency of the CSS tree.
No unit is required when the value is 0.
For browser compatibility and performance, no unit is required when the value is 0.
Standardize various browser prefixes
a) No prefix should be placed at the end
b) CSS animations only use two types (-webkit- no prefix)
c) Other prefixes are -webkit- -moz- -ms- no prefix and four types. (-o-Opera browser switches to blink kernel, so it is eliminated)
Avoid making selectors look like regular expressions.
Advanced selectors take a long time to execute and are difficult to read. Avoid using them.
[JavaScript execution optimization]
Reduce redrawing and reflow
a) Avoid unnecessary Dom operations
b) Try to change Class instead of Style, use classList instead of className
c) Avoid using document.write
d) Reduce drawImage
Cache Dom selection and calculation.
Each Dom selection must be calculated and cached.
Cache list.length
must be calculated each time, and a variable is used to save this value.
Try to use event proxies to avoid batch binding of events
Try to use ID selector
ID selector is the fastest
TOUCH event optimization
Use touchstart and touchend instead of click, because they have a faster impact. However, it should be noted that Touch response is too fast, which may easily lead to misoperation.
[Rendering optimization]
HTML uses Viewport
Viewport can speed up the rendering of the page, please use the following code
<meta name=”viewport” content=”width=device-width, initial-scale=1″>Reduce Dom nodes.
Too many Dom nodes affect the rendering of the page. Dom nodes should be reduced as much as possible.
Animation optimization
a) Use CSS3 animation as much as possible
b) Properly use requestAnimationFrame animation instead of setTimeout
c) Appropriate use of Canvas animation. Use css animation within 5 elements, and use Canvas animation for more than 5 elements (webGL can be used for iOS8)
High-frequency event optimization
Touchmove and Scroll events can cause multiple renderings
a) Use requestAnimationFrame to monitor frame changes so that rendering can be performed at the correct time
b) Increase the time interval for responding to changes and reduce the number of redraws
GPU accelerates
the following properties in CSS (CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, Video) to trigger GPU rendering, please use them wisely
PS: Excessive use will cause excessive power consumption of the mobile phone.
Author: Mi Suisui Original text: Tencent ISUX ( 404 )