to consider
Android performance under low-end and
2G network scenarios
Required checks before publishing
- All pictures must have been compressed
- Consider moderate lossy compression, such as JPG images converted to 80% quality
- Consider cutting large images into multiple small plots, which are common in banner plots.
Load performance optimization to open fast enough
- Data offline, consider caching data in Localstorage
- Number of initial request resources < 4
- Images using CSS Sprites or Datauri
- Avoid @import introduction in the outer chain CSS
- Consider embedding small, static resource content
- Initial request Resource Gzip Total Volume < 50kb
- is static resource (Html/css/js/image) optimized for compression?
- Ensure that the access layer has gzip compression turned on (consider upgrading the gzip level, using CPU overhead in exchange for load time)
- Try to use CSS3 instead of pictures
- Static resource (JS/CSS) delay loading outside the initial splash screen
- Image resources outside the initial splash screen are loaded on demand (judging the viewable area)
- Single page application (SPA) consider delaying loading of non-first-screen business modules
- Turn on keep-alive link multiplexing
Operational performance optimization to achieve smooth enough operation
- Avoid IOS 300+ms Click Latency Issues
- Cache DOM Selection and calculation
- Avoid triggering page redraw actions
- Debounce continuously triggered events (Scroll/resize/touchmove, etc.) to avoid high frequent triggering of execution
- Avoid bulk-bound events by using event proxies whenever possible
- Use CSS3 animations instead of JS animations
- Avoid using a large number of CSS3 gradient shadows on low-end machines to improve fluency by considering the downgrade effect
- HTML hierarchy remains simple enough
- Use the CSS Advanced selector and the wildcard selector as little as possible
- Keep it simple
Online Performance Testing Assessment Tool User Guide
- Visit the Google pagespeed Online assessment website
- Enter the destination URL address in the Address bar and click the Analyze button to start detection
- Optimization by pagespeed Analysis of recommendations, priority to solve the problem of red category
Mobile Web Development Specification
