{"id":22924,"date":"2019-06-18T10:17:58","date_gmt":"2019-06-18T08:17:58","guid":{"rendered":"https:\/\/www.neusta-ds.de\/blog\/?p=22924"},"modified":"2019-11-18T13:54:07","modified_gmt":"2019-11-18T12:54:07","slug":"the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite","status":"publish","type":"post","link":"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/","title":{"rendered":"The Need for Speed 2 &#8211; wie baut man eine schnelle Webseite?"},"content":{"rendered":"<section class=\"vc_row wpb_row vc_row-fluid  vc_custom_1560841997702 wow fadeIn\"><div class=\"wpb_column vc_column_container vc_col-sm-1 vc_hidden-sm col-xs-mobile-fullwidth sm-display-none\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-12 vc_col-md-10 vc_col-xs-12\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><div class=\"last-paragraph-no-margin\"><h5 class=\"alt-font text-extra-dark-gray xs-text-center\">In einem\u00a0<a href=\"https:\/\/www.neusta-ds.de\/blog\/destination-wiki\/the-need-for-speed-warum-die-geschwindigkeit-einer-website-wichtig-ist\/\" target=\"_blank\" rel=\"noopener\">vorherigen Artikel<\/a>\u00a0haben wir erl\u00e4utert, warum die Geschwindigkeit einer Webseite ein wichtiger Faktor ist.<\/h5>\n<p>Mit dem jetzigen Artikel gehen wir nun in die Fortsetzung:\u00a0Wie lassen sich die verschiedenen Elemente einer Webseite hinsichtlich der Geschwindigkeit optimieren?<\/p>\n<p><strong>Hinweis:\u00a0<\/strong>jeder Punkt f\u00fcr sich bietet genug Stoff, um damit ganze B\u00fccher zu f\u00fcllen \u2013 deshalb wollen wir hier auch nur jeweils einen groben \u00dcberblick geben.<\/p>\n<\/div><div class=\" vc_custom_1560849200178 last-paragraph-no-margin\"><h6>Der Webserver<\/h6>\n<p>Rufe ich mit einem Browser eine Webseite auf, schickt der Browser eine Anfrage (<i>request<\/i>) an den Server (\u201cgib mir die Seite\u00a0<a href=\"https:\/\/www.neusta-ds.de\/blog\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.neusta-ds.de\/blog\/<\/a>\u201d). Der Server schickt dann eine Antwort (<i>response<\/i>), die dann das HTML-Dokument der Webseite beinhaltet.<\/p>\n<blockquote class=\"border-color-deep-pink\"><p>\nDie Zeit, die der Server ben\u00f6tigt, um die Anfrage des Browser zu verarbeiten und mit der Auslieferung der Daten (das HTML) zu beginnen, nennt man\u00a0<i>Time to first byte<\/i>\u00a0(<i>TTFB<\/i>). Dies ist dann sozusagen ein Ma\u00df daf\u00fcr, wie schnell der Server auf Anfragen reagiert.\n<\/p><\/blockquote>\n<p>Die\u00a0<i>Time to first byte<\/i>\u00a0wird dabei von verschiedenen Faktoren beeinflusst. Dies sind vor allem:<\/p>\n<p><strong><i>Hardware-Ausstattung des Servers:<br \/>\n<\/i><\/strong>Hier gilt nat\u00fcrlich: viel hilft viel \u2013 je mehr Rechenleistung und Arbeitsspeicher ein Server zur Verf\u00fcgung hat, desto schneller kann er arbeiten. Auch SSD-Festplatten statt klassischer Festplatten erh\u00f6hen die Geschwindigkeit deutlich. Aber: dies ist nat\u00fcrlich immer auch mit Mehrkosten verbunden.<\/p>\n<p><strong><i>Server-seitige HTML-Generierung:<br \/>\n<\/i><\/strong>Muss der Server das HTML f\u00fcr die Webseite erst generieren? Die meisten\u00a0<i>Content-Management-Systeme<\/i>\u00a0(<i>CMS<\/i>) wie WordPress, TYPO3 oder Drupal nutzen Server-seitig eine Skriptsprache (in den genannten Beispielen\u00a0<i>PHP<\/i>), um dynamisch die Seiten zu generieren. Dabei werden Daten aus einer Datenbank (z.B. <i>MySQL<\/i>) geholt und dann in die Templates (Vorlagen, Muster) des CMS eingef\u00fcgt. Diese Generierung kann dabei je nach Komplexit\u00e4t viel Zeit kosten.<\/p>\n<\/div><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-1 vc_hidden-sm col-xs-mobile-fullwidth sm-display-none\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><\/section><section id=\"777\" data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid  vc_custom_1560785302049 wow fadeIn vc_row-has-fill pofo-stretch-content vc_row-o-equal-height vc_row-o-content-middle vc_row-flex\"><div class=\"wpb_column vc_column_container vc_col-has-fill vc_col-sm-12 vc_col-md-6 vc_col-xs-12 wow slideInLeft pofo-column-responsive-69f4e62940436\" data-wow-delay= 100ms><div class=\"vc_column-inner cover-background bg-position-center-center vc_custom_1560840876637\"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-12 vc_col-md-6 vc_col-xs-12 wow slideInRight sm-text-center\" data-wow-delay= 100ms><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><div class=\" vc_custom_1560861431033 last-paragraph-no-margin pofo-text-block-responsive-69f4e629405bf\" style=\"color: #ffffff;\"><h5 class=\"&quot;alt-font\">Cache<\/h5>\n<p>Ein schneller Zwischenspeicher, der es erlaubt, Ressourcen, deren Bereitstellung eigentlich viel Zeit kosten w\u00fcrde, deutlich schneller auszuliefern \u2013 z. B. indem das Ergebnis einer aufw\u00e4ndigen Operation gespeichert wird (anstatt es immer wieder neu zu berechnen) oder indem Ressourcen wie Bilder lokal auf dem Rechner des Benutzers zwischengespeichert anstatt immer wieder neu vom Server heruntergeladen zu werden.<\/p>\n<p>Wichtig hierbei: da sich das Original nat\u00fcrlich auch \u00e4ndern kann, muss ein Cache nach einer bestimmten Zeit erneuert werden, um zu verhindern, dass veraltete Inhalte ausgeliefert werden.<\/p>\n<p>Weitere Infos dazu<a href=\"https:\/\/csswizardry.com\/2019\/03\/cache-control-for-civilians\/\" target=\"_blank\" rel=\"noopener\"> hier!<\/a><\/p>\n<\/div><\/div><\/div><\/div><\/section><div class=\"vc_row-full-width vc_clearfix\"><\/div><section class=\"vc_row wpb_row vc_row-fluid   wow fadeIn\"><div class=\"wpb_column vc_column_container vc_col-md-1 vc_hidden-sm vc_hidden-xs col-xs-mobile-fullwidth sm-display-none\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-12 vc_col-md-10 vc_col-xs-12\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><div class=\"last-paragraph-no-margin\"><p><span style=\"font-weight: 400;\">Im Idealfall liefert der Server ohne Umwege das HTML f\u00fcr die Webseite aus. Daf\u00fcr gibt es &#8211; vorausgesetzt, die Webseite hat keine dynamischen Inhalte, die eine solche statische Auslieferung unm\u00f6glich machen &#8211; verschiedene Ans\u00e4tze, \u00fcblicherweise mit Hilfe eines Caches (siehe Infobox). Bei CMS-basierten Systemen sieht das in der Regel so aus, dass die (z. B. aus PHP und MySQL) fertig generierte Seite einfach als HTML-Datei auf dem Server abgelegt wird. Wird diese Webseite nun aufgerufen, liefert der Server einfach die fertige HTML-Datei aus. (Bei TYPO3 kann hierf\u00fcr z. B. die <a href=\"https:\/\/typo3blogger.de\/typo3-static-file-cache\/\" target=\"_blank\" rel=\"noopener\">Erweiterung Static Filecache<\/a> genutzt werden).<br \/>\n<\/span><span style=\"font-weight: 400;\">Auch andere Server-seitige Caching-Tools wie Varnish oder OPCache zielen ebenfalls darauf ab, das Ausliefern der Seite zu beschleunigen, indem aufw\u00e4ndige Operationen des Servers zwischengespeichert werden.<\/span><\/p>\n<\/div><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-md-1 vc_hidden-sm vc_hidden-xs col-xs-mobile-fullwidth sm-display-none\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><\/section><section id=\"777\" data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid  vc_custom_1560785302049 wow fadeIn vc_row-has-fill pofo-stretch-content vc_row-o-equal-height vc_row-o-content-middle vc_row-flex\"><div class=\"wpb_column vc_column_container vc_col-sm-12 vc_col-md-6 vc_col-xs-12 wow slideInRight sm-text-center\" data-wow-delay= 100ms><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><div class=\" vc_custom_1560845053315 last-paragraph-no-margin pofo-text-block-responsive-69f4e62940bf3\" style=\"color: #ffffff;\"><h5>CDN<\/h5>\n<p>Ein Content Delivery Network (CDN) ist nichts anderes, als eine Reihe von Servern, \u00fcblicherweise \u00fcber viele Standorte weltweit verteilt, die dazu dienen, Ressourcen schneller an den Benutzer auszuliefern. Oft (aber nicht nur) werden CDNs f\u00fcr Bilder verwendet. M\u00f6chte ein Benutzer in Deutschland ein Bild von einem amerikanischen Server abrufen, muss das Bild einen ziemlich langen Weg \u00fcber den Atlantik bis hierhin zur\u00fccklegen. Bei einem CDN w\u00fcrde das Bild dann aber z.B. von einem Server in der N\u00e4he ausgeliefert werden \u2013 dies wird dann deutlich schneller gehen.<\/p>\n<p>Daneben haben CDNs aber auch andere Vorteile: so sind diese Server i. d. R. schon auf Performance hin optimiert oder k\u00f6nnen auch helfen, viele gleichzeitige Anfragen auf das Netzwerk zu verteilen, um eine \u00dcberlastung zu vermeiden.<\/p>\n<p>Weitere Infos dazu\u00a0<a href=\"https:\/\/www.sistrix.de\/frag-sistrix\/cdn-content-delivery-network\/\" target=\"_blank\" rel=\"noopener\">hier<\/a>!<\/p>\n<\/div><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-has-fill vc_col-sm-12 vc_col-md-6 vc_col-xs-12 wow slideInLeft pofo-column-responsive-69f4e62940ddc\" data-wow-delay= 100ms><div class=\"vc_column-inner cover-background bg-position-center-center vc_custom_1560855996445\"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><\/section><div class=\"vc_row-full-width vc_clearfix\"><\/div><section class=\"vc_row wpb_row vc_row-fluid  vc_custom_1560843424944 wow fadeIn\"><div class=\"wpb_column vc_column_container vc_col-md-1 vc_hidden-sm vc_hidden-xs col-xs-mobile-fullwidth sm-display-none\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-12 vc_col-md-10 vc_col-xs-12\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><div class=\" vc_custom_1560843201162 last-paragraph-no-margin\"><blockquote class=\"border-color-deep-pink\"><p>\nEin ebenso wichtiger Faktor bei der Server-Geschwindigkeit ist, wie viele Anfragen ein Server zur selben Zeit verarbeiten muss. (<i>Server-Last)<\/i>\n<\/p><\/blockquote>\n<p>Wird eine Webseite nur von wenigen Besuchern aufgerufen, wird der Server damit keine Probleme haben \u2013\u00a0bei sehr vielen Anfragen gleichzeitig hingegen wird irgendwann auch der leistungsf\u00e4higste Server in die Knie gehen. Abhilfe schaffen dann\u00a0<i>Load Balancer<\/i>\u00a0\u2013 dies ist sozusagen ein vorgeschalteter Server, der die Anfragen dann gleichm\u00e4\u00dfig auf mehrere Server (oder ein ganzes Netzwerk an Servern) weiterverteilt.<\/p>\n<\/div><div class=\" vc_custom_1560845068298 last-paragraph-no-margin\"><h5>http\/2<\/h5>\n<p>HTTP ist das Basis-Protokoll des Web, das die \u00dcbertragung der Daten regelt. Seit ein paar Jahren ist das Protokoll in der neuen, \u00fcberarbeiteten Version http\/2 verf\u00fcgbar, das mittlerweile auch\u00a0<a href=\"https:\/\/caniuse.com\/#search=http2\" target=\"_blank\" rel=\"noopener\">von den meisten Browsern unterst\u00fctzt<\/a>\u00a0wird. Dieses bietet f\u00fcr die Geschwindigkeit einige Verbesserungen. So k\u00f6nnen nun mehrere Ressourcen gleichzeitig heruntergeladen werden. Au\u00dferdem k\u00f6nnen wichtige Ressourcen (z. B. Schriftarten) gleich bei der initialen Anfrage mitgesendet werden, so dass keine separate Anfrage daf\u00fcr n\u00f6tig ist.<\/p>\n<p>Falls m\u00f6glich, sollte also darauf geachtet werden, dass http\/2 verwendet wird.<\/p>\n<\/div><div class=\" vc_custom_1560845079313 last-paragraph-no-margin\"><h5>Komprimierung<\/h5>\n<p><span style=\"font-weight: 400;\">Die meisten Computernutzer haben schon einmal mit ZIP-Dateien gearbeitet. Der Vorteil: gro\u00dfe Dateien lassen sich komprimieren und damit schneller \u00fcber das Netz versenden und empfangen.<br \/>\n<\/span><span style=\"font-weight: 400;\">Das gleiche Prinzip kann bei Webseiten genutzt werden, das Standard-Tool zur Komprimierung ist hier <\/span><i><span style=\"font-weight: 400;\">gzip<\/span><\/i><span style=\"font-weight: 400;\">. Der Server komprimiert die Ressourcen (HTML, CSS, Javascript, \u2026) und muss daher dann eine deutlich geringere Menge an Daten \u00fcber das Netzwerk ausliefern. Der Browser des Benutzers entpackt dann wieder die Ressourcen in ihren Originalzustand (wobei der zeitliche Aufwand f\u00fcr das komprimieren und entpacken dabei deutlich geringer ist als die Zeitersparnis durch die verringerte Datenmenge!).<\/span><\/p>\n<\/div><div class=\" vc_custom_1560845091349 last-paragraph-no-margin\"><h5>CSS<\/h5>\n<p><i><span style=\"font-weight: 400;\">CSS<\/span><\/i><span style=\"font-weight: 400;\"> (<\/span><i><span style=\"font-weight: 400;\">Cascading Style Sheets<\/span><\/i><span style=\"font-weight: 400;\">) definiert, wie eine Webseite aussieht &#8211; von Farben, Schriftarten und -gr\u00f6\u00dfen \u00fcber Positionierung von Elementen hin zu Animationen. Diese Styles werden normalerweise in einer eigenen Datei bereitgestellt, die im HTML-Dokument der Webseite verkn\u00fcpft ist.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Um eine Webseite anzeigen zu k\u00f6nnen, muss der Browser wissen, wie sie aussehen soll. Dazu liest er die CSS-Datei ein, um die Style-Regeln dann auf die HTML-Elemente anwenden zu k\u00f6nnen. Diese Style-Regeln k\u00f6nnen dabei aber recht umfangreich werden, so dass dieses Auslesen und Anwenden der Regeln die ganze Seitendarstellung deutlich verz\u00f6gern kann.<\/span><\/p>\n<blockquote class=\"border-color-deep-pink\"><p>\n<span style=\"font-weight: 400;\">Aus diesem Grund wird seit einigen Jahren bereits eine spezielle Methode angewendet, um diesen Prozess zu beschleunigen, meist unter dem Stichwort \u201cCritical CSS\u201d genannt.<\/span>\n<\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">Dabei wird das CSS gesplittet: in einen Teil, der f\u00fcr die Elemente ben\u00f6tigt wird, die beim Laden der Seite direkt zu sehen ist (man spricht hierbei auch vom \u201ccritical rendering path\u201d, daher der Name der Methode); dieser Teil wird dann statt in einer separaten Datei direkt im HTML abgelegt und ist damit schneller f\u00fcr den Browser verf\u00fcgbar. Zudem muss der Browser zun\u00e4chst nur einen kleineren Teil der Style-Regeln interpretieren &#8211; die Webseite kann also schneller dargestellt werden. Der andere Teil der Styles, der f\u00fcr die zun\u00e4chst nicht sichtbaren Elemente zust\u00e4ndig ist, wird dann per Javascript nachgeladen.<\/span><\/p>\n<\/div><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-md-1 vc_hidden-sm vc_hidden-xs col-xs-mobile-fullwidth sm-display-none\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><\/section><section data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid  vc_custom_1507702290365 wow fadeIn vc_row-has-fill pofo-stretch-content vc_row-o-equal-height vc_row-o-content-middle vc_row-flex\"><div class=\"wpb_column vc_column_container vc_col-sm-12 vc_col-md-6 vc_col-xs-12 wow slideInLeft sm-text-center\" data-wow-delay= 100ms><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><div class=\" vc_custom_1560848772047 last-paragraph-no-margin pofo-text-block-responsive-69f4e6294141e\" style=\"color: #ffffff;\"><h5 class=\"alt-font text-light-gray\">Javascript<\/h5>\n<p><i>Javascript<\/i>\u00a0\u2013 die Skriptsprache f\u00fcr das Web \u2013 ist eine spezielle Ressource. Die meisten heutigen Webseiten sind nicht mehr einfach nur verlinkte Textdokumente mit ein paar Bildern, sondern eigenst\u00e4ndige Anwendungen, die im Browser laufen. Die Menge an Javascript, die eine durchschnittliche Webseite nutzt, ist dabei auch deutlich gr\u00f6\u00dfer geworden. Im Gegensatz zum HTML oder Bildern, die der Browser vergleichsweise einfach laden und verarbeiten kann, bedeutet jedes Byte an Javascript f\u00fcr den Browser mehr Arbeit. Das Javascript muss geladen, verarbeitet und ausgef\u00fchrt werden. Und gerade bei der Ausf\u00fchrung gibt es auch erhebliche Unterschiede zwischen verschiedenen Browsern und Ger\u00e4ten: wird das zu einer Webseite geh\u00f6rende Javascript auf einem neuen iPhone vielleicht in unter 1 Sekunde verarbeitet und ausgef\u00fchrt, kann es auf \u00e4lteren, weniger leistungsf\u00e4higen Smartphones durchaus 10 Sekunden und mehr ben\u00f6tigen \u2013 und der Nutzer wartet, <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/optimizing-content-efficiency\/javascript-startup-optimization\/\" target=\"_blank\" rel=\"noopener\">bis die\u00a0Seite endlich wieder reagiert<\/a>\u2026<\/p>\n<p>Wichtig bei Javascript ist es also, es sparsam und mit Bedacht einzusetzen \u2013 und nicht einfach ein x-beliebiges Plugin aus dem\u00a0Netz in die Webseite einzubauen, um ein bestimmtes Feature zu haben. Zudem gibt es Tools, die dabei helfen, gr\u00f6\u00dfere Javascript-Pakete so vorzubereiten, dass sie mit Blick auf die Performance optimiert geladen werden k\u00f6nnen \u2013 am bekanntesten ist hier\u00a0<a href=\"https:\/\/webpack.js.org\/\" target=\"_blank\" rel=\"noopener\"><i>webpack<\/i><\/a>.<\/p>\n<p>Vorsicht ist auch bei Javascript geboten, das von Drittanbietern geladen wird, z. B. wenn \u00fcber den Google Tag Manager Funktionen nachgeladen werden: auch solche Skripte k\u00f6nnen die Performance erheblich beeintr\u00e4chtigen.<\/p>\n<\/div><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-has-fill vc_col-sm-12 vc_col-md-6 vc_col-xs-12 wow slideInRight pofo-column-responsive-69f4e629415a4\" data-wow-delay= 100ms><div class=\"vc_column-inner cover-background bg-position-center-center vc_custom_1560858590557\"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><\/section><div class=\"vc_row-full-width vc_clearfix\"><\/div><section class=\"vc_row wpb_row vc_row-fluid  vc_custom_1507702414657 wow fadeIn\"><div class=\"wpb_column vc_column_container vc_col-sm-1 vc_hidden-sm col-xs-mobile-fullwidth sm-display-none\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-12 vc_col-md-10 vc_col-xs-12 xs-text-center\"><div class=\"vc_column-inner vc_custom_1504503734313\"><div class=\"wpb_wrapper\"><div class=\" vc_custom_1560848936855 last-paragraph-no-margin\"><h5>Bilder<\/h5>\n<p><span style=\"font-weight: 400;\">Bilder machen oft einen Gro\u00dfteil der bei einer Webseite anfallenden Datenmenge aus. Daher ist es auch umso wichtiger, Bilder mit Blick auf die Geschwindigkeit zu optimieren.\u00a0<\/span><span style=\"font-weight: 400;\">Zun\u00e4chst ist eine gute Caching-Strategie wichtig &#8211; wird ein Bild mehrmals verwendet, sollte es vom Browser nur einmal heruntergeladen und dann aus dem Cache verwendet werden.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dann sollten Bilder immer f\u00fcr die Darstellung im Web optimiert werden. Durch Optimierungs-Tools l\u00e4sst sich die Datenmenge der Bilder (ohne Qualit\u00e4tsverlust) deutlich reduzieren. [siehe. z. B. <\/span><a href=\"https:\/\/tinyjpg.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">https:\/\/tinyjpg.com<\/span><\/a><span style=\"font-weight: 400;\"> als Beispiel f\u00fcr ein Online-Tool]<br \/>\n<\/span><span style=\"font-weight: 400;\">Da auch nicht immer gleich alle Bilder einer Webseite sichtbar sind, empfiehlt sich der Einsatz eines<\/span><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/lazy-loading-guidance\/images-and-video\/\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400;\"> Lazy-Loading<\/span><\/i><\/a><span style=\"font-weight: 400;\">-Mechanismus: damit ist gemeint, dass ein Bild erst dann tats\u00e4chlich geladen wird, wenn der Nutzer zu der entsprechenden Stelle auf der Webseite scrollt. So l\u00e4sst sich die gesamte Datenmenge beim initialen Aufruf der Webseite massiv reduzieren.\u00a0<\/span><\/p>\n<\/div><div class=\" vc_custom_1560863175257 last-paragraph-no-margin\"><h5>Fazit<\/h5>\n<p><span style=\"font-weight: 400;\">Wie baue ich nun eine schnelle Webseite?\u00a0<\/span><span style=\"font-weight: 400;\">Wichtig ist, alle Elemente im Blick zu behalten. Nat\u00fcrlich gilt: Less is more (Speed). Je weniger Features, Bilder, Videos, Tracking-Skripte etc. ich in eine Webseite integriere, desto schneller wird sie. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Eine Webseite, die nur aus einfachem HTML besteht, ist in Sachen Geschwindigkeit kaum zu schlagen, siehe am Beispiel:\u00a0<a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?hl=de&amp;url=https%3A%2F%2Fwww.goshdarnwebsite.com%2F\" target=\"_blank\" rel=\"noopener\">www.goshdarnwebsite.com<\/a>\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ist dann aber nat\u00fcrlich auch sehr langweilig.<\/span><\/p>\n<h6><span style=\"font-weight: 400;\">Es kommt also auf ein gutes, ausgewogenes Gesamtkonzept an, das alle Aspekte einer Webseite ber\u00fccksichtigt.<\/span><\/h6>\n<\/div><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-1 vc_hidden-sm col-xs-mobile-fullwidth sm-display-none\"><div class=\"vc_column-inner \"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"In einem\u00a0vorherigen Artikel\u00a0haben wir erl\u00e4utert, warum die Geschwindigkeit einer Webseite ein wichtiger Faktor ist. Mit dem jetzigen Artikel gehen wir nun in die Fortsetzung:\u00a0Wie lassen sich die verschiedenen Elemente einer Webseite hinsichtlich der Geschwindigkeit optimieren? Hinweis:\u00a0jeder Punkt f\u00fcr sich bietet genug Stoff, um damit ganze B\u00fccher zu f\u00fcllen \u2013 deshalb wollen wir hier auch nur jeweils einen groben \u00dcberblick geben. Der Webserver Rufe ich mit einem Browser eine Webseite auf, schickt der Browser eine Anfrage (request) an den Server (\u201cgib mir die Seite\u00a0https:\/\/www.neusta-ds.de\/blog\/\u201d). Der Server schickt dann eine Antwort (response), die dann das HTML-Dokument der Webseite beinhaltet. Die Zeit, die der Server ben\u00f6tigt, um die Anfrage des Browser zu verarbeiten und mit der Auslieferung der Daten (das HTML) zu beginnen, nennt man\u00a0Time to first byte\u00a0(TTFB). Dies ist dann sozusagen ein Ma\u00df daf\u00fcr, wie schnell der Server auf Anfragen reagiert. Die\u00a0Time to first byte\u00a0wird dabei von verschiedenen Faktoren beeinflusst. Dies sind vor allem: Hardware-Ausstattung des Servers: Hier gilt nat\u00fcrlich: viel hilft viel \u2013 je mehr Rechenleistung und Arbeitsspeicher ein Server zur Verf\u00fcgung hat, desto schneller kann er arbeiten. Auch SSD-Festplatten statt klassischer Festplatten erh\u00f6hen die Geschwindigkeit deutlich. Aber: dies ist nat\u00fcrlich immer auch mit Mehrkosten verbunden. Server-seitige HTML-Generierung: Muss der Server...","protected":false},"author":21,"featured_media":22933,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":[],"categories":[126],"tags":[201,198,127,200,199,203,188,202],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The Need for Speed 2 - wie baut man eine schnelle Webseite? - neusta tourism Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Need for Speed 2 - wie baut man eine schnelle Webseite? - neusta tourism Blog\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/\" \/>\n<meta property=\"og:site_name\" content=\"neusta tourism Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/neustadestinationsolutions\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-18T08:17:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-18T12:54:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.destination.one\/blog\/wp-content\/uploads\/2019\/06\/need_for_speed_2_vorschau.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sebastian Peine\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sebastian Peine\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"13\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/\"},\"author\":{\"name\":\"Sebastian Peine\",\"@id\":\"https:\/\/www.destination.one\/blog\/#\/schema\/person\/b66c8b092c54a430ae1dd78e1bb05f54\"},\"headline\":\"The Need for Speed 2 &#8211; wie baut man eine schnelle Webseite?\",\"datePublished\":\"2019-06-18T08:17:58+00:00\",\"dateModified\":\"2019-11-18T12:54:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/\"},\"wordCount\":2559,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.destination.one\/blog\/#organization\"},\"keywords\":[\"Cache\",\"CSS\",\"destination.wiki\",\"http\/2\",\"Javascript\",\"pagespeed\",\"Performance\",\"Webserver\"],\"articleSection\":[\"destination.wiki\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/\",\"url\":\"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/\",\"name\":\"The Need for Speed 2 - wie baut man eine schnelle Webseite? - neusta tourism Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.destination.one\/blog\/#website\"},\"datePublished\":\"2019-06-18T08:17:58+00:00\",\"dateModified\":\"2019-11-18T12:54:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/www.destination.one\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Need for Speed 2 &#8211; wie baut man eine schnelle Webseite?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.destination.one\/blog\/#website\",\"url\":\"https:\/\/www.destination.one\/blog\/\",\"name\":\"neusta tourism Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.destination.one\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.destination.one\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.destination.one\/blog\/#organization\",\"name\":\"neusta destination solutions\",\"url\":\"https:\/\/www.destination.one\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.destination.one\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.neusta-ds.de\/blog\/wp-content\/uploads\/2018\/11\/footer-logo.png\",\"contentUrl\":\"https:\/\/www.neusta-ds.de\/blog\/wp-content\/uploads\/2018\/11\/footer-logo.png\",\"width\":320,\"height\":97,\"caption\":\"neusta destination solutions\"},\"image\":{\"@id\":\"https:\/\/www.destination.one\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/neustadestinationsolutions\",\"https:\/\/www.instagram.com\/neusta_ds\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.destination.one\/blog\/#\/schema\/person\/b66c8b092c54a430ae1dd78e1bb05f54\",\"name\":\"Sebastian Peine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.destination.one\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.destination.one\/blog\/wp-content\/uploads\/2019\/10\/Sebastian_neu-150x150.jpg\",\"contentUrl\":\"https:\/\/www.destination.one\/blog\/wp-content\/uploads\/2019\/10\/Sebastian_neu-150x150.jpg\",\"caption\":\"Sebastian Peine\"},\"description\":\"Seit 2010 ist Sebastian Peine allgemein im Webbereich t\u00e4tig. Seinen Weg ins Agenturleben startete er dann 2 Jahre sp\u00e4ter. Ins Team von neusta destination solutions fand er 2017 und bereichert die Firma seitdem mit seinen Kenntnissen als Full-Strack-Developer mit Schwerpunkt auf TYPO3 und als Product Owner unseres CMS-Systems.\",\"url\":\"https:\/\/www.destination.one\/blog\/author\/sebastian-peine\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Need for Speed 2 - wie baut man eine schnelle Webseite? - neusta tourism Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/","og_locale":"de_DE","og_type":"article","og_title":"The Need for Speed 2 - wie baut man eine schnelle Webseite? - neusta tourism Blog","og_url":"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/","og_site_name":"neusta tourism Blog","article_publisher":"https:\/\/www.facebook.com\/neustadestinationsolutions","article_published_time":"2019-06-18T08:17:58+00:00","article_modified_time":"2019-11-18T12:54:07+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/www.destination.one\/blog\/wp-content\/uploads\/2019\/06\/need_for_speed_2_vorschau.jpg","type":"image\/jpeg"}],"author":"Sebastian Peine","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Sebastian Peine","Gesch\u00e4tzte Lesezeit":"13\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/#article","isPartOf":{"@id":"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/"},"author":{"name":"Sebastian Peine","@id":"https:\/\/www.destination.one\/blog\/#\/schema\/person\/b66c8b092c54a430ae1dd78e1bb05f54"},"headline":"The Need for Speed 2 &#8211; wie baut man eine schnelle Webseite?","datePublished":"2019-06-18T08:17:58+00:00","dateModified":"2019-11-18T12:54:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/"},"wordCount":2559,"commentCount":0,"publisher":{"@id":"https:\/\/www.destination.one\/blog\/#organization"},"keywords":["Cache","CSS","destination.wiki","http\/2","Javascript","pagespeed","Performance","Webserver"],"articleSection":["destination.wiki"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/","url":"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/","name":"The Need for Speed 2 - wie baut man eine schnelle Webseite? - neusta tourism Blog","isPartOf":{"@id":"https:\/\/www.destination.one\/blog\/#website"},"datePublished":"2019-06-18T08:17:58+00:00","dateModified":"2019-11-18T12:54:07+00:00","breadcrumb":{"@id":"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.destination.one\/blog\/the-need-for-speed-2-wie-baut-man-eine-schnelle-webseite\/destination-wiki\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/www.destination.one\/blog\/"},{"@type":"ListItem","position":2,"name":"The Need for Speed 2 &#8211; wie baut man eine schnelle Webseite?"}]},{"@type":"WebSite","@id":"https:\/\/www.destination.one\/blog\/#website","url":"https:\/\/www.destination.one\/blog\/","name":"neusta tourism Blog","description":"","publisher":{"@id":"https:\/\/www.destination.one\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.destination.one\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.destination.one\/blog\/#organization","name":"neusta destination solutions","url":"https:\/\/www.destination.one\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.destination.one\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.neusta-ds.de\/blog\/wp-content\/uploads\/2018\/11\/footer-logo.png","contentUrl":"https:\/\/www.neusta-ds.de\/blog\/wp-content\/uploads\/2018\/11\/footer-logo.png","width":320,"height":97,"caption":"neusta destination solutions"},"image":{"@id":"https:\/\/www.destination.one\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/neustadestinationsolutions","https:\/\/www.instagram.com\/neusta_ds\/"]},{"@type":"Person","@id":"https:\/\/www.destination.one\/blog\/#\/schema\/person\/b66c8b092c54a430ae1dd78e1bb05f54","name":"Sebastian Peine","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.destination.one\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.destination.one\/blog\/wp-content\/uploads\/2019\/10\/Sebastian_neu-150x150.jpg","contentUrl":"https:\/\/www.destination.one\/blog\/wp-content\/uploads\/2019\/10\/Sebastian_neu-150x150.jpg","caption":"Sebastian Peine"},"description":"Seit 2010 ist Sebastian Peine allgemein im Webbereich t\u00e4tig. Seinen Weg ins Agenturleben startete er dann 2 Jahre sp\u00e4ter. Ins Team von neusta destination solutions fand er 2017 und bereichert die Firma seitdem mit seinen Kenntnissen als Full-Strack-Developer mit Schwerpunkt auf TYPO3 und als Product Owner unseres CMS-Systems.","url":"https:\/\/www.destination.one\/blog\/author\/sebastian-peine\/"}]}},"_links":{"self":[{"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/posts\/22924"}],"collection":[{"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/comments?post=22924"}],"version-history":[{"count":23,"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/posts\/22924\/revisions"}],"predecessor-version":[{"id":22925,"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/posts\/22924\/revisions\/22925"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/media\/22933"}],"wp:attachment":[{"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/media?parent=22924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/categories?post=22924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/tags?post=22924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}