Tag Archives: Stylesheets

How can I speed up my website? Part 2

So there I was sitting in front of my computer, it’s Friday, I’ve got Tweetdeck open on the right hand monitor and I see a message including my @forbairt username and my blog post on how to speed up your website. Queue fuzzy feelings :)

Twitter message promoting my post

As one does I says thanks for the mention (it’s the polite thing to do). I’d been playing with my site last night, tweaking a little of this, tweaking a little of that and all on the live site I might add ( probably best you don’t do that if your site is getting any kind of traffic). One of those things I did was to use Google +1 to send a message saying should I just drop google +1 does anyone really use it? ( My verdict is still out. Tech people yes, normal people no at least as I see it) it was picked up though by the same Paul Conroy who’d mentioned me in the tweet earlier.

Like a lot of people I’m a “like” whore ( there I said it :P ) nothing quite like getting likes on your latest blog post / Facebook picture or retweets and favs on a tweet you make ( we seem to think it matters but if it’s not converting into sales does it and how do we measure that? ). Part of the fun for me is seeing the number of shares, tweets and so on. I’ve thrown a WordPress plugin onto my blog for this exact purpose. However what it does is it pulls in Javascript share code from all the major social networks. You’re talking about including Javascript from twitter, facebook, Google Plus, Linked In … and any others you’d care to mention … with those also come the images no doubt and other bits and bobs. Might not sound like a big deal but every time your site is loaded these are getting loaded. (well unless they get cached but we’ll just deal with first page loads here which may be how google views a page).

Social Share Buttons in Action

Paul mentioned that they ended up replacing all of these with static images. 4 Javascript files become 4 images with normal links and this sounds good to me. We end up losing some functionality however. We don’t see any of the Shares / RTs / +1s on our site. ( I think I can live with that for now )

Daft Social Share Links

As you can see from the above image they have a Facebook Like / Tweet / Pin It and G+1 link well I don’t really want the Pin It link for now. If I had more shiny imagery on the site I might again I’ve not looked into the impact that pin it can have on blog traffic.

Anyways how big an issue not having the numbers of shares is I’m not sure. I’d need to get into some A/B testing to determine if seeing a number on a share button increases the likely hood of sharing it as well. This blog was setup a bit over a week ago so it really doesn’t have the numbers so I can test these things and anyways, there are probably posts out there related to this so of course feel free to share links if you’ve got them ( as long as it’s not too spammy and semi reputable throw them into the comments )

So enough with all my yadda yadda :) In my last post I went into how a couple of simple enough things could speed up your website no end. A 3.5MB page load became 2.5MB for 10 – 20 minutes work. I touched upon the idea of reducing the number of images that are getting loaded on the site. Not getting rid of the images as such just getting rid of the number of images that are getting loaded. Confused? :) I like to think I’ve done well.
Well this is my second post on how to speed up your website and I’m going to get into CSS Sprites. What is this CSS magic I speak of? well think of all those images that were on the DollyRouge.ie website. There were around 20 images and they could simply be merged into one image. A small bit of CSS and we can create links that have background images and replace all these images we were previously using. In the case of Dolly Rouge website we replace the 20 or so images with the one. This means only 1 load of an image … less handshaking going on between you and the server … request an image … wait for a response .. start receiving the image .. confirm it’s there and request the next image. (Remember that there are limits on the number of files you can request at the same time as well)

Lets get down to business and some tweaking of images and CSS hacking.

First we need to get some images we want for our website. ( You might have thought I was going to fix up the DollyRouge images but well I need some new share buttons for my site not to mention quick links to my social ninja profiles so the process is kind of identical. )

So I want the following 3 buttons (not the pin it one)

Share Buttons from Daft.ie

Lets put the 3 images into the one image as tight together as possible and we’ll end up with the following.

Share Buttons Image

This image is 143 pixels wide. Time to figure out where the buttons are in x / y coordinates.

Facebook is 49×20 starts at x = 0
Twitter tweet button is 63×20 and it starts at x = 63
Google +1 button is at 32×20 and it starts at x = 112

( I’m using my image editor to see how many pixels wide things are )

While I’m at it there are a few direct link type images I’d like to add to it so I’ll end up with the following image

Generic Site Buttons and images

I’ll also need to create some CSS for the site. The plan is to create a number of links for each of the buttons.

We’ll give the links class names share-facebook, share-twitter, share-google

We’ll try to use html code such as …

<a class="share-facebook" href="#">Share this post on facebook</a>

The plan being to replace that with a fixed size background image and move the text out so it’s not seen by the user. There are  pluses and minuses to this but we’ll go with this for now.

I’ll go through a few of the link / images. The .share-facebook css becomes

.share-facebook {
display: block;
text-indent: -9999em;
width: 49px;
height: 20px;
background: url(sharebuttonsplus.png) 0 0;
float: left;
margin-right: 4px;
}

From the CSS … we’ll display the link as a block ( in this case we want it to be the width and height of the facebook part of the image) we want to hide the text we’re displaying so that’s where the text-indent:-9999em; comes in. In order to show an image we’re going to make the background image into the share button and position that background image at 0 0. Floating left means the next thing beside it will be pulled up beside it and margin-right means we’ll throw 4 pixels onto the right of the image. You can obviously tweak all this :)

The next element is going to be pretty much the same expect it’s the twitter button and it’s 62 pixels wide. We need the image to display the right place so we need to pull it back to use 49 pixels. Everything else remains the same. This link ends up being.

.share-twitter {
display: block;
text-indent: -9999em;
width: 62px;
height: 20px;
background: url(sharebuttonsplus.png) -49px 0;
float: left;
margin-right: 4px;
}

You can work out any other buttons you’ve made but I’ll just make a follow me button for the facebook icon.

We need to in that case pull it back vertically ( pull it up 20 pixels ) and we end up with ..

.link-facebook {
display: block;
text-indent: -9999em;
width: 32px;
height: 32px;
background: url(sharebuttonsplus.png) -32px -20px;
float: left;
margin-right: 4px;
}

So in my case here I’m ending up with 8 images in one.

So now all we need is the various share code / URLs we need for each of the buttons.

Hint … here they are :)

http://www.facebook.com/sharer.php?u=#&t=MyTitleToShare
https://plus.google.com/share?url=
https://twitter.com/share?url=

So we’ve gone and created a CSS sprite to do some shiny goodness for us.

In my case here it’s 8 images into one. I’ve gotten rid of a WordPress plugin to create share buttons which includes LOTS of links to Javascript that needs to get loaded on other websites and other crud.

While it might not sound like a HUGE amount if you take the case of daft above their post from May last year stated they had 1.9 million unique browsers. 137 million page impressions. Taking simply their 4 share images and making them into one erm hang on you do the maths :) ( The daft numbers – http://blog.daft.ie/2012/05/daft-ies-record-new-audience-figures/)

Hope you enjoyed the second blog post on how to speed up your website. Slightly more complicated than the first though I hope it has given you some food for thought. ( now to get around to making some of these changes on this blog :D )

 

Use Local CSS On A Live Site

How can I use my local css on a remote website? (without ftp)

Use Local CSS On A Live Site

Ever had a case of wanting to update CSS on a live site but don’t want to go making a local copy of the site for testing. You also don’t want to break anything on the live site that the boss will notice. So to make a local copy you’ll need to pull out the database .. move all the files .. update the config files .. maybe update various database records and so on and really you only want to tweak the CSS? Well we all know you can use the likes of Firebug (If you don’t have it already and you’re a web developer / designer then you really should) to do this and edit the live CSS and you’ll see the changes. You can do other shiny via the WebDeveloper tools and reload Linked Style sheets. You refresh the page however and you’ve lost your changes (unless I’m missing something). Also I’ve a lot of tweaking I want to do so it’s not just a case of wanting to edit one setting or two.

So that’s the situation now what can we do about it?

Well for one I’m going to assume you’re running some sort of local webserver. So we want to do two things.

  1. When we load the live website we want to nuke all the CSS in there.
  2. Two we want to load our own local CSS file.

On my real version I’ve gone and I’ve copied everything from the remote site’s CSS (multiple files) and put it into my local webserver in the document root as mylocalcopy.css

For testing purposes here I’ve just dumped the following into the file.

body { padding:40px; color:#FF0000; }

I can see this as http://localhost:8888/mylocalcopy.css

I can now go using some live edit stuff with Firebug and replace the remote CSS file with my local one if I want to. I don’t want to do this every time I load the page / pages of the site though.

Enter the GreaseMonkey.

GreaseMonkey lets you setup little snippets of Javascript and have them run when you want them to (for a certain domain or page). I want mine to run when I hit my website. I can disable it easily enough with GreaseMonkey with two clicks when I don’t want it running.

So download and install GreaseMonkey.

For me on the top right of my Firefox window I’ve got the little Monkey drop down icon.

Grease Monkey Icon

Go to your website of choice. In my case it’s this one.

Click on the drop down arrow of GreaseMonkey and you’ve got options.

Create a new GreaseMonkey script

Click on New User Script. Then go ahead and enter your details the main one you’ll be concerned here with is the name space. In my case it’s http://forbairt.com/ so that’s everything on forbairt.com.

Create A new GreaseMonkey script

Clicking on ok and you’ll be prompted to open a new script in an editor of your choice.

Your GreaseMonkey Script

It should be filled out with something similar to

// ==UserScript==
// @name        Use Local CSS - Forbairt
// @namespace   http://forbairt.com/
// @description Use my local CSS file for the remote forbairt.com website
// @include     http://forbairt.com/*
// @version     1
// ==/UserScript==

I’ve gone ahead and entered in the following and saved the file.

for (var i = document.styleSheets.length - 1; i >= 0; i--) {
    document.styleSheets[i].disabled = true;
}

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://localhost:8888/mylocalcopy.css';
document.getElementsByTagName("head")[0].appendChild(link);

The first part goes ahead and disables all style sheets

for (var i = document.styleSheets.length - 1; i >= 0; i--) {
    document.styleSheets[i].disabled = true;
}

The second part creates a link to your locally stored stylesheet. (replace the link.href = ” with the appropriate file / location for your CSS file)

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://localhost:8888/mylocalcopy.css';
document.getElementsByTagName("head")[0].appendChild(link);

Save your file and in a new tab open up your website. You’ll hopefully see your website as normal.

Forbairt.com as normal

Click on the GreaseMonkey dropdown and click on your script name. Reload your website.

Enable your grease monkey script

If all has gone according to plan you should now be seeing a pretty much unstyled site with red text. (which is all that’s in my local css file at the moment) You’re good to go copy all the CSS from your remote site that you want (Remember any references to images will need to be fully qualified or just grab them and store them locally). Reload the page and it should keep on nuking the linked stylesheets and inline stylesheets. I’ve intentionally not removed any inline css from any of the pages. It really shouldn’t be there and if it is then you’ll have to go manually edit your pages anyways.

Unstyled website with red text as per local stylesheet

Now all that’s left is happy editing :)

If you’ve got the web developer tools installed on Firefox you can now live edit your local CSS file and see the live changes not to mention saving the file locally. Everytime you reload the page or jump between pages on your site you’ll be seeing your changes. You’re not touching any live data and hopefully no one will scream at you as next to nothing can go wrong.

Use web developer tools to live edit your CSS

Live edit your CSS with the web dev tools

For me I’m happy to use my code editor to hack away at my CSS. Once I’m happy I can replace the live CSS. No need to create a staging area for the site when all I want to do is tweak CSS and not impact on any end user.

Hope this mini tutorial is of help I know it could be a big time saver for me.

EDIT: I’ve made a few minor tweaks / bug fixes in there.