The JekCMS demo site scores 97 on PageSpeed Insights mobile — not through tricks, but through architectural decisions made during the initial build. Critical CSS is inlined per-template, third-party scripts use resource hints, fonts are self-hosted with subsetting, and every image is served in AVIF with explicit dimensions.
Critical CSS is generated at theme build time using Puppeteer. A headless browser visits each template type (home, single post, category, search) and extracts the styles that apply to above-the-fold content. The resulting CSS — typically 4–8KB per template — is inlined directly in the <head> of each page. The full stylesheet is loaded asynchronously via <link rel="preload" as="style" onload="this.rel='stylesheet'">.
Third-Party Scripts Pushed Out of the Critical Path
Third-party scripts — analytics, chat widgets, tag managers — are loaded with <link rel="preconnect"> resource hints and <script defer> or <script type="module"> attributes. Nothing that is not required for initial interactivity runs during the critical path. This alone accounts for roughly 15 points of the PageSpeed score improvement compared to a default installation with synchronous script loading.
68KB Self-Hosted Fonts vs. 1.3MB Google Fonts
Fonts are served from the same origin as the page. The full Google Fonts Inter variable font family weighs 1.3MB; the subsetted version covering Latin and Turkish ranges is 68KB. Subsetting uses pyftsubset with the --unicodes flag specifying the exact Unicode ranges required. The font files are cached for one year and served with immutable cache headers.
Explicit Dimensions Eliminate Layout Shift
Every <img> in built-in themes includes explicit width and height attributes that match the thumbnail size being loaded — not the display size set by CSS. This allows the browser to reserve the correct amount of space before the image loads, eliminating Cumulative Layout Shift. The get_featured_image() helper returns both the URL and dimensions; custom themes should use both.