Looking At Smashing Magazine’s Web Redesign & Resulting Performance Loss

I’m always eager to see a major website’s approach to a site redesign. Any site that focuses on best practices for front end coding and design will take interesting approaches to incorporating emerging technologies and styles and it’s something that the front end development community always learns from.

We also are fairly quick to jump on things about redesigns that are buggy or faulty, which is why I’m surprised that Smashing Magazine‘s recent redesign overlooked one pretty big issue that could have easily been prevented.

The new look is slick as it’s lighter and fresher than their last one, using some pretty fancy media query techniques. But oh, the page load time! I ran the new home page through webpagetest.org for both IE8 and Chrome and found some abysmal results: 8.2 seconds for first view in IE8, 9.6 seconds in Chrome. Both took about three seconds to load a repeat view.

This is astonishing to me. Today, performance optimization should be an enormous part of any site’s redesign, especially one that focuses on web development best practices.

It appears that their main issue is the number of assets that are loading without any asynchronous techniques. There are tons of CSS and JS files that are loaded and I can’t figure out why they haven’t been optimized (or loaded asynchronously). The total page weight is heavy, more than 1300KB.

And the ads – oh, the ads! If ads are so central to the site, why hasn’t their loading been optimized? (And why do they disappear when I shrink my browser window?) Yes, media queries are really cool and a lot of the new transitions are great, but performance upgrades should go hand-in-hand with design upgrades.

Optimizing page load time is not something that we should be taking lightly.

It’s not a “nice to have” and it’s not something to put on a “let’s do this afterward” checklist. Sites like Smashing Magazine, who so many developers look to for best practice advice and inspiration, should be focusing on performance as a primary goal.

P.S. And really, still using a class of clearfix? This is 2012, people.

Dustin

Maybe it’s because I’m averaging 17mbps on downloads tonight (stunning as it’s a Comcast home-class connection) — but I could barely count to 3 before the full Smashing Magazine site loaded.

I also kinda ‘like’ how the ads disappear. I also noted that the navigation shifts from a left nav to a top nav, back to a left nav, and then to a drop-down menu of ‘categories’, as well… So the template basically re-flows with the browser reduction.

Weird, but kinda cool.

I totally agree with your position on both code, graphic and content optimization however! Great to see a post regarding this huge pet peeve of mine.

Lara

Dustin – I like how things move around too, but they move around so much that it’s as if the hierarchy of the page keeps changing. Is the side nav intended to be the main nav? Are the ads so unimportant that they disappear in nearly every browser size? I’m concerned that the amount of shuffling that happens means that Smashing didn’t think enough about maintaining the same hierarchy of content in every browser size.

Velislav

They just tried to optimize the content for 3 different screen sizes.
Is this so bad ? I also think its cool.

Regarding the page load time I don’t see a problem. It’s less than 3 seconds.
Maybe they fixed it?

If I have to point something wrong for me is the scalable logo. I don’t see why they need to squeeze and shrink it.

Anonymous

“still using a class of clearfix? This is 2012, people”

Sassy. I like it!
Or, should I say SAASy?
http://atulthanvi.com/ Freelance Web Designer

Thanks for sharing. Its good to see fresh content always.

Looking At Smashing Magazine’s Web Redesign & Resulting Performance Loss

Related Posts

Enjoyed this post? Share It!