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

I recently added to my growing library of image-preloading methods with a few new-&-improved techniques. After posting that recent preloading article, an even better way of preloading images using pure CSS3 hit me:

.preload-images {
	background: url(image-01.png) no-repeat -9999px -9999px;
	background: url(image-01.png) no-repeat -9999px -9999px,
		    url(image-02.png) no-repeat -9999px -9999px,
		    url(image-03.png) no-repeat -9999px -9999px,
		    url(image-04.png) no-repeat -9999px -9999px,
		    url(image-05.png) no-repeat -9999px -9999px;
	}

Using CSS3’s new support for multiple background images, we can use a single, existing element to preload all of the required images. Compare this method with the old way of using CSS to preload images:

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

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

I recently twittered my intention to switch from the Firefox browser to the sleek, new Opera 9.5. I have always used Opera as a secondary browser, especially handy for speedy jumps into cyberspace, browser testing, and taking up space on my hard drive. I have always wanted to switch completely to Opera, but for many reasons, Firefox just keeps pulling me back into its comfortable grasp..

After a quick Opera-9.5 download, I decided to install Opera in its own directory instead of upgrading my current 9-point-whatever version. Unlike some browsers, multiple installations of Opera require nothing more than separate directories (as specified during the setup process). Within moments Opera 9.5 was loaded up and running tuf. The new darker default interface is sleek and sexy, inspiring me all the more to continue my quest to switch from Firefox.

As I began configuring the new Opera with imported bookmarks, speed-dial, home-page settings, and tab groups, I found myself digging up passwords that I haven’t had to remember in years. I know that Opera is equipped with its own “Remember Password” functionality, but you still have to enter each password at least once in order for it to work. Not a big deal, and certainly nothing against Opera, but it would have been great to have been able to import all of my saved Firefox passwords (if that’s even possible). In any case, after loading up and logging in to my core collection of tabbed sites, I spent a majority of the day using Opera instead of Firefox for all of my design, admin, and surfing needs.

Continue Reading

Before Summer arrives, I need to post the conclusion to my seasonal article, Perishable Press HTAccess Spring Cleaning, Part 1. As explained in the first post, I recently spent some time to consolidate and optimize the Perishable Press site-root and blog-root HTAccess files. Since the makeover, I have enjoyed better performance, fewer errors, and cleaner code. In this article, I share some of the changes made to the blog-root HTAccess file and provide a brief explanation as to their intended purpose. Granted, most of the blog-root directives affected by the renovation involve redirecting broken/missing URLs, but there are some other gems mixed in as well. In sharing these deprecated excerpts, I hope to inspire others to improve their own HTAccess and/or configuration files. What an excellent way to wrap up this delightful Spring season! :)

Continue Reading

For the past several months and up until just recently, Perishable Press had been suffering from unpredictable episodes of the dreaded white screen of death. Although blank white screens happen to virtually all WordPress users now and then, certain configurations seem to trigger crashes more frequently than others. Here, I am referring to WordPress version 2.3.

In this case, the unpredictable crashes, inconsistent errors, and general instability began several months ago after I had completed my WordPress theme restoration project. Prior to that, I had removed all of my alternate themes and placed them on a subdomain. Meanwhile, after the themes had been removed, I decided to enable the default WordPress cache (don’t ask why). For the next month or so, before restoring my themes, my site performed exquisitely: uptime at 99% (on a shared server, no less), virtually no errors, and so on. Then, after restoring alternate theme functionality, the site began locking up and crashing multiple times each day. Here is a summary of the sequence of events (estimated time frames):

Continue Reading

While developing the 3G Blacklist, I completely renovated the Perishable Press site-root and blog-root HTAccess files. Since the makeover, I have enjoyed better performance, fewer errors, and cleaner code. In this article, I share some of the changes made to the root HTAccess file and provide a brief explanation as to their intended purpose and potential benefit. In sharing this information, I hope to inspire others to improve their own HTAccess and/or configuration files. In the next article, I will cover some of the changes made to the blog-root HTAccess file. As always, suggestions and questions are always welcome — just drop a comment below! Have fun!! :)

Continue Reading

During the recent ASO server debacle, I raced frantically to restore functionality to Perishable Press. Along the way, one of the many tricks that I tried while trying to fix the dreaded “white screen of death” syndrome involved increasing the amount of PHP memory available to WordPress. This fix worked for me, but may not prove effective on every installation of WordPress. If you are unsure as to whether or not you need to increase your PHP memory, consult with your host concerning current available memory ¹ and overall compatibility with a localized increase. Note that if your blog is running fine, there is probably no need to employ this solution. I recommend this change only if you are experiencing PHP-related and/or PHP memory issues associated with any of the following:

Continue Reading

Just a note to announce a site upgrade to WordPress 2.3.3. The upgrade went well, but overall server performance continues to suffer. I am aware that some people are experiencing difficulties leaving comments and even accessing the site in general. Rest assured, I am working with my hosting company, A Small Orange, to get everything back on track and running smooth. In the meantime, I appreciate your patience as we work to resolve the issues, restore full functionality, and return to reliable performance.

Please share any helpful observations regarding the site here. — Thanks!

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

Over the past several years working online, my year-end maintenance routine has evolved from simple website backups to a robust strategy involving many important and useful tasks. Some of the items on the list have indeed been performed multiple times throughout the year, but are included here to emphasize their importance. Additionally, many of these tasks are great for helping bloggers gain a clearer picture of their overall online empire, while attaining a sense of annual “closure” concerning the work of the previous year. So, let’s dig into my personal year-end strategy for cleaning things up and preparing for the new year..

Make complete backups of your work

Frequent backups should be a part of any serious online strategy. At the end of the year, I create a complete backup of everything, including all site files (XHTML, PHP, images, JavaScript, htaccess, etc.), as well as all associated database content. I generally duplicate my entire set of files (for all domains), and then include duplicate database backups in their respective directories. I also take this opportunity to purge my email inbox of any “loose ends” by relocating them to their respective domain’s backup directory. I also do this for any loose files, configuration files, article backups, and anything else that goes with a particular domain. This works great at consolidating and organizing data that may be needed at some point in the future. After I have consolidated everything worth keeping, I delete all other backups for the year and burn a permanent copy for the archives. Thus, as time goes on, I will have accumulated all the best bits of each year into a nice annual library of backup content. I can live with that :)

Continue Reading