This helps reduce http requests which in turn leads to faster loading times for your website.

Another tip would be to delete redundant CSS declarations. Remove CSS declarations that are not in use.

Move CSS on top and Javascript to the Bottom.

CSS declarations or file includes should be in between the section. This way browsers will know how to display the page before they even get to the HTML .

JavaScript files belong at the bottom , right before the </body> tag.  This prevents JavaScript code from rendering the page while things are still being requested.

Minify CSS and JavaScript

We’re going to use Minify and JSLint for this next part.

Copy all your JavaScript onto the clipboard onto the corresponding input field in Minify.

Then click “Hit Me”. and use the resulting JavaScript on your website.

Minify – http://www.reneschmidt.de/tools/minify/

JSLint – http://www.jslint.com

Make sure you check the JavaScript once again after it is minified to ensure it is still working before replacing existing JavaScript files.

Making CSS and JavaScript External

It is considered good practice to not use inline CSS and JavaScript. Always have them in external files. That way they’re easier to edit, reduce the size of the page, cache easier and reduce load times which leads to a better user experience.

That brings us to the end of the optimizing JavaScript and CSS post.

Until Next Time.

Building on the previous blog post on website optimization , this post is going to be on optimizing images on your site. If YSlow displayed that your images should not be scaled in HTML or make favicon small and cacheable, then this post is for you.

Correcting Dimensions in IMG tags

A lot of people do this. They use ,say an image that is 1200 x 784 pixels, they want displayed at 120×90. They then use html to scale it down. This practice works as in it displays fine but not on the optimization and site speed end. You see if you use Html to scale the images usually by using the img tag, transmitting the image will take a long time.

There are a lot of tools out there which can help you do this. I personally use Paint.NET. Its free and easy to use. You can download it from http://www.getpaint.net/

That brings us to our next step. Firefox’s YSlow comes with a tool called Smush.it Smush.it is our shortcut when it comes to image optimization. Reducing images, art, screenshots etc. would have been a lot of work otherwise.

How to use Smush.It

Open up Firefox .

Open up YSlow.

Under the YSlow tab, you should see four tabs on the top left. Click on Tools tab.

Click on All Smush.it™ . This should open a new window and you should see your images either being processed or optimized. You’re going to have to download them as .zip

Unzip them and upload the optimized images back to your server replacing the previous images. Preferably overwriting them. Repeat them for other pages of your site.

Info on using sprites to reduce emoticon load times for forums.

I’ve not looked into this much because it doesn’t apply to me . But an indepth explanation on how to use CSS Sprites to reduce load times can be viewed using the link below
http://sixrevisions.com/css/css-sprites-site-speed/

Content Delivery Networks .

This part can become an expensive affair. If you can afford this then by all means do so. It is worth the price and your website visitors will thank you for it. Now for the rest of us there are alternatives.

I use CloudFlare. It is a CDN that comes bundled FREE with a HostGator account. If your site is huge and the solutions that follow don’t help you out much , then I suggest getting a hostgator account to use cloudflare. Serving niches uses Cloud Flare. It is one of the many reasons I think anybody gets to see this Site. So it works wonderfully.

copyblogger.com uses http://www.netdna.com/ the Net DNA Content Delivery Network. So that could be another option you’d want to check out.

Googling “Content Delivery Network” should give you more options. I say this because I don’t too have much info what CDN’s the major websites use.  Bigger websites tend not to discuss their technology choices too much.

That brings us to the end of the Optimizing Images Blog Post. Next time we’ll look into working with CSS and Javascript on our pages to help optimize our website and entice visitors to stay longer.

Imitating what works is a Good Idea .

As always
Have fun People

Posting To Your Blog , Screenshots , Lifestreaming and Cool Tools You will love Using

Do you think Lifestreaming is here to stay ? Stay for more than 5 weeks that is ? The end result is gorgeous though

Part One 

“I have installed an interesting application – BlogJet. It’s a cool Windows client for my blog tool (as well as for other tools). Get your copy here: http://blogjet.com”

"Computers are incredibly fast, accurate and stupid; humans are incredibly slow, inaccurate and brilliant; together they are powerful beyond imagination." — Albert Einstein

What you see above is the default post for BlogJet. It does not post that automatically but its what you see when you open up BlogJet for the first time.

Yes, I’m afraid its True. I’m cheating on Windows Live Writer. I was running around looking for lighter software to use. I came across Blog Jet . It wonderful. Its not free though. There were a few others that were recommended to me. I could have sworn I had bookmarked them. Can’t seem to find them. Will mention them when I do. 

A little Windows Live Writer tip

Was having trouble getting Windows Live Writer to work with WordPress initially. That was the day I first downloaded it. I just wanted to share how I got it to work with my WordPress Blogs. It wasn’t detecting anything initially. Here’s what you have to do.

When you’re asked to enter the web address of your blog, enter the same address you would have to enter to log in to your Blog. What I mean by that is

Example –  http://yourwordpressblog.com  is the location of your WordPress Blog

               to login via the admin login you’d type

               http://yourwordpressblog.com/wp-admin <— this is what you have to enter when asked for the web address of your blog. You will have to replace “yourwordpressblog.com” with the name of your blog.

Everything else should go along like Clockwork. Hope that makes sense. Seeing as how everyone running WordPress is bound to run into this problem , I thought I’d share it.    

Make Screenshots

More than anything this blog post is about amazing apps and add ons and thingamagits you see the cool people using in the Blogosphere and everywhere else. Yes, looking pretty or handsome while Blogging or Internet Marketing is a Good Idea. It scores points with a lot of People. I don’t mean that looking pretty part literally but that would help too I imagine.

On the Left is a picture of my screen usually referred to as a screenshot. Sometimes you’ll feel the need to share an image of your screen or while performing an action or simply running a program. I use a program called ScreenHunter 5.1 Free. It is free and very flexible. You don’t have to take a snapshot of the entire screen if you don’t want to. Its a really great program and you can get it here. 

Its Freeware and can run in the background . Great stuff , absolutely love it and use it regularly for all sorts of strange purposes.

Another Screenshot of my desktop. That wallpaper looks awesome. I don’t remember where I got that from though. But it looks cool. So here’s the link if you would like to download the program.

http://www.brothersoft.com/screenhunter-free-71629.html

Its free and quite intuitive. You shouldn’t have any problems using it.

Downloading Videos Via Firefox and Getright

Ever found yourself wanting to download one of those tutorials. The ones that were made with Camtasia. This pretty much works with everything. It also works with Camtasia videos. Now I’m not suggesting you go and break the law whenever possible. Every now and then I’d find myself subscribed to a site with videos. I’d want to download those videos because I’m not perpetually online and would want them available offline . Thats where the Flashgot and any well known download manager comes in handy.

First you’ll need Firefox. Firefox is a browser like Internet Explorer. Secondly you’ll need what are known as add-ons. Add-ons are plug ins for firefox. What you need is the add-on called Flashgot. Lastly you need a download manager called Getright. There are quite a few you could use. Flash Get is another program you could use instead of Getright.

So basically you need

1. Firefox

2. Getright or Flash Get

3. Flashgot

Install them in that order and you should have them working.

Have a Great Day

Much More Next Post

Never let Fear or Doubt enter your mind. There is nothing you need to succeed except the power of your own mind.

– Andreas Ohrt ( www.MindPowerNews.com )

Congratulations ! You have made it to Part Two . What I’m discussing can be used to make any page. You don’t have to be designing Squeeze Pages alone with it. Starting from where we left off.

So we were discussing a favourite page of mine. Now I’d like to use it . All I have to do is Save it to my computer and then open it in Kompozer.

To see it click here. <- This leads to the readme.html wordpress page. I’m using it as an example.

Save it to your computer if you haven’t. Just to better understand the example. Hopefully you’ve downloaded KompoZer. If you haven’t its Free and you’ll need it. Download it here.

Now a lot of squeeze pages and sales pages we come across in Internet Marketing have that border like in the wordpress readme page. A lot of things like font size of the headings , the paragraph size are coded into a .css file.

Don’t worry its not going to get too complicated. Atleast not super duper complicated.

A lot of times there are things you’d have to repeat. Eg. You’d want your heading to be huge. You’d want a sub heading to be another font and slightly less that the 1st heading. Instead of coding all this stuff over and over when the need arises, they put that stuff into a .css file. The reason I mention this is because almost all squeeze pages and sales pages I’ve come across have this. So you’d have to get the .css file as well. If you chose Webpage Complete when saving the Page, you shouldn’t have any problems.

Now here is the Brain Dead part. Instead of writing a whole Sales Page or Squeeze Page, I’ll be copy pasting from another popular awesome Page. I’m doing this only as an example and am not suggesting you literally rip off stuff word for word. It merely makes it easier to explain and understand.

The above is a snapshot of what I’ve done with it . This is only an example. You can view it here. I’ve left some parts of the original wordpress readme page and Copy pasted stuff from Jeff Johnson’s Underground Training Lab. I did this merely to show you. I wouldn’t leave the WordPress logo up there if I were to actually use it , but you get the Point.

There’s not much to explain in terms of using it. All you have to do is edit it in KompoZer  ,add the form and do what you want to the page.

When Uploading it into your hosting account, you will have to upload the .css file. If you had saved the page correctly you should a folder saying “name_files”. Where name refers to name of the webpage you just saved. When uploading you will need to upload that folder.

Well actually you won’t need everything in the folder. The folder probably contains the logo and other images. It will also include a .css file  . The reason I’m asking you to upload the whole folder is because in the webpage has a link to the .css file. The css file tells the page what to look like and what fonts to use etc. Uploading the whole folder is easier on the Brain.

NOTE – The folder won’t automatically be uploaded when you upload the page to your hosting account. That is why you are doing this in the first place.

You may remove the images from the folder you won’t use. Leave the .css file and anything else you need . Then upload the folder. That should work fine too.

You can get some really good looking results this way.

As always

Have a Great Day !