1. Frontend Performance

2. Inhaltsverzeichnis
Javascript später parsen
Asynchrones nachladen
Grafiken
CSS performant gestalten
Quelltext komprimieren

3. Javascript später parsen
Externes JavaScript sollte vor dem schließenden Body-Tag
platziert werden
Vorsicht, wenn im DOM jQuery Funktionen aufgerufen
werden

4. Asynchrones nachladen
Inhalte nur dann holen, wenn man sie braucht

5. Javascript
Beispiel:
$.getScript( "ajax/test.js", function( data, textStatus, jqxhr )
{
console.log( "Load was performed." );
});

6. CSS mit Hilfe von jQuery
Beispiel:
/* Variante 1: Linked Stylesheet */
$('<link rel="stylesheet" href="test.css" />').appendTo('head');
/* Variante 2: Inline Styles */
$.get( 'test.css', function(data) {
$('<style />').html(data).appendTo('head');
});

7. Grafiken

8. Sprites verwenden
Ersparen mehrere Server Requests
Durch Compass flexibel und einfach einsetzbar
Überlegung: Mehrere Sprites verwenden

9. Viewport spezifische Grafiken
Beispiel: Picturefill
<span class="picture" data-picture="" data-alt="">
<span
data-src="760.jpg"
data-media="(min-width: 569px)"></span>
<span
data-src="1240.jpg"
data-media="(min-width: 768px)"><img
alt=""
src="1240.jpg"></span>
<!--[if (lt IE 9) & (!IEMobile)]>
<span data-src="760.jpg"></span>
<![endif]-->
<noscript>
<img src="760.jpg" alt="">
</noscript>
</span>

10. Grafiken nachladen
Durch den Einsatz von Plugins können Grafiken erst dann
angezeigt werden, wenn diese im Viewport erscheinen
Beispiel: Lazy Load
<img class="lazy" data-original="img/example.jpg" alt=""
width="640" heigh="480" >
<noscript>
<img src="img/example.jpg" width="640" height="480">
</noscript>

11. CSS performant gestalten

12. Lange Selektoren
vermeiden
//Bad
body .landingpage .intro .left .inner .buttons p .submit-button {}
//Good
.buttons .submit-button {}

13. Möglichst nur eine Klasse
selektieren
//Bad
.button.green.left.small.first {}
//Good
.button-small {}

14. Vermischung mehrerer
Selektions-Typen
vermeiden
//Bad
body[id="home"] .buttons > div:first-child ~ p input[type="submit"] {
}

15. @import vermeiden
//Bad
<style type="text/css">
</style>
@import url("1.css");
@import url("2.css");
@import url("3.css");
@import url("4.css");
@import url("5.css");
@import url("6.css");
//Good
<link rel="stylesheet" type="text/css" href="all-in-one.css" />

16. Und bei Gelgenheit: CSS Dateien aufräumen

17. Quelltext komprimieren
Durch Kompression können Dateien bis zu 50% reduziert
werden
Automatoren wie Grunt übernehmen Kompression und
"verunstaltung" von Javascript und CSS
© 2014 Niklas Köhler

18. Zum Nachlesen
How to lose weight (in the browser)
Minify Javascript Online
GRUNT The JavaScript Task Runner