Archive for April, 2011

Author: Tobias Zimmergren
http://www.zimmergren.net | http://www.tozit.com | @zimmergren

Introduction

The last week that just passed was filled with quite some cool happenings over at the BPCUK Conference in London. If you’ll follow the #BPCUK tag on Twitter you’ll find all the juicy information that you missed out on – there’s no real need for me to repeat it here :-)

Downloads

As promised, my session deck on Silverlight and SharePoint 2010 can be downloaded here: Download!

SP 2010: Developing for performance Part 6 – CSS Sprites

April 8th, 2011 by Tobias Zimmergren

Author: Tobias Zimmergren
http://www.zimmergren.net | http://www.tozit.com | @zimmergren

Introduction

SharePoint 2010 developing for performance article series:
In this series of articles I will briefly introduce you to some key concepts when it comes to developing for performance in our SharePoint 2010 applications.

Related articles in this article series

Part 1 – SP 2010: Developing for performance Part 1 – Developer Dashboard
Part 2 – SP 2010: Developing for performance Part 2 – SPMonitoredScope
Part 3 – SP 2010: Developing for performance Part 3 – Caching in SharePoint 2010
Part 4 – SP 2010: Developing for performance Part 4 – Logging
Part 5 – SP 2010: Developing for performance Part 5 – Disposal patterns and tools
Part 6 – SP 2010: Developing for performance Part 6 – CSS Sprites
Part 7 – SP 2010: Developing for performance Part 7 – Crunching those scripts
Part 8 – SP 2010: Developing for performance Part 8 – Control that ViewState

Part 6 (this article):
In web development today its very important to keep performance in mind – this is especially important in any site that is published externally or for whatever reason will have heavy traffic. In this article I will briefly cover the area of CSS Sprites, how they are implemented in SharePoint 2010 and of course how you can create them yourself.

Introduction to CSS Sprites

What are CSS sprites anyway?

CSS sprites is a technique used to reduce the number of requests for images on a site when visiting it. Normally when you see a web site today there’s plenty of files being requested and loaded upon the request made. With the use of CSS sprites we can reduce the amount of files that we need to request from the server by consolidating many image files into one file and use CSS to display the correct part of that consolidated image when it needs to depict your specific image.

Short in short: Take a bunch of separate images and smack them together to one single file. Voila, you’ll only need to request one file from the server.

SharePoint 2010 and CSS Sprites

So why are we talking about CSS sprites here anyway, isn’t this supposed to be all about SharePoint and awesomeness? But of course, and that’s exactly why we’re talking about it – CSS sprites are a natural part of a normal SharePoint 2010 installation. By default, there’s CSS sprite techniques used to render and display images in (for example) the Ribbon menu.

These are some samples of images used with CSS sprites in SharePoint 2010:

FGIMG.PNG jsgridcluster.png
FGIMG jsgridcluster

As you can see in any of the two images above the many small images/icons have been smashed together into one single image file and then there’s some CSS magic to position it. This is basically what it’s all about.

Why should I bother learning to use CSS sprites?

This would be like asking yourself the question "Why would I develop something that is of great performance" or "Why would I do something awesome". No more rhetorical questions please ;-)

Of course the reasoning behind creating CSS sprites are that you can develop web applications that can reduce the page load and enhance the performance of your sites and make them load quicker and be more responsive.

Creating CSS sprites for my applications? How?

There’s a few ways to create CSS sprites for you own applications.

  • Do it manually.
    • This approach requires a lot from you (the designer) in order to hack it up properly and make sure it’s pixel-correct.
  • Do it using a tool
    • This approach is what I normally use.
    • With any of the tools on the market to create CSS sprites you’re better off than doing it manually – all you have to do is dump you images into an application and it’ll output one single image along with the CSS markup for that. Awesome.

For obvious reasons mentioned above I will not be demonstrating how to do this manually but will rather be using any of the hundreds of tools out there to create the sprites.

In this example I’m going to use my main man Waldek’s tool called SpriteGenerator.

There’s a bunch of other tools available to create and generate these sprites as well of course, bing.com is thy friend.

How to: Generate CSS sprites using a tool

In this section I’ll talk you through our current application and what it looks like, what we want to achieve and finally how to achieve it.

Our current application, a visual sample

This is my current sample application before we start using sprites.

Control Panel Web Part (dummy):
image

This is the Visual Studio project, containing all the images and resources:
image

As you can see there’s quite some images being loaded. The images used in the application (my Web Part) will be fetched using a normal HTTP-request and that’s when one could realize how quickly those small requests can add up to impact performance.

This application uses some generic HTML markup like this:

         <div  class="width300p"> 
             <div  class="leftalign floatleft width30"> 
                 <div  class="height70p"><asp:Image  ID="Image2"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/mail.png"  /></div> 
                 <div  class="height70p"><asp:Image  ID="Image3"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/message.png"  /></div> 
                 <div  class="height70p"><asp:Image  ID="Image4"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/more.png"  /></div> 
             </div> 
             <div  class="centeralign floatleft width30"> 
                 <div  class="height70p"><asp:Image  ID="Image5"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/notebook.png"  /></div> 
                 <div  class="height70p"><asp:Image  ID="Image9"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/search.png"  /></div> 
                 <div  class="height70p"><asp:Image  ID="Image13"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/favorites.png"  /></div> 
             </div> 
             <div  class="width30 floatright"> 
                 <div  class="height70p"><asp:Image  ID="Image6"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/info.png"  /></div> 
                 <div  class="height70p"><asp:Image  ID="Image7"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/logoff.png"  /></div> 
                 <div  class="height70p"><asp:Image  ID="Image8"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/question.png"  /></div> 
             </div> 
         </div>

Now, in order for us to utilize the CSS sprites instead, and not have to make a request for each of the images separately – we’ll use the SpriteGenerator and create us some nice CSS sprite magic.

Using the Sprite Generator to make some magic

Like I said before, we’ll be using Waldek’s SpriteGenerator for this sample.

Just open it, put in the images you’d like for it to make some magic with and then simply hit the magic button.

Tip: Check out how to use the SpriteGenerator here

The result of using the SpriteGenerator can look something like this:
image

This is one consolidated image containing all the graphic from my application. But instead of having about 30 different icons in my project, I now have only one.

The generator will create the CSS needed as well, and it can look something like this:

.sprite { background: url(‘/_layouts/images/TOZIT.CSSSprites/TOZIT_Sprite.png’) no-repeat top left; }
.pc { background-position: -0px 0; width: 47px; height: 64px; }
.question { background-position: -47px 0; width: 53px; height: 64px; }
.info { background-position: -100px 0; width: 54px; height: 64px; }
.mail { background-position: -154px 0; width: 54px; height: 64px; }
.more { background-position: -208px 0; width: 54px; height: 64px; }
.user { background-position: -262px 0; width: 55px; height: 64px; }
.world { background-position: -317px 0; width: 55px; height: 64px;  }
.video { background-position: -372px 0; width: 56px; height: 64px; }
.favorites { background-position: -428px 0; width: 57px; height: 64px; }
.edit { background-position: -485px 0; width: 60px; height: 64px; }
.date { background-position: -545px 0; width: 64px; height: 57px; }
.file { background-position: -609px 0; width: 64px; height: 64px; }
.group { background-position: -673px 0; width: 64px; height: 58px; }
.home { background-position: -737px 0; width: 64px; height: 62px; }
.left_arrow { background-position: -801px 0; width: 64px; height: 59px; }
.logoff { background-position: -865px 0; width: 64px; height: 78px; }
.notebook { background-position: -929px 0; width: 64px; height: 51px; }
.rigth_arrow { background-position: -993px 0; width: 64px; height: 57px; }
.search { background-position: -1057px 0; width: 64px; height: 61px; }
.sound { background-position: -1121px 0; width: 64px; height: 58px; }
.stop { background-position: -1185px 0; width: 64px; height: 59px; }
.vault { background-position: -1249px 0; width: 64px; height: 53px; }
.message { background-position: -1313px 0; width: 66px; height: 64px; }
.image { background-position: -1379px 0; width: 84px; height: 84px; }
.tozitlogo { background-position: -1463px 0; width: 250px; height: 101px; }

Now, what this really means is that you now have the ability to actually use only one single image to portray several.

New Visual Studio structure

Obviously, with the new update and only using one single image – the Visual Studio project might look something like this:

image

New HTML markup

And finally, there needs to be some changes in the HTML markup to reflect the changes with the images. The markup could look something like this:

         <div  class="leftalign floatleft width30"> 
             <div  class="height70p sprite mail">&nbsp;</div> 
             <div  class="height70p sprite message"  >&nbsp;</div> 
             <div  class="height70p sprite more"  >&nbsp;</div> 
         </div>

How does using CSS Sprites affect requests, hence performance?

Dealing with sprites isn’t very hard to get started with as you saw in the previous short samples. But what’s more interesting from a performance perspective is of course how it can affect the performance of the requests being made towards the server.

Let’s do some generic Fiddler-magic to see what the requests look like without using sprites and then what the requests look like with the use of sprites.

Fiddler test 1: NOT using CSS sprites

image

Request Count 17 total requests made to the server!
Bytes Sent 8 137 bytes
Bytes Received 76 164 bytes

Fiddler test 2: Using CSS sprites

image

Request Count 3 total requests made to the server!
Bytes Sent 1 722 bytes
Bytes Received 139 369 bytes

What you can easily conclude from the initial tests is that there’s more requests without the CSS sprites, while the size can be slightly larger for a consolidated image when using the sprites.
It’ll load and render quicker by downloading only the 3 files instead of the 17 files due to the aggregation time it takes to render the content.

Visualize the results, please!

Using CSS sprites
(Time in seconds to load the data)
NOT using CSS sprites
(Time in seconds to load the data)
image image

RESPONSE BYTES
image/png:    120 250
text/html:    16 593
~headers~:    1 748
text/css:    778

RESPONSE BYTES
image/png:    52 417
text/html:    16 709
~headers~:    6 260
text/css:    778

ACTUAL PERFORMANCE
Aggregate Session time:   
00:00:00.531 (0.5 seconds)
Sequence (clock) time:
00:00:00.4281250 (0.4 seconds)

ACTUAL PERFORMANCE
Aggregate Session time:
00:00:01.390 (1.3 seconds)
Sequence (clock) time:
00:00:00.5625000 (0.5 seconds)

I did some tests with two machines, two different projects and a couple of clients to request the pages and the results (on average) was something like this in rendering time. The chart below is a relative visualization of the results per average.

Chart

Summary

The impact of a system with a lot more requests for data than these samples, more users and in generally more traffic would differ a bit more than the charts here. Using sprites in combination with caching the data is a good practice to keep the amount of requests to the server to a minimum.

Even if this minor change don’t have any critical impact on improving the performance it’s important to consider. "All improvements are good improvements".

Author: Tobias Zimmergren
http://www.zimmergren.net | http://www.tozit.com | @zimmergren

Introduction

It probably doesn’t surprise anyone that the BPC conference in London is one of the main events to look forward to in the realm of SharePoint conferences.

I will of course be attending this conference and I’ll be delivering an introductory  session about Silverlight and SharePoint.

My session: Developing with Silverlight + SharePoint 2010 = Awesome

I’ll be talking about how you can utilize Silverlight in SharePoint 2010 to create some cool RIA applications hosted inside (or outside!) of SharePoint.

In this session you’ll get acquainted with what Silverlight is and how it plays along with SharePoint 2010 in various ways.

We’ll of course be looking at how to create our very own Silverlight Web Parts and applications and host them inside of SharePoint 2010.

The preliminary agenda of the session looks something like this;

  • Silverlight 101
  • Integrate with SharePoint 2010
  • Preferred deployment methods and developer guidance
  • Developer patterns
  • OOB Experience (Out of Browser) – Bring your Silverlight app to your desktop
  • And much more

Last years conference (Evolutions conference)

Just like you already know there was a volcano that found it suitable to erupt just in time for the conference last year that put a cane in the wheels for a lot of the attendees and speakers.

My flights were cancelled in last minute so I had to find another way of making my way to the conference last year. One day before the conference I basically gave up hope and I just posted a tweet on Twitter saying "Hey, I need to go from Sweden to England, any takers?".

A few minutes later a good friend of mine calls me up saying "Hey, I’m going to The Netherlands to pick up my girl since the flights are cancelled and boats and trains are full. I’m leaving in a few hours by car toward NL. Care to join?"

Alright, why not I thought… We drove from Sweden through Denmark, Germany and finally reached Rotterdam in Holland after a long journey. This is where he picked up his girl and were bound to head back to Sweden again.

I’m dropped off there, in the middle of nowhere, without any means of getting back to Sweden or getting on to England. All the boats and trains were full, remember? 
This is where I’m using Twitter again and post a tweet asking if anyone is in Rotterdam and will be driving to England in the near future.

Marianne tweets me back saying "Hey, we’ve got a spare seat in the car, we’ll pick you up tomorrow at 08.00 outside your chosen hotel". Sweet! Now we’re talking.

We drove from Holland through Belgium and France to finally take the Eurotunnel and reach England.

Even though that trip was a real blast and can’t really be depicted in words here, I really hope that the flights are leaving as scheduled this time!

Steve explaining the long journey

Summary

So if you’re attending BPC UK this year and care to join us in our adventures in the SharePoint jungle and the pubs – ping me.

This year I’m counting on the flights and I’m hoping to see as many of you as possible for the conference in London next week.

Until then, be awesome.

TechDays 2011 in Örebro was a great success!

April 2nd, 2011 by Tobias Zimmergren

Author: Tobias Zimmergren
http://www.zimmergren.net | http://www.tozit.com | @zimmergren

Introduction

logo-svart

This week during Tuesday and Wednesday we had one of Sweden’s coolest Microsoft conventions of the year – Microsoft TechDays.

It was a great success with many new acquaintances and some very cool sessions being presented.

Microsoft Awards 2011

microsoft-awards

This year I was on the jury-board for Microsoft Awards 2011, where we did a thorough job of picking the winning solution in each of the five categories (Web, Phone, Cloud, Client, Student).

It was pretty cool to see all these exciting solutions from all the nominees. There’s some pretty cool and innovative technologies involved in this years winning solutions.

I would definitely urge everyone to submit some cool and innovative solutions to the Microsoft Award 2012 contest that will be presented next year at TechDays 2012.

Sessions

What’s a good conference without the great sessions from all of our awesome speakers in Sweden? This year at TechDays there were some heavy-duty sessions as well as introductory sessions to cure everybody’s hunger for knowledge!

You can find all the sessions that was presented here in the agenda! The sessions will be uploaded to the site shortly for you to download.

Networking opportunities

If you haven’t been at TechDays and are thinking about going and you’re trying to find suitable reasons for doing so… Then think no more. If you’re like me you’ll make probably attend some of the most interesting sessions and then go around socializing and networking. One of the main aspects of conferences today are the possibilities for growing your network.

Summary

Attend TechDays 2012. It’s awesome.