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

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

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

Other Decks in Technology

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

    View full-size slide

  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/

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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)


    ...
    name="description"
    content="...">





    © msg | Juni 2019 | Interaktive Websites mit Nuxt.js | Alexander Schwartz 8

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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/

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide