TV News, custom theme for the TV series media

A media outlet with advertising, and a degrading INP

About Nouveautés Télé

Nouveautés Télé is an online media outlet dedicated to soap operas and TV series: summaries of upcoming episodes, reviews, ratings, and a very active reader community in the comments. The site, on WordPress, is a high-traffic media outlet totaling tens of thousands of visits per day. Due to its independent approach, its business model is advertising-based, with several ad networks deploying their formats there: video player, integrated ad units within images, real-time bidding, etc.

Why contact us

We follow the site every week. At the end of the summer, its mobile responsiveness, measured by Google among real visitors, began to degrade: the INP (Interaction to Next Paint, the delay between a gesture and the screen update) reached 207 ms at the 75th percentile, above the threshold of 200 ms that separates "good" from "needs improvement". On desktop, it remained at 57 ms. The display was already fast (LCP of 1.4 s): the problem was not loading speed, but the browser's workload. With Isabelle, who edits the site, we decided on a complete theme overhaul.

Expected performance

Sustainably get back under 200 ms INP on mobile, by reducing everything that occupies the browser's main thread, the only queue where scripts run, styles are calculated, and reader gestures are processed. The total blocking time (TBT), which sums up excessively long tasks during loading, is the laboratory indicator: 166 ms on the mobile homepage in PageSpeed Insights.

Challenges and constraints

Ad network scripts are the largest part of this workload, and they cannot be removed: they are what fund the site. Postponing them to the reader's first interaction, as is done for other third-party scripts, would cause impressions to plummet and the page to jump upon their insertion. The only remaining margin was therefore the site's own code: every millisecond saved by the theme is one more millisecond for ads, without inconveniencing the reader. Everything also had to be kept identical for readers and ad networks: layout, ad placements, related articles, reviews and their ratings, addresses, and SEO.

Project steps

Diagnosis: three layers to display a page

The active theme was a modified version of a magazine theme (a parent theme and its child theme), supplemented by four display extensions: a mobile menu and its override, and two pagination extensions. Each layer added its scripts, styles, and HTML: jQuery and its plugins loaded everywhere, a second full menu on each page for mobile, icon fonts, heavy stylesheets that WP Rocket had to reduce page by page afterward, and up to 1,927 HTML elements on a category page.

A radical choice: a completely custom theme

Our usual approach wouldn’t have been enough. Normally, we optimize the existing (cache, script loading, images, fonts), or, during a redesign, we rebuild the site on our proven foundation: GeneratePress, GenerateBlocks, and our GeneratePerf child theme. Here, the browser budget was already largely consumed by ad networks, and nothing that wasn’t essential could be added.

A theme written from scratch, for this site only. A classic theme in PHP 8.4, for WordPress 7.1, without any framework or page builder:

• a single stylesheet, 10 KB compressed, within the 14 KB budget of our internal rules;
• a single native JavaScript script, loaded deferred, and no more jQuery;
• the system font of each device: nothing to download;
• icons drawn in CSS;
• a single mobile menu, opened via native dialog, accessible by keyboard;
• preloading of subsequent pages by the browser (Speculation Rules).

WP Rocket's used CSS calculation could be skipped: the theme's stylesheet is already optimized.

All functions carried over, one by one.

• identical pagination;
• sticky posts by category;
• shortcodes;
• widgets rewritten with their IDs, to keep their settings;
• comment page indexing rules;
• reviews, with their "Our Opinion" block and their structured data.

Two extensions written for the site, related posts and the injection of ad inserts into the text, became modules of the theme: same settings, same posts offered, inserts before the same paragraphs. The styles of 47 content excerpts, which overflowed the entire page, were limited to their table.

A go-live without interruption

The switch was repeated end-to-end on a copy of the site under Docker: switch, rollback, new switch. The new theme was then displayed on the actual site via a reserved address, invisible to visitors and search engines, to verify ad networks, measurement tools, and the consent banner in real conditions. This process revealed a flaw that nothing else would have shown: a network's video player was positioning itself using a marker from the old theme, defined in the network's configuration. The marker was recreated before going live. The switch itself took 1.4s, with a tested rollback in 3s, never used.

Adjustments based on Isabelle's feedback

In the following days, about fifteen versions of the theme were deployed, each file by file, with a backup of the previous version:

• accent colors and contrasts;
• reading column reduced from about 97 to 65 characters per line on desktop;
• more readable subheadings;
• article summaries;
• homepage and ad placement settings screen, recreated in the administration.

Intervention Report

The 24-page report details what was kept, removed, and changed, the deployment method, before and after measurements using the same protocol, and the technical choices to be respected going forward. An appendix indicates to any future provider where to find each function in the theme.

Performance of a site where advertising plays a key role

Why is a media site less responsive on mobile?

Because ad networks work on the same thread as the reader. Their scripts auction each placement to dozens of partners, then repeat at regular intervals to display new ads. Meanwhile, a reader's interaction waits its turn: this is the delay that INP measures. On a phone, less powerful than a computer, the queue gets longer, which largely explains the difference between 207ms on mobile and 57ms on desktop.

Should ad scripts be deferred to improve INP?

No. Deferring an ad network until the reader's first interaction causes impressions, and thus revenue, to drop, and leads to layout shifts when the ad finally appears. The levers are elsewhere: reduce all other browser work, as done here, and negotiate with each ad network what can be adjusted without revenue loss, backed by data.

When to choose a custom theme over optimization?

When the site code is the last available margin. For most sites, optimizing the existing theme or rebuilding it on a proven foundation is sufficient. A completely custom theme is justified when every millisecond counts, as on an ad-funded media site, and when the layout is stable: it is then necessary to inventory each function of the old theme and replicate it identically, which constitutes the bulk of the work.

The technical stack

The result in numbers

Lighthouse measurements on mobile, on a copy of the site: 11 typical pages, two passes before and two after, without ads or third-party tools, to isolate the site's code.

On average per page, on the site copy:

• site scripts: from 74 to 14 ms;
• browser work: from 377 to 221 ms;
• CSS transferred: from 66 to 10 KB;
• JavaScript transferred: from 85 to 29 KB;
• requests: from 72 to 23;
• performance score: from 89 to 99.

Live, including ads, on a mobile article: score from 80 to 92, LCP from 4.7 to 3.1 s, CLS from 0.010 to 0. The blocking time of this article remained stable (72 then 75 ms): live, it mainly depends on the ad bids for each load, to the point of reaching 1.7 s on a mobile article in GTmetrix. It is the field INP, measured by Google over 28 rolling days, that will give the complete verdict, around November 10th.

Does your media deserve the same treatment? Discover our web editor support.

The rest and conclusion in images