revise August 2022 media performance articles

web/public/assets/editorial/2022/media-performance-2022-diagnosis-rollback.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="720" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
+  <title id="title">Разбор медиа-проблемы и обратимая правка</title><desc id="desc">Диаграмма делит жалобу на поздний hero, движение layout и спор о приоритете. Каждая ветка получает отдельные факты, после чего выполняется одна обратимая правка и повторяется тот же браузерный сценарий. Диаграмма не измеряет LCP и CLS.</desc>
+  <rect width="1200" height="720" fill="#111827"/><g font-family="Arial, sans-serif"><text x="58" y="72" fill="#f9fafb" font-size="34" font-weight="700">Диагностика: одна гипотеза, одна обратимая правка</text>
+  <rect x="450" y="115" width="300" height="78" rx="14" fill="#7c2d12" stroke="#fdba74" stroke-width="2"/><text x="507" y="163" fill="#fff7ed" font-size="23" font-weight="700">Жалоба о media slot</text>
+  <g fill="#1e3a8a" stroke="#93c5fd" stroke-width="2"><rect x="70" y="275" width="275" height="130" rx="14"/><rect x="462" y="275" width="275" height="130" rx="14"/><rect x="855" y="275" width="275" height="130" rx="14"/></g>
+  <g fill="#f8fafc" font-size="20" font-weight="700"><text x="112" y="318">Late hero</text><text x="502" y="318">Layout movement</text><text x="895" y="318">Priority dispute</text></g><g fill="#cbd5e1" font-size="16"><text x="95" y="350">slot + source mapping</text><text x="95" y="375">browser conditions + trace</text><text x="488" y="350">geometry contract</text><text x="488" y="375">real DOM/layout scenario</text><text x="880" y="350">product intent</text><text x="880" y="375">competing resources + trace</text></g>
+  <rect x="385" y="495" width="430" height="86" rx="14" fill="#14532d" stroke="#86efac" stroke-width="2"/><text x="455" y="530" fill="#f0fdf4" font-size="22" font-weight="700">Одна узкая правка + rollback</text><text x="441" y="558" fill="#dcfce7" font-size="16">geometry ИЛИ source mapping ИЛИ composition</text>
+  <g stroke="#94a3b8" stroke-width="3" fill="none"><path d="M600 193V230H207V275"/><path d="M600 193V275"/><path d="M600 193V230H992V275"/><path d="M207 405V450H600V495"/><path d="M600 405V495"/><path d="M992 405V450H600"/></g><g fill="#94a3b8"><path d="M199 267l8 8-8 8z"/><path d="M592 267l8 8-8 8z"/><path d="M984 267l8 8-8 8z"/><path d="M592 487l8 8-8 8z"/></g>
+  <rect x="145" y="640" width="910" height="45" rx="9" fill="#3f1d2e"/><text x="262" y="669" fill="#fecdd3" font-size="19" font-weight="700">Наблюдение повторяют при тех же условиях; схема не измеряет реальный LCP или CLS</text></g>
+</svg>