{"id":2579,"date":"2021-05-28T09:52:49","date_gmt":"2021-05-28T07:52:49","guid":{"rendered":"https:\/\/mainetcare.de\/?p=2579"},"modified":"2024-10-22T18:34:10","modified_gmt":"2024-10-22T16:34:10","slug":"wie-optimiert-man-die-ladezeit-von-mobilen-seiten","status":"publish","type":"post","link":"https:\/\/mainetcare.de\/website-pflege\/wie-optimiert-man-die-ladezeit-von-mobilen-seiten\/","title":{"rendered":"Wie optimiert man die Ladezeiten von mobilen Seiten?"},"content":{"rendered":"\n<p>Welche Ma\u00dfnahmen k\u00f6nnen Sie ergreifen, damit Ihre Website schneller l\u00e4dt? Ein \u00dcberblick:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Technisch:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dateigr\u00f6\u00dfe von Bildern dynamisch gestalten:<\/strong><br>Verwenden Sie so genannte Responsive Bilder (Responsive Images). Mit dieser Technik sagen Sie dem Browser: &#8220;Hey, wenn Du eine kleine Aufl\u00f6sung hast, dann nimm das kleine Bild, wenn Du einen gr\u00f6\u00dferen Bildschirm hast, dann nimm das gr\u00f6\u00dfere Bild&#8221;. Bei kleineren Bildschirmen kann man dann nat\u00fcrlich eine Grafik w\u00e4hlen, die auch wesentlich weniger Kilobyte hat, so dass die Website dann insgesamt schneller geladen wird auf dem Smartphone. Die Umsetzung sieht zun\u00e4chst etwas kryptisch aus im HTML, aber inzwischen gibt es viele Editoren, mit denen man verschiedene Bilder bequem \u00fcber eine Oberfl\u00e4che ausw\u00e4hlen und testen kann (auch der Page Builder in unserem <a href=\"https:\/\/mainetcare.de\/leistungen-und-preise\/rundumsorgt-die-versicherung-fuer-ihre-website\/\" data-type=\"page\" data-id=\"19311\">RundUmsorgt Paket<\/a> ). Alle technischen Details zum Thema Responsive Images finden Sie auf der Website <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\">https:\/\/developer.mozilla.org<\/a>.<\/li>\n\n\n\n<li><strong>Bildformat:<\/strong><br>Bei notwendigen gro\u00dfen Bilddateien lohnt sich einige Sorgfalt bei der Auswahl des Dateiformates sowie eines m\u00f6glichst hohen Kompressionsgrades unter Ber\u00fccksichtigung sichtbarer Qualit\u00e4tsverluste. Je nach Motiv lassen sich besonders kleine Dateien bei Verwendung des relativ neuen Formates <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Glossary\/webp\">WebP<\/a> erzeugen, das allerdings wiederum etwas Mehraufwand hinsichtlich der Einbindung in f\u00fcr alle Browser geeigneter Weise erfordert.<br>Richtiges Bildformat und Kompressionsgrad h\u00e4ngen immer vom Motiv ab und sind letztlich durch Versuch zu ermitteln. <a href=\"https:\/\/mainetcare.de\/website-pflege\/wie-gross-muessen-eigentlich-fotos-sein-die-man-am-rand-oder-in-einer-galerie-platziert\/\" data-type=\"post\" data-id=\"798\">In diesem Blog-Eintrag wurde hierzu schon n\u00e4her ausgef\u00fchrt.<\/a><\/li>\n\n\n\n<li><strong>Optimieren Sie die Reihenfolge, in der Ressourcen geladen und interpretiert werden:<\/strong><br>Oft werden im Kopfbereich von HTML-Seiten umfangreiche CSS- und Skriptdateien nachgeladen, die zu diesem Zeitpunkt noch gar nicht ben\u00f6tigt werden, aber das Rendern der Seite verz\u00f6gern (&#8220;render blocking resources&#8221;). Binden Sie derartige Ressourcen nach M\u00f6glichkeit weiter unten im HTML ein, lassen Sie Skripte verz\u00f6gert ausf\u00fchren (z.B. durch defer-Attribute), notieren Sie wichtige CSS-Vorgaben inline und laden den Rest sp\u00e4ter, so dass m\u00f6glichst schnell sichtbare Inhalte gerendert werden k\u00f6nnen. Selbst Webfonts k\u00f6nnen im Nachhinein geladen werden und dann die bereits gerenderten Schriften ersetzen. Hierzu dient die CSS-Angabe &#8220;font-display: swap;&#8221; f\u00fcr den entsprechenden font-face-Eintrag.<\/li>\n\n\n\n<li><strong>Komprimierte \u00dcbertragung:<\/strong><br>F\u00fcr alle textbasierten Ressourcen (HTML, CSS, Skripte) sollten Sie serverseitig eine komprimierte \u00dcbertragung einstellen. Hierzu wird bei Apache-Servern meist durch passende Eintr\u00e4ge in der .htaccess-Datei ein geeignetes Verfahren wie GZIP aktiviert. Wo stattdessen oder zus\u00e4tzlich andere Webserver-Software wie etwa NginX l\u00e4uft, sind an entsprechend anderer Stelle \u00e4hnliche Vorgaben n\u00f6tig.<\/li>\n\n\n\n<li><strong>Minified Stylesheets und Scriptdateien:<\/strong><br>Zus\u00e4tzlich k\u00f6nnen Sie HTML-, CSS- und Skriptdateien durch L\u00f6schung aller nur der menschlichen Lesbarkeit dienender Eigenschaften wie etwa Zeilenumbr\u00fcche zus\u00e4tzlich verkleinert (&#8220;minified&#8221;) bereitstellen.<\/li>\n\n\n\n<li><strong>Cache-Vorgaben setzen:<\/strong><br>F\u00fcr jede Art von Ressourcen, die beim Aufruf der Seite vom Server geladen werden (HTML, CSS, JScript, Grafiken), sollte die Cache-Lebensdauer definiert werden. Ohne Cache-Richtlinie laden Clients bei jedem Aufruf jede Ressource neu vom Server. Ist dagegen f\u00fcr meist gleichbleibende Ressourcen eine l\u00e4ngere Cache-Laufzeit wie etwa 30 Tage oder 1 Jahr angegeben, so bedient der Client sich zun\u00e4chst aus dem lokalen Cache, was unterm Strich Ladezeit spart. Die Cache-Vorgaben werden typischerweise durch Eintr\u00e4ge in der .htaccess-Datei von Apache-Webservern eingestellt. Auch hier sind bei abweichender Server-Software alternative Vorgehensweisen zu w\u00e4hlen.<\/li>\n\n\n\n<li><strong>Lazy-Loading:<\/strong><br>Lazy Loading bedeutet, dass Elemente erst dann geladen werden, wenn sie in den sichtbaren Bereich des Browsers gelangen, vorher nicht. Das spart nat\u00fcrlich massig, besonders auf Seiten, die viele Bilder wie z.B. Fotogalerien einbinden. Lazy Loading implementiert man zurzeit mit JavaScript (Ja, auch das erfordert wieder das Einbinden \ud83d\ude09 )<\/li>\n\n\n\n<li><strong>Zusammenfassung von Requests:<\/strong><br>Fassen Sie viele externe Anfragen (Requests) zusammen, z.B. fassen Sie viele einzelne Javascript Dateien, die einzeln eingebunden werden zu einer Datei zusammen. Das gleiche gilt f\u00fcr Stylesheets. Bei wenig Style-Angaben lohnt es sich eventuell, diese &#8220;inline&#8221;, d.h. ganz ohne externe Datei einzubinden. Dies sollte man aber im Einzelfall ausprobieren.<\/li>\n\n\n\n<li><strong>Sauberes HTML:<\/strong><br>Schreiben Sie gutes HTML, wenn die Website manuell erstellt wird. Sauberes, einfaches HTML sorgt daf\u00fcr, dass Ihre Seite schneller geladen werden kann. Nat\u00fcrlich muss man hier die Nutzbarkeit abw\u00e4gen, so haben z.B. Pagebuilder in WordPress immer einen gewissen Overhead, also ben\u00f6tigen mehr HTML-Elemente, damit sich die einzelnen Elemente besser steuern lassen. Auf der anderen Seite haben Sie Ihre Website in Stunden aufgebaut statt in Wochen und k\u00f6nnen sich die restliche Zeit mit der Performance besch\u00e4ftigen \ud83d\ude42<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Inhaltlich:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Streichen Sie die benutzten Bilder oder andere Medien auf der Startseite auf ein Minimum zusammen. Die Versuchung ist gro\u00df, so viel wie m\u00f6glich auf die Homepage zu packen. Damit \u00fcberfordern Sie aber nicht nur Ihre Leserschaft, Sie sorgen auch daf\u00fcr, dass jede Menge Kilobyte erst einmal vom Server zum Browser geladen werden m\u00fcssen. Es gilt nat\u00fcrlich: Je weniger Ballast, desto schneller.<\/li>\n\n\n\n<li>&#8220;Frontpage Hygiene&#8221;. Es ist normal und gut, dass w\u00e4hrend einer langen Lebenszeit einer Website immer mehr Bereiche hinzukommen. Aber oftmals sind Sie vielleicht auch hier versucht, neue Infos erstmal direkt auf Ihrer Startseite zu platzieren. Aber auch die alten Informationen sind ja wichtig, so dass sich im Laufe der Jahre mehr und mehr auf einer einzigen Seite befindet, die Website wird \u00fcberladen. Aufr\u00e4umen erfordert an dieser Stelle allerdings gute Kenntnisse \u00fcber das Besucherverhalten auf Ihrer Website, denn wenn Sie einfach radikal aufr\u00e4umen kann es passieren, dass gut laufende &#8220;Call To Actions&#8221; nicht mehr verf\u00fcgbar sind und Sie somit den Besucherstrom beeintr\u00e4chtigen.<\/li>\n\n\n\n<li>Vermeiden Sie zu viele &#8220;goldene Henkel&#8221; und Spielereien, gerade auf der Homepage. Ich wei\u00df, man will &#8220;beeindrucken&#8221;. Aber versuchen Sie, sich auf Ihre Essenz, auf das Wesentliche zu konzentrieren. Au\u00dferdem sind die neuesten technischen Spielereien im Web-Design von heute in sp\u00e4testens einem Jahr wieder hinf\u00e4llig und wirken dann altbacken.<\/li>\n\n\n\n<li>Wenn Sie ein Element statt als &lt;Img&gt;-Ressource genau so gut mit Text und CSS darstellen k\u00f6nnen, dann sollten Sie sich die M\u00fche machen, es lohnt sich.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Dieser Beitrag beinhaltet eine Auflistung mit Ma\u00dfnahmen, die Sie selbst durchf\u00fchren k\u00f6nnen, damit ihre Seite schneller l\u00e4dt. Eine schnelle Website ist ein weiterer Faktor, um eine bessere Platzierung bei Google zu bekommen. <\/p>\n","protected":false},"author":1,"featured_media":2288,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22],"tags":[59,86],"class_list":["post-2579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-pflege","tag-pagespeed","tag-website-technik"],"acf":[],"_links":{"self":[{"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/posts\/2579"}],"collection":[{"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/comments?post=2579"}],"version-history":[{"count":3,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/posts\/2579\/revisions"}],"predecessor-version":[{"id":28789,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/posts\/2579\/revisions\/28789"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/media\/2288"}],"wp:attachment":[{"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/media?parent=2579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/categories?post=2579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/tags?post=2579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}