Pagespeed, AJAX & BigPictures
Warum mein Content technisch optimiert sein muss!
Lorem Ipsum web.solutions GmbH
Ing. Karl Kowald, BSc
Lorem Ipsum web.solu/ons GmbH . Grieskai 10 . 8020 Graz . www.loremipsum.at Karl Kowald: Wer ist das?
Technische Informatik an der HTL in Graz
Betriebswirtschaftslehre an der KF-Uni Graz
Selbstständig seit 2002
Verheiratet, 3 Kinder
Lorem Ipsum web.solu/ons GmbH . Grieskai 10 . 8020 Graz . www.loremipsum.at Die Lorem Ipsum aus dem Herzen von Graz
Gegründet 2006 in Graz
11 Mitarbeiter
WordPress, MagentoCommerce, Online Marketing
Mehr als 800 Webprojekte
Lorem Ipsum web.solu/ons GmbH . Grieskai 10 . 8020 Graz . www.loremipsum.at Warum ist Geschwindigkeit im
Web wichtig?
Schnelligkeit ist ein essentieller
Bestandteil benutzerfreundlicher
Seiten (Hygienefaktor)
Involvement hoch halten
Customer Journey nicht
unterbrechen
Auch Suchmaschinen mögen
schnelle Ladezeiten
Was passiert bei
einem Seitenaufruf?
Request DNS Server Request Haupt-‐URL Request Ressourcen •  CSS, JS, Audio, Video, Images, SchriMen •  Blockierend vs Asynchron •  Interne vs externe Ressourcen Sonderfall Mobile
Mobile Endgeräte sind langsamer… also müssen wir schneller sein. 300 ms Verzögerung Es gelten die gleichen Regeln Quelle: youtube.com/watch?v=YV1nKLWoARQ
Wie schnell ist schnell genug?
Verzögerung Wahrnehmung 0 -‐ 100 ms UnmiUelbar 100 -‐ 300 ms Kleine Verzögerung 300 – 1000 ms Maschine arbeitet 1000+ ms Geis/ger Kontextwechsel 10.000+ ms Tä/gkeit wird aufgegeben Quelle: chimera.labs.oreilly.com/books/1230000000545/ch10.html#SPEED_PERFORMANCE_HUMAN_PERCEPTION?
Aber eine Sekunde ist verdammt wenig Zeit!
Nicht verzweifeln!
Was müssen wir wissen?
Nicht die gesamte Seite
muss in einer Sekunde
laden!
„Langsam“ besteht aus 2
Komponenten
- Server
- Browser
Langsam!? Wo drückt der
Schuh?
Ausliefern von Daten –
Server
Darstellen der Website –
Browser
Serversettings verleihen Flügel
- langsam war gestern
Mit GZIP Dateigrößen minimieren Miniﬁying und Combining von Dateien Serversei/ges Caching Bilder op/mieren Schnell klein gezippt Serverseitig komprimieren
Ein kleines Geschenk vom Server an den Browser… …mit GZIP Dateien lassen sich etliche KB pro Request sparen Machs unlesbar!
Minifying und Combining
HTML, CSS und Javascript Zeichen reduzieren & Dateien desselben Typs kombinieren Aufgepasst: zu restrik/v zu sein kann zu Fehlern führen! Bilder
Unkomprimierte Bilder brauchen große Datenmengen. Bildformate – JPEG, SVG, PNG... Bildgrößen – auf notwendige Größe und Qualität komprimieren lossless vs. lossy Server-Caching
Time to ﬁrst byte op/mieren Nicht jeder Besucher muss wieder den gesamten Inhalt neu ausgeliefert bekommen. -‐ Full Page Cache -‐ Teil Page Cache Externe Cachingserver vs im CMS integrierte Server-Caching II
Browser-‐Caching einstellen Was darf der Browser cachen? Wie lange wird welche Dateiart gecached? Browser: Zeig mir was du kannst!
Browserseitige Optimierung
Der kritische Rendering-Pfad
Nur das Wichtigste muss
schnell sein!
Ressourcenmanagement
Kritisch: der Rendering-Path
DOMContentReady HTML CSS JS Start render Quelle: Breaking News at 1000ms with Patrick Hamann, www.youtube.com/watch?v=dfweWyVScaI
Priorisierung von Inhalten –
nur das Wichtigste muss
schnell sein!
Was sieht der User zuerst? Above-‐the-‐fold Inhalte op/mieren Rendering-‐blockierende Elemente hinten anstellen Bremsen Sie Ihre Website
aus?
Externe Quellen wie… …Webfonts …Javascript Brauche ich das eigentlich? Die Bestandteile der Website hinterfragen! Schneller schnell – Quick Wins für die
Website
Erste Schritte zur
schnellen Website
HTTP-‐Requests reduzieren Gzip ak/vieren Caching nutzen Bilder forma/eren und Dateigrößen beachten Muss ich das jetzt alles machen? Erst mal testen!
Wie teste ich meine Website?
Google Webmaster Tools
Crawling Statistiken
Browser-Extensions
Firebug und Co.
Externe Tools
Webpagetest.org
Pingdom
Pagespeed Insights
Übersicht: Google Webmaster Tools
Den Browser nutzen – Firebug und Co.
Mobile & Desktop: Pagespeed Insights
Detailinfos: Webpagetest.org
Keine Angst!
Eine langsame Website hat nur noch nicht gelernt zu laufen.
Danke – noch Fragen?
Lorem Ipsum
web.solutions GmbH
Geschäftsführer
www.loremipsum.at
Grieskai 10
8020 Graz
Office:
E-Mail:
Ing. Karl Kowald, BSc
Geschäftsführer @ LI
Online-Marketing-Berater
+43 316 22 88 42
[email protected]
Lorem Ipsum web.solu/ons GmbH . Grieskai 10 . 8020 Graz . www.loremipsum.at