perf: warm WebKit rendering pipeline with realistic HTML template
All checks were successful
Security Checks / dependency-audit (push) Successful in 13s
Security Checks / secret-scanning (push) Successful in 4s
Security Checks / dockerfile-lint (push) Successful in 4s

Empty HTML warmup only spun up the WebContent process. The first
real article still paid ~3s for CSS parsing, font measurement,
layout engine init, and compositing pipeline startup.

Now ArticleRenderer.init loads the full ArticleHTMLBuilder template
with sample content covering all styled elements (paragraphs,
headings, blockquotes, code blocks). WebKit performs real rendering
during app launch while the user is on Home/Fitness. By the time
they open the first article, CSS is parsed, fonts are measured,
and the pipeline is warm — the first article renders as fast as
subsequent ones.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yusuf Suleman
2026-04-03 22:54:36 -05:00
parent c0078adeb7
commit 343abb0a80

View File

@@ -18,8 +18,28 @@ final class ArticleRenderer {
webView.backgroundColor = .clear
webView.scrollView.isScrollEnabled = true
// Pre-warm: spin up WebContent process at app launch
webView.loadHTMLString("<html><body></body></html>", baseURL: nil)
// Pre-warm with realistic content. An empty <html><body></body></html>
// only warms the WebContent process. Loading the real CSS template with
// sample text forces WebKit to also parse CSS, load/measure system fonts,
// initialize the layout engine, and spin up the compositing pipeline.
// This shifts the ~3s first-render cost to app launch (background) so the
// first article open doesn't stall.
webView.loadHTMLString(ArticleHTMLBuilder.build(
title: "Warming up",
url: nil,
feedName: "Reader",
author: "System",
timeAgo: "now",
readingTime: "1 min",
body: """
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. \
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h2>Section heading</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<blockquote>Quoted text for blockquote styling.</blockquote>
<pre><code>code { display: block; }</code></pre>
"""
), baseURL: nil)
}
}