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 Minifiying 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 first 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
© Copyright 2024