Performance optimization Practical
The first-screen image deserves special treatment
How fast a page feels is when the largest element on the first screen finishes drawing. Lazy-load the hero and you have delayed that moment yourself.
Technote
WordPress know-how, from real work Technotes worth picking
15 articles· Performance optimization · Designers
Performance optimization Practical
What you can animate for free, and what costs a frame
A frame is a very short budget. Only transform and opacity move without layout work; everything else charges you on every single frame.
Performance optimization Advanced
Why the page jumps when your font arrives
When a late web font swaps in, the line count changes and everything below moves. Match the fallback family's metrics to the web font and the shift disappears.
Performance optimization Advanced
Auditing a theme: what it loads versus what it uses
Themes routinely ship assets for features you never use. Once you have the list, what can safely go and what cannot becomes obvious.
Performance optimization Practical
The hidden cost of an embedded video
The player loads whether or not anyone presses play. A poster-first approach charges that cost only to the people who actually click.
Performance optimization Advanced
Metric overrides: stopping the jump when the font lands
Text jumps when a webfont lands not because it was late, but because the fallback had different widths and heights. Match the two and the swap leaves the…
Performance optimization Practical
Where SVG belongs, and where it does not
Icons and diagrams need not be image files. Kept as vectors they need no size variants, and their colour can be driven from CSS.
Performance optimization Practical
font-display: invisible text or shifting text
This property decides what happens in the few hundred milliseconds before a webfont lands. There are five values, but the real choice is between blank text and text…
Performance optimization Practical
The one image you must never lazy-load
Lazy loading is right for nearly every image. Apply it to the large image in the first screen and you delay the very thing the metric measures.
Performance optimization Practical
Subsetting Korean: not downloading all 11,172 syllables
There is no mystery to why Korean fonts are heavy: modern Hangul alone has 11,172 syllable blocks. Split with unicode-range, the browser fetches only the pieces a page…
Performance optimization Practical
How to stop sending desktop images to phones
srcset gives the browser candidates; sizes tells it which one to pick. Get one right and the other still ruins the outcome.
Performance optimization Practical
Self-hosting webfonts: what you gain by dropping the CDN
The biggest advantage of a public font CDN — a cache already warmed by another site — disappeared when browsers partitioned their caches. What remains is a question…
Cited
Technotes worth reading next
Topics outside WordPress are collected on Dongji Communication Tech Insights, run by the same team. The summaries below are quoted from the originals; the titles link to them.
-
Working with AI
Writing a CLAUDE.md — teaching an AI coding assistant your project
AI coding tools such as Claude Code, Cursor and Copilot do better work the more precisely they know your project. Here is a structure and a set of principles that hold up.
-
Working with AI
Prompting an AI for UI design — drafting with Claude and GPT
Asking an AI to "make a nice button" gets you a disappointing button. Structured prompts that carry constraints, references and a defined role get you the design you meant.
-
Themes & plugins
SCSS from the ground up — variables through module structure
The core syntax of SCSS (Sass) and what it solves that plain CSS cannot: variables, nesting, mixins, @use and module structure — organised around patterns you can use immediately.
-
Themes & plugins
Design tokens and theme colour systems — brand identity in SCSS variables
How to turn a colour palette from a pile of hex codes into a system that means something — semantic token structure and SCSS variable patterns, from a real project.
-
Performance optimization
Designing a responsive typography system — the science of readability
Hard-coded pixel font sizes are over. Type scales, fluid sizing with clamp(), Korean webfont optimisation and line-height ratios — building typography that reads well on any screen.
-
Development workflow
From Figma to SCSS — a designer-developer handoff guide
Minimising what gets lost between a Figma file and the code: extracting tokens, naming components, keeping the spacing system in sync — the whole workflow, step by step.