Essential Search Engine Optimisation Tips & Techniques


Search Engine Optimisation (SEO) is something of a dark art. When people say search engine these days they really mean Google, who now control around 90% of the UK search engine market according to Hitwise. Since Google don’t publish details of how they return their results, an entire industry has sprung up to help companies push their websites to the top of the results.

White hat vs black hat

Such is the mystique surrounding SEO that two of its most important terms sound like they’ve been lifted from Spy vs Spy. White hat techniques are legitimate methods for improving ranking such as writing content with keyword use in mind, using keywords in the page title, and proper use of heading tags. Black hat techniques are more dubious ‘hacks’ that may improve ranking today, but may lead to your site being removed from the results altogether tomorrow.

We only use legitimate techniques to ensure that your site is placed as high as possible without risking a blacklist.

Keywords

Put simply, keywords are those words and phrases that your visitors will be entering to find your site. For example if your company makes spoons, potential customers who are looking for a company like yours will probably enter search queries like website development, php programmer and wordpress theme development. You need to make sure that the pages on your site are liberally sprinkled with phrases like these so that you are placed as high as possible in the results. These keywords should be used in your page title, page description and main headings on your page.

Insights for search

A useful tool for determining important keywords in your business area is Google’s Insights For Search. It has a wealth of features, but we find it most useful for finding the relative importance of different keywords such as for Website Designer.

Page size

Google’s recent updates give priority to those sites that load quickly, so page size and page load time are more important than ever. If your competitor’s site loads quicker than yours, they’re likely to be pushing ahead of you in the results page.

Getting links to your site

This is the number one method of improving your ranking in search results, and perhaps the hardest to achieve. Getting high-quality sites to link to yours makes a huge difference to your results placement – but conversely, poor-quality site links can harm your placement just as much.

Issuing periodical press releases featuring your web address can be a good way to get news sites to link to you, which are typically highly-placed themselves. Posting messages on well-respected web forums is another tried-and-tested technique, especially since you can control the text of the link itself. One of the most important factors is the text used on the hyperlink, which Google uses as a keyword indicator.

As an example, we include a link to our own site on every website we build, varying the link text from site to site but usually something like Web Designer . This improves our search results placement and associates Web Design and Iteracy in Google’s index.

Common SEO techniques

Here are some of the techniques we use to make sure your site is placed right where it should be – at the top!

Page title

This is one of the most important factors for placement in search results. Your page title should sum up the page, giving search engines and users a quick summary of the page. The title of this page is Search Engine Optimisation : Iteracy which gives the user and search engine a four word summary of the page. Each page on your website should have a descriptive and unique page title.

Page description

The page description field isn’t essential, but where you include a description it should be unique. Google will usually display your page description instead of a snippet of the page if you include one. 

Body text and headings

The text of your page should be written in clear, correctly-spelled plain English, but written with your keywords in mind. Note that repeating your keywords over and over has been proven to actually lower your ranking – the important point is that your content must be written in complete sentences.

Another important factor is the use of page headings, especially the H1 (Heading 1) HTML tag. This page uses one H1 and a dozen or so H2 headings. Your page should contain a reasonable amount of text on the page – some studies suggest that very short pages are penalised. Finally, all images should have alt (alternative) text or deliberately blank labels.

Page URL

The page URL (web address) is an important tool in improving your search result placement. Google looks at your page URL for search phrases, so a page like
http://www.jayantisolanki.blogspot.com/index.html?page=184793
will be placed lower than
http://www.jayantisolanki.blogspot.in/search/label/Apple
In addition, your visitors will find it a lot easier to understand and remember!We recommend that your site doesn’t have more than three levels of pages, that is more than three slashes in any URL. 

Well-written code

The code behind your website pages should validate to the agreed standards. As a technical feature this is often overlooked by site owners, but every page should be accessible to disabled users and meet the W3C guidelines for standards. You can validate any page by going to the W3C Markup Validation Service.

Links out to external sites

Not as important as links in, links out to external sites can make a difference to your search ranking. Linking to poor-quality sites, or selling links on your site has been shown to negatively influence search results, and links out to high-quality sites may improve your rank in the same way. This page contains a number of links out to high-quality sites.

Revised Google SEO Guide 2012 Edition: Big Changes in Algorithm


h2 { font-size:18px;}

Everybody is buzzing all around now, how latest changes Google did affected their search traffic greatly! Chances are if you monitor your own properties on Google Analytics, you will see significant drop in your traffic in March!

1WD was seriously affected as well from March 20! Besides Google Panda release, there were 2 rounds of changes Google did, hurting almost every site search traffic:

Panda 3.3 – Search quality highlights: 40 changes for February
Panda 3.4 on March 23 – Search quality highlights: 50 changes for March

So what exactly do these changes mean? Do you need to be worried and what can you do to be prepared and be more likable in Google’s eyes?

In this Google SEO guide I will show you the behind the scenes on how 1WD was affected, explain how to monitor your traffic better and how to be more prepared in the future. A lot of websites were hit hard, even high authority websites. We always have been focusing on high quality content here, never used spammy link building techniques and we believe our social presence is very strong as well.

Revised Google SEO Guide 2012 Edition: Big Changes in Algorithm

So what the hell is happening here?

Which sites were affected, which were not?

After asking around, I found out that mostly new websites ~1 year weren’t affected, but a lot of sites which had some very high-ranking keywords, felt a big decrease there.

It seems if you have average links, new website and haven’t done spammy SEO promotion, you are doing great. However if you have something to lose as old, stable top keyword rankings, you got hit.

I compared several top web design websites on Alexa and here are results for the last month March 15 to April 15:

  • 1WD – 6% drop (it was more like 15% drop in reality for me, which means everybody was hit much harder as Alexa shows)
  • SmashingMagazine – 6.5% drop
  • Sixrevisions – 2% drop
  • WebDesignerDepot – 5% drop
  • Css-Tricks – 4% raise
  • Designm.ag – 12% drop
  • TutPlus sites – 3.7% drop
  • SpeckyBoy – 4% drop
  • SpyreStudios – 7% drop
  • Hongkiat – 9% drop
  • UxBooth – 5% drop
  • WebDesignerWall – 3% drop

You can check Copyblogger with 15% drop  and Quicksprout 16% drop in other niches! Crazy right? And those are just Alexa’s inaccurate stats, if I compare with 1WD Analytics, then I believe all of these sites in reality got 10-20% drop in traffic!

All of these blogs are very popular and always focus on high quality articles. This really doesn’t make sense and it shows how we need to rethink what we are doing online, what we are writing and how we need to promote our websites.

The most visible and buzzed topics about Google changes were:

  • Big link networks taken down
  • Duplicate page content
  • Over Optimization
  • Too many ads above the fold
  • Social signal importance

What mistakes should you avoid doing? And how to fix them?

Its time to list down the most popular mistakes we all probably have done before, but should avoid now! Interesting that a lot of these mistakes aren’t new, but before all of those techniques were really working. Most mistakes are easily found because they do not look real and Google has raised his eyebrows to search everything unnatural.

1. Obsessing about exact-match anchor text

Everybody who has done link building anywhere has been working to target perfect term for their website. Wherever you could, you try to include your term, for example: web design blog.

You can include this term while:

  • Commenting on other blogs
  • Writing guest posts
  • Getting paid links, advertising
  • Writing your forum comment, Yahoo Answers, Quora, including term in signature
  • Using link building tools, blog networks

Previously this technique was really working even if there were people warning about over working, but there weren’t so many drawbacks. Until now.

Such obsessing do not look natural for Google and it’s easy to spot it!

How to fix this mistake?

Do your keyword research again and choose 5-10 terms you would like to rank for and mix them in wherever you can. Change your signatures to be different. Instead of working for one term, when guest posting for example, include related article you have on your blog, not your home address anchor text.

While working on your brand awareness be as helpful as possible, don’t just link back to your site, link to others, link to very specific posts if you have, which are related. The same is about comments – if your comment is valuable and you have high quality article written about the same issue, include it, but don’t obsess about always mentioning your brand!

Good practice is also to check how others relate to your brand! Usually if they will want to share your website to others, they won’t tell – check out this web design blog. Instead they will tell to check out 1stWebDesigner (it helps to have related keywords in your domain, of course as we have – web designer).

2. Ads Above The Fold

Google has announced that pages with too many ads above the fold are now penalized by Google’s page layout algorithm. Strangely Google itself is not following their praised best practices.

Ads above fold google

These news completely make sense in order to ensure the best reading experience, however it’s hard for blogs who want to earn some income to remove those top ads, without loosing money.

We are doing bad work on 1WD ourselves, but we are working on removing those ads slowly and once our own Labzip product will be ready, we plan on having just one banner ad on sidebar for better experience.

How to fix this problem?

Easy answer – just remove those ads! Every blog owner knows it’s not so easy to do that, as it removes any income! What you can do instead is to move some of those ads below the first page, put them on the middle or bottom of sidebar or at the end of the blog post.

Great solution is responsive websites, where on smaller screens you remove those ads completely or leave just few of them. On Codrops website, you will see ads following to the bottom of page in that way cleaning up above the fold section (scale that site resolution down, to see effect in real life).

Very good example is SmashingMagazine website:

This is the screenshot from website on 1000px width:

Smashingmag ads

This is the screenshot with 1024×768 resolution:

Smashingmag 1024 resolution ads

As you can see on the first image, you can see just 2 ads, while in second one there are 8 ads above the fold. Even then though SmashingMag also saw decrease in search traffic. My guess would be that too many people on 1024×768 still see those ads, but the trending is right. A lot more people are using tablet devices and mobile phones to browse internet and they will see little ads there.

The same is true about big resolutions, I have Macbook Pro with 1680×1050 resolution, and while browsing SmashingMag on full screen those sidebar ads do not seem to be hurting readability.

Suggestion – create a responsive website and remove as many ads as possible on smaller screen sizes. In dream world, people with 1024×768 and less shouldn’t need to see sidebar ads.

Summary: going responsive and removing some of the top ads and a lot of links from top could definitely help improve readers experience and also will make Google like you more. Removing clutter from top navigation is top recommended while planning your design.

3. Duplicate page content

This is a very popular technique used by spammers, who just copy other site content and publish it as unique. Don’t do that. Ok, I bet if you are reading this blog you aren’t doing it anyway, but also check your site for bad code, which makes your site content to be duplicated. For example I checked my SeoMoz pro and saw I have a lot of page duplicates, where on WordPress writers use images, but don’t remove default link from them. For my layout it created one more page with that image, which was taken as duplicated content for Google.

Be sure you don’t make such silly mistakes, which can hurt your rankings and make experience for your visitors worse.

If you want to read more about duplicated content and check if you aren’t making any mistakes visit those links:

  • Virante – This tool diagnoses common causes and effects of duplicate content penalties;
  • Check your Google Webmaster tools to improve your site;
  • 7 Ways to Tame Duplicate Content – read this old, but still relevant post from SEOMoz.

1wd duplicated content

Here you can check more common SEO mistakes from official Google Webmaster Central blog, check this video ( created on March 19,2012):

What should you do now to improve your search rankings?

Okay, you heard about a lot of mistakes, but what exactly do you need to do now to be friends with Google, to improve your traffic and brand?

A lot of fundamentals have never changed, Google’s changes just encourage you to work on best content, real relationships, best user reading experience and be quick to change and improve.

1. Don’t chase the algorithm, create content for users

You might be hearing top SEO advice all the time, people talking how to help you promote your content, get easy way to huge traffic and high-ranking. The truth is even if some of these spammy techniques work, they won’t work in short future. Blackhat SEO guys, make it their job to search for the holes and change all the time, but it’s a hell of the work and they must be very careful. Just very few guys are so smart, so experience that they can really work on gaming the system.

I would suggest to work on long-term white hat techniques, which will do a lot of good for you in long run. With online business it’s important to feel safe about it and know that you will earn approx the same or more money each month.

2. Track everything

Use Google Analytics, KissInsights, Kissmetrics, Seomoz Pro, Webmaster Tools to be able to keep up with trends, get information about your visitors and make sure your site follow the best techniques, check if links are working.

3. Be aggressive and quick on changes

  • If you are interested on being friends with Google, you need to be friends with your visitors. If all the sites are going mobile and on tablets, you need to create your website to be accessible on those new devices.
  • If everybody is implementing HTML5, CSS3 then use it  so your code becomes cleaner and shorter.
  • If browsers are stopping to support Flash, then you better start focusing on new techniques.
  • Responsive designs help for site to be supported on all those different resolutions, use it!

4. Social network importance

Google is pushing its social network Google+, Facebook is working together with Bing search engine, Twitter search results appear real-time. The future is in social networks, Google are getting better and better on indexing such information very quickly, they listen to social signals.

Actually those are great news because before Twitter, Facebook was completely different traffic sources, now they complement each other by showing up in search results as priority. If you want to work on search engine optimization, work on social networks! We have quite a lot of them, I didn’t mention Pinterest and LinkedIn even yet!

5. Update Your Old Content

This can take a lot of time if you have a lot of articles, pages, like we have on 1WD, but encouraged to do. If you have old posts which rank very good, its worth updating them, checking for broken links, up to date information. You will get huge benefits from that like more social signals, new comments and your posts will be kept ranking very well.

If you have written very poor content in past, then consider editing it, don’t delete those posts, but invest in quality.

6. Implement SEO basics and good on-site strategies

The most important thing is to use very simple and clean code, validate HTML and CSS to prevent any crawl errors. If you will keep your code clean, pages will load faster – load speed also affects search rankings!

While working on your website design, remember to keep your top navigation simple and short ( something we are not doing!) We were thinking that detailed navigation will help users to browse around, but in fact it’s only creating clutter, as people just want to read the latest, then most popular posts and if they want to find something they use search anyway.

7. Work on good link building techniques

These include writing guest posts, working on real relationships with influencers, with your peers where you can help each other by linking on relevant posts, writing comments and leveraging from those relationships.

Actually the same way you need to work on social relationships with goal to get more social signals, the same way you work on link building indirectly just working together with people helping each other. For example, if you would own 1WD, you would connect with similar web design blogs, interact with blog owners, link to their sites – they will return the favor one way or another just because they will consider you friend.

Tools to use for better SEO on your own site:

WordPress SEO by Yoast (free)

In past I have always been using All In One SEO, but now transferring to Yoast plugin, because it is very complete, everything in one place, easily explained and once you setup it, you can forget about it, just add what’s required to new posts and enjoy the best SEO practices.

If you invest time in researching all of this plugin features, it will be enough for you on-site SEO efforts!

Some of the popular features include:

  • Post titles and meta descriptions
  • Robots Meta configuration
  • Google webmaster tool verification, Bing webmaster tools
  • XML sitemap
  • RSS enhancements
  • Edit your robots.txt

WordPress SEO Plugin  Search Engine Optimization Plugin  Yoast

SEO Smart Links (79$ for 3 months)

SEO Smart Links – Premium Edition enhances your search engine rankings by automatically inter-linking your posts. In this way you are working on link building magically while writing new posts, which is very useful as each links also counts as vote for search engines. Start with your own site!

This is premium plugin created by Vladimir Prelovac, there are some free plugins around like this, but I cannot vouch for them.

Some of the features:

  • Enhanced content parsing algorithm
  • Advanced automatic interlinking options
  • Advanced custom keywords options
  • Advanced control over number of created links
  • Support for link redirection/link cloaking

SEO Friendly Images (free)

This plugin will come really handy for your image optimization, also created by Vladimir Prelovac.

SEO Friendly Images is a WordPress SEO plugin which automatically updates all images with proper ALT and TITLE attributes for SEO purposes. If your images do not have ALT and TITLE already set, SEO Friendly Images will add them according the options you set. Additionally this makes the post W3C/xHTML valid as well.

Seo friendly images

CommentLuv Premium (free to 67$)

Comment section is where you should spend a lot of time as blog owner, if you work on regular content then you must encourage comments. Your visitors are actually helping you to add more good content to the post by leaving valuable comments. But in order for them to do that, you need to encourage them by rewarding your visitors. How about the link back to their recent post?

Some of the best features:

  • 10 post incentives – if visitor share post on G+, Twitter or like, he can choose which post to include there
  • Control over do follow, nofollow attributes
  • Built in tracking system
  • Beautiful anti spam plugin GASP built-in, to eliminate spam. Actually a lot of options to take care of spammers wanting to just get their links.


If you want to read more benefits of using this plugin, check this awesome plugin review made by Ana, her blog posts usually get from 20 to 100 comments. Only thing missing in this plugin is beautiful design, but planning to take care of that by manually redesigning it.

Google WebMaster Tools

Must use tool where Google will directly inform and help you know what sections of your site needs to be improved, what problems it may get or is getting.

Google webmasters tool

SEOMoz Pro (99$ per month)

SEOMoz is a proven tool created by SEOMoz experts, their expertise and great blog leaves no doubt they know what they are talking about. I am using their software to get detailed analysis what kind of most common errors and warnings I have on my site, manage keywords, keep eye on search traffic where data is driven from your Google Analytics account ( ah, you should have Google Analytics installed of course).

It is quite expensive, but I really feel it is helping me to simplify SEO and social monitoring on my own website. If you take SEO seriously and want to make your life easier, consider getting this tool.

Remember they have a big team and they are regularly improving, crawling your site each week, notifying you about issues that might impact your performance.

Seomoz pro seo optimization

Xenu Link Sleuth & Screaming Frog SEO Spider (free)

This tool is helpful for checking web sites for broken links, analyze all of the SEO basics, store information locally and then if any problem arise you can check on history to help you diagnose which changes may have affected that problem.

Link verification is done on “normal” links, images, frames, plug-ins, backgrounds, local image maps, style sheets, scripts and java applets. You can download this software for Windows, Mac and Ubuntu.

Additional features:

  • Simple, no-frills user-interface
  • Can re-check broken links (useful for temporary network errors)
  • Simple report format, can also be e-mailed
  • Executable file smaller than 1MB
  • Site map

Xenu link sleuth checker

Sites to read to check on further Google SEO changes and discoveries:

Here are the blogs, video channels and articles to read to check on what’s happening behind the scenes on Google and to find further proven explanations and solutions for problems you may have.

Google Webmaster Central

This is the official YouTube channel for Google Webmaster Central, your one-stop shop for webmaster resources that will help you with your crawling and indexing questions, introduce you to offerings that can enhance and increase traffic to your site, and connect you with your visitors.

Google webmaster central youtube

Seomoz Blog

Seomoz product founders happen to own one of the best SEO blogs out there. It is a great community where you can ask questions in Q&A forum, official blog and then user submitted post blog, where you can get even more great advice and practices.

Favorite posts on Google topics:

Seomoz blog

SearchEngineLand

One more top SEO blog and while doing research on current SEO changes, I found a lot of relevant and up to date articles about this. That’s one big reason to remember checking out this site on regular basis.

Some valuable posts you should read there:

Search engine land

MySEO Community

This is an amazing website curating information about SEO, they work seriously on quality, so if you need one stop place about SEO, don’t go further.

Here is their own description about their site – MySEOCommunity isn’t a run of the mill online community. Because of the increasing popularity of search engine marketing and social media, there is a lot of content written about these subjects on a daily basis. Unfortunately, trying to manually keep up with the best content that’s being written is next to impossible to do.

MySEOCommunity blogs read

Check which links can harm your site rankings:

If you did over optimize before on your site, you should be very worried, so here are some useful articles to read about how to recover from those bad links. Check also which links can be harming your site and remove them.

Is your site affected by Google algorithm changes and how you are solving them? Would love to hear your stories and solutions.

Article Source : www.1stwebdesigner.com

How to speed up your website


h2 { font-size:18px; font-weight:bold;}

Site speed is one of the most important things about creating web content, and web applications.

In fact, it has been noted by various analysts at Google that people don’t often sit through the first 30 seconds of a video, much less the first 15, so it would be wise of you to get the content of your site loaded as fast as you can so that people can make a judgement and agree to either use it or not.

It may be a bit superficial that people judge sites that fast, but it is often the case, and we shouldn’t take it for granted.

Optimizing your site should be a top priority, and often times when using WordPress and other engines they have nice plugins that help. I will assume though, that you may not be using WordPress, because there are a lot that don’t, and I will give you a few of the best ways to optimize any site regardless of where its hosted.

Images

Image optimization can be a tough topic, but one that actually has a lot of aspects from which to choose. There are file formats, image optimization tools, and code/CSS best practices to follow to make sure you are saving and acting with images in the best way possible.

I want to give an example as to why this is important though, so let’s take a recent example. It has recently become apparent to various iOS developers and app creators that apps that use the Retina ready images are taking up 2–4 times as much space on the person’s phone than their previous versions, and it is causing people’s phones to simply run out of space from simple app downloads.

This isn’t as relevant to us web developers and designers, but it does go to show you just how important it is to properly handle your images on any platform. The following are a few of what I think are the most important topics to remember when optimizing images for the web.

Image formats

The formatting of images is a heated topic, and it seems to be because everyone believes a different format will increase speed, but there is a pretty prevalent school of thought on this, and we can always use this as a de-facto standard. JPEG’s are for photographs, GIF’s are for low color images/flat color images, and PNG’s are for everything else. Most web designers and developers that I know of prefer to use PNG’s for just about everything, unless they have a button perhaps that has one or two colors, whereby they find GIF’s to work great.

Now, of course you can play with those specifications but always remember that these are standards for what will save smaller and lighter vs bigger and heavier. If you are doing a photography site though, it will be loading pretty slow regardless compared to other sites — so try out some of these next methods to increase the image optimization overall.

Image code

One of the worst things we can do for server time when loading images is let the code do the sizing for us. Well, that could be said for anything regarding ‘letting the code do ____ for us’. The common saying is, “If you can do it, then do it”, and it is a darn good one. Using things like width='50px' height='30px' can really throw off the server load time as far as that image is concerned, because the server is parsing the page and sees there is a task it has to accomplish – one that could have been done by the creator. So make sure you go ahead and do that with all of your images.

Image optimization tools

Tools are always helpful. Well, most of the time. Sometimes they are a burden and a distraction, but in this case it seems that they are often very useful. If you can find a great image optimization tool, first of all — link it in the comments because we are all on the hunt, but a few of my favorites are following. I love ImageOptim for Mac, and Riot for Windows. These two tools are very different, but perform a similar task.

You can put images in and it will decipher a way and method to optimize them, do so, and then spit back out the final result all the while saving the format you sent them in with. They are really quite nice, and there are tons more out there. In fact, there are a bunch that will analyze an image’s bitmap and tell you what format is best. You can easily tell that these are some of the most useful things in a web designers tool bucket other than a text-editor and design program, and rightfully so.

Image based server optimization

I’m not an expert when it comes to setting up servers, but I certainly have enough background on the small scale to give this advice. Don’t have massive image loads stored locally. That is, don’t leave a database of images stored on your servers that you are serving the other site files from. Take note of the technologies such as Amazon S3 or Flickr’s servers, and use those to serve your files from.

I’ve recently implemented an Amazon S3 bucket to server our files from, and it was actually quite easy — so feel free to try that. It is a great method. The main reason is that you don’t want a database bottleneck to happen in an instance that you are serving multiple loads from, because it can be a diagnosing nightmare. It’s good practice to store separate file’s on different servers (if under massive load) unless of course it is just a simple general purpose string storage database or something similar.

CSS and JavaScript Optimization

CSS and JavaScript are really important languages when it comes to web design, and especially when it comes to creating dynamic content. I think that people often forget that they can optimize their dynamic content, and they forget that they can optimize their JavaScript and CSS. These aren’t really the most significant things for smaller sites, but with larger sites it’s really important — especially when it comes to sites that rely on a lot of design. Let’s step through a few of the “CSS and JavaScript Rules” that are pretty standardized when it comes to creating web applications.

First rule of CSS and JavaScript

If you can do it in CSS, then do it

Often times we forget that we have amazing tools right in front of us, and I’d say CSS classifies as one of the most amazing web designers have. I’d also say that designers jump into photoshop too quickly by nature (but it is their job so who can blame them). Do keep in mind though that as you design you have something in your browser that can do quick mock ups too: CSS3. Take advantage of it! Having a place to do quick mockups really helps, and it will lead you away from doing hacked together things in HTML later on. Instead of ” ” I am sure you can find a way to add that space in CSS, so do it!

Second rule of CSS and JavaScript

Minify, minify, minify!

The minification of code is perhaps one of the best and easiest things you can do to speed up your site. Keep in mind, we are talking miliseconds, but still it has a noticible effect — and especially if you are using something like a jQuery library. Remember that if you are ever adding plugins for JavaScript/CSS and you are given the option to download the minified version (and don’t need to edit it), do so. Some of my favorite tools to do this are, Code Minifier for Mac, Minify for Windows, and JSCompress/CSSCompressor for those of you who want some browser-based cross platform solutions. Happy minifying!

Third rule of CSS and JavaScript

In-line is a no-no

It is bad practice to use in-line CSS or JavaScript, but especially when it comes to CSS. The reason for that is not only due to legacy issues, but also because if we leave the CSS within the HTML code (especially in-line) it will read as such: HTML/CSS/HTML/CSS/HTML/CSS/HTML/CSS instead of just a simple HTML => CSS. As you can tell, this is really bad for server load times, and can often lead to the detriment of most web applications should there be a designer who refused to use it in a separate file. It certainly wouldn’t cause your site to crash, but it will cause another employee to go through and extract it — it is that important. So always remember to be the one who is extracting it, not the guy who leaves it for others to extract.

Fourth rule of CSS and JavaScript

Move it down

If you have to put your JavaScript in the page with the HTML itself, and have no way around it, then put it at the bottom of the HTML document. This helps speed up the site load time as well, because we can perform all of those functions and other JavaScript goodies after the page itself has loaded. Another thing is that this decreases the likelihood of a bug squashing the performance of the entire site, because when there is a bug with the JavaScript in a sight it will often eat memory like no tomorrow. So it is good practice to make sure your site isn’t doing that, and to warn against future events in which it may — none of us want people to visit our site and then have their browsers crash.

Fifth rule of CSS and Javascript

DOM optimization

Reduce the DOM if you can. Take for instance an example that you are using a lot of jQuery that points to various DOM elements or reads through all the DOM to find something — it can slow your site down quite a bit. There is a little saying I always loved and it fits here, “If you are doing things because it is the only way you know how, then there are probably better ways to do it.” You could also say, “If you are doing things because it is the only way you know how, then you are doing it wrong,” but that version is a bit harsher.

Research, and find those things out in such a case. If you are working with a div in HTML just because you need it for one little thing and it is the only way you know how to do that then it may not be the best way. Now, of course I understand that using div tags because you need them for your CSS is entirely understandable, but perhaps you can remove a few and find a more broad manner of handling that style issue.

I just recently did this myself, as I am going through a Ruby on Rails project currently. Earlier in the week I nested roughly 5 div’s within each other in HAML of all things, just to do something I wanted (a box in a box in a box inside of something else in this case). And I just looked at it, knew it was crap, but didn’t know a better way to do it, so I scrapped it all to re-do it. Having to re-do that made it much harder but it forced me to learn a new way to handle that issue. And in the end I learned a lot from it, and I would recommend the solution to anyone in the future. Go ahead and grab one of those knowledge nuggets for yourself! They are certainly low hanging fruit.

General optimizations

These are more of the broad topics that really don’t fit in anywhere else, but that I still feel deserve some attention. In fact, some of these may be the most important things you can do to speed up a web application or site.

Slashes on links

This is noticeably important. When a user opens a link without a slash at the very end from a website the server literally has to figure out what kind of file or page is at that address. The server will then include said slash, but if you add it yourself then you are reducing milliseconds of load time. These milliseconds all do add up, I promise. Often times I find designers especially who don’t think about it think that their unoptimized code will not burden anything, but it does in the end. If you save quarters for 10 years you certainly will have a lot of money, and the same concept applies here — just on a smaller or larger scale depending on your site’s traffic.

Favicons

Browsers always do a pull for a favicon.ico file at the root level of your server, so you may as well just go ahead and include it. Even if it is something temporary, it is always good to have. If you don’t, the browser itself will give an ‘internal 404′, and just cache that 404 up on the browser’s favicon.ico section, and we all know reducing 404′s speed up load time.

Reduce cookie size

This one may not apply to all of us, but if you are developing web applications then reducing the cookie size is really important. For instance, in what I am familiar with — Ruby on Rails applications — you can use cookies (or other methods) for authentication from session to session and often times people will prefer to use the other methods because they can decrease user load times with them.

Now, a cookie does imply that it is caching things on your computer so you may think it would increase load time, but typically all they are good for is authenticating user sessions or tracking you around the web (as Google and Facebook have been accused of). If you have to work with Cookies, though, make sure you keep the size low and you use them with your better judgement. If you have to, set the expire date shorter to decrease the load time.

Cache

This is a massive topic, and one that I am not an expert on. Caching though is a pretty simple concept. It is storing files (typically HTML/CSS code) from sites that you frequently visit on your computer so that you don’t have to load them every time you visit.

It is really an incredibly useful technology, and one that a lot of web applications are starting to employ as of the past few years. There have been a number of database solutions for caching and probably the most notable is Memcached. What this does is store a copy of database files to your browser as you are using a web application. So, for instance, if you have various profiles you visit often it may store the profile pictures to your computer, and the beauty of Memcached comes in the next phase. In your code, you can actually call (before you pull from the DB) from the Memcached servers and see if you can pull a cached version of the file(s). And if not it will, of course, pull the file from the Database, and if it isn’t in the cache already it will add it to save time next time. This is a beautiful example of caching on a large scale and it has helped tons and tons of companies speed up servers and databases throughout the past 2+ years.

And that will just about sum it up. Those aren’t all of the ways to speed up your site, of course, but it should start to peak your curiosity and get you looking for all the great things out there that will.

Article Source : www.webdesignerdepot.com

How To Integrate Facebook, Twitter And Google+ In WordPress


Integrating social media services in your website design is vital if you want to make it easy for readers to share your content. While some users are happy with the social media buttons that come built into their design template, the majority of WordPress users install a plugin to automatically embed sharing links on their pages. Many of you will find that a plugin does exactly what you need; others not so much. Some are poorly coded, and most include services that you just don’t need. And while some great social media plugins are out there, they don’t integrate with every WordPress design.

The Big Three: Twitter, Facebook, and Google+ 4

If you aren’t comfortable editing your WordPress templates, a plugin is probably the best solution. If you are comfortable making a few edits to your theme, then consider manually integrating social media so that you have more control over what services appear on your website.

Today, we’ll show you how to manually integrate the three most popular social media services on your website: Twitter, Facebook and Google+. First, you’ll learn how to integrate Facebook comments on your WordPress website, to make it easier for readers to discuss your posts. Then, we’ll show you the most common ways to display your latest tweets in the sidebar, which should encourage more people to follow you on Twitter. Finally, we’ll show you how to add sharing buttons for all three social media services to your home page, posts and pages.

Please make sure to back up all of your template files before making any changes, so that you can revert back if something goes wrong. Testing your changes in a non-production area first would also be prudent.

Integrate Facebook Comments On Your Website

Because most people are signed into Facebook when they browse the Web, enabling Facebook comments on your website is a great way to encourage people to leave comments. It also curbs spam. While many solutions purport to reduce spam comments on WordPress, most are either ineffective or frustrate visitors by blocking legitimate comments.

Feature-rich commenting solutions such as IntenseDebate 5 and Disqus 6 have benefits, of course, because they allow users to comment using Facebook and a number of other services; but before visitors can comment, they have to grant access to the application, an additional step that discourages some from commenting. By comparison, integrating Facebook comments directly enables visitors to comment with no fuss. Also, this commenting system allows users to comment by signing into Facebook, Yahoo, AOL or Hotmail.

Before integrating Facebook on WordPress Mods 7 at the end of September, I looked at a few solutions. I followed a great tutorial by Joseph Badow 8 and tried a few plugins, such as Facebook Comments For WordPress 9. The reality, though, is that the official Facebook comment plugin 10 is the quickest and easiest way to add Facebook comments to your website.

Simply follow the steps below to get up and running.

1. Create a Facebook Application

To use Facebook comments on your website, create a new comment application for your website on the Facebook Application 11 page. This step is required, whether you add Facebook comments manually using a third-party plugin or with the official Facebook plugin.

Simply click on the “+ Create New App” button on the Facebook Application page, and enter a unique name for your application in the “App Display Name” field. The “App Namespace” field doesn’t have to be filled in for Facebook comments (it’s used with the Facebook Open Graph Protocol 12).

Create Facebook App 13

You will then be provided with an “App ID/API key” and an “App secret key.” You don’t need to remember these numbers because the official Facebook comments plugin 14 automatically inserts them into the code that you need to add to your website.

Create Facebook Application 15

2. Add the Code to Your Website

Next, go back to the Facebook Comments plugin 16 page and get the code for your website. The box allows you to change the URL on which comments will be placed, the number of comments to be shown, the width of the box and the color scheme (light or dark).

Customise Facebook 17

You don’t have to worry about what you enter in the box because all of the attributes can be modified manually. And it doesn’t matter what URL you enter because we will be replacing it later with the WordPress permalink:

  • href
    The URL for this Comments plugin. News feed stories on Facebook will link to this URL.
  • width
    The width of the plugin in pixels. The minimum recommended width is 400 pixels.
  • colorscheme
    The color scheme for the plugin (either light or dark).
  • num_posts
    The number of comments to show by default. The default is 10, and the minimum is 1.
  • mobile (beta)
    Whether to show the mobile version. The default is false.

When you click on the “Get Code” button, a box will appear with your plugin code (choose the HTML5 option, because FBML is being deprecated). Make sure to select the application that you set up earlier for your comments so that the correct application ID is added to the code.

Get Facebook Application Code 18

Insert the first piece of code directly after the <body> tag in your header.php template:

1 <div id="fb-root"></div>
2 <script>(function(d, s, id) {
3 var js, fjs = d.getElementsByTagName(s)[0];
4 if (d.getElementById(id)) return;
5 js = d.createElement(s); js.id = id;
6 js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=YOURAPPLICATIONID";
7 fjs.parentNode.insertBefore(js, fjs);
8 }(document, 'script', 'facebook-jssdk'));</script>

Put the second line of code where you want to show the comments. Make sure the static URL is replaced with the WordPress permalink (<?php the_permalink(); ?>) so that comments show correctly on every page of your website.

1 <div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="15" data-width="500"></div>

To put Facebook comments above WordPress comments, add the above code just below the line that reads <!-- You can start editing here. --> in the comments.php template. To put Facebook comments below WordPress comments, add the above code below the </form> tag (again in the comments.php template).

If you plan to completely replace your WordPress comments with Facebook comments, simply replace the call to your comments.php template with the call to your Facebook comments. For example, to replace comments in posts, simply add the code to the single.php template. Similarly, edit the page.php template to show Facebook comments on pages.

Facebook Comments

Your should now see the Facebook comments box displayed on your website. To get an update whenever someone leaves a comment using Facebook, add yourself as a moderator to your application on the Comment Moderation tool 20 page.

Show Your Latest Tweets In The Sidebar

Displaying your latest tweets is a good way to encourage people to follow you on Twitter. The most common place to display tweets is in the sidebar, although you can add them to any area of the website.

Display Your Latest Tweets Manually

I have tried a few manual solutions for showing tweets on my websites, and my favorite comes from Chris Coyier of CSS-Tricks 21. His RSS fetching snippet 22 is a quick and effective way to show the latest tweets from your account. The RSS address of your Twitter 23 account is http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=xxxxx (where xxxxx is your Twitter user name). For the tweets that you favorite, use http://twitter.com/favorites/xxxxx.rss. For example, the RSS for the latest tweets from Smashing Magazine is http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=smashingmag; and to display only the favorites, https://twitter.com/favorites/smashingmag.rss. Once you’ve got your Twitter RSS address, simply add it to Chris’ PHP snippet.

01 <?php
02 include_once(ABSPATH . WPINC . '/feed.php');
04 $maxitems = $rss->get_item_quantity(3);
05 $rss_items = $rss->get_items(0, $maxitems);
06 ?>
07  
08 <ul>
09 <?php if ($maxitems == 0) echo '<li>No items.</li>';
10 else
11 // Loop through each feed item and display each item as a hyperlink.
12 foreach ( $rss_items as $item ) : ?>
13 <li>
14 <a href='<?php echo $item->get_permalink(); ?>'>
15 <?php echo $item->get_title(); ?>
16 </a>
17 </li>
18 <?php endforeach; ?>
19 </ul>

For a more stylish way to display tweets manually, check out Martin Angelov’s tutorial “Display Your Favorite Tweets Using PHP and jQuery 24,” or Sea of Cloud’s “Javascript Plugin Solution 25.”

Display Your Latest Tweets Using the Official Twitter Widget

The official Twitter profile widget 26 looks great and is easy to customize. You can define the number of tweets to display and whether the box should expand to show all tweets or provide a scroll bar.

The dimensions can be adjusted manually, or you can use an auto-width option. The color scheme can easily be changed in the settings area, too. Once the widget is the way you want it, simply grab the code and add it to the appropriate WordPress template.

Official Twitter Profile Widget 27

Display Your Latest Tweets Using a WordPress Plugin

If you don’t want to code things manually or use the official Twitter profile widget, you could try one of the many plugins available:

Add Social-Media Sharing Buttons To Your WordPress Website

Adding social-media sharing and voting buttons is very straightforward and enables readers to share your content on the Web. Simply get the code directly from the following pages:

The buttons you get from the above links work well when added directly to posts (single.php) and pages (page.php). But they don’t work correctly on the home page (index.php) or the archive (archive.php) by default, because we want to show the number of likes, pluses and retweets for each individual article, rather than the page that lists the article. That is, if you simply add the default code to index.php, every button will show the number of shares for your home page, not for each article.

To resolve this, simply make sure that each button uses the article permalink, rather than the URL of the page it is on. To add sharing buttons only to posts, simply choose the button you want from the links above and copy the code to single.php; to add the buttons only to pages, just add the code to page.php.

To show the number of likes, pluses and retweets that an article has on the home page and in the archives, follow the steps noted below for Facebook, Google+ and Twitter below (the code for showing a sharing button on the index page will work for posts and pages, too). You can see an example of sharing buttons integrated in post excerpts on my own website WordPress Mods 38 and on popular blogs such as Mashable 39.

Social Media Sharing Buttons Example

Facebook

Facebook’s Like button 41 comes with a lot of options. Choose from three layouts: standard, button count and box count. An email button (labelled “Send”) can be added, and you can set the width of the box, too. You can also show profile pictures below the button, choose between the labels “Like” and “Recommend,” choose between a light and dark color scheme, and set the font.

Customise Facebook 42

You need to add two pieces of code to your website. First, add the JavaScript SDK code directly after the <body> tag (in the header.php template). This code has to be added only once (i.e. if you’ve already added the code to show Facebook comments on your website, you don’t need to add it again).

Put the second piece of code where you want to show the Like button. To ensure that the correct page is referenced, add href="<?php echo get_permalink($post->ID); ?>" to the second piece of code. It should look something like this:

1 <div class="fb-like" data-href="http://www.facebook.com/smashmag" href="<?php echo get_permalink($post->ID); ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true" data-font="arial"></div>

More information on how to customize the Like button can be found on the Facebook Like Button page 43.

Google+

Google+ 44 offers four sizes of sharing buttons: small, medium, standard and tall. The number of votes that a page has received can be shown inline, shown in a bubble or removed altogether.

Customise Google+ 45

Linking to your article’s permalink is very easy. Just append href="<?php the_permalink(); ?>" to the g:plusone tag. For example, to show a tall inline Google+ button, you would use the following code:

01 <!-- Place this tag where you want the +1 button to render -->
02 <g:plusone size="tall" annotation="inline" href="<?php the_permalink(); ?>"></g:plusone>
03  
04 <!-- Place this render call where appropriate -->
05 <script type="text/javascript">
06 (function() {
07 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
09 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
10 })();
11 </script>

For more tips on customizing the Google+ button, please view the official Google+ button documentation page 46.

Twitter

Twitter 47 offers four types of buttons: one for sharing links, one for inviting people to follow you, a hash tag button for tweeting stories, and another for mentions (used for contacting others via Twitter). The button you need to show the number of shares that an article has gotten is called “Share a link.”

On the button customization page, you can choose whether to show the number of retweets and can append “Via,” “Recommend” and “Hashtag” mentions to the shared link.

Customise Twitter 48

To make sure Twitter uses the title of your article and the correct URL, simply add data-text="<?php the_title(); ?>" and data-url="<?php the_permalink(); ?>" to your link. For example, if you were using the small button, you would use:

1 <a href="https://twitter.com/share" class="twitter-share-button" data-via="smashingmag" data-text="<?php the_title(); ?>" data-url="<?php the_permalink(); ?>">Tweet</a>
2 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
3 if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";
4 fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

To show the larger button instead, simply append data-size="large" to the link. To show the popular vertical button (shown below) instead of the default horizontal button, append data-count="vertical" to the link.

Twitter Vertical Button 49

For more tips on customizing the Twitter button, please view the official Twitter button documentation page 50.

Summary

Many WordPress users continue to use plugins to integrate social-media sharing buttons and activity on their websites. As we’ve seen, though, integrating social-media services manually is straightforward and, for many users, a better solution than simply installing a plugin and making do with whatever features it offers.

Integrating Facebook comments on your website takes only a few minutes and is much less complicated than any of the available plugins. While good tutorials are available that show you how to manually add Twitter to your website, the official widget from Twitter 51 is the best all-around solution for most websites.

Some fantastic plugins exist for WordPress to automatically insert social-media voting buttons in your design. Installing and setting them up takes only a few minutes, although manually adding the buttons enables you to give them maximum visibility.

Remember, play it safe and make any changes in a test area first before applying the changes to the live website. I also recommend backing up all of your template files before changing anything (and your database if required). A few minutes of preparation could save you hours of troubleshooting, so try not to skip this step.

Hopefully, you’ve found this useful. If you are unsure of any aspect of this tutorial, please let us know and we’ll do our best to clarify the step or help you with it. Also, subscribe to Smashing Magazine via RSS 52, Twitter 53, Facebook 54 or Google+ 55 to get the latest articles delivered directly to you.

Article Source : Smashingmagazine.com

9 Tips To Make Your Website Load Faster


One of the most important aspects of any website is loading time.  No matter how flashy your graphics or interesting your content is, if it doesn’t appear to the visitor in a speedy manner, it’s unlikely they’ll ever see any of it.  Below we’ve outlined some helpful tips to ensure that your website will load in a blink of an eye and keep your viewers in place!

1. Optimize, optimize, optimize.

In the event that your pages have more than five images displayed on them, you will want to optimize the images for the Internet. This essentially means using a mode of compression to make the images smaller and load faster.  Many commercial websites use this technique to great effect – how do you think Facebook loads so quickly?  A good rule of thumb is to use GIF files as much as possible at lower optimizations when it comes to the graphics on your page.  Insofar as photographs are concerned, highly compressed JPGS are good.  PNG files tend to take up a lot of space, and don’t go anywhere near a bitmap!

Facebook

2. Physical distance still matters in the virtual age.

If your web host is farther than forty miles away from where you live, you might want to look into getting a new host.  You can figure out where your web host is located by doing a simple ping test.  If the ping test shows that your web host is on the other side of the planet, you might want to consider hosting elsewhere.  The closer they are to you, the faster your load times will be.

3. Is your web host’s equipment cheap?

These days, it seems as though you can get your website hosted for less than pennies on the dollar.  In general this would be seen as a good thing for those of us who don’t have hundreds of dollars a month to spend on hosting, but it could also be affecting your load times.  Cheaper companies often use cheaper equipment, which means that your visitors might have to wait longer for your pages to load.  Remember: you get what you pay for.  This applies to web hosts, as well.  Weigh the cost of web hosting against how much traffic your website gets – if you’re having thousands of visitors per day, it might be worth it to upgrade to a more expensive web host that utilizes better equipment.

4. Cache it.

Want to get your website to load quick as a blink for your repeat visitors?  Enable PHP caching. This will instruct the browser to load the website once and then store away the images and everything else for later retrieval.  This way there’s only one time that the visitor has to wait for the Internet to produce the images.

5. Is your bandwidth slow?

Most larger hosts have multiple bandwidth providers in order to handle a lot of traffic.  You can check to see how fast your own bandwidth is by performing a trace route test.  Once you’ve done that, check to see if your provider is linked up with companies such as Sprint, Level (3) Communications, AT&T, MCI-Verizon or Mizma.  If it is, your bandwidth has a good chance of being fast – but many of the smaller web hosts can’t afford to partnership with these companies.  How important this is to you depends on the size of your website.  If you’re running a larger page, you might want to consider moving to a web host that works with one of the above companies.  This will go a long way toward ensuring that your pages load reliably and quickly for many visitors!

6. Keep your CSS files small.

If your CSS is over 75KB in size, it could be dragging your user’s experience down.  If you run a smaller website, be sure to keep it below this number.  However, if you have a bigger website with lots of pages with a lot of graphics and code, it might be necessary to exceed this amount. Should this be the case, be sure to monitor your website regularly and remove pieces of code that you no longer use regularly.  It may also be worth your time and money to pay a web designer to go through and edit your CSS to help you trim the fat, particularly if you are running a larger operation.

Unoptimized CSS

Unoptimized CSS

Optimized CSS

Optimized CSS

7. How are your databases optimized?

Poorly optimized databases can slow your website down.  If you’re not sure how to do this, simply run a Google search on database optimization for the lowdown.  There’s literally hundreds of ways to make sure that your databases are optimized for maximum performance.

8. Cool down the hotlinking.

The term “hotlinking” refers to when another website uses your website as a server for files.  For example, if you have a video file embedded on your website and another website embeds the same file yet uses your source code, that website is hotlinking.  This means that the second website is using your bandwidth to play that file.  Hotlinking takes up enormous amounts of a website’s bandwith and can really slow down your load time.  In order to eliminate hotlinking, you can check if social networking websites, such as MySpace, show up in your referral files or if a certain file is being served more often than the page that the file is located on.  If you notice hotlinking, you can usually access hotlinking protection through the control panels of your web host. If not, you may need to take the file down.

9. Use less JavaScript code and compress it!

Simpler code always leads to faster page loads.  One way to get your page’s JavaScript up to code is to remove the comments and compress it – this essentially takes out the line breaks and makes your JavaScript into one long sentence.  However, if you are not an experienced JavaScript user, this could make your code harder to read, so be sure that you know what you’re doing before you use it.  If you’re not confident in your abilities to read JavaScript without comments or line breaks, keep them in.  It’s a giant headache to undo JavaScript compression once it’s done!

Uncompressed JavaScript

Uncompressed JavaScript

Compressed JavaScript

Compressed JavaScript

With these tips in mind, get out on the web and make your presence known!  If you have a well optimized website that loads fast and is easy to navigate, you’ve already won half the battle.  The rest of it is all in your content and user experience – but having a quickly loading website is the first step in making sure that web surfers stick around long enough to see it!