refactor: komplettsanierung

apps/web/src/components/blog/posts/Group1/PageSpeedFails.tsx

@@ -3,6 +3,7 @@ import { H2, H3 } from "../../../ArticleHeading";
 import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
 import { IconList, IconListItem } from "../../../IconList";
 import { Mermaid } from "../../../Mermaid";
+import { DiagramPie } from "../../../DiagramPie";
 import { Marker } from "../../../Marker";
 import { ComparisonRow } from "../../../Landing/ComparisonRow";
 
@@ -92,6 +93,9 @@ export const PageSpeedFails: React.FC = () => (
           style B fill:#fca5a5,stroke:#333
           style F fill:#fca5a5,stroke:#333
           style G fill:#fca5a5,stroke:#333`}
+        id="legacy-loading-bottleneck"
+        title="Legacy System Ladezeit-Flaschenhals"
+        showShare={true}
       />
       <p className="text-center text-xs text-slate-400 mt-4 italic">
         Der Flaschenhals der Standard-Systeme: Rechenzeit am Server raubt Ihnen
@@ -134,6 +138,20 @@ export const PageSpeedFails: React.FC = () => (
       </IconListItem>
     </IconList>
 
+    <DiagramPie
+      data={[
+        { label: "JavaScript Execution", value: 35 },
+        { label: "Render Blocking CSS", value: 25 },
+        { label: "Server Response Time", value: 20 },
+        { label: "Image Loading", value: 15 },
+        { label: "Third-Party Scripts", value: 5 },
+      ]}
+      title="Typische Performance-Bottlenecks Verteilung"
+      caption="Wo die Zeit wirklich verloren geht: Eine Analyse der häufigsten Ladezeit-Killer."
+      id="performance-bottlenecks-pie"
+      showShare={true}
+    />
+
     <H2>Der wirtschaftliche Case</H2>
     <Paragraph>
       Baukästen wirken "auf den ersten Blick" günstiger. Doch das ist eine