frontend performance

Frontend Performance

InhaltsverzeichnisJavascript später parsenAsynchrones nachladenGrafikenCSS performant gestaltenQuelltext komprimieren

Javascript später parsenExternes JavaScript sollte vor dem schließenden Body-Tag

platziert werden

Vorsicht, wenn im DOM jQuery Funktionen aufgerufen

werden

Asynchrones nachladenInhalte nur dann holen, wenn man sie braucht

JavascriptBeispiel:

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

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'); });

Grafiken

Sprites verwendenErsparen mehrere Server RequestsDurch Compass flexibel und einfach einsetzbarÜberlegung: Mehrere Sprites verwenden

Viewport spezifische GrafikenBeispiel: 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>

Grafiken nachladenDurch den Einsatz von Plugins können Grafiken erst dann

angezeigt werden, wenn diese im Viewport erscheinenBeispiel: 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>

CSS performant gestalten

Lange Selektorenvermeiden

//Badbody .landingpage .intro .left .inner .buttons p .submit-button {}

//Good.buttons .submit-button {}

Möglichst nur eine Klasseselektieren

//Bad .button.green.left.small.first {}

//Good .button-small {}

Vermischung mehrererSelektions-Typen

vermeiden//Badbody[id="home"] .buttons > div:first-child ~ p input[type="submit"] {}

@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" />

Und bei Gelgenheit: CSS Dateien aufräumen

Quelltext komprimierenDurch Kompression können Dateien bis zu 50% reduziertwerdenAutomatoren wie Grunt übernehmen Kompression und"verunstaltung" von Javascript und CSS

© 2014 Niklas Köhler

Zum NachlesenHow to lose weight (in the browser)Minify Javascript OnlineGRUNT The JavaScript Task Runner