Front-end Optimization Techniques for Mobile Websites and Apps

In recent years, the explosive growth of mobile sites, apps, and games has far exceeded early expectations; before 2010 China was still in the 3G era with few decent mobile sites, but around 2012, with the iPhone 4S and expanding 4G coverage, apps, mobile sites, and HTML5 pages became popular, raising the demand for high‑level front‑end optimization.

Below are the key optimization options:

1. Resource reference optimization:

Merge referenced CSS and JavaScript files and enable compression.

Combine small icons into a sprite sheet and use background positioning.

Implement on‑demand loading, such as scroll‑triggered loading.

Enable server‑side GZIP compression to reduce text payloads by up to 60%.

Use asynchronous loading attributes defer and async for scripts.

Reduce HTTP requests and cache all cacheable resources globally.

Prefer external resource linking to improve page caching.

Host resource files on the same server to avoid third‑party failures.

Use <link rel="dns-prefetch" href="//img.x.com"> in the head to pre‑resolve DNS for external domains, but avoid overuse.

2. CSS & JavaScript content optimization:

Place CSS in the head and JavaScript at the bottom, using asynchronous loading to prevent render blocking.

Avoid inline styles within HTML tags.

Limit font usage and size.

Omit units for zero values.

Use standard vendor prefixes or pre‑processor mixins (e.g., SCSS @include).

Minimize use of floating elements.

Avoid complex DOM loops.

Prefer IDs over classes for performance when appropriate.

Employ event delegation instead of binding many individual events.

3. DOM rendering optimization:

Use simple HTML structures and avoid deep nesting.

Leverage CSS3 animations to reduce JavaScript DOM manipulation.

Utilize SVG or Canvas where suitable.

Avoid adding classes to the lowest‑level elements unnecessarily.

4. Image optimization:

Replace images with CSS, SVG, or icon fonts when possible.

Compress images aggressively; PNG8 often outperforms GIF, and tools like gulp , TinyPNG , or other online compressors can reduce size by ~20%.

Consider using WebP format for better compression, noting browser support limitations.

Avoid Data URLs (base64) as they increase size and decoding time.

Image examples:

For a deeper discussion on Data URLs, see the linked article "DataURL Introduction and Pros/Cons".

These optimization steps are interrelated and complementary; the same rules apply to both mobile and PC platforms.