{"id":26085,"date":"2024-02-04T12:52:28","date_gmt":"2024-02-04T11:52:28","guid":{"rendered":"https:\/\/blog.mi.hdm-stuttgart.de\/?p=26085"},"modified":"2024-04-02T14:21:13","modified_gmt":"2024-04-02T12:21:13","slug":"optimierung-einer-vuejs-webseite-ladezeitenreduktion","status":"publish","type":"post","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2024\/02\/04\/optimierung-einer-vuejs-webseite-ladezeitenreduktion\/","title":{"rendered":"Optimierung einer VueJS-Webseite: Ladezeitenreduktion"},"content":{"rendered":"<div class=\"wp-block-aioseo-table-of-contents\"><ul><li><a class=\"aioseo-toc-item\" href=\"#aioseo-vorstellung-des-projekts\">1. Vorstellung des Projekts<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-testfall-und-tools\">2. Testfall und Tools<\/a><ul><li><a class=\"aioseo-toc-item\" href=\"#aioseo-tool-a-webpagetest\">2.1 Tool A: WebPageTest<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-tool-b-pagespeed-insights\">2.2 Tool B: PageSpeed Insights<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-tool-c-lighthouse-chrome-extension\">2.3 Tool C: Lighthouse Chrome Extension<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-metriken-und-masse\">2.4 Metriken und Ma\u00dfe<\/a><\/li><\/ul><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-verbesserungsschritte\">3. Verbesserungsschritte<\/a><ul><li><a class=\"aioseo-toc-item\" href=\"#aioseo-prerendering\">3.1 Prerendering<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-render-blocking-stylesheets\">3.2 Render-Blocking Stylesheets<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-bildoptimierung\">3.3 Bildoptimierung<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-js-optimierungen\">3.4 JS-Optimierungen<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-timing\">3.5 Timing<\/a><\/li><\/ul><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-experimente-und-analyse\">4. Experimente und Analyse<\/a><ul><li><a class=\"aioseo-toc-item\" href=\"#aioseo-testergebnisse\">4.1 Testergebnisse<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-interpretation\">4.2 Interpretation<\/a><\/li><\/ul><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-fazit\">5. Fazit<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-anhang\">A. Anhang<\/a><ul><li><a class=\"aioseo-toc-item\" href=\"#aioseo-tabellen\">A.1 Tabellen<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-was-sonst-keinen-platz-gefunden-hat-bilddateigrossen-und-bildformate\">A.2 Was sonst keinen Platz gefunden hat: Bilddateigr\u00f6\u00dfen und Bildformate<\/a><\/li><\/ul><\/li><\/ul><\/div>\n\n\n<h1 class=\"wp-block-heading\" id=\"aioseo-vorstellung-des-projekts\">1. Vorstellung des Projekts<\/h1>\n\n\n\n<p>Diese Hausarbeit behandelt die Optimierung einer VueJS-Webseite im Rahmen des Seminars \u201dEntwicklung von Rich Media Systemen\u201c unter dem Motto \u201dWeb Performance Optimizations\u201c. Zu diesem Zweck wurden mehrere \u00c4nderungen an einer bereits bestehenden Webseite vorgenommen, die mit VueJS entwickelt wurde.<\/p>\n\n\n\n<p>Die Webseite in diesem Projekt ist eine Marketingwebseite f\u00fcr das Onlinetool f\u00fcr Physiotherapiepraxen namens \u201dLeto\u201c. Die Webseite ist strikt getrennt von der Anwendung, umfasst aber mehrere Admin-Tools und die Nutzerkontenverwaltung. Die Kommunikation mit dem Backend- Server erfolgt \u00fcber HTTP und ist f\u00fcr dieses Projekt nahezu vollkommen irrelevant.<\/p>\n\n\n\n<p>Gehostet wird die Webseite auf einer kostenlosen und minimal ausgestatteten AWS EC2 Instanz und mithilfe von Docker. Auf der Host-Maschine l\u00e4uft zus\u00e4tzlich auf Docker ein NGINXProxy-Manager Container, der die Requests \u00fcber die Domain \u201dleto.andreasnicklaus.de\u201c an den richtigen Container weiterleitet. Die Erstellung des Docker-Images erfolgt automatisiert in Github Actions und hat folgende relevante Build-Schritte:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Installation der zum Buildprozess notwendigen Pakete (apt-get und npm)<\/li>\n\n\n\n<li>Kopieren der Source-Dateien<\/li>\n\n\n\n<li>Bauen der Webseite mittels npm run build<\/li>\n\n\n\n<li>Wechseln auf NGINX-alpine Docker Image<\/li>\n\n\n\n<li>Kopieren der NGINX-Konfigurationsdatei<\/li>\n\n\n\n<li>Kopieren der gebauten Webseite auf den NGINX-Webserver<\/li>\n<\/ol>\n\n\n\n<p>Auf der Grundlage dieserWebseite, Entwicklungsumgebung und dieses Deployments werden im Folgenden Schwachstellen gesucht, Verbesserungsm\u00f6glichkeiten umrissen, deren Umsetzung beschrieben und Effekt ausgewertet. Zielsetzung dabei ist es, die Performance der Webseite im Allgemeinen zu verbessern, ohne den Aufwand f\u00fcr die Weiterentwicklung zu vergr\u00f6\u00dfern oder die Gr\u00f6\u00dfe des Dockerimages und somit der Speicheranforderungen an den Webserver zu<br>vergr\u00f6\u00dfern.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"aioseo-testfall-und-tools\">2. Testfall und Tools<\/h1>\n\n\n\n<p>Um die Performance der Webseite sowie den Effekt der Verbesserungsversuche zu bewerten, werden in diesem Kapitel die genutzten Testtools und die beachteten Metriken beschrieben.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-tool-a-webpagetest\">2.1 Tool A: WebPageTest<\/h2>\n\n\n\n<p>Das erste Tool, das zur Auswertung der Performance genutzt wurde, ist das Onlinetool WebPageTest, das unter www.webpagetest.org erreichbar ist. WebPageTest wurde von Patrick Meenan als internes Evaluationswerkzeug f\u00fcr AOL entwickelt und ist sein 2008 frei verf\u00fcgbar.<\/p>\n\n\n\n<p>Mithilfe von WebPageTest k\u00f6nnen Ladezeiten, Verarbeitungsperformance und weitere Vergleichsma\u00dfst\u00e4be festgehalten, bzw. erstellt werden. Dabei wird hoher Wert darauf gelegt, den Programm- und Datenflow des Clients zu visualisieren und insbesondere zeitlich aufzudr\u00f6seln. Der gr\u00f6\u00dfte Faktor, der f\u00fcr die Verwendung in diesem Projekt ausschlaggebend war, ist die Tatsache, dass jeder Test eine eindeutige ID hat, mit der die Testergebnisse nachvollziehbar gespeichert werden und mit der mehrere Tests miteinander verglichen werden k\u00f6nnen.<\/p>\n\n\n\n<p>Zus\u00e4tzlich bietet das Tool die M\u00f6glichkeit, optional bei Tests einen Lighthousetest (s. Lighthouse Chrome Extension und PageSpeed Insights) und einen Carbon Control Test mitlaufen zu lassen, der den Kohlenstoffaussto\u00df des Seitenaufrufs absch\u00e4tzt. Au\u00dferdem werden weitere hilfreiche Tools wie ein Bildanalysetool, eine Request-Map und ein Sicherheitscheck direkt verlinkt. Im Rahmen dieser Arbeit werden lediglich die integrierten Ladeanalysen, der integrierte Lighthouse Report, die Ladezeitvisualisierung \u201dFilmstrip\u201c, der \u201dContent Breakdown\u201c und das externe Bildanalysetool verwendet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-tool-b-pagespeed-insights\">2.2 Tool B: PageSpeed Insights<\/h2>\n\n\n\n<p>Ebenso wie WebPageTest ist auch PageSpeed Insights ein frei verf\u00fcgbares Onlinetool zur Auswertung der Performance einerWebseite. Allerdings wird hier kaumWert auf die Auswertung des Renderverhaltens derWebseite gelegt, sondern ein Lighthousetest durchgef\u00fchrt. Das hei\u00dft, dass statische Tests in 4 Kategorien durchgef\u00fchrt werden: Performance, Barrierefreiheit, Best Practices und Suchmaschinenoptimierung (SEO). F\u00fcr dieses Projekt wird lediglich der Performance<br>Report ausgewertet.<\/p>\n\n\n\n<p>Der Performance Report gibt eine Bewertung zwischen 0 und 100 ab, der sich aus 5 Metriken zusammensetzt, die sich wiederum aus vielen Messungen ergeben:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Der First Contentful Paint (FCP) gibt an, wie lange das Rendering dauert, bis das erste Element auf der Benutzeroberfl\u00e4che angezeigt wird. Es ist somit ein Ma\u00df daf\u00fcr, wie lange die Auswertung und das Laden der Ressourcen dauert, bevor das Rendering des HTMLs beginnen kann.<\/li>\n\n\n\n<li>Der Largest Contentful Paint (LCP) beschreibt das Ende des Renderings und gibt an, wie lange es gedauert hat, bis das letzte HTML-Element gerendert wurde. Der LCP ist somit unter anderem ein Ma\u00df f\u00fcr die maximale Gr\u00f6\u00dfe von gerenderten Dateien oder Elementen oder f\u00fcr Animationen, die die Fertigstellung des Renderings verz\u00f6gern.<\/li>\n\n\n\n<li>Die Total Blocking Time (TBT) ist die Zeit zwischen FCP und \u201dTime To Interactive\u201c (TTI, dt.: Zeit zur Interaktivit\u00e4t). F\u00fcr Benutzerfreundlichkeit sowie analytische Auswertung des Nutzerverhaltens ist diese Metrik besonders wichtig, da der Gedankengang und das Verhalten des Nutzers durch eine hohe TBT verz\u00f6gert wird. Ausgel\u00f6st kann eine hohe TBT durch langes Laden, Parsen und Ausf\u00fchren von JavaScript, insb. bei ineffizientem Code.<\/li>\n\n\n\n<li>Der Cumulative Layout Shift (CLS) misst die Bewegung von sichtbaren Elementen in der Nutzeransicht. Auch dieser Wert ist ma\u00dfgeblich f\u00fcr die Benutzerfreundlichkeit und das effektive Nutzerverhalten auf der Webseite. Der CLS wird von langsam nachladenden HTML-Elementen oder durch fehlende Gr\u00f6\u00dfenangaben von Elementen verursacht, die wiederum das Verschieben von anderen Elementen bewirken.<\/li>\n\n\n\n<li>Der Speed Index (SI) gibt an, wie schnell Inhalte w\u00e4hrend des Ladens visuell dargestellt werden. SI ist damit eine Metrik, die das sofortige Anzeigen von Elementen belohnt. SI ist allerdings auch eine Metrik, die den Effekt von allen Bestandteilen derWebseite zusammenfasst und ist deshalb nicht immer ohne Wissen \u00fcber den Sourcecode gut nachvollziehbar.<\/li>\n<\/ol>\n\n\n\n<p>Im Rahmen dieser Arbeit wird PageSpeed Insights lediglich verwendet, um einen Vergleichs-, bzw. Best\u00e4tigungswert als \u201dzweite Meinung\u201c f\u00fcr den Lighthouse Report von WebPageTest und Erkl\u00e4rungen zu den Ergebnissen zu bekommen, weil die Performance je nach Zustand des Servers und Clients zwischen Ausf\u00fchrungen der Tests schwanken kann.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-tool-c-lighthouse-chrome-extension\">2.3 Tool C: Lighthouse Chrome Extension<\/h2>\n\n\n\n<p>Die Google Chrome Extension Lighthouse ist eine Erweiterung f\u00fcr den Browser Google Chrome und wurde von Google entwickelt. Mit dessen Hilfe k\u00f6nnen Lighthouse Reports lokal f\u00fcr im Browser ge\u00f6ffnete Seiten erstellt werden und bereits in der Entwicklungsphase manuell generiert werden. Die Auswertungen sind dabei dieselben wie bei WebPageTest und PageSpeed Insights.<\/p>\n\n\n\n<p>Ebenso wie PageSpeed Insights wird die Lighthouse Chrome Extension im Rahmen dieser Arbeit blo\u00df verwendet, um einen weiteren Vergleichswert f\u00fcr den Performance-Score zu bekommen und um bei der Entwicklung die Verbesserungen zu testen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-metriken-und-masse\">2.4 Metriken und Ma\u00dfe<\/h2>\n\n\n\n<p>F\u00fcr die Evaluierung der Testergebnisse durch die oben genannten Tools wurden die vielen Messwerte reduziert auf 9 Metriken, deren Entwicklung w\u00e4hrend des Optimierungsprozesses hier interessant sind. Dazu geh\u00f6ren vonWebPageTest die \u201dPageWeight\u201c (dt.: Seitengewicht), die die Gr\u00f6\u00dfe der geladenen Dateien in Bytes angibt, der LCP und SI (von hier an zur Unterscheidung mit \u201dWPT LCP\u201c und \u201dWPT SI\u201c abgek\u00fcrzt). Von den Lighthouse Reports werden der generelle Performance-Score (LH Score) sowie der FCP, LCP, SI, CLS und TTI ausgewertet.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"aioseo-verbesserungsschritte\">3. Verbesserungsschritte<\/h1>\n\n\n\n<p>Tabelle 2 zeigt die 12 Versionen, die in dieser Arbeit verglichen werden. Neben der Version v00, die die Version vor Projektbeginn bezeichnet, und den Versionen v03 und v04, die keine Performanceoptimierungsschritte, sondern lediglich inhaltliche Updates beinhalten, gibt es 9 Versionsschritte, die 5 Bestandteile der Webseite optimieren. Die folgenden Unterkapitel beschreiben die Versionsschritte und die Webseitbestandteile, die in den Versionen optimiert werden.<\/p>\n\n\n\n<p>Im Folgekapitel 4 wird beschrieben, wie die Versionen ausgewertet und welche Performanceverbesserungen dadurch erzielt wurden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-prerendering\">3.1 Prerendering<\/h2>\n\n\n\n<p>Die Version v01 f\u00fchrt als ersten Schritt ein, dass die Seiten vorgerendert werden. Mit Vue wird uspr\u00fcnglich ein HTML-Skelett geladen, dass mittels JavaScript mit Inhalten gef\u00fcllt wird. Deshalb muss der Browser in diesem Prozess erst das HTML-Skelett laden, anschlie\u00dfend den verlinkten JavaScript-Chunk-Vendor laden, der auf die relevanten JavaScript- und CSS-Dateien verweist. Erst, wenn all diese Dateien geladen werden, kann der Browser die Seite rendern. Das ist oft effizient, weil das initiale HTML sehr klein ist und das Navigieren zwischen Seiten weniger Ladeaufwand hat. Dieses Verfahren ist lediglich beim ersten Laden der Seite aufwendig, weil viele Dateien in sog. Chained Requests geladen werden.<\/p>\n\n\n\n<p>Im Prerendering werden die Vue-Templates, die mittels Vue-Router einem Pfad zugewiesen werden, einmalig im Build-Prozess der Seite zusammengef\u00fcgt und gerendert. So kann das HTML, das im allerersten Request empfangen wird, gleich mit Inhalten gef\u00fcllt werden, die im Browser sofort gerendert werden.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\" data-line=\"\">new PrerenderSpaPlugin ({\n  staticDir : path . join ( __dirname , \u2019dist \u2019),\n  routes : routes . filter (r =&gt; r. meta ?. prerender ). map(r =&gt; r. path ),\n  renderer : new PrerenderSpaPlugin . PuppeteerRenderer ({\n    inject : {},\n    renderAfterElementExists : \u2019&#091;data - view ]\u2019,\n  }) ,\n  postProcess : ( renderedRoute ) =&gt; {\n    renderedRoute.html = renderedRoute.html\n      .replace(\/&lt;script (.*?)&gt;\/g, \u2019&lt;script $1 defer&gt;\u2019)\n      .replace(\u2019id=&quot;app&quot;\u2019, \u2019id=&quot;app&quot; data-server-rendered=&quot;true&quot;\u2019);\n    return renderedRoute ;\n   }\n })<\/code><\/pre>\n\n\n\n<p>Das Codebeispiel 1 zeigt die Implementierung mithilfe des NPM-Packages PrerenderSpaPlugin. Das Plugin nutzt den PuppeteerRenderer, der in einem Headless Chrome die Seite \u00f6ffnet und rendert. Sobald ein HTML-Element mit dem Attribut \u201ddata-view\u201c vorhanden ist, speichert das Plugin das HTML der Seite ab. Deshalb muss das Vue-Template der View das Attribut data-view bekommen.<\/p>\n\n\n\n<p>Zus\u00e4tzlich wurde in diesem Schritt jedes verlinkte Skript mit dem Attribut \u201ddefer\u201c versehen, damit es dem Rendering nicht im Weg steht, und die App wird als prerendered annotiert. Durch diesen Schritt k\u00f6nnen alle statischen Inhalte sofort nach Laden und Parsen des HTML gerendert werden und die Rendering-Engine muss nicht auf das Laden der JavaScript-Dateien warten. Da dies nur bei den \u00f6ffentlich zug\u00e4nglichen und statischen Seiten sinnvoll ist, werden nur diese Seiten vorgerendert. Diese Eigenschaft wird durch f\u00fcr jede Route h\u00e4ndisch festgelegt (s. Codebeispiel 1, Zeile 3).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-render-blocking-stylesheets\">3.2 Render-Blocking Stylesheets<\/h2>\n\n\n\n<p>Die zweite H\u00fcrde, die f\u00fcr schnelles Rendering der Seite genommen wurde, ergibt sich aus der Reihenfolge, in der Dateien geladen und geparst werden. Das HTML wird top-down (dt.: von oben nach unten) geparst und die verlinkten Ressourcen i.d.R. auch in dieser Reihenfolge geladen, bevor das Parsing und Rendering des HTML weiterl\u00e4uft. Elemente und Ressourcenm\u00fcssen daher explizit verz\u00f6gert geladen werden. Bei JavaScript kann das entweder dadurch erreicht werden, dass Script-Tags ans Ende des HTML-Bodys gestellt oder mit dem defer-Attribut ausgezeichnet werden. Zweiteres wird in v01 automatisiert erledigt (s. Codebeispiel 1, Zeile 10).<\/p>\n\n\n\n<p>Bei Stylesheets (CSS) gibt es keineM\u00f6glichkeit, das verz\u00f6gerte Laden so simpel umzusetzen. Stattdessen werden ab Version v02 die Stylesheets mit dem Attribut rel=&#8221;preload&#8221; vorgeladen und nach dem Laden wird das Attribut auf rel=&#8221;stylesheet&#8221; ge\u00e4ndert. Da diese Funktionalit\u00e4t auf JavaScript basiert, wird das Stylesheet zus\u00e4tzlich in einem noscript-Tag klassisch eingebunden (s. Codebeispiel 2). Damit wird nicht die Ladereihenfolge der Ressourcen ge\u00e4ndert, aber die Rendering-Engine wartet nicht mehr darauf, dass das Stylesheet geladen wurde, um das Rendering fortzusetzen.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\" data-line=\"\">&lt;link rel=&quot;preload&quot; href=&quot;$1&quot; as=&quot;style&quot; onload=&quot;this.onload=null; this.rel=\u2019stylesheet\u2019&quot;&gt;\n&lt;noscript&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;$1&quot;&gt;\n&lt;\/noscript&gt;<\/code><\/pre>\n\n\n\n<p>Zur Optimierung des CSS geh\u00f6rt au\u00dferdem, dass externe Stylesheet nicht in den internen verwiesen werden, da das Laden derer sonst erst nach dem Parsen der internen Stylesheets beginnen w\u00fcrde. Stattdessen m\u00fcssen alle externen Stylesheets bereits im HTML-Head verlinkt werden. In diesem Projekt tritt das nur auf das Laden der Roboto-Schriftart zu. Codebeispiel 3 zeigt, wie im Vue-Template das Stylesheet von Google-Servern verlinkt wird. Diese Verlinkung landet nach dem Build in den internen Stylesheets f\u00fcr das Template. Codebeispiel 4 zeigt die Einbindung in die index.html ab Version v05, die im Build-Prozess automatisiert \u201dunchained\u201c eingebunden wird (s. Codebeispiel 2).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\" data-line=\"\">&lt;style lang=&quot;scss&quot;&gt;\n  @import url(&quot;https:\/\/fonts.googleapis.com\/css2?family=Roboto&amp;display=swap&quot;);\n&lt;\/style &gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\" data-line=\"\">&lt;link\n  rel=&quot;stylesheet&quot;\n  href=&quot;https:\/\/fonts.googleapis.com\/css2?family=Roboto&amp;display=swap &quot;\n\/&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-bildoptimierung\">3.3 Bildoptimierung<\/h2>\n\n\n\n<p>Die Versionen v05 und v06 beinhalten haupts\u00e4chlich Optimierungen bez\u00fcglich der Bytegr\u00f6\u00dfe und der Pixelgr\u00f6\u00dfe der verwendeten Bilder. Bis v05 wurden alle Bilder als img-Tag eingebunden und bis auf das Brand-Logo und ein Hintergrundbild (SVG) sind alle Bilder im WebP-Format in Originalgr\u00f6\u00dfe verlinkt. Die Darstellungsgr\u00f6\u00dfe dieser Bilder auf dem Bildschirm wurde bis dahin lediglich \u00fcber CSS bestimmt.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\" data-line=\"\">&lt;picture &gt;\n  &lt;source\n    :srcset=&quot;\u2018${appleDevices_avif_1} 200w, ${appleDevices_avif_2} 783w,\n      ${appleDevices_avif_3} 1123w, ${appleDevices_avif} 1920w\u2018&quot;\n    sizes=&quot;(max-width: 768px) 100vw, 50vw&quot;\n  \/&gt;\n  &lt;source\n    :srcset=&quot;\u2018${appleDevices_webp_1} 200w, ${appleDevices_webp_2} 783w,\n      ${appleDevices_webp_3} 1123w, ${appleDevices_webp} 1920w\u2018&quot;\n    sizes=&quot;(max-width: 768px) 100vw , 50vw&quot;\n  \/&gt;\n  &lt;img :src =&quot; appleDevices_webp &quot; ... \/&gt;\n&lt;\/ picture &gt;<\/code><\/pre>\n\n\n\n<p>Das Codebeispiel 5 zeigt die Einbindung von Bildern im picture-Tag mit mehreren Bildgr\u00f6\u00dfen und Bildformaten. Es wird davon ausgegangen, dass jeder Browser heute entweder Bilder im AVIF-Format oder WebP-Format darstellen kann. Aus diesem Grund werden zwei Sourcesets definiert, die jeweils die Bilder in 4 verschiedenen Breiten (200px, 780px, 1123px und 1920px) anbieten. Au\u00dferdem wird direkt im HTML mit angegeben, welche Breite das Bild im HTML haben wird (s. Zeilen 5 und 10), damit der Browser das passende Bild laden kann.<\/p>\n\n\n\n<p>Dadurch wird bewirkt, dass der Browser selbst entscheiden kann, welche Pixelgr\u00f6\u00dfe und welches Format geladen werden soll. Version v06 \u00e4ndert die Verteilung der 4 Bildgr\u00f6\u00dfen zu einer feineren und linearen Verteilung mit 6 Bildweiten: 320px, 640px, 960px, 1280px, 1600px und 1920px. Diese Bildgr\u00f6\u00dfen passen zudem besser mit handels\u00fcblichen Endger\u00e4ten zusammen, da die Bilder auf dieser Seite entweder 50% oder 100% der Bildschirmweite einnehmen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-js-optimierungen\">3.4 JS-Optimierungen<\/h2>\n\n\n\n<p>F\u00fcr die Version v07 hat eine Untersuchung ergeben, dass ein sehr gro\u00dfer Teil des JavaScripts von Bootstrap-Icons eingenommen werden (s. Abbildung 1).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"554\" data-attachment-id=\"26086\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2024\/02\/04\/optimierung-einer-vuejs-webseite-ladezeitenreduktion\/v06_treemap\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v06_treemap.png\" data-orig-size=\"1215,657\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"v06_treemap\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v06_treemap-1024x554.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v06_treemap-1024x554.png\" alt=\"\" class=\"wp-image-26086\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v06_treemap-1024x554.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v06_treemap-300x162.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v06_treemap-768x415.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v06_treemap.png 1215w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Abbildung 1: Strukturkarte des JavaScripts in Version v06: 40% des JavaScripts werden durch Bootstrap-Icons eingenommen.<\/figcaption><\/figure>\n\n\n\n<p>Aus diesem Grund wurde in v07 lediglich eine \u00c4nderung vorgenommen: Da sehr viele Bootstrap-Icons importiert werden, von denen aber nur wenige verwendet werden, werden jetzt lediglich die Icons importiert, die auf der Seite auch verwendet werden. Codebeispiel 6 zeigt, wie die Icons importiert und als Komponenten registriert werden.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\" data-line=\"\">\/\/ vorher : alle Icons werden importiert und eingebunden\n\/\/ import { BootstrapVueIcons } from \u2019bootstrap-vue \u2019\n\/\/ Vue.use( BootstrapVueIcons )\n\nimport { BootstrapVue , BIconBoxArrowUpRight , BIconPerson , ... } from \u2019bootstrap\n-vue\u2019\nVue.component(&quot;b-icon-box-arrow-up-right&quot;, BIconBoxArrowUpRight)\nVue.component(&quot;b-icon-person&quot;, BIconPerson)\n...<\/code><\/pre>\n\n\n\n<p>Diese Art von manuellem Treeshaking verringert die Gr\u00f6\u00dfe des JavaScripts von Bootstrap auf die wirklich notwendigen Elemente.<\/p>\n\n\n\n<p>Au\u00dferdem haben erste Untersuchungen gezeigt, dass viel JavaScript geladen wird, das nicht verwendet wird. Deshalb wird in der Version v08 mit dem Optimieren der JS-Chunks experimentiert. Webpack bietet daf\u00fcr bereits eine M\u00f6glichkeit an, die maximale Gr\u00f6\u00dfe von JavaScript-Dateien festzulegen. Mithilfe dessen wird ein Maximum f\u00fcr die Dateigr\u00f6\u00dfe festgelegt und die Anzahl der generierten Chunks dynamisch festgelegt. Das Codebeispiel 7 zeigt die Konfiguration f\u00fcr diese Optimierung.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\" data-line=\"\">configureWebpack: ( config ) =&gt; {\n  config.optimization = {\n    runtimeChunk : \u2019single \u2019,\n    splitChunks : { chunks : \u2019all \u2019, maxInitialRequests : Infinity , maxSize : 500000}\n  }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-timing\">3.5 Timing<\/h2>\n\n\n\n<p>Diese letzte Rubrik an Optimierungsschritten umfasst das Experimentieren mit dem Timing der Darstellung von Elementen. Die Version v09 entfernt alle Animationen von der Startseite, die mittels des NPM-Pakets \u201dAnimate On Scroll\u201c (AOS) Elemente erst erscheinen l\u00e4sst, wenn sie in der Ansicht des Nutzers auftauchen. Die Versionen v10 und v11 f\u00fcgt zu img-Tags das Attribut loading=&#8221;lazy&#8221; hinzu. Lazy-Loading bedeutet, dass die Bilder erst geladen werden, wenn der Client f\u00fcr n\u00f6tig erachtet, beispielsweise wenn das Bild kurz au\u00dferhalb der Ansicht des Nutzers ist und vielleicht gleich in die Ansicht gescrollt wird.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"aioseo-experimente-und-analyse\">4. Experimente und Analyse<\/h1>\n\n\n\n<p>Um die Versionen zu testen, wurden alle Versionen als eigenen Dockerimage erstellt und auf demselben Host als getrennte Dockercontainer deployt. Anschlie\u00dfend wurde der NGINX-Proxy-Manager so konfiguriert, dass die Container unter der jeweiligen Versionsnummer online erreichbar sind. Somit ist beispielweise die Version v00 unter v00.leto.andreasnicklaus.de erreichbar.<\/p>\n\n\n\n<p>So konnten alle Versionen mit WebPageTest getestet und miteinander verglichen werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-testergebnisse\">4.1 Testergebnisse<\/h2>\n\n\n\n<p>Tabelle 2 zeigt die rohen Ergebnisse aus den mit WebPageTest ausgef\u00fchrten Tests. Dabei ist auff\u00e4llig, dass das Prerendering der Version v01 direkt Verbesserungen allen Messwerten au\u00dfer der PageWeight und der TTI bringt. Ebenso positiv auff\u00e4llig ist das Einf\u00fchren von Bildern im AVIFFormat und den Responsive Image Sizes in der Version v05, die insbesondere Verbesserungen im SI, der Page Weight (s. Abbildung 2a) und der TTI (s. Abbildung 2d) gebracht haben.<\/p>\n\n\n\n<p>Hinweis: Da die Tests mit allen Tools starken Schwankungen bis zu 20% unterliegen, sind kleine Verschlechterungen oder Verbesserungen in einzelnen Versionen nicht zu beachten, wenn die Ver\u00e4nderung nicht in den Folgeversionen Bestand beh\u00e4lt.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/PageWeight.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"600\" data-attachment-id=\"26088\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2024\/02\/04\/optimierung-einer-vuejs-webseite-ladezeitenreduktion\/pageweight\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/PageWeight.png\" data-orig-size=\"1000,600\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"PageWeight\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/PageWeight.png\" data-id=\"26088\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/PageWeight.png\" alt=\"\" class=\"wp-image-26088\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/PageWeight.png 1000w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/PageWeight-300x180.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/PageWeight-768x461.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><figcaption class=\"wp-element-caption\">2a: Page Weight der Startseite pro Version in kB<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/LCP.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"600\" data-attachment-id=\"26087\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2024\/02\/04\/optimierung-einer-vuejs-webseite-ladezeitenreduktion\/lcp\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/LCP.png\" data-orig-size=\"1000,600\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"LCP\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/LCP.png\" data-id=\"26087\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/LCP.png\" alt=\"\" class=\"wp-image-26087\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/LCP.png 1000w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/LCP-300x180.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/LCP-768x461.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><figcaption class=\"wp-element-caption\">2b: LCP der Startseite in Sekunden<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/LH-Score.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"600\" data-attachment-id=\"26089\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2024\/02\/04\/optimierung-einer-vuejs-webseite-ladezeitenreduktion\/lh-score\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/LH-Score.png\" data-orig-size=\"1000,600\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"LH-Score\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/LH-Score.png\" data-id=\"26089\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/LH-Score.png\" alt=\"\" class=\"wp-image-26089\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/LH-Score.png 1000w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/LH-Score-300x180.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/LH-Score-768x461.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><figcaption class=\"wp-element-caption\">2c: Lighthouse Performance-Score der Startseite<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/TTI.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"600\" data-attachment-id=\"26090\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2024\/02\/04\/optimierung-einer-vuejs-webseite-ladezeitenreduktion\/tti\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/TTI.png\" data-orig-size=\"1000,600\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"TTI\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/TTI.png\" data-id=\"26090\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/TTI.png\" alt=\"\" class=\"wp-image-26090\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/TTI.png 1000w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/TTI-300x180.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/TTI-768x461.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><figcaption class=\"wp-element-caption\">2d: TTI der Startseite in Sekunden<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-interpretation\">4.2 Interpretation<\/h2>\n\n\n\n<p>Die Abbildung 3 vergleicht die Gr\u00f6\u00dfe der Seite nach Dateityp vor dem Projekt (v00) und nach dem Projekt (v11). Die Seitengr\u00f6\u00dfe wurde von 2789 kB auf 627 kB (-77,5%) reduziert (vgl. Abbildung 2a). 2063 kB der eingesparten 2162 kB wurden alleine durch die Verkleinerung der Bilder eingespart (von ca. 2100 kB auf 35,8 kB f\u00fcr Bilder). Daraus l\u00e4sst sich zumindest f\u00fcr dieses Projekt darauf schlie\u00dfen, dass das Laden der Bilder f\u00fcr die Seitengr\u00f6\u00dfe das gr\u00f6\u00dfte Potenzial f\u00fcr Verbesserungen hatte.<\/p>\n\n\n\n<p>Ebenso k\u00f6nnen wir beobachten, dass das Prerendering der statischen Seiten das HTML zwar um ca. 17 kB vergr\u00f6\u00dfert, aber den FCP, die Ladezeiten f\u00fcr verlinkte Ressourcen (LCP und SI) und dadurch den Lighthouse Performance-Score beachtlich verbessert. Diese zwei Optimierungsschritte haben sich als die besten Optimierungsschritte herausgestellt.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v00_content.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"600\" data-attachment-id=\"26091\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2024\/02\/04\/optimierung-einer-vuejs-webseite-ladezeitenreduktion\/v00_content\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v00_content.png\" data-orig-size=\"1000,600\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"v00_content\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v00_content.png\" data-id=\"26091\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v00_content.png\" alt=\"\" class=\"wp-image-26091\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v00_content.png 1000w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v00_content-300x180.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v00_content-768x461.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><figcaption class=\"wp-element-caption\">3a: Vergleich der Dateitypen bzgl. der unkomprimierten Bytegr\u00f6\u00dfe der Version v00 (insg.: 2789 kB)<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v11_content.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"600\" data-attachment-id=\"26092\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2024\/02\/04\/optimierung-einer-vuejs-webseite-ladezeitenreduktion\/v11_content\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v11_content.png\" data-orig-size=\"1000,600\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"v11_content\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v11_content.png\" data-id=\"26092\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v11_content.png\" alt=\"\" class=\"wp-image-26092\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v11_content.png 1000w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v11_content-300x180.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/v11_content-768x461.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><figcaption class=\"wp-element-caption\">3b: Vergleich der Dateitypen bzgl. der unkomprimierten Bytegr\u00f6\u00dfe der Version v11 (insg.: 627 kB)<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"aioseo-fazit\">5. Fazit<\/h1>\n\n\n\n<p>Das Projekt hat gezeigt, dass sich die Optimierung einer VueJS-Webseite von der Optimierung einer statischen Webseite nur in einem Punkt unterscheidet: Die Verbesserung des Nutzererlebnisses, das sich durch Single-Page-Applications ergibt, schadet der Performance beim ersten Laden der Seite durch Chained Requests. Dieser Unterschied l\u00e4sst sich durch Prerendering weitestgehend ausbessern und erlaubt es Entwicklern, weitere Schritte oder Kontrollen des Build-Prozesses zu automatisieren.<\/p>\n\n\n\n<p>Diese automatisierten Schritte unterscheiden sich von der Optimierung einer statischen HTML-Seite nicht. In diesem Beispielfall haben das Entfernen von ungebrauchtem JavaScript und die Bildoptimierung neben dem Prerendering die besten Ergebnisse erzielt.<\/p>\n\n\n\n<p>Um dieses Projekt weiterzuf\u00fchren, lassen sich mehrere Punkte abzeichnen, die sich sowohl aus dem Lighthouse Report als auch aus Image Lintern ergeben. Das Treeshaking, das sich durch das manuelle Entfernen von ungenutztem JavaScript als erfolgreich herausgestellt hat, k\u00f6nnte man noch weiter optimieren und auf das Entfernen von ungenutztem CSS, sog. \u201dCSSPruning\u201c, und das Trennen von nach dem Laden ausgef\u00fchrten JavaScript ausweiten. Ebenso m\u00fcsste das Potenzial von Preloading der LCP-Ressource genauer untersucht werden sowie der Performance-Unterschied von unterschiedlichen Hostingarchitekturen und -konfigurationen. Als letzter Punkt w\u00e4re ein interessantes Projekt der Umgang mit Bildern, die im Original in einer kleinen Gr\u00f6\u00dfe vorliegen, aber auf gro\u00dfen Bildschirmen eine hohe Aufl\u00f6sung haben sollen.<\/p>\n\n\n\n<p>Insgesamt ist das Projekt ein Erfolg, da die Rahmenbedingungen bzgl. Speicherplatz und Rechenleistung eingehalten wurden, die Performance verbessert wurde und die Ladezeiten aufgrund geringerer Page Weight deutlich verringert wurden.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"aioseo-anhang\">A. Anhang<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-tabellen\">A.1 Tabellen<\/h2>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td><strong>Versionsbezeichnung<\/strong><\/td><td><strong>Anderungsbeschreibung<\/strong><\/td><\/tr><tr><td>v00<\/td><td>\u2013 (Ursprungsversion vor Projektbeginn)<\/td><\/tr><tr><td>v01<\/td><td>Prerendering f\u00fcr statische Seiten<\/td><\/tr><tr><td>v02<\/td><td>Render-Blocking Stylesheets entfernt<\/td><\/tr><tr><td>v03<\/td><td>Updated Docker Build Workflow<\/td><\/tr><tr><td>v04<\/td><td>Verbessertes Access Management<\/td><\/tr><tr><td>v05<\/td><td>AVIF-Bilder, Chained Request f\u00fcr Fonts entfernt<\/td><\/tr><tr><td>v06<\/td><td>Lineare Verteilung der Bildgr\u00f6\u00dfen<\/td><\/tr><tr><td>v07<\/td><td>Import nur der genutzten Icons anstelle von allen<\/td><\/tr><tr><td>v08<\/td><td>JS-Chunks gesplittet<\/td><\/tr><tr><td>v09<\/td><td>Animationen entfernt<\/td><\/tr><tr><td>v10<\/td><td>Alle Bilder werden lazy-loaded<\/td><\/tr><tr><td>v11<\/td><td>Zuerst sichtbare SVGs werden lazy-loaded<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Tabelle 1: Versionsnummerierungen und die \u00c4nderungen, die in der Version neu hinzugekommen sind. Hinweis: Versionen v03 und v04 haben inhaltliche \u00c4nderungen an der Webseite, beinhalten aber keinen Performanceoptimierungsschritt.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td><strong>Version<\/strong><\/td><td><strong>Page Weight (kB)<\/strong><\/td><td><strong>WPT LCP (ms)<\/strong><\/td><td><strong>WPT SI (ms)<\/strong><\/td><td><strong>LH Score<\/strong><\/td><td><strong>FCP (ms)<\/strong><\/td><td><strong>LCP (ms)<\/strong><\/td><td><strong>SI (ms)<\/strong><\/td><td><strong>TTI (ms)<\/strong><\/td><td><strong>CLS<\/strong><\/td><\/tr><tr><td>v00<\/td><td>2789 kB<\/td><td>4736 ms<\/td><td>5970 ms<\/td><td>33<\/td><td>4600 ms<\/td><td>5200<\/td><td>7500 ms<\/td><td>4600 ms<\/td><td>0,751<\/td><\/tr><tr><td>v01<\/td><td>2737 kB<\/td><td>2964 ms<\/td><td>4368 ms<\/td><td>57<\/td><td>3300 ms<\/td><td>3300<\/td><td>5100 ms<\/td><td>14500 ms<\/td><td>0,0<\/td><\/tr><tr><td>v02<\/td><td>2780 kB<\/td><td>1877 ms<\/td><td>2936 ms<\/td><td>45<\/td><td>900 ms<\/td><td>2600<\/td><td>5500 ms<\/td><td>10400 ms<\/td><td>0,936<\/td><\/tr><tr><td>v03<\/td><td>2737 kB<\/td><td>1888 ms<\/td><td>6297 ms<\/td><td>40<\/td><td>900 ms<\/td><td>2300<\/td><td>5600 ms<\/td><td>14700 ms<\/td><td>0,936<\/td><\/tr><tr><td>v04<\/td><td>2738 kB<\/td><td>1804 ms<\/td><td>6019 ms<\/td><td>46<\/td><td>900 ms<\/td><td>2400<\/td><td>4100 ms<\/td><td>13300 ms<\/td><td>0,936<\/td><\/tr><tr><td>v05<\/td><td>1140 kB<\/td><td>1891 ms<\/td><td>2813 ms<\/td><td>51<\/td><td>900 ms<\/td><td>2500<\/td><td>2500 ms<\/td><td>6100 ms<\/td><td>0,78<\/td><\/tr><tr><td>v06<\/td><td>778 kB<\/td><td>1898 ms<\/td><td>2957 ms<\/td><td>49<\/td><td>900 ms<\/td><td>2500<\/td><td>3200 ms<\/td><td>4900 ms<\/td><td>0,781<\/td><\/tr><tr><td>v07<\/td><td>612 kB<\/td><td>1896 ms<\/td><td>2930 ms<\/td><td>52<\/td><td>900 ms<\/td><td>2500<\/td><td>3200 ms<\/td><td>3900 ms<\/td><td>0,781<\/td><\/tr><tr><td>v08<\/td><td>628 kB<\/td><td>2029 ms<\/td><td>2306 ms<\/td><td>54<\/td><td>900 ms<\/td><td>2500<\/td><td>2700 ms<\/td><td>4100 ms<\/td><td>0,78<\/td><\/tr><tr><td>v09<\/td><td>627 kB<\/td><td>2189 ms<\/td><td>2068 ms<\/td><td>54<\/td><td>900 ms<\/td><td>2500<\/td><td>2600 ms<\/td><td>4100 ms<\/td><td>0,78<\/td><\/tr><tr><td>v10<\/td><td>649 kB<\/td><td>2342 ms<\/td><td>2165 ms<\/td><td>53<\/td><td>900 ms<\/td><td>2600<\/td><td>2500 ms<\/td><td>4000 ms<\/td><td>0,78<\/td><\/tr><tr><td>v11<\/td><td>627 kB<\/td><td>2218 ms<\/td><td>2122 ms<\/td><td>54<\/td><td>900 ms<\/td><td>2600<\/td><td>2500 ms<\/td><td>4000 ms<\/td><td>0,78<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Tabelle 2: Rohergebnisse der WebPageTest-Ergebnisse pro Version. Hinweis: Die rohen Werte unterliegen bei mehrfacherer Testausf\u00fchrung starken Schwankungen (bis zu 20% in beide Richtungen).<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-was-sonst-keinen-platz-gefunden-hat-bilddateigrossen-und-bildformate\">A.2 Was sonst keinen Platz gefunden hat: Bilddateigr\u00f6\u00dfen und Bildformate<\/h2>\n\n\n\n<p>Neben den in dieser Arbeit beschriebenen Optimierungsergebnissen wurde eine weitere Beobachtung gemacht, die sonst keinen Platz gefunden h\u00e4tte. Bei der Untersuchung von Dateigr\u00f6\u00dfen im Vergleich zur Pixelgr\u00f6\u00dfe ist aufgefallen, dass sich WebP und AVIF unterschiedlich verhalten, wenn die Pixelgr\u00f6\u00dfe ver\u00e4ndert wird. Diese Grafik veranschaulicht, wie sich die Dateigr\u00f6\u00dfe eines Beispielbildes in den Formaten PNG, WebP und AVIF verh\u00e4lt, wenn die Pixelgr\u00f6\u00dfe mit dem NPM-Paket \u201dsharp\u201c gem\u00e4\u00df der in Kapitel 3.3 beschriebenen Gr\u00f6\u00dfen verkleinert wird. Diese Untersuchung findet in der Arbeit keine Beachtung und ist deshalb hier getrennt von der Arbeit.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/quickchart.io\/chart?w=400&amp;h=400&amp;c=%7B%0A%20%20type%3A%20%27line%27%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20labels%3A%20%5B%0A%20%20%20%20%20%20%27Original%20(1900%20px)%27%2C%0A%20%20%20%20%20%20%27%401%20(1600%20px)%27%2C%0A%20%20%20%20%20%20%27%402%20(1280%20px)%27%2C%0A%20%20%20%20%20%20%27%403%20(960%20px)%27%2C%0A%20%20%20%20%20%20%27%404%20(640%20px)%27%2C%0A%20%20%20%20%20%20%27%405%20(320%20px)%27%2C%0A%20%20%20%20%5D%2C%0A%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20label%3A%20%27PNG%27%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B689%2C2747%2C1743%2C972%2C443%2C130%5D%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20%27%23c4a7e755%27%2C%0A%20%20%20%20%20%20%20%20borderColor%3A%20%27%23c4a7e7%27%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20label%3A%20%27WebP%27%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B126%2C71%2C56%2C41%2C23%2C10%5D%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20%27%230400ff55%27%2C%0A%20%20%20%20%20%20%20%20borderColor%3A%20%27%230400ff%27%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20label%3A%20%27AVIF%27%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B374%2C36%2C28%2C20%2C13%2C6%5D%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20%27%23ffaa0055%27%2C%0A%20%20%20%20%20%20%20%20borderColor%3A%20%27%23ffaa00%27%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20scales%3A%20%7B%0A%20%20%20%20%20%20xAxes%3A%20%5B%7B%20scaleLabel%3A%20%7B%20display%3A%20true%2C%20labelString%3A%20%27Bildbreite%27%20%7D%20%7D%5D%2C%0A%20%20%20%20%20%20yAxes%3A%20%5B%7B%20scaleLabel%3A%20%7B%20display%3A%20true%2C%20labelString%3A%20%27kB%27%20%7D%20%7D%5D%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%7D\" alt=\"\" width=\"428\" height=\"428\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Performance einer Webseite ist wichtig f\u00fcr Nutzer und Suchmaschinen, aber im Entwicklungsprozess nicht immer ersichtlich. Diese Hausarbeit untersucht M\u00f6glichkeiten zur automatischen Optimierung der Webperformance w\u00e4hrend der Entwicklung mit VueJS.<\/p>\n","protected":false},"author":1112,"featured_media":26088,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,262,662],"tags":[84,3,391,432],"ppma_author":[674],"class_list":["post-26085","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein","category-rich-media-systems","category-web-performance","tag-aws","tag-docker","tag-vuejs","tag-web-performance"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/PageWeight.png","jetpack-related-posts":[{"id":23775,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/01\/29\/business-case-web-performance-optimization-wann-lohnt-es-sich\/","url_meta":{"origin":26085,"position":0},"title":"Business Case \u201eWeb Performance Optimization\u201c. Wann lohnt es sich?","author":"Anke M\u00fcller","date":"29. January 2023","format":false,"excerpt":"Onlineshops wie Amazon sind heutzutage nicht mehr wegzudenken. Doch nicht jeder Onlineshop wird automatisch erfolgreich, da die Webseiten oft aufgrund hoher Datenmengen, verursacht durch beispielsweise Bilder, eine hohe Ladezeit besitzen. Menschen werden zunehmend ungeduldiger und warten nicht gerne auf Suchergebnisse. Nahezu jede Person kennt heutzutage das Gef\u00fchl, eine Webseite zu\u2026","rel":"","context":"In &quot;Interactive Media&quot;","block_context":{"text":"Interactive Media","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/interactive-media\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/01\/Bild3.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/01\/Bild3.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/01\/Bild3.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":26748,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2025\/02\/06\/messmethoden-der-wahrgenommenen-ladezeit-und-geschaftliche-relevanz-der-webperformance\/","url_meta":{"origin":26085,"position":1},"title":"Messmethoden der wahrgenommenen Ladezeit und gesch\u00e4ftliche Relevanz der Webperformance","author":"Thea Roller","date":"6. February 2025","format":false,"excerpt":"Einf\u00fchrung In der digitalen Welt von heute spielt die Ladegeschwindigkeit einer Webseite eine entscheidende Rolle. Studien zeigen, dass etwa die H\u00e4lfte aller Nutzer eine Webseite verl\u00e4sst, wenn diese l\u00e4nger als sechs Sekunden zum Laden ben\u00f6tigt. Diese geringe Toleranz verdeutlicht, wie stark sich das Verhalten und die Erwartungen der Nutzer in\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/02\/image-3.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/02\/image-3.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/02\/image-3.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/02\/image-3.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":21872,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/01\/17\/drei-sekunden-sind-zu-lang-auswirkung-der-ladezeit-von-webseiten-auf-die-user-experience\/","url_meta":{"origin":26085,"position":2},"title":"Drei Sekunden sind zu lang &#8211; Auswirkung der Ladezeit von Webseiten auf die User Experience","author":"Sarah Schwab","date":"17. January 2022","format":false,"excerpt":"Warum ist es so wichtig, die optimale Ladezeit anzustreben? Auf jemanden oder auf etwas zu waren ist uns Menschen nicht fremd. Im Schnitt verbringt jeder Mensch in seinem Leben rund ein bis zwei Jahre mit Warten. Dies kann an der Bushaltestelle, Suppermarktkasse, dem Abwarten auf die Ankunft einer Zustellung, oder\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/08\/mFjlE1bSwg2Fk8eaWW2eQy-2Qk9CiihxoD5ul4gle6YmjmIPyOjPk2vHwDOtdVDgF13QTDdhmdZgkUAG8oqqOo1u8IAxSjrzVTtMYxVqYUiQ_3-W0lwTrSUt3_cL8jlcK_Cn0hDA.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/08\/mFjlE1bSwg2Fk8eaWW2eQy-2Qk9CiihxoD5ul4gle6YmjmIPyOjPk2vHwDOtdVDgF13QTDdhmdZgkUAG8oqqOo1u8IAxSjrzVTtMYxVqYUiQ_3-W0lwTrSUt3_cL8jlcK_Cn0hDA.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/08\/mFjlE1bSwg2Fk8eaWW2eQy-2Qk9CiihxoD5ul4gle6YmjmIPyOjPk2vHwDOtdVDgF13QTDdhmdZgkUAG8oqqOo1u8IAxSjrzVTtMYxVqYUiQ_3-W0lwTrSUt3_cL8jlcK_Cn0hDA.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/08\/mFjlE1bSwg2Fk8eaWW2eQy-2Qk9CiihxoD5ul4gle6YmjmIPyOjPk2vHwDOtdVDgF13QTDdhmdZgkUAG8oqqOo1u8IAxSjrzVTtMYxVqYUiQ_3-W0lwTrSUt3_cL8jlcK_Cn0hDA.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":21900,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/01\/25\/react-vue-web-performance-evaluation\/","url_meta":{"origin":26085,"position":3},"title":"The Surprising Truth About Vue and React\u2019s Web Speed with JSWFB","author":"Danial Eshete","date":"25. January 2022","format":false,"excerpt":"During this period of time where, the digital world, where nearly 5 billion people are using the internet, comes the need to build a web application that is intuitive, interactive and with higher speed performance. That\u2019s where the JavaScript Libraries and Frameworks come into the picture. In the current web\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"ReactJS vs VueJS","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/01\/ReactJS-vs-VueJS.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/01\/ReactJS-vs-VueJS.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/01\/ReactJS-vs-VueJS.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/01\/ReactJS-vs-VueJS.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":23834,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/02\/01\/designing-for-performance\/","url_meta":{"origin":26085,"position":4},"title":"Designing for Performance","author":"Nadine Schuler","date":"1. February 2023","format":false,"excerpt":"Verbesserung der Performance\u00a0durch Optimierung der User Experience F\u00fcr ein besseres Lesegef\u00fchl wird in diesem Artikel das generische Maskulinum verwendet. Dies schlie\u00dft nat\u00fcrlich alle Geschlechter ein. 1. Einleitung \u201eIf you are making decisions about the look and feel of a website, you are making decisions that directly impact the performance of\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":26698,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2025\/01\/30\/cloud-basiertes-performance-monitoring-fur-rich-media-systeme\/","url_meta":{"origin":26085,"position":5},"title":"Cloudbasiertes Performance-Monitoring f\u00fcr Rich-Media-Systeme","author":"Simon Wimmer","date":"30. January 2025","format":false,"excerpt":"Problemstellung In einer zunehmend digitalisierten Welt haben sich Rich-Media-Systeme zu einem integralen Bestandteil unseres Alltags entwickelt. Diese Systeme umfassen komplexe Informations- und Kommunikationsumgebungen, die verschiedene Medienformen und interaktive Komponenten vereinen, um eine hohe Informationstiefe und Interaktionsdichte zu erreichen. Beispiele hierf\u00fcr sind Video-Streaming-Dienste, Augmented Reality (AR) Anwendungen und interaktive Webinhalte. Die\u2026","rel":"","context":"In &quot;Rich Media Systems&quot;","block_context":{"text":"Rich Media Systems","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/interactive-media\/rich-media-systems\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/01\/dashboard-150x150.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/01\/dashboard-150x150.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/01\/dashboard-150x150.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/01\/dashboard-150x150.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/01\/dashboard-150x150.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/01\/dashboard-150x150.png?resize=1400%2C800&ssl=1 4x"},"classes":[]}],"jetpack_sharing_enabled":true,"authors":[{"term_id":674,"user_id":1112,"is_guest":0,"slug":"andreas_nicklaus","display_name":"Andreas Nicklaus","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/fdbb5b41a2fe02c9bbc4793f359b52d0f09a9be30b670092e15f4bd601d822e8?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/26085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/users\/1112"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/comments?post=26085"}],"version-history":[{"count":5,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/26085\/revisions"}],"predecessor-version":[{"id":26262,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/26085\/revisions\/26262"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/media\/26088"}],"wp:attachment":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/media?parent=26085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/categories?post=26085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/tags?post=26085"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/ppma_author?post=26085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}