Nico Martin

Web- / Frontend Developer

@nic_o_martin
nicomartin.ch

Say Hello GmbH

@SayHelloGmbH
sayhello.ch

Übersicht: Was? Warum? Wie?

Performance als Ladegeschwindigkeit
Ladezeit als Sales-Killer
Technisches Thema - so wenig Code wie möglich!

Server

Client

Server

Verarbeitung über PHP / MySQL
TTFB (Time to first byte)
Leistung abhängig vom Hoster
(SSD, Arbeitsspeicher, Prozessor)
PHP 7
Caching

Server

Client

Das DOM (Quelltext)

<html>
	<head>
		<link rel="stylesheet" href="css/theme/styles.css">
		<link rel="stylesheet" href="css/plugin/styles.css">
		<script type="text/javascript" src="js/script.js"></script>
	</head>
	<body>
		<h1>Hallo Welt</h1>
		<p>Der angezeigte Content</p>
		<img src="img/meinbild.jpg"/>
	</body>
</html>

https://test.sayhello.works/

1. Brauche ich das?

Wenn nicht, weg damit!

2. Wie kann ich es optimiern?

CSS / JS

Minify

jQuery 3.3.1 uncomressed: 265 kB
jQuery 3.3.1 comressed: 84.8 kB

≈ 70%

Bilder

ca. 50% des Webs
Gösse (responsive Images)
verlustlose Kompression
progressive JPEG
Demo 1 (baseline JPEG)
Demo 2 (progressive JPEG)

3. Wann lade ich was?

<html>
	<head>
		<link rel="stylesheet" href="css/theme/styles.css">
		<link rel="stylesheet" href="css/plugin/styles.css">
		<script type="text/javascript" src="js/script.js"></script>
	</head>
	<body>
		<h1>Hallo Welt</h1>
		<p>Der angezeigte Content</p>
		<img src="img/meinbild.jpg"/>
	</body>
</html>

Render-Blocking vs non-Render-Blocking

JavaScript

<html>
	<head>
		<link rel="stylesheet" href="css/theme/styles.css">
		<link rel="stylesheet" href="css/plugin/styles.css">
	</head>
	<body>
		<h1>Hallo Welt</h1>
		<p>Der angezeigte Content</p>
		<img src="img/meinbild.jpg"/>
		<script defer="defer" type="text/javascript" src="js/script.js"></script>
	</body>
</html>

Console Errors

CSS

<html>
	<head>
		<style type="text/css">
			h1 {color: black;}
			p {color: red;}
		</style>
	</head>
	<body>
		<h1>Hallo Welt</h1>
		<p>Der angezeigte Content</p>
		<img src="img/meinbild.jpg"/>

		<script defer="defer" type="text/javascript" src="js/script.js"></script>
		<script defer="defer" type="text/javascript" src="js/loadCSS.js"></script>
		<script>
			document.addEventListener("DOMContentLoaded", function() {
				loadCSS('css/theme/styles.css');
				loadCSS('css/plugin/styles.css');
			});
		</script>
	</body>
</html>

Critical CSS
Critical CSS generator

HTTP/2