Frontend Development 36 min read

Master Front‑End Performance: Transfer Optimizations, Lazy Loading & Critical CSS

This article presents an in‑depth front‑end performance checklist covering transfer optimizations, script loading strategies, IntersectionObserver lazy loading, critical CSS inlining, resource hints, service‑worker caching, connection‑aware components, and techniques to prevent layout shifts and improve rendering speed.

WecTeam

Apr 29, 2020

Original source: https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages Translation by Zhu Zhiyu and Ma Xueqin; for learning only, credit required. Part of a performance‑optimization series; see earlier parts for context.

Transfer Optimization

39. Are you loading all JavaScript libraries asynchronously?

When a page loads, the browser builds the DOM and CSSOM, then creates a render tree. Parsing JavaScript blocks rendering, so developers should tell the browser to start rendering immediately. Use

defer

async

attributes on scripts. In practice,

defer

is preferred;

async

can break scripts in IE 9 and below and may execute immediately, blocking HTML parsing. Use

defer

unless the script must run before rendering.

Limit third‑party scripts and social‑share buttons, especially

iframe

elements (e.g., maps). The

size-limit

library helps prevent library bloat. Use static social‑share buttons (e.g., SSBG) and static interactive map links as alternatives.

You may also need to modify non‑blocking script loaders to comply with CSP.

40. Use IntersectionObserver and priority hints to lazy‑load heavy components

Delay loading heavy components such as large JavaScript, video, iframe, or images. Native lazy‑loading can be enabled on

&lt;script&gt;

&lt;img&gt;

, or

&lt;link&gt;

(Blink only) with the

importance

attribute set to

high

low

. For finer control, use the Intersection Observer API, which observes the intersection between a target element and the viewport. Create an

IntersectionObserver

with a callback and options, then observe a target. Adjust

rootMargin

and

threshold

for granular control.

References: tutorials by Alejandro Garcia Anglada, Rahul Nanwani, Google’s guide, and examples of high‑performance long‑form storytelling.

Feature policy “LazyLoad” provides a mechanism similar to CSP for selecting lazy‑load functionality.

Even translation strings and emojis should be lazy‑loaded; Twitter Mobile achieved an 80 % JavaScript execution speed boost by doing so.

By lazy‑loading translation strings, Mobile Twitter achieved an 80% JavaScript execution speed boost (image credit: Addy Osmani)

41. Have you inlined critical CSS?

Collect all CSS required for the first paint (critical CSS) and inline it in the

&lt;head&gt;

to reduce round‑trips. The budget is roughly 14 KB. Tools like CriticalCSS, Critical, and the critters Webpack plugin can extract and inline critical CSS, while the rest can be loaded asynchronously with

loadCSS

media="print"

tricks. HTTP/2 server push can deliver critical CSS, but it has pitfalls and is not universally supported. Placing critical resources on a separate domain can also improve caching and parallel connections.

Be aware of limitations: only resources from your own or authorized domains can be pushed, and browsers limit the number of parallel connections. Server‑push is more effective on hot connections, but caching awareness is still lacking.

42. Have you combined your CSS rules?

Beyond critical CSS, further optimizations include splitting the main stylesheet by media queries, placing non‑blocking

&lt;link rel="stylesheet"&gt;

before async scripts, and using service workers to cache inline CSS. When using CSS‑in‑JS, ensure libraries are optimized and avoid over‑combining components.

43. Do you stream responses?

Streams allow reading and writing asynchronous data chunks, enabling the browser to start processing the first chunk of a response immediately. Service workers can construct streams that combine cached shell with network body, or rewrite HTML on the fly. This improves initial rendering because streamed HTML can be parsed as it arrives.

Supported partially in Chrome, Firefox, Safari, and Edge; service workers are widely supported.

44. Have you made components connection‑aware?

Use the Save‑Data client hint and the Network Information API to serve lower‑resolution images, disable fonts, or reduce animations for users on slow connections. React, Angular, and Vue have libraries and hooks to implement adaptive components based on connection type, device memory, or hardware concurrency.

Examples include using

navigator.connection.effectiveType

navigator.deviceMemory

, and conditional imports to defer heavy scripts.

45. Do you preload resources?

Resource hints such as

dns-prefetch

preconnect

prefetch

, and

preload

can reduce latency.

prerender

is deprecated; NoState Prefetch is the modern replacement. Use

preconnect

and

dns-prefetch

for trusted resources, and

prefetch

preload

for resources needed on the next navigation. Be mindful of priority conflicts, especially with fonts.

Early Hints and Priority Hints further improve resource ordering.

46. Use service workers for caching and offline fallback

Caching static assets with a service worker dramatically speeds up repeat visits. Follow pragmatic service‑worker guides, offline tutorials, and use Workbox for a solid foundation. Handle Safari range requests, quota‑exceed errors, and set appropriate CORS headers on cached images.

47. Have you used service workers on CDN/Edge for A/B testing?

Running service workers at the edge can modify HTML per user, enable data‑streamed HTML rewrites, and improve performance for sites using Google Fonts.

Service worker installation curve (Web Almanac)

48. Optimize rendering performance

Use CSS containers to isolate expensive components, apply

will-change

to hint at upcoming changes, and measure runtime rendering performance with DevTools. Resources include Udacity courses, articles by Paul Lewis, Georgy Marchuk, Nolan Lawson, Jason Miller, and Sergey Chikuyonok on GPU animation.

49. Have you prevented layout shifts and repaints?

Layout shifts (CLS) hurt perceived performance. Set explicit width/height on images, use SVG placeholders, group font re‑draws, and employ the Layout Instability API to measure CLS. Tools and guides from Milica Mihajlija, Philip Walton, Charis Theodoulou, and Paul Irish help reduce reflows and repaints.

References

Smashing Magazine – Front‑End Performance Checklist 2020

size‑limit library, SSBG, native lazy‑loading, IntersectionObserver API, CriticalCSS, critters, loadCSS, HTTP/2 Server Push, Early Hints, Priority Hints, Service Worker guides, Workbox, Network Information API, Layout Instability API, etc.

lazy loading Service Worker frontend performance resource hints intersection observer critical CSS network information

Written by

WecTeam

WecTeam (维C团) is the front‑end technology team of JD.com’s Jingxi business unit, focusing on front‑end engineering, web performance optimization, mini‑program and app development, serverless, multi‑platform reuse, and visual building.

0 followers

Reader feedback

How this landed with the community

Rate this article

Was this worth your time?

Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.