SlideShare ist ein Scribd-Unternehmen logo
1 von 71
Pagespeed Extreme Kai Spriestersbach
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
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
Neuer Rankingfaktor
Page Experience
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
Mehr unter: https://kai.im/pagespeed
Mein Online-Seminar 

Web Vitals & PageSpeed
+
PageSpeed Basics
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)
TTFB Optimierung
TTFB = Time To First Byte
Deshalb ist die TTFB so wichtig!
https://www.webpagetest.org/
Deshalb ist die TTFB so wichtig!
}
GEFÜHLT
PASSIERT
NIX!
https://www.webpagetest.org/
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
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>
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>
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
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
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
Rendering verbessern
Rendering „sichtbar“ machen
https://developers.google.com/web/fundamentals/performance/critical-rendering-path?hl=de
Progressives
Rendering
Unoptimiertes
Rendering
Der kritische Rendering-Pfad
https://bitsofco.de/understanding-the-critical-rendering-path/
Performance in den Chrome Developer Tools
Non-blocking CSS
Inline CSS im <head>
Media-Attribut
Critical CSS
Critical CSS Tool
https://criticalcss.com/
Critical CSS Tool
https://criticalcss.com/
Third-Party Tags reduzieren
https://www.webpagetest.org/video/view.php?id=190919_Di27491eeccb968f96eda867ddabf2ff3c8c24ed3d
Third-Party Tags reduzieren
https://www.webpagetest.org/video/view.php?id=190919_Di27491eeccb968f96eda867ddabf2ff3c8c24ed3d
Async & Deferred JavaScript
>80% des JS ist nicht aufschiebbar!
https://w3techs.com/technologies/overview/javascript_library https://trends.builtwith.com/javascript
Alles hört auf „DOM ready“
Wahrgenommene Ladezeit
Skeleton Screens
https://css-tricks.com/building-skeleton-screens-css-custom-properties/
Abstrakte Darstellung genügt!
https://css-tricks.com/building-skeleton-screens-css-custom-properties/
Web Fonts
Font Rendering verbessern
https://fonts.google.com/specimen/Roboto
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
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
Also besser so…
CSS-Datei herunterladen
CSS prozessieren
WebFont herunterladen
WebFont rendern
Text anzeigen
HTML geladen
Also besser so…
CSS-Datei herunterladen
CSS prozessieren
WebFont herunterladen
WebFont rendern
Text anzeigen
HTML geladen
https://web.dev/font-display/
Also besser so…
CSS-Datei herunterladen
CSS prozessieren
WebFont herunterladen
WebFont rendern
Text anzeigen
HTML geladen
Also besser so…
CSS-Datei herunterladen
CSS prozessieren
WebFont herunterladen
WebFont rendern
Text anzeigen
HTML geladen
Smart Font Reducing
https://transfonter.org/ Danke an Daniel Abromeit @der_abro
https://github.com/hakatashi/unicode-map
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
Smart Preloading
HOME
HOME
Mouse Over,
ARTICLE
HOME
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(/[snr]+/).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
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

Weitere ähnliche Inhalte

Was ist angesagt?

SEFD - Search Engine Friendly Design - SMX München 2015 Kai Spriestersbach
SEFD - Search Engine Friendly Design - SMX München 2015 Kai SpriestersbachSEFD - Search Engine Friendly Design - SMX München 2015 Kai Spriestersbach
SEFD - Search Engine Friendly Design - SMX München 2015 Kai SpriestersbachSEARCH ONE
 
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014Florian Elbers
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Bastian Grimm
 
Seokomm 2016 Vortrag - Räume deine Website auf
Seokomm 2016 Vortrag - Räume deine Website auf Seokomm 2016 Vortrag - Räume deine Website auf
Seokomm 2016 Vortrag - Räume deine Website auf Dominik Wojcik
 
Step-by-Step: Guide zur SEO-OnPage Optimierung Ihrer Website
Step-by-Step: Guide zur SEO-OnPage Optimierung Ihrer WebsiteStep-by-Step: Guide zur SEO-OnPage Optimierung Ihrer Website
Step-by-Step: Guide zur SEO-OnPage Optimierung Ihrer Websitesemrush_webinars
 
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...TA Trust Agents Internet GmbH
 
Informationsarchitektur & Verlinkung - SMX München 2014
Informationsarchitektur & Verlinkung - SMX München 2014Informationsarchitektur & Verlinkung - SMX München 2014
Informationsarchitektur & Verlinkung - SMX München 2014Bastian Grimm
 
Site Speed am Limit - Campixx 2015
Site Speed am Limit - Campixx 2015Site Speed am Limit - Campixx 2015
Site Speed am Limit - Campixx 2015Walter Andreas Pucko
 
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017Bastian Grimm
 
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013Jan Hendrik Merlin Jacob
 
Linkmarketing - Backlinkaufbau 2016 inkl. live Linkaudit
Linkmarketing - Backlinkaufbau 2016 inkl. live LinkauditLinkmarketing - Backlinkaufbau 2016 inkl. live Linkaudit
Linkmarketing - Backlinkaufbau 2016 inkl. live Linkauditsemrush_webinars
 
Digitale Assistenten - OMX 2017
Digitale Assistenten - OMX 2017Digitale Assistenten - OMX 2017
Digitale Assistenten - OMX 2017Bastian Grimm
 
Onpage optimierung mit dem seo screaming frog
Onpage optimierung mit dem seo screaming frogOnpage optimierung mit dem seo screaming frog
Onpage optimierung mit dem seo screaming frogStephan F. Walcher
 
Seo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersSeo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersJan Berens
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017Bastian Grimm
 
Enhanced SEO with Machine Learning
Enhanced SEO with Machine LearningEnhanced SEO with Machine Learning
Enhanced SEO with Machine LearningMichael Weber
 
Relaunch & SEO: Best Practice, Checklists, Stolpersteine
Relaunch & SEO: Best Practice, Checklists, StolpersteineRelaunch & SEO: Best Practice, Checklists, Stolpersteine
Relaunch & SEO: Best Practice, Checklists, StolpersteinePhilipp Klöckner
 
Searchmetrics Summit: Content Management
Searchmetrics Summit: Content ManagementSearchmetrics Summit: Content Management
Searchmetrics Summit: Content ManagementMarco Lauerwald
 
Online Shop SEO Audits mit Screaming Frog & URL Profiler | SEO Campixx 2016
Online Shop SEO Audits mit Screaming Frog & URL Profiler | SEO Campixx 2016Online Shop SEO Audits mit Screaming Frog & URL Profiler | SEO Campixx 2016
Online Shop SEO Audits mit Screaming Frog & URL Profiler | SEO Campixx 2016Mario Träger
 

Was ist angesagt? (19)

SEFD - Search Engine Friendly Design - SMX München 2015 Kai Spriestersbach
SEFD - Search Engine Friendly Design - SMX München 2015 Kai SpriestersbachSEFD - Search Engine Friendly Design - SMX München 2015 Kai Spriestersbach
SEFD - Search Engine Friendly Design - SMX München 2015 Kai Spriestersbach
 
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
Optimieren großer Websites mit Screaming Frog & Excel - Campixx 2014
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Seokomm 2016 Vortrag - Räume deine Website auf
Seokomm 2016 Vortrag - Räume deine Website auf Seokomm 2016 Vortrag - Räume deine Website auf
Seokomm 2016 Vortrag - Räume deine Website auf
 
Step-by-Step: Guide zur SEO-OnPage Optimierung Ihrer Website
Step-by-Step: Guide zur SEO-OnPage Optimierung Ihrer WebsiteStep-by-Step: Guide zur SEO-OnPage Optimierung Ihrer Website
Step-by-Step: Guide zur SEO-OnPage Optimierung Ihrer Website
 
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
Logfile-Analyse: Wo ver(sch)wendet Google Crawling-Ressourcen? | Stephan Czys...
 
Informationsarchitektur & Verlinkung - SMX München 2014
Informationsarchitektur & Verlinkung - SMX München 2014Informationsarchitektur & Verlinkung - SMX München 2014
Informationsarchitektur & Verlinkung - SMX München 2014
 
Site Speed am Limit - Campixx 2015
Site Speed am Limit - Campixx 2015Site Speed am Limit - Campixx 2015
Site Speed am Limit - Campixx 2015
 
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
 
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
 
Linkmarketing - Backlinkaufbau 2016 inkl. live Linkaudit
Linkmarketing - Backlinkaufbau 2016 inkl. live LinkauditLinkmarketing - Backlinkaufbau 2016 inkl. live Linkaudit
Linkmarketing - Backlinkaufbau 2016 inkl. live Linkaudit
 
Digitale Assistenten - OMX 2017
Digitale Assistenten - OMX 2017Digitale Assistenten - OMX 2017
Digitale Assistenten - OMX 2017
 
Onpage optimierung mit dem seo screaming frog
Onpage optimierung mit dem seo screaming frogOnpage optimierung mit dem seo screaming frog
Onpage optimierung mit dem seo screaming frog
 
Seo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersSeo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for Beginners
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017
 
Enhanced SEO with Machine Learning
Enhanced SEO with Machine LearningEnhanced SEO with Machine Learning
Enhanced SEO with Machine Learning
 
Relaunch & SEO: Best Practice, Checklists, Stolpersteine
Relaunch & SEO: Best Practice, Checklists, StolpersteineRelaunch & SEO: Best Practice, Checklists, Stolpersteine
Relaunch & SEO: Best Practice, Checklists, Stolpersteine
 
Searchmetrics Summit: Content Management
Searchmetrics Summit: Content ManagementSearchmetrics Summit: Content Management
Searchmetrics Summit: Content Management
 
Online Shop SEO Audits mit Screaming Frog & URL Profiler | SEO Campixx 2016
Online Shop SEO Audits mit Screaming Frog & URL Profiler | SEO Campixx 2016Online Shop SEO Audits mit Screaming Frog & URL Profiler | SEO Campixx 2016
Online Shop SEO Audits mit Screaming Frog & URL Profiler | SEO Campixx 2016
 

Ähnlich wie PageSpeed Extreme für das große Speed Update 2021

Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHPFrank Kleine
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPCNico Steiner
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEARCH ONE
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platformChristian Heilmann
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Jens Grochtdreis
 
Data Scraping with Excel - Campixx 2013 - Maik Schmidt
Data Scraping with Excel - Campixx 2013 - Maik SchmidtData Scraping with Excel - Campixx 2013 - Maik Schmidt
Data Scraping with Excel - Campixx 2013 - Maik SchmidtMaik Schmidt
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenJonathan Weiß
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Martin Kliehm
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Stephan Hochdörfer
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Jens Grochtdreis
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformanceNico Steiner
 
Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Stephan Hochdörfer
 
JAMstack / Static Site Generators
JAMstack / Static Site GeneratorsJAMstack / Static Site Generators
JAMstack / Static Site GeneratorsDietrichRordorf
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 
Mobile Web Development from Scratch
Mobile Web Development from ScratchMobile Web Development from Scratch
Mobile Web Development from ScratchNokiaAppForum
 

Ähnlich wie PageSpeed Extreme für das große Speed Update 2021 (20)

Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
 
htaccess SEO Tipps
htaccess SEO Tippshtaccess SEO Tipps
htaccess SEO Tipps
 
Data Scraping with Excel - Campixx 2013 - Maik Schmidt
Data Scraping with Excel - Campixx 2013 - Maik SchmidtData Scraping with Excel - Campixx 2013 - Maik Schmidt
Data Scraping with Excel - Campixx 2013 - Maik Schmidt
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
 
Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13
 
JAMstack / Static Site Generators
JAMstack / Static Site GeneratorsJAMstack / Static Site Generators
JAMstack / Static Site Generators
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
Mobile Web Development from Scratch
Mobile Web Development from ScratchMobile Web Development from Scratch
Mobile Web Development from Scratch
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 

Mehr von SEARCH ONE

BERTology @ SEOkomm 2019 - Kai Spriestersbach - eology GmbH
BERTology @ SEOkomm 2019 - Kai Spriestersbach - eology GmbHBERTology @ SEOkomm 2019 - Kai Spriestersbach - eology GmbH
BERTology @ SEOkomm 2019 - Kai Spriestersbach - eology GmbHSEARCH ONE
 
SEO in der öffentlichen Verwaltung - Kai Spriestersbach eology GmbH
SEO in der öffentlichen Verwaltung - Kai Spriestersbach eology GmbHSEO in der öffentlichen Verwaltung - Kai Spriestersbach eology GmbH
SEO in der öffentlichen Verwaltung - Kai Spriestersbach eology GmbHSEARCH ONE
 
SEOkomm 2018: SEO ist nicht tot! Von Kai Spriestersbach
SEOkomm 2018: SEO ist nicht tot! Von Kai SpriestersbachSEOkomm 2018: SEO ist nicht tot! Von Kai Spriestersbach
SEOkomm 2018: SEO ist nicht tot! Von Kai SpriestersbachSEARCH ONE
 
7 Wahrheiten über Shop-SEO und Usability - Kai Spriestersbach 2018
7 Wahrheiten über Shop-SEO und Usability - Kai Spriestersbach 20187 Wahrheiten über Shop-SEO und Usability - Kai Spriestersbach 2018
7 Wahrheiten über Shop-SEO und Usability - Kai Spriestersbach 2018SEARCH ONE
 
Kai Spriestersbach @ SMX München 2018 - Die richtigen Worte finden: Keyword R...
Kai Spriestersbach @ SMX München 2018 - Die richtigen Worte finden: Keyword R...Kai Spriestersbach @ SMX München 2018 - Die richtigen Worte finden: Keyword R...
Kai Spriestersbach @ SMX München 2018 - Die richtigen Worte finden: Keyword R...SEARCH ONE
 
Data Driven SEO - Kai Spriestersbach @ SEOkomm 2017
Data Driven SEO - Kai Spriestersbach @ SEOkomm 2017Data Driven SEO - Kai Spriestersbach @ SEOkomm 2017
Data Driven SEO - Kai Spriestersbach @ SEOkomm 2017SEARCH ONE
 
Meet Magento DE 2017 - E-Commerce mit Google – SEO für Onlineshops
Meet Magento DE 2017 - E-Commerce mit Google – SEO für OnlineshopsMeet Magento DE 2017 - E-Commerce mit Google – SEO für Onlineshops
Meet Magento DE 2017 - E-Commerce mit Google – SEO für OnlineshopsSEARCH ONE
 
SEOkomm 2016 - Google RankBrain Kai Spriestersbach
SEOkomm 2016 - Google RankBrain Kai SpriestersbachSEOkomm 2016 - Google RankBrain Kai Spriestersbach
SEOkomm 2016 - Google RankBrain Kai SpriestersbachSEARCH ONE
 
The Future of SEO - Kai Spriestersbach @ Meet Magento 2016 DE
The Future of SEO - Kai Spriestersbach @ Meet Magento 2016 DEThe Future of SEO - Kai Spriestersbach @ Meet Magento 2016 DE
The Future of SEO - Kai Spriestersbach @ Meet Magento 2016 DESEARCH ONE
 
SEO für die lokale Suche - Local SEO für Filialisten und Franchises - SMX Mün...
SEO für die lokale Suche - Local SEO für Filialisten und Franchises - SMX Mün...SEO für die lokale Suche - Local SEO für Filialisten und Franchises - SMX Mün...
SEO für die lokale Suche - Local SEO für Filialisten und Franchises - SMX Mün...SEARCH ONE
 
Brands und SEO - Etablierte Marke - Was sagt Google dazu? - SMX München 2015 ...
Brands und SEO - Etablierte Marke - Was sagt Google dazu? - SMX München 2015 ...Brands und SEO - Etablierte Marke - Was sagt Google dazu? - SMX München 2015 ...
Brands und SEO - Etablierte Marke - Was sagt Google dazu? - SMX München 2015 ...SEARCH ONE
 
SEOkomm 2014 - Local SEO Erste Schritte
SEOkomm 2014 -  Local SEO Erste SchritteSEOkomm 2014 -  Local SEO Erste Schritte
SEOkomm 2014 - Local SEO Erste SchritteSEARCH ONE
 
SMX München 2014: Maps & Metros - 
Überleben und Gewinnen mit lokaler Suche
SMX München 2014: Maps & Metros - 
Überleben und Gewinnen mit lokaler SucheSMX München 2014: Maps & Metros - 
Überleben und Gewinnen mit lokaler Suche
SMX München 2014: Maps & Metros - 
Überleben und Gewinnen mit lokaler SucheSEARCH ONE
 
SMX München 2013 - SEO für archivierte Inhalte
SMX München 2013 - SEO für archivierte InhalteSMX München 2013 - SEO für archivierte Inhalte
SMX München 2013 - SEO für archivierte InhalteSEARCH ONE
 
SMX 2013 - Ein Bild ist mehr wert als tausend Links
SMX 2013 - Ein Bild ist mehr wert als tausend LinksSMX 2013 - Ein Bild ist mehr wert als tausend Links
SMX 2013 - Ein Bild ist mehr wert als tausend LinksSEARCH ONE
 
Kai Spriestersbach - Die Macht der internen Verlinkung SEO CAMPIXX 2013
Kai Spriestersbach - Die Macht der internen Verlinkung SEO CAMPIXX 2013Kai Spriestersbach - Die Macht der internen Verlinkung SEO CAMPIXX 2013
Kai Spriestersbach - Die Macht der internen Verlinkung SEO CAMPIXX 2013SEARCH ONE
 
SEO: Inhouse vs Agentur
SEO: Inhouse vs AgenturSEO: Inhouse vs Agentur
SEO: Inhouse vs AgenturSEARCH ONE
 
SMX 2010 Keyword Research Basics
SMX 2010 Keyword Research BasicsSMX 2010 Keyword Research Basics
SMX 2010 Keyword Research BasicsSEARCH ONE
 

Mehr von SEARCH ONE (18)

BERTology @ SEOkomm 2019 - Kai Spriestersbach - eology GmbH
BERTology @ SEOkomm 2019 - Kai Spriestersbach - eology GmbHBERTology @ SEOkomm 2019 - Kai Spriestersbach - eology GmbH
BERTology @ SEOkomm 2019 - Kai Spriestersbach - eology GmbH
 
SEO in der öffentlichen Verwaltung - Kai Spriestersbach eology GmbH
SEO in der öffentlichen Verwaltung - Kai Spriestersbach eology GmbHSEO in der öffentlichen Verwaltung - Kai Spriestersbach eology GmbH
SEO in der öffentlichen Verwaltung - Kai Spriestersbach eology GmbH
 
SEOkomm 2018: SEO ist nicht tot! Von Kai Spriestersbach
SEOkomm 2018: SEO ist nicht tot! Von Kai SpriestersbachSEOkomm 2018: SEO ist nicht tot! Von Kai Spriestersbach
SEOkomm 2018: SEO ist nicht tot! Von Kai Spriestersbach
 
7 Wahrheiten über Shop-SEO und Usability - Kai Spriestersbach 2018
7 Wahrheiten über Shop-SEO und Usability - Kai Spriestersbach 20187 Wahrheiten über Shop-SEO und Usability - Kai Spriestersbach 2018
7 Wahrheiten über Shop-SEO und Usability - Kai Spriestersbach 2018
 
Kai Spriestersbach @ SMX München 2018 - Die richtigen Worte finden: Keyword R...
Kai Spriestersbach @ SMX München 2018 - Die richtigen Worte finden: Keyword R...Kai Spriestersbach @ SMX München 2018 - Die richtigen Worte finden: Keyword R...
Kai Spriestersbach @ SMX München 2018 - Die richtigen Worte finden: Keyword R...
 
Data Driven SEO - Kai Spriestersbach @ SEOkomm 2017
Data Driven SEO - Kai Spriestersbach @ SEOkomm 2017Data Driven SEO - Kai Spriestersbach @ SEOkomm 2017
Data Driven SEO - Kai Spriestersbach @ SEOkomm 2017
 
Meet Magento DE 2017 - E-Commerce mit Google – SEO für Onlineshops
Meet Magento DE 2017 - E-Commerce mit Google – SEO für OnlineshopsMeet Magento DE 2017 - E-Commerce mit Google – SEO für Onlineshops
Meet Magento DE 2017 - E-Commerce mit Google – SEO für Onlineshops
 
SEOkomm 2016 - Google RankBrain Kai Spriestersbach
SEOkomm 2016 - Google RankBrain Kai SpriestersbachSEOkomm 2016 - Google RankBrain Kai Spriestersbach
SEOkomm 2016 - Google RankBrain Kai Spriestersbach
 
The Future of SEO - Kai Spriestersbach @ Meet Magento 2016 DE
The Future of SEO - Kai Spriestersbach @ Meet Magento 2016 DEThe Future of SEO - Kai Spriestersbach @ Meet Magento 2016 DE
The Future of SEO - Kai Spriestersbach @ Meet Magento 2016 DE
 
SEO für die lokale Suche - Local SEO für Filialisten und Franchises - SMX Mün...
SEO für die lokale Suche - Local SEO für Filialisten und Franchises - SMX Mün...SEO für die lokale Suche - Local SEO für Filialisten und Franchises - SMX Mün...
SEO für die lokale Suche - Local SEO für Filialisten und Franchises - SMX Mün...
 
Brands und SEO - Etablierte Marke - Was sagt Google dazu? - SMX München 2015 ...
Brands und SEO - Etablierte Marke - Was sagt Google dazu? - SMX München 2015 ...Brands und SEO - Etablierte Marke - Was sagt Google dazu? - SMX München 2015 ...
Brands und SEO - Etablierte Marke - Was sagt Google dazu? - SMX München 2015 ...
 
SEOkomm 2014 - Local SEO Erste Schritte
SEOkomm 2014 -  Local SEO Erste SchritteSEOkomm 2014 -  Local SEO Erste Schritte
SEOkomm 2014 - Local SEO Erste Schritte
 
SMX München 2014: Maps & Metros - 
Überleben und Gewinnen mit lokaler Suche
SMX München 2014: Maps & Metros - 
Überleben und Gewinnen mit lokaler SucheSMX München 2014: Maps & Metros - 
Überleben und Gewinnen mit lokaler Suche
SMX München 2014: Maps & Metros - 
Überleben und Gewinnen mit lokaler Suche
 
SMX München 2013 - SEO für archivierte Inhalte
SMX München 2013 - SEO für archivierte InhalteSMX München 2013 - SEO für archivierte Inhalte
SMX München 2013 - SEO für archivierte Inhalte
 
SMX 2013 - Ein Bild ist mehr wert als tausend Links
SMX 2013 - Ein Bild ist mehr wert als tausend LinksSMX 2013 - Ein Bild ist mehr wert als tausend Links
SMX 2013 - Ein Bild ist mehr wert als tausend Links
 
Kai Spriestersbach - Die Macht der internen Verlinkung SEO CAMPIXX 2013
Kai Spriestersbach - Die Macht der internen Verlinkung SEO CAMPIXX 2013Kai Spriestersbach - Die Macht der internen Verlinkung SEO CAMPIXX 2013
Kai Spriestersbach - Die Macht der internen Verlinkung SEO CAMPIXX 2013
 
SEO: Inhouse vs Agentur
SEO: Inhouse vs AgenturSEO: Inhouse vs Agentur
SEO: Inhouse vs Agentur
 
SMX 2010 Keyword Research Basics
SMX 2010 Keyword Research BasicsSMX 2010 Keyword Research Basics
SMX 2010 Keyword Research Basics
 

PageSpeed Extreme für das große Speed Update 2021

  • 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
  • 11. Mehr unter: https://kai.im/pagespeed Mein Online-Seminar 
 Web Vitals & PageSpeed +
  • 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)
  • 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
  • 27. Performance in den Chrome Developer Tools
  • 28.
  • 29. Non-blocking CSS Inline CSS im <head> Media-Attribut
  • 35. Async & Deferred JavaScript
  • 36.
  • 37.
  • 38.
  • 39.
  • 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.
  • 46.
  • 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
  • 56. https://transfonter.org/ Danke an Daniel Abromeit @der_abro
  • 58.
  • 59.
  • 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
  • 62.
  • 63.
  • 64.
  • 65.
  • 66. HOME
  • 67. HOME
  • 68.
  • 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(/[snr]+/).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