Perfomance

Was ist damit gemeint?

Time

load

Time

load

1. Anfrage

Time

load

2. Verarbeitung

Time

load

3. Antwort

Time

load

4. zus. Dateien

HTML DOM

<html lang="de-CH" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head> 
        <meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	    
    	<link rel="dns-prefetch" href="//s.w.org">
		
	<title>Seitentitel</title>
    	<meta name="description" content="Seitenbeschreibung">

	<link rel="stylesheet" id="main-css" href="assets/css/styles.css" type="text/css" media="all">
    
    </head>
    <body>
        <main>
            <h2>Titel</h2>
            <p>Das ist ein Text</p>
            <p><img src="link/zum/bild.jpg" title="" /></p>
        </main>

        <script src="assets/js/jquery-2.2.0.min.js"></script>
        <script src="assets/js/main.js"></script>
        <script src="assets/js/roundslider.js"></script>
    </body>
</html>

Performance optimieren 

Stufe 1

Brauche ich das?

Wenn nicht, weg damit!

Performance optimieren 

Stufe 2

Wie kann ich es optimiern?

JS/CSS

Minify

Bildformate

Gösse (responsive Images)

verlustlose Kompression

progressive JPEG
(https://performancedemo.vir2al.ch/?type=progressive)

Performance optimieren 

Stufe 3

Wann lade ich was?

  • JS in den Footer
  • HTTP/2
  • asynchrones laden

Performance testen 

https://developers.google.com/speed/pagespeed/insights/

+ https://korrekt.ch/de/start/
- http://fl1.li/de/handys-und-mehr

Interessante Themen

Google AMP (https://www.ampproject.org/)

instant Articles (https://instantarticles.fb.com/)

 

Nobody cares about how fast your site is, only how fast it feels