Stubbornella - Nicole Sullivan

A marked change has occurred since the first Velocity Conference a year ago, and while the effects are not yet obvious, they will be. The web is still slow, but we have something now, that we didn’t a year ago: business metrics. This was the year we quantified the impact of performance choices on our businesses, and the results were astounding.

For those of you who couldn’t attend, this article summarizes results from AOL, Shopzilla, Google, Bing, Hotmail, and Chrome and gives pointers to highlights of Velocity Conference 2009.

Today is a great day for Smush it because Yahoo! decided to accept it into their family of tools. This will allow the tool to run on fanatically maintained servers, with the Yahoo! style quality of service. It doesn’t get any better than that. I feel like my baby is all grown up and going off to college!

Want to Optimize Images like a Pro?

Stoyan and I have contributed a chapter to Even Faster Web Sites, that outlines all the fantastic tricks you can use to make your sites smaller. We hope you find it useful, and of course we welcome feedback! It will show you how to make image optimization part of your own system, and give you all the information you need to make images as small as possible.

I’ve been tweeting and posting to delicious about reflows and repaints, and it seemed time for a blog post. Opera lists repaint and reflow as one of the three main contributors to sluggish JavaScript, so it definitely seems worth a look.

Reflows are very expensive in terms of performance, and is one of the main causes of slow DOM scripts, especially on devices with low processing power, such as phones. In many cases, they are equivalent to laying out the entire page again.

How to avoid reflows or at least minimize their impact on performance?

1. Change classes on the element you wish to style (as low in the dom tree as possible)
2. Avoid setting multiple inline styles
3. Apply animations to elements that are position fixed or absolute
4. Trade smoothness for speed
5. Avoid tables for layout
6. Avoid JavaScript expressions in the CSS (IE only)

Tools

A few tools have made waves lately. Stoyan Stefanov and I have been looking for decent ways to measure reflows and repaints and there are a few tools which show promise (despite being very early alpha).

• UPDATE: Lindsey Simon at Google wrote a bookmarklet that tests reflow times on any browser. Fantastic. (Note: all that shaking is normal!)
• John Resig wrote a bookmarklet to visualize paint events.
• Kyle Scholz created this tool to visualize paint events before onload.
• Alex at Yoono has created the XUL profiler.

Has anyone else seen any cool tools for evaluating reflows?

Yahoo! Developer Network has released a video of my Object Oriented CSS talk at Web Directions North just in time for Ada Lovelace day. I’ve also been included in a feature on Women in Technology. I’m absolutely flattered to be included among these fantastic technical women. Wow.

Object Oriented CSS: for high performance websites and web applications.

Find out more about object oriented css

1. Open source project on github (GIT is having some DNS issues, be patient)
2. Follow along with the slides on slideshare
3. Join the OOCSS google group

My Object Oriented CSS grids and templates are open sourced on github. They have all the functionality of YUI grids plus some important features.

• Only 4kb, half the size of YUI grids. (I was totally happy when I checked the final size!)
• They allow infinite nesting and stacking.
• The only change required to use any of the objects is to place it in the HTML, there are no changes to other places in the DOM and no location dependent styling. Eases back-end development and makes it a lot easier to manage for newbies.
• Solution for sub-pixel rounding errors.

http://wiki.github.com/stubbornella/oocss

template.css and grids.css

…My prediction is that you’ll be writing complex layouts in less than 24 hours without adding a line to the CSS file.

A bit of a rant

The cascade is something like a new data structure, and the ways for dealing with it are algorithms you never learned in school. You couldn’t have, because traditional engineering school poo-poos the front-end and web engineering in favor of stale (but still valuable) traditional software engineering.

Perhaps you realized this web thing wasn’t going away, so you learned a bit of javascript. That went OK, how hard is it to add another language to your repertoire? Now you just wish it would compile like a proper language. You hate the browsers, and (foolishly) wish there was only one. You find Ajaxian, and start thinking of yourself as super-engineer; the guy who can just as easily write a web UI as a cronjob to perform background data processing.

With the confidence of JavaScript success, you decide to tackle CSS, and then the problems begin. You start from scratch rather than using a library, because after all this is just a display syntax. (Do you also rewrite the math class every time you need a random number generated?) You don’t bother to learn proper semantic HTML, they must be joking! Nattering on about web standards and accessibility. It should be cake.

Nothing works as you expect it to. Your columns won’t line up. You never validated your HTML, and you have a sneaking suspicion that there is an unclosed tag somewhere. You can’t make even the simplest design look right, and you are pretty sure CSS is to blame, rather than your understanding of the technology. This should be just another acronym on your resume, right?

No. Resoundingly, no.

CSS can be predictable, scalable, modular and even object oriented. If it is written correctly, beginners can be productively participating in creating clean, reusable code in 2-3 weeks. But we need to change our approach, understand that the fundamental algorithms for a display language are different than a programing language, and yet borrow everything we can from software engineering, so that we don’t waste time reinventing the wheel.

I visited Yahoo! last week to record a talk I had given at the Front End Summit in October. If you are a designer or an F2E it is essential that you understand the ways in which design choices impact overall site performance. This talk establishes guidelines for High Performance Design including 9 Best Practices.

9 Best Practices

1. Create a component library of smart objects.
2. Use consistent semantic styles.
3. Design modules to be transparent on the inside.
4. Optimize images and sprites.
5. Avoid non-standard browser fonts.
6. Use columns rather than rows.
7. Choose your bling carefully.
8. Be flexible.
9. Learn to love grids.

Web Directions North, Denver, February 2-7

I’ll be speaking more about Design and also CSS best practices at Web Directions North in February where I’ve been invited to give both a Performance Bootcamp Workshop and a CSS Performance for Websites and Web Apps Presentation. I look forward to seeing you there!

80% des problèmes de performance Web se situe au niveau des échanges avec le navigateur et sur le navigateur lui-même : échanges réseau, rendu dans le navigateur, organisation des composants dans une page etc.

Nous aborderons les principales problématiques et les solutions à mettre en œuvre. Forts de l’expérience de l’équipe performance de Yahoo!, à la fin de cette session vous saurez aborder la question des performances Web du point de vue du visiteur et mettre en œuvre les actions correctrices sur vos sites Web.

Cute, though the whole economy link is kind of odd.

I’m at Ajax Experience this week with my teammate, Stoyan Stefanov. This morning we did a demo of our new tool SmushIt.com. Smush it allows you to automate image optimization by using the best of open source algorithms to achieve the smallest, high performance images possible.

Smush it comes in different flavors:

• You can upload a bunch of pictures in your browser
• You can provide us with a list of image urls or
• You can get a Firefox Extension to optimize the images found on any web page

Je vais parler (en francais! eek!) avec Eric Daspet de la performance des images pour le web a ParisWeb. Les inscriptions pour Paris Web 2008 sont officiellement ouvertes. Jusqu’au 15 octobre au soir, vous bénéficierez de tarifs réduits. Le conference sera lieu a Paris le 13-15 Novembre. J’attend vous voir bientot alors.

Voila le proposition

Voulez-vous améliorer la vitesse de vos pages web et réduire l’impact écologique et monétaire de votre hébergement ? Voulez-vous faire ceci avec peu de changement de code et en gardant une belle interface graphique ? Cette session va vous apprendre les 7 étapes pour mettre votre site web au régime. Comment perdre des poids que votre site a pris en rajoutant les dernières nouveautés. Et, encore plus important, comment ne pas reprendre ce poids !

The Web Standards Curriculum published by Opera is a great place to start. It will give you the basics of Front-end Engineering from the ground up. The second wave of articles was recently published including a background image and sprites how-to by yours truly.

Time to board a plane, so I can’t tell you more just now, but check it out. It is a great place to get started or brush up on your understanding of web standards.

without ever supporting McCain.

“There is no difference between the two devils, except family values.”

We were talking about politics over lunch. After some prodding I was able to understand that he meant that Obama and McCain were equally bad. By family values, he meant that the definition of marriage would change to include homosexual couples. In his mind, all the issues are more or less equal, both candidates are instruments of the devil, but at least McCain won’t let homosexuals get married.

I had wondered how the right wing would make people vote for McCain given his history of centrism. I’d be surprised if he even really cared about gay marriage one way or the other, but he is pandering hard, and this is his audience.

I want to take back family values. We’re not in some kind of Huxley nightmare-utopia. FAMILY VALUES means something real; you can’t distort words and use double-speak to convince Christians to make choices that don’t make any sense.

“…at the dawn of the 21st century we also have a collective responsibility to recommit ourselves to the dream; to strengthen that safety net, put the rungs back on that ladder to the middle-class, and give every family the chance that so many of our parents and grandparents had. This responsibility is one that’s been missing from Washington for far too long — a responsibility I intend to take very seriously as President.”

— Barack Obama, Spartanburg, SC, June 15, 2007

Website performance is still very much in it’s infancy. Most performance experts come from a traditional engineering background and yet, as Steve Souders showed in his book, the front end is responsible for more than 80% of end user response time.

I was excited when Ed Eliot asked me to be a part of a SXSW web performance experts panel, not only because he and I always have really excellent conversations, but also because of the quality of the people who are on board for the panel. The panelists are uniquely positioned to speak to the concerns of web developers. In addition to being performance experts, we are front-end engineers — as yet a rare combination. In our day to day work, we have experienced the pain points we’ll discuss on the panel.

Who will be on the panel?

Ed Eliot, Stoyan Stefanov, Stuart Colville, and I will join forces to talk about website performance including practical solutions to common problems. These guys are brilliant, and the panel should be really fun.

VOTE FOR US!

My Treo stopped syncing in January and I immediately started missing all my meetings. I need the device to ring every few seconds to remind me to blink and breathe, so life without a properly synced agenda was awful — just ask my colleagues. Guppy brain.

A Palm user for the past eight years, I made the switch to an iPhone 3G a few weeks ago. I’ve had one palm or another since I was gifted an S300 and became (shockingly) a productive member of society. I vaguely want to give the iPhone a fair shot, aware that my bias toward familiarity is inevitable, however there are a few things about the iPhone that totally and completely suck.

The YUI team released YUI3 for a sneak peek preview. The goals make me happy… especially goal 2.

1. lighter (less K-weight on the wire and on the page for most uses)
2. faster (fewer http requests, less code to write and compile, more efficient code)
3. more consistent (common naming, event signatures, and widget APIs throughout the library)
4. more powerful (do more with less implementation code)
5. more securable (safer and easier to expose to multiple developers working in the same environment; easier to run under systems like Caja or ADsafe)

Glue is a cool thing from Yahoo. Now I’d be the first to admit that Yahoo has a geek-cred-gap. Given that cred-gap, it is really nice to be able to point to something well done and say, hey, I use that. Doug thinks the tools and rules put out by my team are one of those cool things. I think Yahoo! Search Assist, the drop-down help menu, is fab. I can’t spell at all, and, to be honest, I kind of suck at picking out those perfect words to narrow my search to just what I want. Search assist saves me so much time. Granted, this may mean I spend less time looking at ads, but next time I search, I choose Yahoo, because it makes my life easier.

Believe it or not, they’ve done it again!

Glue. Sweet sweet glue. (Dan, you’ll note the tea reference no doubt. Though, frankly, I don’t love glue as much as tea. Glue is great, tea is a necessity of life).

Glue is a search results page that already includes results from many of the sites I would have visited first anyway. It pulls in information from ordinary search results as well as many other sources such as; wikipedia, eBay, flickr, travel, train schedules, News, Google Blogs, maps, Local, Answers, YouTube, or shopping. The exact sources seem to vary by search term, but the end result is fantastic. It makes researching and getting an overall vision so much easier. Straight away you find useful information. You can then delve into classic search results better educated.

I spoke to audiences in four countries and got a little sick from eating street food along the way.

I just got back from a whirlwind 13 day performance tour of four countries. With only two days to present in each country I had to maximize impact as much as possible.

I was supposed to do two sessions the first day, and one the second. Instead it was more like four sessions the first day and three the next. Every two days I began the whole thing again. By the end, I couldn’t stand the sound of my own voice and I felt like I’d been run over by a truck. It was awesome.

No, seriously! I really liked it. It allowed me greater insight into the parts of my talk that work well, and others that are less fabulous. I think it has made me a better speaker, though my audience might disagree!

I believe this kind of survey will help us better understand our own industry. Though I do wish they has asked if people are focusing on performance as a strategic skill in their work. F2Es are absolutely vital to making fast websites.

And why not? I spent years eating french pastry, but I still love cake.

This comic rocks, I finally found it again. And at the same time discovered that the artist drew from personal experience.