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 TOPCOAT.IO Man braucht fesches UI, ohne sich dabei gleich Boliden wie Bootstrap oder Foundation zu installieren, hat Ansprüche auf Performance und Anpassung? Dann sollte man auf Adobes Topcoat einen genaueren Blick werfen.