A few quick tips on how to improve site speed

Search engines care about page speed. Users care about page speed. It only makes sense that you try to make your pages load as quickly as possible, without losing anything important.

So, here's a few quick tips on how to do that. Let's get into it:

1. Reduce number of HTTP requests

Browsers have limitations how many parallel requests per server/proxy they do.

Firefox 2:  2
Firefox 3+: 6
Opera 9.26: 4
Opera 12:   6
Safari 3:   4
Safari 5:   6
IE 7:       2
IE 8:       6
IE 10:      8
Chrome:     6

Source: stackoverflow, you can also take a look at Browserscope.

So, what can we do about this? First thing that comes to mind is bundling. Bundling basically means that you combine all the different CSS or JS files into a single file which then browser downloads using only one HTTP request.

Before bundle:

After bundle:

Pretty nice, huh? In this manner we can really reduce the number of HTTP requests. So how do we do bundling?

Another way to reduce number of HTTP requests is also to use CSS sprites. This means combining image parts of your layout into one large image and then use CSS background-position to show appropriate part. This way not many small images are downloaded, but one larger which again - reduces the number of HTTP requests.

Not really related to bundling or sprites, but I also found one extra tip for designers - this interesting point on Dawid Walsh's blog - Combine Your CSS Media Styles Into One File.


Create a Simple HTML 5 Website using ASP.NET MVC and LINQ

We’ll be creating a simple but fully functional website. We’ll use the design, HTML and CSS from one of my previous blog posts: Step-by-step walktrough for coding a Web Site from a Photoshop template. So, HTML and CSS are basically already done. Of course, we need to integrate these files into ASP.NET templates, so the basic HTML & CSS will be repeated.

So, the layout is almost done and beside integrating it into templates we have to develop the website functionalities. This time I’ll skip the image gallery part, because I believe something like that needs a blog post of it’s own. We’ll add the image gallery and RSS another time, hopefully soon. :) So, the functionalities will include:

  • About Me section with fixed content inside
  • Last Blog posts on the home page
  • Blog section with posts sorted into categories
  • Working Contact form

So, we’ll steal some HTML/CSS from this design:

OK, let’s get into it!


Few quick CSS tips for easy summer reading

Finally the time has come for another Blog entry, cool and breezy, just right for the summer time. We’re going to do some XHTML/CSS Tips and Tricks you may or may not know. Either way it’ll be quick and simple post, just long enough for you to do the coding while enjoying a nice cold beer. :)

1.1. Simple separator using borders

Probably the most used border trick which creates a simple, nice looking content separator for us. HTML:

<div style="padding: 20px; background-color: #6d6e6d;">
    <div class="separator"> </div>

CSS is very simple, goes like this:

.separator {
    font-size: 0;
    line-height: 0;
    border-top: 1px #1f1f1f solid;
    border-bottom: 1px #c5c5c5 solid;

The code gives us a nice looking simple separator for our content:

All that is left to do is to play with border colors for the desider effect (and adjust margins as needed).

1.2. Fast „double border” trick

Two borders on a image using only img tag and no extra div:

<div style="padding: 20px; background-color: #6d6e6d;">
    <img src="golf.jpg" class="double-border" width="600" height="279" alt="Sveti Martin, golf, hotel and wellness" />

The CSS:

.double-border {
    border: 2px solid #595959;
    padding: 1px;
    background-color: #000000;

It’s really very simple. We use the padding and background color to add the extra black border. Together with the background div this gives us nice results: