I’ve been on a speed kick lately with the site, trying to find ways to make it load faster while keeping the same functionality. I started out by turning off all the plugins I wasn’t using, replacing dynamic widgets with static images… and finally by looking at the Google Page Speed Report and following the recommendations.

The easiest one (at least in theory) was “Combine images into CSS sprites” which meant dumping all of the commonly used images into one PNG file and then using CSS background-image and background-position instead of IMG calls.

Creating a PNG Sprite

I created a large blank PNG image with a bright cyan background (so I could tell when I got background-position wrong) and then cut and pasted all of the smaller images into it. The resulting picture is a little messy, but works so I’m calling it a win.

As I was moving images into the file I made a note of what the upper left pixel position was for each and the exact size of the image.

Updating the Code

Then I had to update the code… which turned out to be a bit more of a hassle than expected.

The PHP/HTML was the easy part, figuring out the CSS… well that’s something I obviously need to hit up Codecdemy and do some refreshers on. (Apologies to anyone who hit the website while it was looking like a Picasso painting. *sighs*)

Fixing the Header Image

The first thing I had to replace was the header background, which was the easy one since it already used background-image. I just changed the file name and since it was the 0,0 position image, it was good to go.

New CSS

#header {
    position: relative;
    float:left;
    margin-left: auto;
    margin-right: auto;
    width:974px;
    height:150px;
    display:block;
    background-image:url('https://martha.net/wordpress/wp-content/icons/Marthanet Sprites.png');
    background-repeat:no-repeat;
} 

Fixing the Category Icon Menu

The next thing to change was the horizontal menu of category icons and I took a backhoe to the existing code.

As you may remember from this post, I was using an array to loop through the categories and create the images. This worked well back then because I was still hashing out what I wanted to do with the site, but now that things are a bit more static I just ripped it out wholesale.

New Code

New CSS

#navigation {
    position: absolute;
    top:100px;
    float:left;
    margin-left: 5px;
    margin-right: auto;
    height:60px;
    width:960px;
}

#navibox {
    position: relative;
    top:-16px;
    float:left;
    margin-left:-25px;
    margin-right: auto;
}

Ul#navibox {
    list-style: none;
}

Ul#navibox li {
    display:inline;
}

ul#navibox li a {
    position: relative;
    display: block;
    float:left;
    height: 50px;
    background-image: url('https://martha.net/wordpress/wp-content/icons/Marthanet Sprites.png');
}
ul#navibox li a.unquiet-bones {
    background-position:0px -152px;
    width:53px;
    height: 50px;
}
ul#navibox li a.hue-askew-horses {
    background-position:-54px -152px ;
    width:53px;
    height: 50px;
}
ul#navibox li a.perish-twice {
    background-position:-108px -152px;
    width:53px;
    height: 50px;
}
ul#navibox li a.everyday-dragons {
    background-position:-162px -152px;
    width:53px;
    height: 50px;
}
ul#navibox li a.view-from-the-molehill {
    background-position:-216px -152px;
    width:53px;
    height: 50px;
}
ul#navibox li a.code-kitteh {
background-position:-270px -152px;
    width:52px;
    height: 50px;
}

Fixing the Widgets

To help speed things up I had already replaced most of the widgets with static images, which made it a lot easier to swap things out. Mostly. (Of course I also had one image per text-box, because I am a lazy soul and wanted to play around with the order via drag-and-drop.)

The first thing I did was view the source for the existing page and grab the number of the text box.

Then I built the CSS I needed on one tab while I updated the contents of the text box on the other (so I could update both within seconds and hopefully avoid more Picassos.)

New Code

New CSS

/*********************** LAYOUT : SIDEBAR : TEXT-20 (Navigation Buttons) ***/

#text-20 {
    display: block;
    width: 231px;
    height: 164px;
}

#text-20 ul {
    float:left;
    list-style: none;
}
#text-20 ul li a {
    position: relative;
    margin-left:-12px;
    display: block;
    float:left;
    background-image: url('https://martha.net/wordpress/wp-content/icons/Marthanet Sprites.png');
}
#text-20 ul li a.sb_model_horse_gallery{
    background-position:0px -204px;
    width: 231px;
    height: 50px;
}
#text-20 ul li a.sb_custom_orders{
    background-position:0px -255px;
    width: 231px;
    height: 32px;
}
#text-20 ul li a.sb_online_novels{
    background-position:0px -288px;
    width: 231px;
    height: 32px;
}
#text-20 ul li a.sb_about{
    background-position:0px -322px;
    width: 231px;
    height: 50px;
}