There are many ways to optimize your web pages. In addition to reducing HTTP requests and delivering compressed files, we can also minify code content. The easiest way to minify your CSS is to run it through an online code minifier, which automatically eliminates extraneous characters to reduce file size. Minification shrinks file size significantly, by as much as 30% or more (depending on input code). This size-reduction is the net result of numerous micro-optimization techniques applied to your stylesheet. By learning these techniques and integrating them into your coding practice, you’ll create better-optimized CSS during the development process. Sharper skills, cleaner code, faster downloads – it’s a “win-win” for everyone.

In this Perishable Press article, you’ll learn how to write leaner, cleaner CSS using 10+ micro-optimization techniques..

The basic idea behind micro-optimizing your CSS involves writing clean code, eliminating extraneous characters, and reducing overall file size. And you don’t have to rely on an automated script to do everything for you. Instead of writing lazy, sloppy, bloated code and then just dumping your hideous CSS into an automated minifier, it’s better to understand and practice as many micro-optimization tips as possible, given your particular coding style and specific project requirements.

Continue Reading

Preloading images is a great way to improve the user experience. When images are preloaded in the browser, the visitor can surf around your site and enjoy extremely faster loading times. This is especially beneficial for photo galleries and other image-heavy sites where you want to deliver the goods as quickly and seamlessly as possible. Preloading images definitely helps users without broadband enjoy a better experience when viewing your content. In this article, we’ll explore three different preloading techniques to enhance the performance and usability of your site.

Method 1: Preloading with CSS and JavaScript

There are many ways to preload images, including methods that rely on CSS, JavaScript, and various combinations thereof. As one of my favorite topics here at Perishable Press, I have covered image preloading numerous times:

Continue Reading

In my recent guest post at The Nexus, I discuss Google’s new nofollow policy and suggest several ways to deal with it. In that article, I explain how Google allegedly has changed the way it deals with nofollow links. Instead of transferring leftover nofollow juice to remaining dofollow links as they always have, Google now pours all that wonderful nofollow juice right down the drain. This shift in policy comes as a terrible surprise to many webmasters and SEO gurus, especially those who have invested vast amounts of time, effort and money engaging in supposedly lucrative PR-sculpting pursuits.

Of course, this new policy leaves many of us wondering how to deal with it. If (and it remains a big “if” until Google clarifies their position) — if nofollow link equity simply vanishes into the ether, the repercussions may be significant. For example, webmasters who now rely on nofollow to salvage link juice otherwise leaked through lengthy comment threads will need to devise another strategy or suffer an inevitable loss of valuable PageRank. There are many good strategies available, including everything from long-term reorganization of site structure to short-term fixes involving much-despised tricks such as iframes and JavaScript links. Personally, I wouldn’t touch iframes with a ten-foot pole, but in the case of an emergency, I certainly would take a look at using external JavaScript to get the job done.

Continue Reading

A great way to improve the performance of your site is to optimize the size of your images. Smaller image sizes require less bandwidth, disk space and load time, and ultimately improve visitor experience. In this article, I share my effective 5-minute technique for optimizing PNG images. This is a two-step, lossless optimization process that removes as much extraneous data as possible without sacrificing any image quality whatsoever. It’s fast, free, and highly effective.

Continue Reading

One way to prevent Google from crawling certain pages is to use <meta> elements in the <head> section of your web documents. For example, if I want to prevent Google from indexing and archiving a certain page, I would add the following code to the head of my document:

<meta name="googlebot" content="noindex,noarchive" />

I’m no SEO guru, but it is my general understanding that it is possible to manipulate the flow of page rank throughout a site through strategic implementation of <meta> directives.

Continue Reading

It has occurred to me lately that I no longer use Google Analytics for Perishable Press. Instead, I find myself keeping an eye on things using Mint almost exclusively. So, the question now is: do I continue serving the GA JavaScript to keep the profile active just in case I ever need the additional stats? I mean, Mint already does a great job at recording all of information I could ever need, so I no longer see the use for Google Analytics. I do wonder, however, if Google ranks GA-enabled sites a bit higher than non-GA sites. Hmmm.. it seems to me that there are several options going forward..

Option 1: Continue with Google Analytics

The easiest thing for me to do at this point would be to just leave it alone: continue serving the extra 6.3K/21.4K GA JavaScript (i.e., urchin.js) to site visitors. Sure, I may never actually use the volumes of data I am collecting via Analytics, but hey, who cares, right? Of course, delivering the urchin.js file requires bandwidth and other server resources, and also tends to slow things down a bit, especially on those rare occasions when the Google server bogs down.

Continue Reading

Time is running out! Soon, it will be time for the next Google PageRank (PR) update. While it is difficult to predict how your site will perform overall, it seems likely that your highest ranking pages will continue to rank well. The idea behind this article is to improve your site’s overall pagerank by totally beefing up your most popular pages.

Of course, every page on your site is important. Ideally, you would want to employ these techniques to every article on your site. But time is short, and Google is coming soon! The next PageRank update is slated for any day now, probably before I manage to post this article. ;) Thus, our strategy is to focus on pages that already have some Google juice flowing to them. Your most popular articles. Your best-ranked pages. Your top ten posts.

Continue Reading

After studying Peter Kent’s excellent book, Search Engine Optimization for Dummies, several key methods emerged for optimizing websites for the search engines. Although the book is written for people who are new to the world of search engine optimization (SEO), many of the principles presented throughout the book remain important, fundamental practices even for the most advanced SEO-wizards. This article divulges these very useful SEO practices and organizes them into manageable chunks ¹.

Text Essentials

The golden rule for developing a popular website is to create a useful site and share it with as many people as possible. When designing a site for search engine popularity, use clear, readable text. Replace non-standard text characters with standard equivalents. By all means, check the spelling, grammar, and syntax of your text manually, or at the very least, using an automatic spell-checker. If you are targeting the giant Google search engines, your design mantra should be, “black text on white background” — that is, keep it simple, straightforward, and focus on quality content. And finally, never use image-based text in place of searchable, text-based content.

Continue Reading

In his excellent book, Search Engine Optimization for Dummies, Peter Kent explains that many search engines actually get their search results from one (or more) of the larger search engines, such as Google or The Open Directory Project. Therefore, the author concludes that it may not be necessary to spend endless hours registering with thousands of the smaller search sites. Rather, the author provides a brief list of absolutely essential search sites with which it is highly recommended to register. Further, by registering with the following sites, your site will be listed in a significant majority of all search engines.

Continue Reading

Optimizing your website for the search engines involves many important aspects including keyword development, search engine registration, and SEO logging. This Press post scopes yet another critical weapon in the SEO wars: establishing and evolving an effective link campaign.

Within your SEO log, you should devote an entire section to the logging of all link-related activity associated with optimizing your site for the internet. For example, you may wish to subcategorize your link campaign according to whether the links are elsewhere, pointing to your site (referring/incoming links), or present within your site, pointing to other sites (external/outgoing links). Users may also benefit from tracking activity for internal links, which point to other locations within the same domain.

We will begin our article by focusing on incoming and outgoing link strategies, proceed with a few tips for internal links, and then conclude with some ideas for getting links.

Continue Reading

Fast-loading pages reduce errors, conserve bandwidth, and please visitors. One way to decrease loading times and enhance performance involves maximizing image display efficiency. Your mantra for achieving image efficiency should be "reuse, optimize, and preload.". While each of these methods plays an important role, this article will focus on methods for preloading images. Consult your server error logs to identify web pages that may require image help. Note: preloading images does not reduce bandwidth! It only decreases apparent load time, thereby enhancing user experience.

Preloading via the CSS Display Property

This method is a very common method for preloading images via the CSS display: none; directive. To use this method, first add the following code to your CSS rules:

<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
   img.preload { display: none; }
/*]]>*/-->
</style>

Then, add the preload class to each image tag that should be preloaded:

<img src="image1.jpg" alt="Image Caption 1" height="33" width="33" class="preload" />
<img src="image2.jpg" alt="Image Caption 2" height="33" width="33" class="preload" />
<img src="image3.jpg" alt="Image Caption 3" height="33" width="33" class="preload" />
<img src="image4.jpg" alt="Image Caption 4" height="33" width="33" class="preload" />

Include the array of preloading image elements to the bottom of the home page, just before the body tag. Placing the images at the bottom of the page requires the browser to load the entire page before preloading any of the images. Finally, simply use the same image path and name when referencing the preloaded images on subsequent pages. The browser will have cached the images and will be able to load them instantly. Remember not to use the preload class for images that are meant to be displayed.

Preloading Tuf with JavaScript

This method uses JavaScript to cache specified images as the document is loaded. Images will then be displayed immediately as they are called. The JavaScript itself degrades peacefully and has no effect on browsers that do not support JavaScript. The script is as follows. Simply replace ../path/to/image-0n.gif with the corresponding path and name of the image to be preloaded. Then, simply call the images as normal (e.g., <img src="../path/to/image-0n.gif" alt="Image Caption" />) wherever they are required.

<script>
<!--//--><![CDATA[//><!--

if (document.images) {

	img1 = new Image();
	img2 = new Image();
	img3 = new Image();

	img1.src = "../path/to/image-01.gif";
	img2.src = "../path/to/image-02.gif";
	img3.src = "../path/to/image-03.gif";

}

//--><!]]>
</script>

You can also wrap this method in a function like so:

function preloader() {
	if (document.images) {

		var img1 = new Image();
		var img2 = new Image();
		var img3 = new Image();

		img1.src = "../path/to/image-01.gif";
		img1.src = "../path/to/image-02.gif";
		img1.src = "../path/to/image-03.gif";
	}
}

Welcome to Perishable Press! This article covers a plethora of search-engine optimization resources. For more excellent SEO information, check out the Optimization category archive. If you like what you see, I encourage you to subscribe to Perishable Press for a periodic dose of online enlightenment ;)

Search-Engine-Related Websites

• pandia.com optimization
• searchenginebulletin.com
• seo-help.com
• currentwisdom.com
• resource-zone.com
• Google Webmaster FAQ
• submit-it.com
• webmasterworld.com
• ihelpyouservices.com
• highrankings.com
• dmoz: Directories

Continue Reading

Introduction

Search engine optimization (SEO) is the business of every serious webmaster. The process of optimizing a website for the search engines involves much more than properly constructed document headers and anchor tags. Websites are like trees: their roots are the growing collection of content presented through the branching universe of the World Wide Web. Or something. The point is that optimizing a website requires nurturing the site itself while also ensuring proper exposure to the requisite elements of the internet.

The process of optimizing your first website may seem daunting. There are many aspects to consider and many websites with which to deal. Search engine registration, keyword development, and an evolving link campaign are all required for any home-grown, roll-your-own website optimization. Further, for each site you intend to optimize, there is a plethora of related data — site links, usernames, passwords, email addresses, etc. — that needs to be collected, organized, and updated. Therefore, it is essential to properly record and consistently maintain a carefully crafted SEO log.

Continue Reading

Keywords play a vital role in search engine optimization (SEO), and — if used properly — have the potential to increase the flow of traffic to your site. It is beneficial to maintain an active list of keywords for each of your websites. Each list should be a continually evolving set of important, relevant keywords. The idea here is to develop a consistent practice of actively seeking better keywords, thereby producing your very own customized keyword library.

Continue Reading

Search engines loathe crawling through convoluted lines of code. Oceans of complex JavaScript scare away the priceless indexing and archiving efforts of most major search engines, which will generally abort a crawl upon encountering such mess. The good news is that search engines actually do not deploy JavaScript, so it is possible to use JavaScript to hide those miles of messy code by using the fundamental document.write function.

Place this function in an external JavaScript file, “navmenu.js”:

function navMenu() {
   document.open();
   document.write("<div>Convoluted code goes here.</div>");
   document.close();
}

Link to the external JavaScript file by placing this code in the document head:

<script src="js/navmenu.js" type="text/javascript"></script>

Finally, call the function by adding this to the target location within the document body:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

   navMenu();

//--><!]]>
</script>