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

Ladezeitenoptimierung für SEOs: PageSpeed Extrem mit Kai Spriestersbach

B2c7b7ea3b1d7cf72fa79c5bc07390fc?s=47 Kai Spriestersbach
December 09, 2020
Programming
1
51

Ladezeitenoptimierung für SEOs: PageSpeed Extrem mit Kai Spriestersbach

In diesem Online-Vortrag erkläre ich kurz die wichtigsten Basics in Sachen Ladezeitenoptimierung und gehe dann auf ein paar sehr effektive Tricks ein, die massiv bei der Verbesserung der PageSpeed-Werte helfen. Insbesondere die TTFB, sowie das Rendering werden durch die gezeigten Techniken drastisch verbessert.

Hier geht es zu meinem vollständigen Online-Seminar:
https://www.search-one.de/online-seminar-pagespeed/

B2c7b7ea3b1d7cf72fa79c5bc07390fc?s=128

Kai Spriestersbach

December 09, 2020
Tweet

More Decks by Kai Spriestersbach

See All by Kai Spriestersbach
B2c7b7ea3b1d7cf72fa79c5bc07390fc?s=48 seokai
0
97
B2c7b7ea3b1d7cf72fa79c5bc07390fc?s=48 seokai
2
250
B2c7b7ea3b1d7cf72fa79c5bc07390fc?s=48 seokai
0
18
B2c7b7ea3b1d7cf72fa79c5bc07390fc?s=48 seokai
0
35
B2c7b7ea3b1d7cf72fa79c5bc07390fc?s=48 seokai
0
24
B2c7b7ea3b1d7cf72fa79c5bc07390fc?s=48 seokai
0
290

Other Decks in Programming

See All in Programming
F21d69109b1c03921abf7d12f0fb6654?s=48 dscs
0
110
9adb9a67e73d93190e1d07d077a9aae7?s=48 ykkc
4
340
249b3122eee454c0a818bfe7851418e4?s=48 fromkk
0
600
Af64bc38c0ffcfcabdf430759ee491ce?s=48 lovee
1
410
0b8ad408b31cb9d5cff2828086c65d58?s=48 temoki
1
180
E586b46d5b09f8109beb66bb146e4f20?s=48 tamappe
2
200
8e8410eb785755ae2cb485f85dbab6e8?s=48 hiroga
0
140
D07d36d7d3263da869c7d030ba4a64a6?s=48 y__mattu
1
440
E505897a79eede1a676f92740261e8f8?s=48 kubode
1
570
27c093d0834208f4712faaaec38c2c5c?s=48 ramalho
3
650
9a805d1d3fb2ca4943cb240dee106d5a?s=48 kawakin
1
150
9e68acadfe81c2634fae5b8c891f6814?s=48 tamaudon
1
240

Featured

See All Featured
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
654
120k
78b475797a14c84799063c7cd073962f?s=48 holman
464
280k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
6
740
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
43k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
72
3.9k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
91
3.6k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
38
1.7k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
77
270k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
400k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
56k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
60
7.2k

Transcript

  1. Pagespeed Extreme Kai Spriestersbach

  2. Research & Development bei der eology GmbH • B.Sc. E-Commerce

    • Mediengestalter IHK • Lehrbeauftragter an der FHWS • Inhaber von SEARCH ONE • Aus- und Weiterbildung von Mitarbeitern • Speaker auf SMX, SEOkomm, SEO-Day, OMK, OMKB, etc. Kai Spriestersbach

  3. SEO aus Leidenschaft • Online seit 1996 • Web-Design seit

    2001 • Web-Entwicklung 2004 • SEO seit 2008 • Selbstständig seit 2012 Kai Spriestersbach Matt Cutts Head Of Web Spam, Google Sie könnten mich kennen von

  4. Neuer Rankingfaktor Page Experience

  5. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

  6. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

  7. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

  8. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

  9. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

  10. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

  11. Mehr unter: https://kai.im/pagespeed Mein Online-Seminar 
 Web Vitals & PageSpeed

    +

  12. PageSpeed Basics

  13. PageSpeed Basics Daran führt kein Weg vorbei • HTTP/2 (Test:

    https://http2.pro/) • Cache-Control & ETags • GZIP, besser noch brotli • Bilder • Responsive Images • Nur in dargestellter Größe einbetten • Lazy Load für Bilder & Videos • Kompression via JPG + PNG + WebP (+ Avif)

  14. TTFB Optimierung

  15. TTFB = Time To First Byte

  16. Deshalb ist die TTFB so wichtig! https://www.webpagetest.org/

  17. Deshalb ist die TTFB so wichtig! } GEFÜHLT PASSIERT NIX!

    https://www.webpagetest.org/

  18. Was passiert vor dem 1. Byte? • Domain wird via

    DNS aufgelöst • TCP-Verbindung wird aufgebaut
 SYN, SYN-ACK, ACK • TLS-Handshake für SSL-Verbindung • Request wird an den Server gesendet
 TTFB https://www.mozilla.org/de/firefox/browsers/compare/ https://www.cloudflare.com/learning/dns/what-is-dns/ https://www.cloudflare.com/de-de/learning/ssl/what-happens-in-a-tls-handshake/ TCP ~50ms TLS ~110ms DNS ~50ms

  19. Puh… wir warten immer noch auf das erste Byte! •

    HTTP Request • CGI-Request • PHP-Script laden • PHP ausführen • Datenbank abfragen • HTML rendern • HTTP Response mit HTML senden TTFB GET / HTTP/1.1 Host: www.example.com Request / index.php SELECT column1, colum FROM table_name; Built HTML HTTP/1.1 200 OK Date: Mon, 27 Jul 2020 12:28:53 GMT Server: NGINX Content-Length: 88 Content-Type: text/html Connection: Closed <html> <body> <h1>Hello, World!</h1> </body> </html>

  20. Puh… wir warten immer noch auf das erste Byte! •

    HTTP Request • CGI-Request • PHP-Script laden • PHP ausführen • Datenbank abfragen • HTML rendern • HTTP Response mit HTML senden TTFB GET / HTTP/1.1 Host: www.example.com Request / index.php SELECT column1, colum FROM table_name; Built HTML HTTP/1.1 200 OK Date: Mon, 27 Jul 2020 12:28:53 GMT Server: NGINX Content-Length: 88 Content-Type: text/html Connection: Closed <html> <body> <h1>Hello, World!</h1> </body> </html>

  21. 1. Full Page Cache aktivieren • Fertig generiertes HTML wird

    im RAM vorgehalten • Alle unbekannten Nutzer erhalten statisches HTML • Cookie-/Pfadbasierte Ausnahmen • PHP, HDD & DB werden nicht benötigt! TTFB Optimierung Request / Cached HTML ..zZz RAM

  22. 2. Opcode, Object In-Memory Cache + NVMe nutzen • Schnellste

    SSDs (NVMe) statt drehender Platten • Bereits vorprozessierter PHP-Code wird gespeichert • Häufig benutze Objekte/Fragmente werden persistent gespeichert • Häufige Datenbankabfragen werden im RAM gehalten • Beschleunigt selbst dynamische Webseiten! TTFB Optimierung

  23. 3. CDN verwenden • Schnellster DNS + AnyCast IP •

    Hosting in weltweiten Datencentern = Nah am Kunden • Argo Routing = Schnellster Weg • Seiten liegen bereits fertig gerendert im CDN • On-The-Fly Content Optimierung möglich (Bilder, Kompression, etc.) TTFB Optimierung

  24. Rendering verbessern

  25. Rendering „sichtbar“ machen https://developers.google.com/web/fundamentals/performance/critical-rendering-path?hl=de Progressives Rendering Unoptimiertes Rendering

  26. Der kritische Rendering-Pfad https://bitsofco.de/understanding-the-critical-rendering-path/

  27. Performance in den Chrome Developer Tools

  28. None

  29. Non-blocking CSS Inline CSS im <head> Media-Attribut

  30. Critical CSS

  31. Critical CSS Tool https://criticalcss.com/

  32. Critical CSS Tool https://criticalcss.com/

  33. Third-Party Tags reduzieren https://www.webpagetest.org/video/view.php?id=190919_Di27491eeccb968f96eda867ddabf2ff3c8c24ed3d

  34. Third-Party Tags reduzieren https://www.webpagetest.org/video/view.php?id=190919_Di27491eeccb968f96eda867ddabf2ff3c8c24ed3d

  35. Async & Deferred JavaScript

  36. None
  37. None
  38. None
  39. None

  40. >80% des JS ist nicht aufschiebbar! https://w3techs.com/technologies/overview/javascript_library https://trends.builtwith.com/javascript

  41. Alles hört auf „DOM ready“

  42. None

  43. Wahrgenommene Ladezeit

  44. Skeleton Screens https://css-tricks.com/building-skeleton-screens-css-custom-properties/

  45. Abstrakte Darstellung genügt! https://css-tricks.com/building-skeleton-screens-css-custom-properties/

  46. None

  47. Web Fonts

  48. Font Rendering verbessern https://fonts.google.com/specimen/Roboto

  49. So bitte nicht! CSS-Datei herunterladen CSS prozessieren DNS Auflösung TCP-Verbindungsaufbau

    SSL-Handshake WebFont herunterladen WebFont rendern DNS Auflösung TCP-Verbindungsaufbau SSL-Handshake Text anzeigen HTML geladen

  50. Das können wir uns sparen CSS-Datei herunterladen CSS prozessieren DNS

    Auflösung TCP-Verbindungsaufbau SSL-Handshake WebFont herunterladen WebFont rendern DNS Auflösung TCP-Verbindungsaufbau SSL-Handshake Text anzeigen HTML geladen

  51. Also besser so… CSS-Datei herunterladen CSS prozessieren WebFont herunterladen WebFont

    rendern Text anzeigen HTML geladen

  52. Also besser so… CSS-Datei herunterladen CSS prozessieren WebFont herunterladen WebFont

    rendern Text anzeigen HTML geladen https://web.dev/font-display/

  53. Also besser so… CSS-Datei herunterladen CSS prozessieren WebFont herunterladen WebFont

    rendern Text anzeigen HTML geladen

  54. Also besser so… CSS-Datei herunterladen CSS prozessieren WebFont herunterladen WebFont

    rendern Text anzeigen HTML geladen

  55. Smart Font Reducing

  56. https://transfonter.org/ Danke an Daniel Abromeit @der_abro

  57. https://github.com/hakatashi/unicode-map

  58. None
  59. None

  60. Was bringt Smart Font Reducing? 4 DNS Requests
 30 HTTP-Requests


    300 KB Daten via Google Fonts Selfhosted reduced Font 0 DNS Requests
 1 HTTP-Requests
 20 KB Daten

  61. Smart Preloading

  62. None
  63. None
  64. None
  65. None

  66. HOME

  67. HOME

  68. None

  69. Mouse Over, ARTICLE HOME

  70. Universal Hover-Preloader /** * Copyright (c) 2020 Google Inc *

    * Permission is hereby granted, free of charge, to any person obtaining a copy of * this software and associated documentation files (the "Software"), to deal in * the Software without restriction, including without limitation the rights to * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of * the Software, and to permit persons to whom the Software is furnished to do so, * subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ const exposed = {}; if (location.search) { var a = document.createElement("a"); a.href = location.href; a.search = ""; history.replaceState(null, null, a.href); } function tweet_(url) { open( "https://twitter.com/intent/tweet?url=" + encodeURIComponent(url), "_blank" ); } function tweet(anchor) { tweet_(anchor.getAttribute("href")); } expose("tweet", tweet); function share(anchor) { var url = anchor.getAttribute("href"); event.preventDefault(); if (navigator.share) { navigator.share({ url: url, }); } else if (navigator.clipboard) { navigator.clipboard.writeText(url); message("Article URL copied to clipboard."); } else { tweet_(url); } } expose("share", share); function message(msg) { var dialog = document.getElementById("message"); dialog.textContent = msg; dialog.setAttribute("open", ""); setTimeout(function () { dialog.removeAttribute("open"); }, 3000); } function prefetch(e) { if (e.target.tagName != "A") { return; } if (e.target.origin != location.origin) { return; } var l = document.createElement("link"); l.rel = "prefetch"; l.href = e.target.href; document.head.appendChild(l); } document.documentElement.addEventListener("mouseover", prefetch, { capture: true, passive: true, }); document.documentElement.addEventListener("touchstart", prefetch, { capture: true, passive: true, }); const GA_ID = document.documentElement.getAttribute("ga-id"); window.ga = window.ga || function () { if (!GA_ID) { return; } (ga.q = ga.q || []).push(arguments); }; ga.l = +new Date(); ga("create", GA_ID, "auto"); ga("set", "transport", "beacon"); var timeout = setTimeout( (onload = function () { clearTimeout(timeout); ga("send", "pageview"); }), 1000 ); var ref = +new Date(); function ping(event) { var now = +new Date(); if (now - ref < 1000) { return; } ga("send", { hitType: "event", eventCategory: "page", eventAction: event.type, eventLabel: Math.round((now - ref) / 1000), }); ref = now; } addEventListener("pagehide", ping); addEventListener("visibilitychange", ping); addEventListener( "click", function (e) { var button = e.target.closest("button"); if (!button) { return; } ga("send", { hitType: "event", eventCategory: "button", eventAction: button.getAttribute("aria-label") || button.textContent, }); }, true ); var selectionTimeout; addEventListener( "selectionchange", function () { clearTimeout(selectionTimeout); var text = String(document.getSelection()).trim(); if (text.split(/[\s\n\r]+/).length < 3) { return; } selectionTimeout = setTimeout(function () { ga("send", { hitType: "event", eventCategory: "selection", eventAction: text, }); }, 2000); }, true ); if (window.ResizeObserver && document.querySelector("header nav #nav")) { var progress = document.getElementById("reading-progress"); var timeOfLastScroll = 0; var requestedAniFrame = false; function scroll() { if (!requestedAniFrame) { requestAnimationFrame(updateProgress); requestedAniFrame = true; } timeOfLastScroll = Date.now(); } addEventListener("scroll", scroll); var winHeight = 1000; var bottom = 10000; function updateProgress() { requestedAniFrame = false; var percent = Math.min( (document.scrollingElement.scrollTop / (bottom - winHeight)) * 100, 100 ); progress.style.transform = `translate(-${100 - percent}vw, 0)`; if (Date.now() - timeOfLastScroll < 3000) { requestAnimationFrame(updateProgress); requestedAniFrame = true; } } new ResizeObserver(() => { bottom = document.scrollingElement.scrollTop + document.querySelector("#comments,footer").getBoundingClientRect().top; winHeight = window.innerHeight; scroll(); }).observe(document.body); } function expose(name, fn) { exposed[name] = fn; } addEventListener("click", (e) => { const handler = e.target.closest("[on-click]"); if (!handler) { return; } e.preventDefault(); const name = handler.getAttribute("on-click"); const fn = exposed[name]; if (!fn) { throw new Error("Unknown handler" + name); } fn(handler); }); // There is a race condition here if an image loads faster than this JS file. But // - that is unlikely // - it only means potentially more costly layouts for that image. // - And so it isn't worth the querySelectorAll it would cost to synchronously check // load state. document.body.addEventListener( "load", (e) => { if (e.target.tagName != "IMG") { return; } // Ensure the browser doesn't try to draw the placeholder when the real image is present. e.target.style.backgroundImage = "none"; }, /* capture */ "true" ); https://kai.im/preloader Danke an Daniel Abromeit @der_abro

  71. Noch nicht genug gehört? Lerne einfach alles über PageSpeed &

    Web Vitals Melde Dich jetzt unverbindlich für mein Online Seminar an! https://kai.im/pagespeed