{"id":23769,"date":"2023-02-05T21:49:12","date_gmt":"2023-02-05T20:49:12","guid":{"rendered":"https:\/\/blog.mi.hdm-stuttgart.de\/?p=23769"},"modified":"2023-06-18T17:50:51","modified_gmt":"2023-06-18T15:50:51","slug":"svgs-und-die-web-performance-best-practices","status":"publish","type":"post","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/02\/05\/svgs-und-die-web-performance-best-practices\/","title":{"rendered":"SVGs und die Web-Performance: Best Practices"},"content":{"rendered":"\n<p>Ob UI-Designer, Frontend-Entwickler oder Backend-Spezialist, in allen Bereichen der modernen Web-Entwicklung kommt man in irgendeiner Art und Weise mit Logos und Icons in Ber\u00fchrung. Um eine gute User-Experience zu gew\u00e4hrleisten, sollten diese f\u00fcr den Betrachter stets gestochen scharf angezeigt werden, egal ob kleines Handy oder gro\u00dfer Laptop-Bildschirm. Moderne Websites m\u00fcssen responsiv sein und damit auch jegliche Icons und Logos auf der Seite. Die seit 22 Jahren unangefochtene L\u00f6sung lautet hierf\u00fcr: SVGs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Die Welt der SVGs: Vorteile \u00fcber Vorteile<\/h2>\n\n\n\n<p>Doch was sind SVGs \u00fcberhaupt? SVG steht f\u00fcr scalable vector graphics und ist ein Dateiformat, welches bereits im Jahre 2001 vom World Wide Web Consortium ver\u00f6ffentlicht wurde.<\/p>\n\n\n\n<p>Vektorgrafiken wie SVGs unterscheiden sich von Rastergrafiken in der Hinsicht, dass diese nicht Pixel f\u00fcr Pixel an Bildinformation wie auf einem Schachbrett abspeichern, sondern mathematische Formen und Funktionen nutzen, um das Bild zu berechnen. Hierf\u00fcr k\u00f6nnen beispielweise Rechtecke, Kreise oder Pfade (in Form von Linien und Kurven) eingesetzt werden.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"945\" height=\"412\" data-attachment-id=\"23872\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/02\/05\/svgs-und-die-web-performance-best-practices\/image-2-10\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-2.png\" data-orig-size=\"945,412\" 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=\"image-2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-2.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-2.png\" alt=\"\" class=\"wp-image-23872\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-2.png 945w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-2-300x131.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-2-768x335.png 768w\" sizes=\"auto, (max-width: 945px) 100vw, 945px\" \/><\/a><figcaption class=\"wp-element-caption\">Vektorgrafiken, werden \u00fcber mathematische Berechnung definiert<\/figcaption><\/figure>\n\n\n\n<p>Dieser Ansatz bietet ma\u00dfgebliche Vorteile gegen\u00fcber rasterbasierten Grafiken&nbsp;:<\/p>\n\n\n\n<ul class=\"has-black-color has-text-color wp-block-list\">\n<li>Animierbarkeit (siehe <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/SVG_animation_with_SMIL\" target=\"_blank\" rel=\"noopener\" title=\"\">SMIL<\/a>)<\/li>\n\n\n\n<li>Manipulierbarkeit (DOM-Zugriff auf Elemente)<\/li>\n\n\n\n<li>Unkomplizierte Bearbeitung (XML-Syntax)<\/li>\n\n\n\n<li>Bessere SEO<\/li>\n\n\n\n<li>Skalierbarkeit ohne Qualit\u00e4tsverlust<\/li>\n\n\n\n<li>Sehr kleine Dateigr\u00f6\u00dfen<\/li>\n<\/ul>\n\n\n\n<p>Der letztgenannte Punkt soll heute ma\u00dfgeblich in den Fokus unserer Betrachtung r\u00fccken. Kleine Dateigr\u00f6\u00dfen kommen leider nicht von alleine, sind jedoch ein wichtiger Faktor f\u00fcr die Performance der Website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Warum wir Web Performance lieben<\/h2>\n\n\n\n<p>Viele Webprojekte begehen in ihren Entwicklungsprozess einen entscheiden Fehler: Sie lassen die Performance der Website als Qualit\u00e4tskriterium v\u00f6llig au\u00dfer Acht. Ein Fehler, der auf lange Sicht viel Geld kostet und das Kundenerlebnis nachhaltig sch\u00e4digt. Keiner wartet gerne auf Bus oder Bahn. Warum sollte das beim Laden und Aktualisieren von Websites anders sein? Die Performance der Website wirkt sich stark auf das empfundene Nutzungserlebnis aus. Langsame Ladezeiten ver\u00e4rgern den Besuchern und f\u00fchren dadurch zu stark steigenden Abbruchsquoten. Umgekehrt beg\u00fcnstigen schnelle Websites die Kundenzufriedenheit, welche in Folge l\u00e4nger und \u00f6fter auf der Website verweilen. Dies steigert wiederum die Werbeeinahmen und erh\u00f6ht die Wahrscheinlichkeit, dass angebotene Produkte auch tats\u00e4chlich gekauft werden.<\/p>\n\n\n\t<div class=\"wp-block-jetpack-gif aligncenter\">\n\t\t<figure>\n\t\t\t\t\t\t\t<div class=\"wp-block-jetpack-gif-wrapper\" style=\"padding-top:41%\">\n\t\t\t\t\t<iframe src=\"https:\/\/giphy.com\/embed\/gTURHJs4e2Ies\" title=\"throw money\"><\/iframe>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<figcaption class=\"wp-block-jetpack-gif-caption gallery-caption\">Bessere Performance -&gt; Bessere UX -&gt; H\u00f6here Einnahmen<\/figcaption>\n\t\t\t\t\t<\/figure>\n\t<\/div>\n\t\n\n\n<h2 class=\"wp-block-heading\">Best Practices<\/h2>\n\n\n\n<p>Wer eine performante Website mit schnellen Ladezeiten und fl\u00fcssiger Bildwiederholrate m\u00f6chte, hat unz\u00e4hlige Dinge zu beachten. Dieser Artikel m\u00f6chte speziell einen Fokus auf die Optimierung von Icons und Logos werfen, ohne die ein Internetauftritt heute undenkbar w\u00e4re. Nachfolgend m\u00f6chte ich euch einige Tipps mit auf dem Weg geben, wie ihr mit SVGs das Beste an Web-Performance herausholen k\u00f6nnt. Daf\u00fcr m\u00fcssen jedoch in allen Entwicklungsschritten und Bereichen Ma\u00dfnahmen ergriffen werden, die ich kurz anschneiden m\u00f6chte:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1 &#8211; Erstellen<\/h3>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\t<div class=\"wp-block-jetpack-gif alignright\">\n\t\t<figure>\n\t\t\t\t\t\t\t<div class=\"wp-block-jetpack-gif-wrapper\" style=\"padding-top:73%\">\n\t\t\t\t\t<iframe src=\"https:\/\/giphy.com\/embed\/26u4lOMA8JKSnL9Uk\" title=\"work done\"><\/iframe>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/figure>\n\t<\/div>\n\t<\/div>\n\n\n\n<p>Zun\u00e4chst einmal ben\u00f6tigen wir alle Assets in Form von Vektorgrafiken. Falls ihr euch in der Gunst befindet, auf einen vorhanden Designer zur\u00fcckgreifen &nbsp;zu k\u00f6nnen: Klasse! Eure Arbeit ist bereits so gut wie erledigt. Bittet ihn oder sie einfach euch die vorhandenen Grafiken als optimierte SVGs zukommen zulassen!<\/p>\n\n\n\n<p>Eine weitere M\u00f6glichkeit f\u00fcr Faule ist das Verwenden von Vektorgrafiken aus dem Internet. Hier empfehle ich vor allem diese zwei Websites: <a href=\"http:\/\/SVG-Repo\" target=\"_blank\" rel=\"noopener\" title=\"\">SVG-Repo<\/a> und \u00a0<a href=\"https:\/\/fonts.google.com\/icons\" target=\"_blank\" rel=\"noopener\" title=\"\">Google Font Icons<\/a>. Beide bieten v\u00f6llig kostenlos und ohne Registrierung eine Riesenauswahl an Icons und Logos an. Zudem sind diese lizenzfrei und bereits bestm\u00f6glich optimiert.<\/p>\n\n\n\n<p>F\u00fcr alle anderen gilt: selbst ist der Mann oder die Frau. Wer das Meiste aus seinen Grafiken rausholen m\u00f6chte, erstellt sie immer noch selbst. Nachfolgend stelle ich euch daf\u00fcr drei Tools vor, die wirklich jeden Geschmack treffen sollten:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><u>Das Leichtgewicht:<\/u><\/strong> <a href=\"https:\/\/boxy-svg.com\/app\" target=\"_blank\" rel=\"noopener\" title=\"\"><strong>Boxy SVG<\/strong><\/a><\/h4>\n\n\n\n<p>Das Online-Tool Boxy SVG erm\u00f6glicht es schnell, einfach und intuitiv im Browser simple Vektorgrafien selbst zu erstellen. Vorkenntnisse werden hierf\u00fcr keine ben\u00f6tigt. Nachteil: Zum Speichern der Grafiken wird einen Account ben\u00f6tigt. Zudem werden keine Tools zur Optimierung angeboten.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><u><strong>Der Profi:<\/strong><\/u> <a href=\"https:\/\/www.adobe.com\/de\/products\/illustrator.html\" target=\"_blank\" rel=\"noopener\" title=\"\"><strong>Adobe Illustrator<\/strong><\/a><\/h4>\n\n\n\n<p>Das Powertool Adobe-Illustrator l\u00e4sst beim Erstellen von Grafiken keinerlei W\u00fcnsche offen. Zus\u00e4tzlich existieren einige Tools und Funktionen, welche bei der Optimierung der Grafiken unterst\u00fctzen. Der Haken daran: das Abo-Modell f\u00fcr Programme von Adobe ist nicht gerade g\u00fcnstig. Zus\u00e4tzlich bedarf es zun\u00e4chst einmal einiger Tutorials, um sich mit den unz\u00e4hligen Funktionen der Software zurechtzufinden.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><u>Der Allrounder:<\/u><\/strong> <a href=\"https:\/\/inkscape.org\/de\/\" target=\"_blank\" rel=\"noopener\" title=\"\"><strong>Inkscape<\/strong><\/a><\/h4>\n\n\n\n<p>Das Open-Source-Programm Inkscape ist der Allesk\u00f6nner schlechthin im Bereich Vektorgrafiken. Kein Wunder,denn genau f\u00fcr diesen Zweck wurde es schlie\u00dflich entwickelt. Dank Open-Source ist die Nutzung zudem v\u00f6llig kostenlos und eine Registrierung ist notwendig. Aufgrund der umfassenden Tools in der Erstellung und Optimierung von SVGs mein klarer Favorit und eine deutliche Empfehlung f\u00fcr euch.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"945\" height=\"449\" data-attachment-id=\"23881\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/02\/05\/svgs-und-die-web-performance-best-practices\/image-3-10\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-3.png\" data-orig-size=\"945,449\" 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=\"image-3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-3.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-3.png\" alt=\"\" class=\"wp-image-23881\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-3.png 945w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-3-300x143.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-3-768x365.png 768w\" sizes=\"auto, (max-width: 945px) 100vw, 945px\" \/><\/a><figcaption class=\"wp-element-caption\">Mein bevorzugtes SVG-Tool: Inkscape<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2 &#8211; Optimieren<\/h3>\n\n\n\n<p>Der erste Schritt ist getan: Ihr besitzt nun die Werkzeuge, um Vektorgrafiken zu beschaffen oder selbst zu erstellen. Werfen wir doch jetzt ein Blick darauf, wie bereits vorhandene oder im Schaffensprozess befindliche SVGs performance-technisch optimiert werden k\u00f6nnen. Generell gibt es hierbei zwei Stellschrauben, an denen gedreht werden kann.<\/p>\n\n\n\n<p><strong>A: Verringerung der Dateigr\u00f6\u00dfe, f\u00fcr eine schnellere \u00dcbertragung durch das World-Wide-Web<br>B: Verringerung der Komplexit\u00e4t, um den Browser weniger Rechenleistung und -Dauer abzuverlangen.<\/strong><\/p>\n\n\n\n<p>Um dies zu erreichen, k\u00f6nnt ihr folgende Tricks anwenden:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pfadpunkte einsparen &amp; Genauigkeit reduzieren<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Oftmals sind einzelne Elemente des Bildes teilweise oder ganz verdeckt. Weg damit! Unsichtbare Pfadpunkte k\u00f6nnen eingespart werden, beziehungsweise kann deren Genauigkeit reduziert werden, ohne dass ein Unterschied f\u00fcr das menschliche Auge ersichtlich wird.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"945\" height=\"279\" data-attachment-id=\"23885\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/02\/05\/svgs-und-die-web-performance-best-practices\/image-4-9\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-4.png\" data-orig-size=\"945,279\" 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=\"image-4\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-4.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-4.png\" alt=\"\" class=\"wp-image-23885\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-4.png 945w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-4-300x89.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-4-768x227.png 768w\" sizes=\"auto, (max-width: 945px) 100vw, 945px\" \/><\/a><figcaption class=\"wp-element-caption\">Verdeckte Pfadpunkte k\u00f6nnen weggelassen werden.<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Zusammenfassung und Gruppieren<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Redundanter Code kostet Speicherplatz. Raus damit! Angewandte Styles und Eigenschaften f\u00fcr gleiche Objekte k\u00f6nnen in Gruppen zusammengefasst werden, anstatt jedes Mal einzeln aufgef\u00fchrt zu werden. Ab wann sich das lohnt, h\u00e4ngt vom Einzelfall ab. F\u00fcr eine bessere Lesbarkeit und Verst\u00e4ndlichkeit sorgt es allemal und ist deshalb Best-Practice im Coding-Umfeld.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"944\" height=\"360\" data-attachment-id=\"23886\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/02\/05\/svgs-und-die-web-performance-best-practices\/image-5-8\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-5.png\" data-orig-size=\"944,360\" 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=\"image-5\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-5.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-5.png\" alt=\"\" class=\"wp-image-23886\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-5.png 944w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-5-300x114.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-5-768x293.png 768w\" sizes=\"auto, (max-width: 944px) 100vw, 944px\" \/><\/a><figcaption class=\"wp-element-caption\">Redundanter Code sollte vermieden werden.<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Keine Spielereien<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Tags wie &lt;filter&gt;, &lt;textPath&gt;, &lt;use&gt; und &lt;mask&gt; ben\u00f6tigen viel Rechenleistung und schaden somit der Performance der Website. Verzichtet so gut es geht auf solche Spielereien, wenn es sich denn vermeiden l\u00e4sst. Je simpler die Vektorgrafiken, desto besser die Performance.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-6.png\"><img loading=\"lazy\" decoding=\"async\" width=\"944\" height=\"295\" data-attachment-id=\"23887\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/02\/05\/svgs-und-die-web-performance-best-practices\/image-6-7\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-6.png\" data-orig-size=\"944,295\" 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=\"image-6\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-6.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-6.png\" alt=\"\" class=\"wp-image-23887\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-6.png 944w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-6-300x94.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-6-768x240.png 768w\" sizes=\"auto, (max-width: 944px) 100vw, 944px\" \/><\/a><figcaption class=\"wp-element-caption\">Haltet die SVGs simpel.<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>F\u00fcr alles Weitere: SVGO<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Die gerade erw\u00e4hnten Tipps stellen nur einen winzigen Bruchteil an unz\u00e4hligen M\u00f6glichkeiten dar, mit denen der Speicherbedarf und die Komplexit\u00e4t von SVGs reduzieren werden k\u00f6nnen. Die meisten Dinge m\u00fcssen und sollten gar nicht erst von Hand get\u00e4tigt werden. Hier k\u00f6nnen beispielsweise bew\u00e4hrte Tools wie <a href=\"https:\/\/github.com\/svg\/svgo\" target=\"_blank\" rel=\"noopener\" title=\"\">SVGO<\/a> einspringen. SVGO ist ein Optimizer f\u00fcr SVGs mit einer riesigen Palette an vollautomatisierten Optimierungsm\u00f6glichkeiten. Ob als Plugin f\u00fcr Code-Editoren und Designtools, Webapp, GitHub-Action oder als Node-Package, das Tool ist auf jedem erdenklichen Weg kinderleicht in einen bestehenden Workflow integrierbar. Nutzt es!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3 &#8211; Komprimieren<\/h3>\n\n\n\n<p>Nach den Designern sind nun die Backend Spezialisten gefragt! Vektorgrafiken eignen sich hervorragend f\u00fcr eine serverseitige Kompression der \u00fcbertragenen Daten. Hierbei kann die \u00fcbertragene Dateigr\u00f6\u00dfe nochmal um gut 50% reduziert werden. Meist ist solch eine Kompression bereits voreingestellt. Trotzdem empfiehlt es sich sicherheitshalber nochmal einen Blick in die Server-Konfiguration zu werfen. Eine Komprimierung von SVGs l\u00e4sst sich wie folgt aktivieren:<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.nginx.com\/nginx\/admin-guide\/web-server\/compression\/\" target=\"_blank\" rel=\"noopener\" title=\"\"><strong>NGIX<\/strong><\/a> (.htaccess file):<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-medium-font-size\"><code class=\"\" data-line=\"\">server {\n    gzip on;\n    gzip_types image\/svg+xml;\n    gzip_proxied no-cache no-store private expired auth;\n}<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/httpd.apache.org\/docs\/2.4\/mod\/mod_deflate.html\" target=\"_blank\" rel=\"noopener\" title=\"\"><strong>Apache<\/strong><\/a> (Server Configuration):<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background\"><code class=\"\" data-line=\"\">AddOutputFilterByType DEFLATE image\/svg+xml<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">4 &#8211; Einbinden<\/h3>\n\n\n\n<p>Nach Erstellung, Optimierung und Komprimierung folgt nun die Einbindung der Grafiken. Jetzt sind die Frontend-Entwickler gefragt. M\u00f6glichkeiten, Icons und Logos einzubauen, gibt es viele. Doch unterscheiden diese sich deutlich in Sachen Performance und Feature-Umfang.<\/p>\n\n\n\n<p>Wer maximale Performance m\u00f6chte, sollte SVGs wie eine gew\u00f6hnliche Rastergrafik einbinden: z.B. mit CSS als Background-Image ein oder dem &lt;img&gt;-Tag. Das Plus an Performance hat jedoch einen entscheidenen Nachteil: alle Vorteile die Vektorgrafiken mit sich bringen (DOM-Zugriff, Manipulierbarkeit, Animierbarkeit und Styling) fallen dabei weg. Wer darauf nicht verzichten m\u00f6chte, sollte den daf\u00fcr standardm\u00e4\u00dfig vorgesehen &lt;svg&gt;-Tag nutzen. Aus Performance-Sicht keinesfalls empfehlenswert ist eine Einbindung \u00fcber &lt;Object&gt;, &lt;embed&gt; oder &lt;iframe&gt;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Praxisbeispiel: <a href=\"https:\/\/www.hdm-stuttgart.de\/\" target=\"_blank\" rel=\"noopener\" title=\"\">hdm-stuttgart.de<\/a><\/h2>\n\n\n\n<p>Um euch abschlie\u00dfend zu beweisen, dass die vorher aufgef\u00fchrten Tipps und Tricks wirklich helfen k\u00f6nnen, habe ich euch auch ein Praxisbeispiel mitgebracht: die Website unserer gesch\u00e4tzten HdM. Dass das M in HdM f\u00fcr Medien steht, verschweige ich dabei lieber, denn zu allem Verdruss werden auf der Website der Hochschule keinerlei Vektorgrafiken eingesetzt. Ein Blick in die Developer Tools offenbart, dass alle 21 verwendeten Icons und Logos auf der Startseite auf Rastergrafiken wie JPEGs oder PNGs setzten. Die gro\u00dfen Nachteile daran: die Logos sind bei genauerem Betrachten nicht nur unscharf, sie ben\u00f6tigten auch deutlich mehr Bytes zum \u00fcbertragen. 409KB, um genau zu sein.<\/p>\n\n\n\n<p>Dabei konnte ich es nicht belassen,den. ein halber Megabyte f\u00fcr ein paar unscharfe Icons ist definitiv zu viel. Also wandte ich den vorher erw\u00e4hnten Prozess an und stellte zun\u00e4chst einmal komplett auf Vektorgrafiken um. Daf\u00fcr reichte es bereits die meisten Logos als SVG-Version aus dem Internet zu ziehen, den Rest bastelte ich mit Adobe Illustrator selbst nach. Im zweiten Schritt unterzog ich allen SVGS einer Optimierung mit dem SVGO-Tool und reduzierte bei einigen Icons die Genauigkeit der Pfadpunkte von Hand. Im letzten Schritt simulierte ich dann noch eine serverseitige Komprimierung mit dem Online-Tool <a href=\"https:\/\/vecta.io\/nano\" target=\"_blank\" rel=\"noopener\" title=\"\">Vecta.io<\/a>.<\/p>\n\n\n\n<p class=\".wp-caption .wp-caption-text { text-align: center; }\">Das Resultat spricht B\u00e4nde: Am Ende umfassten alle Assets eine Gesamtgr\u00f6\u00dfe von nur noch mickrigen <strong>9KB<\/strong>. Eine Einsparung von <strong>-97,8%<\/strong> im Vergleich zu den nicht optimierten Rastergrafiken zu Beginn. Dieser Umstieg w\u00fcrde somit nicht nur den Augen des Betrachters zugutekommen (dank sch\u00e4rferer Aufl\u00f6sung), sondern sich auch positiv auf die Ladezeit der Website auswirken. Gerade im verbesserungsbed\u00fcrftigen deutschen Mobilfunknetz ein Vorteil, den es nicht zu vernachl\u00e4ssigen gilt.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full .wp-caption .wp-caption-text {  text-align: center; }\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-7.png\"><img loading=\"lazy\" decoding=\"async\" width=\"945\" height=\"240\" data-attachment-id=\"23897\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/02\/05\/svgs-und-die-web-performance-best-practices\/image-7-7\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-7.png\" data-orig-size=\"945,240\" 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=\"image-7\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-7.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-7.png\" alt=\"\" class=\"wp-image-23897\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-7.png 945w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-7-300x76.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/02\/image-7-768x195.png 768w\" sizes=\"auto, (max-width: 945px) 100vw, 945px\" \/><\/a><figcaption class=\"wp-element-caption\">Eine Optimierung kann sehr viel Speicher sparen.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Fazit \/ TL;DR<\/h2>\n\n\n\n<p>Eine Optimierung von Vektorgrafiken auf Websites lohnt sich immer. Gerade wenn bisweilen Rastergrafiken wie PNGs oder JPEGs f\u00fcr Logos und Icons eingesetzt worden sind. Nicht nur sehen diese durch Skalierbarkeit bei allen Displaygr\u00f6\u00dfen deutlich sch\u00e4rfer aus, auch aus performance-technischen Aspekten lohnt sich der Umstieg zu 100%. Von Erstellung bis zu Einbindung, alle Beteiligten im Entwicklungsprozess sind gefragt f\u00fcr eine gute Web-Performance Sorge zu tragen. Denn die Performance ist ein ma\u00dfgeblicher Faktor f\u00fcr die Zufriedenheit des Website-Besuchers und somit auch essenziell f\u00fcr den finanziellen Erfolg eines Internetauftritts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quellen \/ Weiterf\u00fchrendes<\/h2>\n\n\n\n<p>F\u00fcr alle diejenigen, die noch mehr wollen:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">SVG<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\" target=\"_blank\" rel=\"noopener\" title=\"\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/Graphics\/SVG\/\" target=\"_blank\" rel=\"noopener\" title=\"\">https:\/\/www.w3.org\/Graphics\/SVG\/<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Web-Performance<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Performance\/why_web_performance\">https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Performance\/why_web_performance<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.businessinsider.com\/10-golden-principles-successful-web-apps-2010-3\">https:\/\/www.businessinsider.com\/10-golden-principles-successful-web-apps-2010-3<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/blog.acolad.com\/de\/web-performance-der-schnelle-weg-zum-besseren-nutzererlebnis\">https:\/\/blog.acolad.com\/de\/web-performance-der-schnelle-weg-zum-besseren-nutzererlebnis<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.stevesouders.com\/blog\/2010\/05\/07\/wpo-web-performance-optimization\/\">https:\/\/www.stevesouders.com\/blog\/2010\/05\/07\/wpo-web-performance-optimization\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/web.dev\/rendering-performance\/\">https:\/\/web.dev\/rendering-performance\/<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">SVG-Optimierung<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.svgbackgrounds.com\/how-to-optimize-and-reduce-the-file-size-of-svg-images\/\">https:\/\/www.svgbackgrounds.com\/how-to-optimize-and-reduce-the-file-size-of-svg-images\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.amberddesign.com\/how-to-optimize-an-svg-file\/\">https:\/\/www.amberddesign.com\/how-to-optimize-an-svg-file\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/codepen.io\/tigt\/post\/improving-svg-rendering-performance\">https:\/\/codepen.io\/tigt\/post\/improving-svg-rendering-performance<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/medium.com\/@subzey\/of-svg-minification-and-gzip-21cd26a5d007\">https:\/\/medium.com\/@subzey\/of-svg-minification-and-gzip-21cd26a5d007<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/medium.com\/larsenwork-andreas-larsen\/optimising-svgs-for-web-use-part-1-67e8f2d4035\">https:\/\/medium.com\/larsenwork-andreas-larsen\/optimising-svgs-for-web-use-part-1-67e8f2d4035<\/a><\/li>\n<\/ul>\n\n\n\n<p><strong>DISCLAIMER<\/strong>: Das genutzte Blogging-Tool verbietet die Nutzung von SVGs \ud83e\udd26\u200d\u2642\ufe0f: Ironie des Schickals.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ob UI-Designer, Frontend-Entwickler oder Backend-Spezialist, in allen Bereichen der modernen Web-Entwicklung kommt man in irgendeiner Art und Weise mit Logos und Icons in Ber\u00fchrung. Um eine gute User-Experience zu gew\u00e4hrleisten, sollten diese f\u00fcr den Betrachter stets gestochen scharf angezeigt werden, egal ob kleines Handy oder gro\u00dfer Laptop-Bildschirm. Moderne Websites m\u00fcssen responsiv sein und damit auch [&hellip;]<\/p>\n","protected":false},"author":1122,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[649,662],"tags":[],"ppma_author":[886],"class_list":["post-23769","post","type-post","status-publish","format-standard","hentry","category-interactive-media","category-web-performance"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":12512,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2021\/02\/27\/progressive-web-apps-wer-braucht-noch-native-apps\/","url_meta":{"origin":23769,"position":0},"title":"Progressive Web Apps &#8211; Wer braucht noch native Apps?","author":"Fabiola Dums","date":"27. February 2021","format":false,"excerpt":"Progressive Web Apps sollen es erm\u00f6glichen die Vorteile des Webs und die nativer Apps zu nutzen, um so f\u00fcr jeden, \u00fcberall und auf jedem Ger\u00e4t, nutzbar zu sein. Was Progressive Web Apps eigentlich sind, welche Vor- und Nachteile sie mit sich bringen und ob sie in Zukunft native Apps komplett\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\/2021\/02\/Bildschirmfoto-2021-02-26-um-12.21.05.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/Bildschirmfoto-2021-02-26-um-12.21.05.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/Bildschirmfoto-2021-02-26-um-12.21.05.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/Bildschirmfoto-2021-02-26-um-12.21.05.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/Bildschirmfoto-2021-02-26-um-12.21.05.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/Bildschirmfoto-2021-02-26-um-12.21.05.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":26085,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2024\/02\/04\/optimierung-einer-vuejs-webseite-ladezeitenreduktion\/","url_meta":{"origin":23769,"position":1},"title":"Optimierung einer VueJS-Webseite: Ladezeitenreduktion","author":"Andreas Nicklaus","date":"4. February 2024","format":false,"excerpt":"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.","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\/2024\/02\/PageWeight.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/PageWeight.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/PageWeight.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2024\/02\/PageWeight.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":27464,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2025\/02\/28\/low-code-no-code-in-der-enterprise-software-entwicklung-fluch-oder\/","url_meta":{"origin":23769,"position":2},"title":"Low-Code\/No-Code in der Enterprise-Software-Entwicklung \u2013 Fluch oder Segen?","author":"Antonia Herdtner","date":"28. February 2025","format":false,"excerpt":"Anmerkung:\u00a0Dieser Blogpost wurde f\u00fcr das Modul Enterprise IT (113601a) verfasst. 1. Einleitung Die fortschreitende digitale Transformation erfordert von Unternehmen eine stetige Anpassung ihrer IT-Strategien, um wettbewerbsf\u00e4hig zu bleiben. Traditionelle Softwareentwicklung erfordert jedoch umfangreiche Programmierkenntnisse, lange Entwicklungszyklen und erhebliche finanzielle Ressourcen. Angesichts des Fachkr\u00e4ftemangels in der IT-Branche und des steigenden Bedarfs\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":21967,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/01\/23\/neue-bildformate-im-vergleich\/","url_meta":{"origin":23769,"position":3},"title":"Neue Bildformate im Vergleich","author":"Regina Dietrich","date":"23. January 2022","format":false,"excerpt":"Bilder und andere Medienelemente gelten im Internet heute als selbstverst\u00e4ndlich. Wie aus dem HTTP Archive hervorgeht, generieren 99,9% aller Webseiten mindestens eine Anfrage f\u00fcr eine Bildressource und 95,9% enthalten mindestens ein <img>-Element [1]. Die restlichen 4% entfallen beispielsweise auf Favicons und Hintergrundbilder. F\u00fcr die breite Verwendung von Bildern gibt es\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\/2022\/01\/neue_bildformate_abbildung_06.webp?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/01\/neue_bildformate_abbildung_06.webp?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/01\/neue_bildformate_abbildung_06.webp?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/01\/neue_bildformate_abbildung_06.webp?resize=700%2C400&ssl=1 2x"},"classes":[]},{"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":23769,"position":4},"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":23834,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/02\/01\/designing-for-performance\/","url_meta":{"origin":23769,"position":5},"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":[]}],"jetpack_sharing_enabled":true,"authors":[{"term_id":886,"user_id":1122,"is_guest":0,"slug":"lw133","display_name":"Luca Wehner","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/bca6c30ab43ea6c6f029c9f82d985eb914be3a6e09d8cd72d096c9448006dd31?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\/23769","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\/1122"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/comments?post=23769"}],"version-history":[{"count":70,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/23769\/revisions"}],"predecessor-version":[{"id":23943,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/23769\/revisions\/23943"}],"wp:attachment":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/media?parent=23769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/categories?post=23769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/tags?post=23769"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/ppma_author?post=23769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}