The definitive guide to website speed optimisation for web designer.
Posted in 1 June,2014 by . Filed in Web Design
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.
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>
Set 32, 64 pixel or whatever you need in Gridline Every tab then hit OK. Select VIEW>SHOW>GRID shown in next picture.
Click VIEW>EXTRA to enable grid display. To create a new file go to FILE>NEW
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.
Align all icons with pixel grid shown below
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.
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