revise August 2022 media performance articles

web/public/assets/editorial/2022/media-performance-2022-state-boundary.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="700" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Состояния учебного media contract и граница браузерного наблюдения</title><desc id="desc">Схема показывает, что разметка и геометрия являются независимыми входами, затем идут planned load, declared load и declared decode. Внешнее наблюдение находится за границей fixture и не делает её метрикой LCP или CLS.</desc>
+  <rect width="1200" height="700" fill="#101827"/><text x="60" y="72" fill="#f9fafb" font-family="Arial, sans-serif" font-size="33" font-weight="700">State machine без подмены браузера</text>
+  <g font-family="Arial, sans-serif"><g stroke-width="2"><rect x="70" y="150" width="180" height="95" rx="14" fill="#1e3a8a" stroke="#93c5fd"/><rect x="70" y="300" width="180" height="95" rx="14" fill="#1e3a8a" stroke="#93c5fd"/><rect x="340" y="225" width="190" height="95" rx="14" fill="#4c1d95" stroke="#c4b5fd"/><rect x="620" y="225" width="190" height="95" rx="14" fill="#4c1d95" stroke="#c4b5fd"/><rect x="900" y="225" width="190" height="95" rx="14" fill="#4c1d95" stroke="#c4b5fd"/><rect x="625" y="465" width="285" height="105" rx="14" fill="#134e4a" stroke="#99f6e4"/></g>
+  <g fill="#fff" font-size="20" font-weight="700"><text x="103" y="192">markup declared</text><text x="100" y="342">geometry reserved</text><text x="367" y="267">load planned</text><text x="648" y="267">load declared</text><text x="924" y="267">decode declared</text><text x="660" y="508">external observation</text></g><g fill="#cbd5e1" font-size="16"><text x="100" y="218">src + alt</text><text x="100" y="368">positive dimensions</text><text x="372" y="293">intent only</text><text x="647" y="293">not network event</text><text x="927" y="293">not decode API</text><text x="685" y="536">caller-supplied record</text></g>
+  <g stroke="#a5b4fc" stroke-width="3" fill="none"><path d="M250 197H295V272H340"/><path d="M250 347H295V272"/><path d="M530 272H620"/><path d="M810 272H900"/><path d="M995 320V400H767V465"/></g><g fill="#a5b4fc"><path d="M332 264l8 8-8 8z"/><path d="M612 264l8 8-8 8z"/><path d="M892 264l8 8-8 8z"/><path d="M759 457l8 8-8 8z"/></g>
+  <rect x="90" y="615" width="1020" height="48" rx="10" fill="#3b1c2b"/><text x="183" y="646" fill="#fecdd3" font-size="19" font-weight="700">Fixture проверяет порядок labels; browser, layout, LCP и CLS остаются за её границей</text></g>
+</svg>