The definitive guide to website speed optimisation for web designer.

Posted in by Nazrul Islam . Filed in Web Design

As a web designer did you ever think to improving your website’s loading speed? If you do, this tutorial will help you to better optimising your website’s performance. The principle of site optimisation is reducing HTTP request as much as possible. You might think i’m just designing website in normal way using standrad HTML/CSS with some necessary  jQuery plugin, so which HTTP request I’ve to reduce? Let me explain about HTTP request. When you link to an external CSS or javaScript file a using link or script tag, a HTTP request is occurred. If you link to individual 20 file in your markup, browser will sent 20 HTTP request to load these file. Not only CSS link or external javaScript sent HTTP request , each linked CSS or JavaScript file can sent many HTTP request too. Lets have a brief look on each topic.

Defending on project structure some time we have to link more then 5 external CSS file. Most common one is CSS reset like Normalize.css or Mayer Reset code. Many jQuery plugin also comes with their own CSS file. Instead these multiple file, we can marge this into one file. Look at code structure in the picture shown below.

CSS Structure

Here we commented a structure for placing our multiple CSS file into one. Make sure that your are placing your custom CSS style at the very last position of the page. Because web browsers render HTML/CSS from top to bottom, so custom CSS style will override if you place it first.

Try to replace image base design with CSS Gradient when possible, It will improve loading speed.   As we mentioned before each individual CSS file can occurs many HTTP request when they set and background image. Suppose you have 20 image icon in your web site, which causes 20 HTTP request, doing some tricks we can reduce it. First technic is using font icon, second one is sprite image technic.

How to use Font awesome? 

Font awesome is most popular icon font containing about 450 icons. You can downloaded it from here and off-course its free of cost, the main reasons behind its popularity! It also provide a direct CDN version link. We are not going to use CDN version and increase one HTTP request.  Copy CSS and font folder from your download folder and paste in your site’s root directory. In the  CSS folder there will be two file, one of them is minified version.  Just copy the CSS code for any of them and paste it after reset code in your main CSS file. Delete font awesome CSS file, we don’t need it any more. But remember to keep  font-awesome font folder along with your main CSS file. HTML markup should look similar like this.

We Just need to put <i class> followed by  fa fa-icon-name. To find a specific icon code search on their icon listing  page.  Font awesome icons are scaleable vector, so they can be customisable by setting font size, background and all other CSS property.  It gives much better experience  controlling icon’s behaviour rather then using image icon. Another favourite Icon font is IcoMoon. It has some customisable option and a large collection over 1200 font for their premium subscriber.  Using these Icon font, we can reduce many HTTP request, but some time we need to use image icon to match original design. In that case marge all image icon into single image and set specific icon by changing background position.  This technic is known as sprite image.

How to make sprite image?

To make a sprite image, first we need to get measurement of  our largest icon in original design.  Once we got it, we need to set our Photoshop grid size to our largest icon size. Based on our icon size, we can set grid to 32, 64, 128 or 256 pixel. Go to Preference>Guides, Grids & Slices>

Grid Setting

Set 32, 64 pixel or whatever you need in Gridline Every tab then hit OK. Select VIEW>SHOW>GRID  shown in next picture.

Enabling grid view

Click VIEW>EXTRA to enable grid display. To create a new file go to FILE>NEW

new sprite image

Here we creating sprite for 10 icons in tow row, thats why we set width to 5 X 64 = 320px and 2 X 64 = 128px in height.  Now Open your source PSD in a new tab and select each icon layer pressing CTRL+Click. Right Click on layer panel click Duplicate Layer then select your Sprite PSD. If you don’t get proper layer size you can convert it to Smart Object then duplicate it.

duplicaing-layerAlign all icons with pixel grid shown below

placing icon

Actually 32X32 grid fits these icon size, we have made it at 64X64. In this sprite each base icon has another one contains pink background. We will mainly use it for hover state.

Click  FILE>SAVE FOR WEB select PNG-24  and check Transparency for transparent Icon.

Save Sprite

Markup for sprite image looks similar like

In this markup we hocked our icon with a span tag. All span has a common class named icon-list-social for setting background image.  Other additional class (fb,tw,rss) for changing background position. CSS code for this mark up shown next.

Output result is for our Sprite image in browser looks like this


Icon font/ Sprite Image will reduce a lot of HTTP request and improve site performance.  Now lets talk about some addition optimisation technic. If you have multiple jQuery plugin you can marge them following same method we used to marge CSS. Each plugin also has a callback function warped in a DOM ready function. In case of of multiple plugin, there are no need to use multiple DOM ready function. DOM ready function has tow format, First one is much more readable format shown below

Second one just use shortcut like

What ever callback you find in your plugin reference, this two format are basically do the same thing. Warp all callback in a single DOM ready function. Optimise all images using suitable compression.  Finally minify all CSS and javaScript/jQuery file to reduce file size.  Even most web designer already knows some technique listed here, most often they have laziness to implement it. Don’t make a site that causes too much HTTP request and loads in 20 minute, your visitor will never come back to your site. Its a great disadvantage for a website designer. Hope this guide will help you to optimising your website performance.

Tags: ,