frontend performance
TRANSCRIPT
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