How Webnovel Boosted Page Speed 87% with AMP: A Frontend Case Study

Introduction

AMP (Accelerated Mobile Pages) is an open‑source framework from Google designed to speed up web page loading. The Webnovel frontend team, one of the earliest adopters in China, iterated on AMP across several major releases, earning recognition at Google I/O 2019 and AMP Conf 2019.

Webnovel with AMP

Is it worth implementing?

Webnovel converted two major landing pages (home and detail) to AMP, resulting in a 59% increase in reading page PV after one month. A second wave added AMP to key navigation pages (reading, library, comic detail, comic reading), achieving an average load time of 0.94 s, with AMP Cache delivering near‑instant loads.

What did we do?

AMP provides a complete ecosystem of standards and constraints to achieve sub‑second page loads through three core components:

AMP HTML – custom HTML tags and rules that ensure fast loading.

AMP JS – JavaScript components served from Google CDN.

AMP Cache – Google’s caching and pre‑loading service that enables instant page delivery.

These constraints prohibit custom JavaScript, but AMP now supports amp‑script (experimental) for limited custom code up to 150 KB.

AMP HTML

Webnovel’s AMP pages use the EJS template engine for server‑side rendering, adhering to AMP HTML rules. The main implementation step is integrating AMP JS components.

AMP Component Constraints

The new amp‑script component allows limited custom scripts, but size limits ensure performance on low‑end devices.

Basic AMP Component Usage

AMP offers many components that can be added by linking the component’s JavaScript and embedding the provided HTML snippet with appropriate parameters.

Key components used by Webnovel include:

amp‑img – responsive images with built‑in lazy loading.

amp‑list – asynchronous loading of modules such as reward info, tags, reviews, pagination, and comic chapters.

amp‑fallback & placeholder – UI for load failures or placeholders.

amp‑mustache – logic‑less templating for rendering fetched data.

amp‑sidebar – sidebars and toolbars triggered by tap events.

amp‑bind – data binding with amp‑state for dynamic content updates.

AMP event system – supports tap, change, scroll‑triggered animations, etc.

AMP Cache

AMP Cache stores AMP pages on Google’s CDN, enabling seamless navigation between cached pages and graceful fallback for non‑cached pages.

Webnovel AMP Experience Optimizations

Comic Reading Page: Combining Multiple AMP Components for Better Interaction

To achieve no‑refresh chapter loading, Webnovel combines amp‑list , amp‑form , and amp‑state :

Initialize chapter data with amp‑state .

Bind the data to amp‑list via the [src] attribute.

Use amp‑form to submit the next‑chapter API; on success, update the chapter array with AMP.setState() .

Constraints include a 100 KB limit for amp‑state data and the need for backend support for load‑more URLs.

Novel Reading Page: Advanced amp‑list Load‑More

AMP’s experimental amp‑list‑load‑more enables infinite scrolling or click‑to‑load without manual array management. It requires a specific cookie ( AMP_EXP=amp‑list‑load‑more ) and absolute URLs for next‑chapter links.

Further AMP Practices

Signed HTTP Exchange (SXG)

SXG allows the browser to display the original site’s URL while serving the AMP page from Google’s domain, improving brand consistency.

amp‑story

Webnovel uses amp‑story to create immersive, full‑screen story experiences with video and animation, supporting localization and both desktop and mobile.

Conclusion

All new technologies should serve users. After implementing AMP, Webnovel saw an 87% improvement in page load speed, a 59% increase in reading page PV, and an 18% rise in traffic from Google search, confirming the value of the AMP adoption.

References

[1] https://juejin.im/post/5cb97f446fb9a0686362dd22

[2] https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup.html?format=websites

[3] https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript

[4] https://amp.dev/documentation/examples/?format=websites

[5] https://amp.dev/documentation/components/amp-list.html?format=websites

[6] https://juejin.im/post/5cb97f446fb9a0686362dd22