SlideShare ist ein Scribd-Unternehmen logo
1 von 18
Downloaden Sie, um offline zu lesen
Google Mobile Websites-
Zertifizierung
...kann man machen.
• "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?
• 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?
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
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
• hochrelevantes Knowhow
• Insbesondere Verständnis von
Prinzipien/Techniken
• einen coolen Button
Ergo: man sollte es machen.
Was hat man davon?
VIELEN DANK!
• nur englisch
• keine Infos zu richtigen/falschen Antworten nach der
Prüfung
• Einiges an Basiswissen nur via Video (schlecht
nachzuschlagen)
Was sind die Haken?
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
Learnings 1: DOM/CSSOM,
Critical Rendering Path
Learnings 1: DOM/CSSOM,
Critical Rendering Path
- 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
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.
Learnings 2: Features in den
Devtools
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
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“
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.
- 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

Weitere ähnliche Inhalte

Ähnlich wie Google Partners, Mobile Websites-Zertifizierung

Stay calm & keep shipping - iOS DevCon 2013
Stay calm & keep shipping - iOS DevCon 2013Stay calm & keep shipping - iOS DevCon 2013
Stay calm & keep shipping - iOS DevCon 2013superflomo
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Koombea
 
Rails und Scrum in großen Projekten
Rails und Scrum in großen ProjektenRails und Scrum in großen Projekten
Rails und Scrum in großen ProjektenPhillip Oertel
 
Critical Rendering Path SEO Campixx 2015
Critical Rendering Path SEO Campixx 2015Critical Rendering Path SEO Campixx 2015
Critical Rendering Path SEO Campixx 2015Daniel Gerlach
 
German Web Usability Training
German Web Usability TrainingGerman Web Usability Training
German Web Usability TrainingPaulina
 
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Bokowsky + Laymann GmbH
 
AG Softwaretechnik
AG SoftwaretechnikAG Softwaretechnik
AG SoftwaretechnikRoland M
 
JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerDennis Wilson
 
iOS Testautomation bei mobile.de
iOS Testautomation bei mobile.deiOS Testautomation bei mobile.de
iOS Testautomation bei mobile.deHolger Hammel
 
SEODAY2016 - 10 SEO Coder Hooks
SEODAY2016 - 10 SEO Coder HooksSEODAY2016 - 10 SEO Coder Hooks
SEODAY2016 - 10 SEO Coder HooksConstantin
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Bastian Grimm
 
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozSmartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozJohn Muñoz
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsUlrich Schmidt
 
10 Fragen vor Testautomatisierung
10 Fragen vor Testautomatisierung10 Fragen vor Testautomatisierung
10 Fragen vor TestautomatisierungClaudia Baur
 
Software-Tests in PHP-Anwendungen
Software-Tests in PHP-AnwendungenSoftware-Tests in PHP-Anwendungen
Software-Tests in PHP-AnwendungenGjero Krsteski
 
Continuous Integration / Deployment mit Jenkins CI
Continuous Integration / Deployment mit Jenkins CI Continuous Integration / Deployment mit Jenkins CI
Continuous Integration / Deployment mit Jenkins CI Florian Bosselmann
 

Ähnlich wie Google Partners, Mobile Websites-Zertifizierung (20)

Stay calm & keep shipping - iOS DevCon 2013
Stay calm & keep shipping - iOS DevCon 2013Stay calm & keep shipping - iOS DevCon 2013
Stay calm & keep shipping - iOS DevCon 2013
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
 
Rails und Scrum in großen Projekten
Rails und Scrum in großen ProjektenRails und Scrum in großen Projekten
Rails und Scrum in großen Projekten
 
Critical Rendering Path SEO Campixx 2015
Critical Rendering Path SEO Campixx 2015Critical Rendering Path SEO Campixx 2015
Critical Rendering Path SEO Campixx 2015
 
German Web Usability Training
German Web Usability TrainingGerman Web Usability Training
German Web Usability Training
 
Warum gerade TYPO3?
Warum gerade TYPO3?Warum gerade TYPO3?
Warum gerade TYPO3?
 
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
 
AMP: Inhaltliche und technische Vor- und Nachteile der neuen Google-Strategie
AMP: Inhaltliche und technische Vor- und Nachteile der neuen Google-StrategieAMP: Inhaltliche und technische Vor- und Nachteile der neuen Google-Strategie
AMP: Inhaltliche und technische Vor- und Nachteile der neuen Google-Strategie
 
AG Softwaretechnik
AG SoftwaretechnikAG Softwaretechnik
AG Softwaretechnik
 
JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
 
iOS Testautomation bei mobile.de
iOS Testautomation bei mobile.deiOS Testautomation bei mobile.de
iOS Testautomation bei mobile.de
 
SEODAY2016 - 10 SEO Coder Hooks
SEODAY2016 - 10 SEO Coder HooksSEODAY2016 - 10 SEO Coder Hooks
SEODAY2016 - 10 SEO Coder Hooks
 
XPages From Zero To Hero
XPages From Zero To HeroXPages From Zero To Hero
XPages From Zero To Hero
 
Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015Mehr Pagespeed geht nicht - SEOkomm 2015
Mehr Pagespeed geht nicht - SEOkomm 2015
 
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozSmartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
10 Fragen vor Testautomatisierung
10 Fragen vor Testautomatisierung10 Fragen vor Testautomatisierung
10 Fragen vor Testautomatisierung
 
Software-Tests in PHP-Anwendungen
Software-Tests in PHP-AnwendungenSoftware-Tests in PHP-Anwendungen
Software-Tests in PHP-Anwendungen
 
Continuous Integration / Deployment mit Jenkins CI
Continuous Integration / Deployment mit Jenkins CI Continuous Integration / Deployment mit Jenkins CI
Continuous Integration / Deployment mit Jenkins CI
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 

Google Partners, Mobile Websites-Zertifizierung

  • 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.
  • 13. Learnings 2: Features in den Devtools
  • 14.
  • 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