Google’s Caffeine search engine and mobile browsers demand blogs and websites that are fast

Since last year when the new search engine Caffeine was released Google has been on a missionary campaign to speed up web access.  Users demand faster and faster access, whether they are on dial-up or broadband high-speed.

Waiting for a website to load on an iPhone can be an exercise in waiting for Spring to come. The message is we need to work at making pages load faster.

For someone like me who merrily posts videos and pictures of all sizes on their blog, trying to make a page faster is a learning curve.  Last weekend I took  a crash course on page speeds.

The number one rule of page speed is: thou shalt load no flash objects. After that pictures are the speed pigs of most pages.

Three things that matter to page load speed are: 1) picture dimensions 2) size of the file and 3) where the file is stored.

Picture Dimensions

The bigger the picture the bigger the file will be and the longer it takes to load.  Google is particularly concerned with what size it is.  It dislikes pictures files without dimensions in pixels and re-sizing in HTML.

If your page is displaying a 300 pixel by 180 pixel the file should be dimensioned in the statement. Most blogging software will do that for you. WordPress does. Where you may have problems is JPEG, GIF and PNG files that are referenced from another site without dimensions.

If a picture is being re-sized in as the page loads, that wastes time. It’s slower to re-size a 520 pixel file to 260 pixels as the page loads. It’s faster to scale the photo in the editing software first.  I discovered a cool tool that does that in Adobe Photoshop Elements – File, Save for Web.

Size of the file

Jpeg files are already compressed but still too large in k bytes to be efficiently downloading on web pages.

That being said, if your site is a photo blog you probably want higher resolution images. The way to solve that problem is to host the image on Flickr, Photobucket or photo hosting site.

For story illustration, you can get by with much smaller images, often less than 20k  and even less than 10k. Smaller pictures can reduce page load times by seconds.

Reducing the physical file size is also done with Adobe Photoshop Elements – File, Save for Web.

The video explains the process.

To re-size and compress:

File Open select a photo to resize

File Save for Web

New Size (insert value in pixels) Constrain proportions to keep the proportions
Apply

Preset (GIFF, JPEG or PNG compression)
OK
Re-name File
Save

Note on Photoshop Elements – I’ve used this for three years and each year upgraded to the latest version. I moved back to 7 after 8 failed to work properly on Windows 7. Other users were complaining on the Internet about installation problems. The feature set changes didn’t justify the grief. The rumor is Adobe is preparing a major overhaul of both Photoshop and Premiere this spring which is probably why they are heavily discounting both products.

Adobe Photoshop Elements 8 is sold both standalone and in a bundle bundle with Premiere Elements which is a good way to get a movie editor that’s compatible with your picture editor. Everyone has their own preferences. Adobe Photoshop Elements & Premiere Elements 7 [OLD VERSION] work for me.

If you check around, Best Buy, Staples and Future Shop have the standalone and bundled products on special. You can also buy them directly from Adobe.