![[]](http://perishablepress.com/press/wp-content/images/2010/css-optimize/css-micro-optimize.jpg)
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
![[ Dynamic Flow ]](http://perishablepress.com/press/wp-content/images/2009/misc-chunks/dynamic-linkage.jpg)
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
Just like last year, this Spring I have been taking some time to do some general maintenance here at Perishable Press. This includes everything from fixing broken links and resolving errors to optimizing scripts and eliminating unnecessary plugins. I’ll admit, this type of work is often quite dull, however I always enjoy the process of cleaning up my HTAccess files. In this post, I share some of the changes made to my HTAccess files and explain the reasoning behind each modification. Some of the changes may surprise you! ;)
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
I have written previously on the fine art of preloading images without JavaScript using only CSS. These caching techniques have evolved in terms of effectiveness and accuracy, but may be improved further to allow for greater cross-browser functionality. In this post, I share a “CSS-only” preloading method that works better under a broader set of conditions.
Previous image-preloading techniques target all browsers, devices, and media types. Unfortunately, certain browsers do not load images that are hidden directly (via the <img> element) or indirectly (e.g., via the parent <div> element) using either display:none; or visibility:hidden;. Further problematic is the potential unintentional display of images on pages when presented via specifically designed print stylesheet.
Continue Reading
Aaron Wall on SEO, the future of the Web, Google dominance, and life as a professional taste tester
As someone who keeps a close eye on the mystical world of Search Engine Optimization, one of my favorite sources of information is SEO-guru Aaron Wall. Aaron is the author of the immensely popular SEOBook.com, where he shares his knowledge, ideas, and opinions on a wide range of SEO-related topics. I have always admired the direct, informative way in which Aaron presents his content, which itself is always insightful and intriguing. Having read much of Aaron’s thoughts on SEO and marketing, I wanted to “zoom out” and ask Aaron a few questions about the possible future of SEO and life on the Web in general. Recently, Aaron was generous enough to respond to some of these rather eclectic questions, including some interesting “behind-the-scenes” questions revealing how Aaron works on the Web..
Continue Reading
![[ ~{*}~ ]](http://perishablepress.com/press/wp-content/images/2008/misc-chunks/title-separators.gif)
While writing my previous article on creating the perfect WordPress title tags, I deliberately avoided discussing the use of separators in titles. I feel that the topic is worthy of its own article, enabling a more thorough exploration of the details. Title separators are the symbols, punctuation, and other characters used to distinguish between various parts of the page title. For example, a title may include the blog name, post title and blog description, with each element separated by a hyphen. Any Google search will reveal that some of the most commonly used title separators include the hyphen, the dash, and angled quotes. Many others are used as well, and we will explore some of them in this article.
Continue Reading
Responding to my first attempt at preloading images without JavaScript, CSS-Guru David Bowman graces his audience with a most enlightening triage of comments.
Apparently, the image-preloading technique explained in the article is “major overkill” and “totally ridiculous.” Of course, I will be the first to admit that I am no expert in CSS, but I do enjoy sharing my discoveries and watching as people improve upon them. My first attempt at preloading images without JavaScript may indeed be “pretty crappy,” but it certainly works.
Fortunately, several weeks prior to Mr. Bowman’s dazzling performance, insightful reader Duarte helps the community by sharing a far more elegant solution using display: none;. Here is an example of its implementation:
Continue Reading
NOTE: This post was written many months ago under the erroneous assumption that caching Mint’s JavaScript was a good idea (for Y-Slow compliance, performance, et al); however, after a brief chat with the man himself, Shaun Inman, I was quickly informed that this was a bad idea: caching Mint JavaScript files will cause Mint to stop functioning. But, for what it’s worth, and for the sake of retaining potentially useful information, I present the original article here for your amusement.. </note>
Recently, I spent some time addressing a few of the performance issues pointed out by Yahoo!’s very useful YSlow extension for Firebug. Working on performance tip #3, Add an Expires or a Cache-Control Header, I encountered some difficulty while trying to get the JavaScript used by Mint to cache as desired. Apparently, the HTAccess directives used to cache my other scripts do not effect the two PHP-generated JavaScript files used by Mint. Although I am not entirely certain, I suspect that these files are not being cached along with other scripts because the way in which they are called via query string parameter (Apache is far from perfect when it comes to dealing with anything associated with query strings). In any case, I really wanted to have these Mint scripts cached by the browser, so I ended up editing two files in the Mint core to make it work. For those of you struggling with the same dilemma, here’s how I did it..
Continue Reading
Controlling the spidering, indexing and caching of your (X)HTML-based web pages is possible with meta robots directives such as these:
<meta name="googlebot" content="index,archive,follow,noodp">
<meta name="robots" content="all,index,follow">
<meta name="msnbot" content="all,index,follow">
I use these directives here at Perishable Press and they continue to serve me well for controlling how the “big bots” 1 crawl and represent my (X)HTML-based content in search results.
For other, non-(X)HTML types of content, however, using meta robots directives to control indexing and caching is not an option. An excellent example of this involves directing Google to index and cache PDF documents. The last time I checked, meta tags can’t be added to PDFs, Word documents, Excel documents, text files, and other non-(X)HTML-based content. The solution, of course, is to take advantage of the relatively new 2 HTTP header, X-Robots-Tag.
Continue Reading
After reading my previous article on preloading images without JavaScript 1, Nanda pointed out that adding extra markup to preload images is not the best approach, especially where Web Standards are concerned. Mobile devices, for example, may experience problems when dealing with the following preloading technique:
/* ADD THIS TO CSS */
div#preloaded-images {
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}
<!-- ADD THIS TO XHTML -->
<div id="preloaded-images">
<img src="http://perishablepress.com/image-01.png" width="1" height="1" alt="Image 01" />
<img src="http://perishablepress.com/image-02.png" width="1" height="1" alt="Image 02" />
<img src="http://perishablepress.com/image-03.png" width="1" height="1" alt="Image 03" />
</div>
Thus, as Nanda suggests, it is better to preload images using only CSS. Using the CSS background property, we can preload images via existing <div>s, <span>s, or other elements in the (X)HTML markup.
Let’s say you have three images (e.g., image_01.png, image_02.png, and image_03.png) that you would like to preload using this method. First, examine your markup for three identifiable <div>s (or other elements) that may be used as CSS hooks for the preloaded images. For example, looking at the source code of the current page, I would choose the following three divisions:
Continue Reading
Not too long ago, I played with the idea of releasing article content under a Creative Commons (Attribution-NonCommercial-ShareAlike 2.0) License. At the time, I wanted to host my own copies of the two associated CC license pages. During the process of uploading the pages to my own server, several minor adjustments (regarding image paths, etc.) needed to be made to the source code. After tweaking a few things in the XHTML code, I began snooping around in the pages’ CSS files. Eventually, I found myself rewriting the entire CSS and XHTML files for both documents. Although this sort of activity is not unusual for me to do, I admit that it is borderline obsessive/compulsive and perhaps even a bit paranoid. Nonetheless, the reworked CSS and XHTML documents are cleaner, less redundant, and better optimized (in my humble opinion) than the originals. Further, the remixed pages are fine-tuned with a hyper-critical design aesthetic. To my eye, they present much tighter than the original versions. But hey, that’s what the spirit of Creative Commons is all about, right? Sharing, remixing, and improving content? In any case, redesigning these pages was good fun and good practice, even though I have since decided against licensing any of my content via Creative Commons 1. So, rather than simply deleting these brief redesign exercises, I have decided to post them online and share them with anyone who might be interested in such esoteric dabblings. You never know who might find them useful! ;)
Continue Reading