Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.js: Für Geschwindigkeit, Suchmaschinen und...

Alexander Schwartz
June 27, 2019
Technology
0
280

Nuxt.js: Für Geschwindigkeit, Suchmaschinen und Social Media

Nuxt.js ermöglicht universelle JavaScript-Anwendungen im Browser: Serverseitig gerenderte Seiten zeigen Nutzerinnen und Nutzern Informationen direkt an. Anschließend wandelt sich die Seite nahtlos zur Single Page App, die hohe Interaktivität bietet.

Alexander zeigt, wie Du eine solche Seite erstellen, über ein Content Delivery Network ausliefern, für Suchmaschinen und Social-Media optimieren und auf einen hohen Google Lighthouse Score abstimmen kannst. Er zeigt die Entwicklung mit Nuxt.js, wie sich die Nuxt.js-eigenen Konfigurationen optimieren lassen und wie sich Nuxt.js mit Nuxt.js- und bestehenden webpack-Plug-ins erweitern lässt.

Alexander Schwartz

June 27, 2019
Tweet

More Decks by Alexander Schwartz

See All by Alexander Schwartz
Online-Dokumentation, die hilft: Strukturen, Prozesse, Tools
ahus1
0
98
Evolving real-world AsciiDoc into a specification and how it will help the ecosystem
ahus1
1
85
What’s new in Keycloak, the open source IAM?
ahus1
1
200
Running a highly available Identity and Access Management with Keycloak
ahus1
0
120
Automatisiere deine Prozesse mit GitHub Actions!
ahus1
0
340
Highly available Identity and Access Management with multi-site Keycloak deployments in the cloud
ahus1
0
8.3k
Documentation for users with AsciiDoc and Antora
ahus1
0
510
What's next in Keycloak, the Open Source IAM? (KC24)
ahus1
0
400
Add user self-management, brokerage and federation to your infrastructure with Keycloak
ahus1
0
82

Other Decks in Technology

See All in Technology
NilAway による静的解析で「10 億ドル」を節約する #kyotogo / Kyoto Go 56th
ytaka23
3
370
Postman と API セキュリティ / Postman and API Security
yokawasa
0
200
社内イベント管理システムを1週間でAKSからACAに移行した話し
shingo_kawahara
0
180
re:Invent 2024 Innovation Talks(NET201)で語られた大切なこと
shotashiratori
0
300
Oracle Cloudの生成AIサービスって実際どこまで使えるの？ エンジニア目線で試してみた
minorun365
PRO
4
270
Storage Browser for Amazon S3
miu_crescent
1
130
kargoの魅力について伝える
magisystem0408
0
200
ハイテク休憩
sat
PRO
2
120
re:Invent をおうちで楽しんでみた ～CloudWatch のオブザーバビリティ機能がスゴい！/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
120
Microsoft Azure全冠になってみた ~アレを使い倒した者が試験を制す！？~/Obtained all Microsoft Azure certifications Those who use "that" to the full will win the exam! ?
yuj1osm
1
110
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
23
11k
大幅アップデートされたRagas v0.2をキャッチアップ
os1ma
2
520

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Scaling GitHub
holman
458
140k
Building Your Own Lightsaber
phodgson
103
6.1k
Visualization
eitanlees
146
15k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Documentation Writing (for coders)
carmenintech
66
4.5k
Code Review Best Practice
trishagee
65
17k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k

Transcript

  1. .consulting .solutions .partnership Interaktive Websites mit Nuxt.js Für Geschwindigkeit, Suchmaschinen

    und Social Media enterJS Darmstadt, 2019-06-27 Alexander Schwartz, Principal IT Consultant

  2. Vue.js Frankfurt Vue.js Frankfurt Meetup © msg | Juni 2019

    | Interaktive Websites mit Nuxt.js | Alexander Schwartz 2 Wer? Community für alle, die sich für Vue.js interessieren. Nimm an einer unserer Veranstaltungen teil, um unsere Community kennenzulernen! Wann? 2. Juli: VuePress: 5 Ways to Customize your Site 26. September: Mobile Vue.js – From PWA to Native Infos? Twitter: @vuejsfrankfurt Website: https://www.vuejsfrankfurt.de/

  3. Interaktive Websites mit Nuxt.js Die Welt der Single Page Applications

    1 Universal Web Apps als Alternative 2 How to Nuxt.js 3 Zusammenfassung 4 © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 3

  4. Die Welt der Single Page Applications Ganz Gallien nutzt Single

    Page Applications • HTML laden • CSS laden • Ruckeln • JavaScript nachladen und starten • Seite mit JavaScript und Daten aus REST-Calls füllen • Fertig! © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 4

  5. Geschwindigkeit bedeutet Kundenzufriedenheit und Umsatz Die Welt der Single Page

    Applications https://www.nngroup.com/articles/the-need-for-speed/ https://sites.google.com/site/glinden/ StanfordDataMining.2006-11-29.ppt https://www.nngroup.com/articles/response-times-3-important-limits/ https://www.perftesting.co.uk/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/2012/02/28/ Wahrnehmung von Antwortzeit • Sofort: ein Wimpernschlag • Gedanken schweifen ab: ein Herzschlag • Maximale Aufmerksamkeitsspanne: Telefon klingelt 3x Kosten der Wartezeit • 0,5 s zusätzliche Antwortzeit bedeuten für Google 20% weniger Traffic (2006) • 0,1 s zusätzliche Antwortzeit bedeuten für Amazon 1% weniger Umsatz (2006) 0,1 s 1,0 s 10 s © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 5

  6. Die Welt der Single Page Applications Geschwindigkeit Ziel: • Ein

    Herzschlag Zeit für: • 1 HTTP Aufruf Single Page Application: • > 10 Aufrufe plus Grafiken €€€ © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 6

  7. Universal Web Apps als Alternative 1. https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive Metriken – was

    wir messen wollen • Handshake Auflösung Hostname via DNS, TCP-Connect, TLS-Aufbau • Time To First Byte (TTF) Antwort des Servers auf die erste Anfrage trifft ein • First Meaningful Paint (FMP) User sieht die Inhalte der Seite • Time To Interactive (TTI) Nutzer kann Daten eingeben und Elemente ein-/ausklappen • First CPU Idle Alle Interaktionselemente geladen © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 7

  8. Die Welt der Single Page Applications Suchmaschinen Benötigen: • Title

    • Description • Content • Structured Data Single Page Application: • Ein Set von Metadaten pro SPA, keine Metadaten pro Route • Kein Content im HTML • Wenn die SPA Content und Metadaten setzt, kann nur ein JavaScript-fähiger SEO-Bot diese auswerten (z. B. Google) <html> <head> <title> ... </title> <meta name="description" content="..."> </head> <body> <!-- content --> </body> </html> © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 8

  9. Die Welt der Single Page Applications 1. https://cards-dev.twitter.com/validator Social Media

    Benötigen: • Meta-Elemente • Referenzierte Grafik Single Page Application: • Ein Set von Meta-Elementen pro SPA, keine Meta-Element pro Route © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 9

  10. Interaktive Websites mit Nuxt.js Die Welt der Single Page Applications

    1 Universal Web Apps als Alternative 2 How to Nuxt.js 3 Fazit 4 © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 10

  11. Universal Web Apps als Alternative Universal Web Apps für schnelle

    Websites • Seite auf dem Server vorberechnen, damit sie schnell ausgeliefert wird • CSS ist auf die notwendigen Klassen reduziert • HTML, CSS und JavaScript sind minifiziert und komprimiert • Grafiken sind passend skaliert, ein Preview ist eingebettet • Seite enthält CSS und HTML • Muss für den FMP keine Daten nachladen • JavaScript wird erst am Ende der Seite gestartet • Seite wird nahtlos zur Single Page App (SPA) CSS JS preload HTML JS defer © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 11

  12. Interaktive Websites mit Nuxt.js Die Welt der Single Page Applications

    1 Universal Web Apps als Alternative 2 How to Nuxt.js 3 Fazit 4 © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 13

  13. How to Nuxt.js Nuxt.js • Framework zum Erstellen von 

    Single Page Apps (SPA) Node-Server liefert Single Page App an den Browser  Universal Web Applications Node-Server generiert HTML-Seite, die später im Browser zur SPA rehydriert wird  Generierte Seiten Seiten werden zum Build-Zeitpunkt generiert, statisch via Content Delivery Network ausgeliefert und im Browser zur SPA • Basiert auf dem JavaScript-Framework Vue.js • Open-Source Lizenz (MIT) Homepage: https://nuxtjs.org/ © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 14

  14. How to Nuxt.js Konzepte Nuxt.js • Build-Prozess minifiziert, komprimiert und

    reduziert HTML, JavaScript und CSS • Seiten auf dem Server vorberechnen und ausliefern (TTF) • Seiten enthalten als HTML gerenderte Inhalte und CSS (FMP) • Anschließend JavaScript nachladen und Single-Page-App starten (TTI) • Navigationspunkte werden vorgeladen, wenn sie in den sichtbaren Bereich scrollen Ergänzend über zusätzliche Frameworks: • Grafiken werden skaliert, Vorschau-Bilder berechnet • CSS, welches responsive Größe der Grafiken mitgibt WebPack PurgeCSS PostCSS … responsive-loader sharp bulma jimp … © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 15

  15. How to Nuxt.js Development Mode • Code ist eingecheckt •

    Seiten und Komponenten werden im Editor bearbeitet • Live-Preview von Änderungen DEMO © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 16

  16. How to Nuxt.js Optimierung der initialen Ladezeit und des Lighthouse

    Scores Wiederverwenden von erprobten webpack- und postcss-Modulen: • Minifizieren von SVGs mit image-webpack-loader/imagemin • Skalieren/minifizieren von JPEG/PNG via responsive-loader/sharp • Image-Vorschau in Seite einbetten • Ungenutztes CSS via purgecss im postcss-Schritt entfernen DEMO © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 17

  17. How to Nuxt.js Meta-Informationen für Suchmaschinen und Social Media Nuxt-Standard-APIs

    und -Plugins: • Sitemap einbinden • Meta-Information mit vue-meta • Strukturierte Daten über JSON-LD einbinden • Generieren von statischen Seiten für ein Content Delivery Network DEMO © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 18

  18. Interaktive Websites mit Nuxt.js Die Welt der Single Page Applications

    1 Universal Web Apps als Alternative 2 How to Nuxt.js 3 Fazit 4 © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 19

  19. Fazit Nuxt für schnelle Websites • Schnelle Websites benötigen nur

    einen HTTP Aufruf für den First Meaningful Paint • Antwortzeiten unter einer Sekunde sind auch mobil möglich • Nuxt bietet eine Basis für schnelle Websites, indem es die abgerufene Seite serverseitig rendert • Meta-Informationen für Suchmaschinen und Social-Media können mitgegeben werden • Vorhandene Funktionalität und Know-How rund um webpack/postcss-Plugins kann genutzt werden • Zur Entwicklungszeit erlaubt Nuxt Live-Reload bei Änderungen • Für Produktion können Inhalte statisch generiert werden @ahus1de © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 20

  20. Vue.js Frankfurt Vue.js Frankfurt Meetup © msg | Juni 2019

    | Interaktive Websites mit Nuxt.js | Alexander Schwartz 21 Wer? Community für alle, die sich für Vue.js interessieren. Nimm an einer unserer Veranstaltungen teil, um unsere Community kennenzulernen! Wann? 2. Juli: VuePress: 5 Ways to Customize your Site 26. September: Mobile Vue.js – From PWA to Native Infos? Twitter: @vuejsfrankfurt Website: https://www.vuejsfrankfurt.de/

  21. Links Nuxt.js https://nuxtjs.org/ Hosting simplified by a CDN https://www.ahus1.de/post/cdn-for-simplicity Nuxt:

    Making your website fast https://www.ahus1.de/post/nuxt-optimize-for-speed @ahus1de © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 22

  22. .consulting .solutions .partnership Alexander Schwartz Principal IT Consultant +49 171

    5625767 [email protected] msg systems ag Mergenthalerallee 73-75, 65760 Eschborn Deutschland www.msg.group