Aus der Erfahrung von vielen Dutzenden Projekten wissen wir, dass man zur Beschleunigung der Ladezeit zum Beispiel die Anzahl der HTTP Request minimieren sollte. Dies kann mit Massnahmen im Frontend durch das Kombinieren von Files oder das Zusammenfassen von Icons in CSS Sprites erreicht werden. Andere Massnahmen erfordern etwas mehr Wissen und Aufwand und so haben haben wir nachfolgend die grundlegendsten Massnahmen zur Beschleunigung der Ladezeit einer Webseite aufgelistet.
Grundsätzlich unterscheidet man 2 Arten von Caching: Browser- und Server-Caching.
Browser-Caching erfordert das korrekte Setzen des Fileheaders, damit Ressourcen wie Bilder, CSS- und JavaScript-Files bei wiederholten Besuchen aus dem Cache des Browsers geholt werden können.
Beim Server-Caching können dieselben Ressourcen auch statisch auf dem Server zwischengespeichert werden und bei wiederholten Aufrufen anstatt dynamisch statisch an den Browser geliefert werden.
Moderne Content Management Systeme wie Typo3, WordPress oder Drupal haben solche Cachingmechanismen bereits integriert oder können mit entsprechenden Plugins erweitert werden.
Links
Mit GZip- oder Deflate-Komponenten können Seiten und deren Ressourcen um ein Vielfaches komprimiert werden und viel Ladezeit eingespart werden. Deflate kann einfacher aufgesetzt werden, GZip ist aber effektiver und weiter verbreitet. Einfach darauf achten, dass nur text-basierte Ressourcen wie HTML, CSS, XML, JSON oder JavaScript komprimiert werden, Bilder und PDF sind bereits komprimierte Ressourcen.
Links
Diese Massnahme ist eine der Schlüsselfaktoren für eine schnelle Ladezeit. Hierzu gibt es verschiedene Möglichkeiten:
Links
Da das Laden von JavaScript-Files die Darstellung der Seite blockiert sollten diese an das Ende des HTML-Dokumentes gestellt werden. Die Stylesheets sollten vor dem abschliessenden
-Tag gestellt werden, um weisse Seiten im IE zu verhindern.Die örtliche Distanz des Webseitenbesuchers zum effektiven Standort des Servers, der die Webseite bereitstellt, hat auch einen Einfluss auf die Ladezeit einer Webseite. Mit sogenannten Content Delivery Networks (CDN) können Inhalte auf weltweit verstreuten Servern zur Verfügung gestellt werden und somit dem Webseitenbesucher die Adresse mit den wenigsten Netzwerk Hops ausgeliefert werden.
Links
Wollen Sie weitere Massnahmen zur Beschleunigung der Ladezeit Ihrer Webseite erfahren? Dann kontaktieren Sie uns unverbindlich unter info@design42.ch. Wir finden bestimmt eine Handvoll von Massnahmen um Ihre bestehende Seite noch schneller zu machen!
Das Surfverhalten der heutigen Generation ist immer stärker auf Mobile ausgerichtet. Es gibt eine immer grössere Anzahl von Endgeräten mit verschiedenen Anzeigegrössen und Webdesigner und -programmierer müssen heutzutage dem Umstand Rechnung tragen, dass ein Design nicht mehr ausreicht um alle Kombinationen von Endgeräten und Screens zu bedienen.
Responsives Webdesign (RWD) ist die Technik, mit der ein Grossteil der Bedürnisse abgedeckt werden kann. Einer der Nachteile ist aber, dass dabei trotz eines abgespeckten Designs nicht weniger Daten geladen werden müssen, sondern genau gleich viel wie bei einer Darstellung auf Desktop.
Aber trotzdem überwiegen die Vorteile von Responsivem Webdesign, und zwar:
Reichweite
Bei gewissen Seiten kommen bereits mehr als 50% der Besucher von mobilen Geräten. Anstatt zwei, drei oder noch mehr verschiedene Codebases verwalten zu müssen können mit RWD alle User erreicht werden.
Vereinheitlichtes Design
RWD ist eine Vereinheitlichung des Designs einer Marke im Web. Benutzer kommen viel eher zurück und werden zu Kunden, wenn sie eine vereinheitlichte User Experience sowohl auf dem Desktop, dem Tablet und dem Smartphone haben.
Zentrale Statistiken
Da alle Geräte auf die gleiche Seite zugreifen muss nur ein Tracking aufgesetzt werden wodurch natürlich die Wartung und Weiterentwicklung auch in diesem Bereich vereinfacht wird.
Auffindbarkeit
Durch die Vereinheitlichung des Codes wird auch der Aufwand für Suchmaschinenoptimierungen (SEO) optimiert. Google und Bing gehen sogar soweit, dass sie in ihren Suchresultaten Seiten mit Responsivem Design sogar bevorzugen.
Zeit- und Kostenersparnis
Schlussendlich werden natürlich durch das vereinfachte Handling auf der Entwicklungsseite Ressourcen, Zeit und vor allem Kosten gespart.
HTML5
Responsives Webdesign beruht auf HTML5 und dieses bietet unter anderem eine grosse Anzahl von Funktionalitäten, die spezifisch auf mobile Endgeräte ausgerichtet sind wie Geolocating oder Offline Modus. Googles EMail-Applikation bietet jetzt schon dank HTML5 einen Offlinemodus an, so dass Mails, Tasks und Kalendereinträge auch ohne eine Internetverbindung bearbeitet werden können.
Parallax Scrolling steht für die Technik mit der Bilder auf verschiedenen Ebenen beim Scrollen der Webseite verschieden schnell bewegt oder animiert werden wobei eine perspektivische Illusion entsteht.
Im folgenden Guide werden die besten Webseiten gezeigt, die auf Parallax Scrolling aufbauen. Aufgelistet werden Tips, Techniken, Trends, Plugins und viele Beispiele für die eigene Inspiration: http://www.vandelaydesign.com/parallax-scrolling-best-practices-examples-and-tutorials/
Eine weitere Sammlung mit 100 weiteren guten Beispielen ist zu finden unter http://mag.splashnology.com/article/hot-web-design-trends-parallax-scrolling-effects-in-100-examples/1263/
Bei der Frage nach dem besten Approach zur Umsetzung einer mobilen App kristalliert sich immer mehr der Ansatz der hybriden Umsetzung heraus. Gemeint ist damit, dass mit HTML5, CSS3 und JavaScript das native User Interface des aktuellen Betriebssystems nachgebildet wird und so dem User das Gefühl gegeben wird, dass es sich hierbei um eine native App handelt.
Die Vorteile sind eine einheitliche Codebase, sprich es muss nur einmal für alle Plattformen programmiert werden anstatt separat für iOs, Android, Windows und andere. Mittlerweile können dank immer raffinierteren Techniken und Möglichkeiten die gerätespezifisch Hardware wie Kamera oder Sensor angesprochen und eingesetzt werden.
Ein ausführlicher Artikel hierzu ist zu finden bei Smashing Magazine.
Einige gute Tips für die Gestaltung einer perfekten Landing Page:
Quelle: https://blog.kissmetrics.com/
