Revision 158: Performance, Performance, Performance; sowie Leserfragen

In der heutigen Revision haben Hans, Peter und Stefan den Performance-König Tobias Baldauf eingeladen, um über aktuelle Trends und gute Ratschläge in Sachen Webperformance zu plaudern.

[00:01:08] News

Firefox 27

Neuer Release des Independent Browser, mit der neuen CSS Eigenschaft all:unset und einigen anderen Änderungen.

Schaunotizen

[00:01:56] Bleeding Edge Bildoptimierung

Tobias erzählt über aktuelle Trends in der Bildoptimierung, und wie man aus langgedienten Grafikformaten wie JPEG dank Machine Learning noch weitere 10% rausholen möchte.

[00:07:56] Renderingoptimierungsmöglichkeiten bei Webfonts

Chrome hat seinen Webfont Renderingprozess neu gelöst, und zeigt nach 30 Sekunden ohne geladener Font eine Fallbackschrift an. Außerdem erzählen wir welche weiteren Steuerungsmöglichkeiten es gibt, ob text-rendering Unterschiede macht und wie man Subsetting richtig einsetzen kann!

[00:13:15] Automatisiert Performance Metriken generieren

Performance kann und soll man klarerweise messen. Tobias gibt Tipps und verweist auf Tools wie Phantomas (samt Grunt-Plugin) und das HTTP Archive.

[00:17:41] Viele Schriftschnitte vs. Performance

Der Schriftenkaiser Gerrit van Aaken ruft zu Recht auf, verschiedene Fettschnitte in Webfonts zu beachten. Doch was des Designers Freud‘ ist des Performanceoptimierers Leid. Wo liegt die optimale Grenze, und welche Möglichkeiten würden wir uns wünschen um beide Welten zufrieden zu stellen. Wir philosophieren.

[00:22:06] Performance-Guidelines und -Budgets

Performance ist wichtig und kann auch gut argumentiert bzw. verkauft werden! Stefan erzählt von Kompromissen aus dem täglichen Agenturleben und welche Probleme man sich fernhält, wenn man das Performance-Augenmerk von Anfang an in Betracht zieht. Der Rest stimmt in der Reflexion mit ein und gibt Ratschläge.

[00:27:58] Leserfrage: Unsere Erfahrungen zu custom styled Inputs

Stammhörer Christoph Rumpel fragt, wie man Formularelemente am besten stylen kann, und welche Bibliotheken bzw. Tools wir dafür nehmen. Eine Antwort mit einem Plottwist. Erwähnt werden: Ryan Seddons Technik über :checked Attribut und das ähnlich funktionierende Navigataur. Außerdem wird es Zeit alert und confirm wieder aus ihrer Versenkung zu bringen!

[00:35:37] Layoutgeschwindigkeit von CSS Flexbox

CSS Flexbox rendert langsam und hat nicht unbedenkliche Aufbaustrukturen. Doch lieber CSS3 Grid-Layouts verwenden! Doch was, wenn manches davon noch gar nicht in den aktuellen Browsern implementiert wurde? Wir ranten über Angebot und Nachfrage, den IE9 und die Zukunft des Internet Explorers, und geben Peter in einer spontanen Selbsthilfegruppensitzung Platz.

[00:46:47] Leserfrage: Gute Onlinecommunities für Webentwicklung?

Christian fragt: Welche guten Onlinecommunities gibt es? Die Leute kurz vor oder jenseits der 30 erzählen mit weißen Rauschebärten über die gute, alte Forenzeit, dass deren Abgesang eigentlich eh nicht so schlecht ist, und warum Twitter und Co. sich in den letzten Jahren behauptet haben.

[00:58:52] Keine Schaunotizen

CSS Above the fold Inliner

Dinge, die über der Fenstergrenze passieren sollten auch besonders schnell sichtbar sein. Dieses PhantomJS basierte Tool hilft!

Responsive Images & Lazy Loading

Der sehr aktive Sven Wolfermann über Responsive Images und Lazy Loading. Pflichtartikel

Tipp der Woche