2. • "Mobile Websites", Zertifizierung durch Google
• Dritter zertifizierbarer „Partners“-
Themenblock (neben Analytics, Adwords)
• Techniklastig, aber betrifft alle Sites und ist
ein Thema/beinhaltet KnowHow, ohne die
modernes SEO schwierig wird
• Ein zentrales Thema: Speed. Auch auf dem Desktop
hochrelevant.
Worum geht es?
3. • Speed → Rankings
• Speed → bessere UX
• Speed → funktioniert auch auf 3G
• Erster „Hoppla“-Effekt: Facebook macht 2G-
Tuesdays (ist eine Prüfungsfrage)
• Mobile und das Netz-Entwicklungsland
Deutschland ist ein Elefant im Raum
Wieso Speed?
4. 1. Warum mobile Websites wichtig sind
• Erfahren Sie, warum Geschwindigkeit und ein
nutzerfreundliches Design auf Mobilgeräten so wichtig sind.
→ einige Aha-Erlebnisse
2. Die Geschwindigkeit mobiler Websites verbessern
• Erfahren Sie, wie Sie die Geschwindigkeit Ihrer mobilen
Websites optimieren und testen können.
→ Tools sollten bekannt sein, aber jeder wird definitiv ein
paar coole Details finden, die er noch nicht kennt
4 Themenblöcke
5. 3. Eine effektive Nutzererfahrung auf Mobilgeräten schaffen
• Erfahren Sie mehr über die Nutzererfahrung auf und
Designprinzipien für mobile Websites
→ Usability is king!
4. Erweiterte Webtechnologien
• Hier erhalten Sie eine Einführung in erweiterte
Webtechnologien.
→ AMP, Progressive Web Apps, Google-Paymentsystem
4 Themenblöcke
6. • hochrelevantes Knowhow
• Insbesondere Verständnis von
Prinzipien/Techniken
• einen coolen Button
Ergo: man sollte es machen.
Was hat man davon?
VIELEN DANK!
7. • nur englisch
• keine Infos zu richtigen/falschen Antworten nach der
Prüfung
• Einiges an Basiswissen nur via Video (schlecht
nachzuschlagen)
Was sind die Haken?
8. Empfehlung: Prüfung an einem
Rechner machen, am zweiten vier
Browserfenster mit den vier
Modulen. Man hat die Zeit,
gelegentlich Zeug
nachzuschlagen.
Wenn man das machen will
Solides Basiswissen in Sachen Pagespeed
und Mobile sollte da sein, ansonsten...
- ...muss man es sich draufschaffen und
mehr Zeit einplanen
- Fürs Üben/Material durchgehen:
Chrome, unbedingt (wegen der Developer
Tools)
Tipps: Zertifizierung/Prüfung
Wenn man das bestehen will
- 65 Fragen wahr/falsch, multiple
Choice
- 90 Minuten Zeit
- 80% korrekt
11. - Die Position des Skripts im Dokument ist entscheidend.
- Die DOM-Erstellung wird unterbrochen, wenn ein Skript-Tag gefunden wird, und erst
nach Ausführung des Skripts fortgeführt.
- JavaScript kann das DOM und CSSOM abfragen und ändern.
- Die Ausführung von JavaScript erfolgt erst, wenn das CSSOM fertig ist.
→ Lösung: externe Ressource, async laden
→ Aber obacht: was macht das ganze Zeug eigentlich? Klassischer Fall notwendiger
guter Absprache mit Webdevelopment und Tracking.
...und Javascript
12. Learnings 2: Features in den
DevTools
• Genauer: CHROME DevTools
• Throttling – Sehr schöne Mobilesimulationen
• Recording
• Vorsicht: man kann sich unglaublich verzetteln
• Triviale Probleme: Cache aus! Recording auch wieder abschalten,
Mut zum X klicken (Subfenster zumachen), welchen Tab analysiere ich
grade? STRG-E, STRG-R ist euer Freund.
15. Learnings 3: Progressive Web
Apps, Service Worker
• PWA: für Mobile optimierte Seiten
mit „Quasi-App-Features“
• schnell
• Funktionieren (teils) offline (und
so auch auf schlechten
Verbindungen)
• Cachen eine „App-Shell“, laden
dynamisch Content nach
16. App vs. PWA
• Pro: einfacher und pflegeleichter
• Pro: Vorteile auch für die Seite (Speed, Zuverlässigkeit)
• Pro: Animiert zu aktuellen Webtechniken (HTTPS, Shell/Service Worker)
• Pro: keine App Stores
→ Testing: via Lighthouse (Chrome-Plugin)
• Contra: Apps sind leistungsfähiger, flexibler, nutzen mehr Smartphone-Möglichkeiten
• „Sowohl-als-auch“: Auch PWAs fragen nach dem Homescreen (App Manifest)
„Pseudoinstall“ → „Kannibalisierung der App“
17. Learnings, 4: Die Basics
brennen auf den Nägeln
• 2G-Tuesday, App Shells und schnelles Rendern above
the Fold:...wenn man dann ein 370kB-PNG sieht...
• ...oder nichtprogressive .jpgs, 7 lokale Webfonts,
unkomprimierte JS-Bibliotheken...
• ...oder 62 Punkte im Pagespeedtest...
→ man kriegt SO einen Hals.
→ man macht was. In meinem Fall: Kompression, WP-
Optimierung.
18. - Exam Study Guide: https://support.google.com/partners/answer/7327828
- Viel auch deutsch/teils anschaulicher:
https://developers.google.com/web/fundamentals/performance/
- PWA/Service Worker:
https://de.onpage.org/blog/mobile-optimierung-progressive-web-apps-vs-native-apps
https://developers.google.com/web/updates/2015/11/app-shell
- Chrome Lighthouse
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
- WP Speed Booster Pack (ganz okayes Plugin)
https://wordpress.org/plugins/speed-booster-pack/
- Für die Devs: https://developers.google.com/web/tools/
Links/Quellen
