Little Page Loading Tweaks

As most Web Designers have come to learn, some of the two most important Firefox addons to have in your arsenal is the Web Developer toolbar and Firebug.  With Firebug, there is a nifty tool you can integrate with it  from Google called Page Speed, this tool allows you to analyze a website and rate it according to a measurement up to one hundred. So a slow loading page would be 80/100, a fast one would be 90(or more) out of a hundred.

After you analyze a page, Page Speed will tell you by the use of icons which elements need attention; these icons are: a red circle containing an exclamation mark which means that the issue needs immediate attention if possible, an orange triangle signifying a warning for items that can be rectified and, finally, a green checkmark meaning that those particular elements are good to go.

Ok, let's get started on some really basic things you can do to up you Page Speed Rating!

1. Minify CSS: This is extremely common, a designer will write their css in the way that so many of us are accustomed to do, as seen below.

.mydivclass {
background-color:#fff;
border:1px solid #000;
}
#mydivID {
background-color:#fff;
border:1px solid #000;
}

Now there are two ways to minify this easily, either get in the habit of writing it as follows:

.mydivclass{background-color:#fff;border:1px solid #000;}
#mydivID{background-color:#fff;border:1px solid #000;}

or, after Google Page Speed has analyzed your site, simply click the plus symbol by the suggestion of Minify CSS to expand and save your file to where the original CSS file is and then upload it to your remote server (remember that the file you are saving has the same name as the original file, Page Speed appends digits). This not only minifies your CSS, but it also rids your file of any commented out lines (i.e. /*mail form begins here*/ ) that you may have placed in  the file, I use them quite a lot to take out particular lines of code to see what is affecting what when testing across several browsers or quickly find particular code should I need to return to it, and sometimes I forget to rid the stylesheet of these.

Always backup your original css file before saving, because even though I have gotten into the habit of writing my code like above, I sometimes go back to the regular way of writing css when I am creating something new, it's easier for me to organize and view what is going on.  Later, when I have everything worked out, I will minify any new code manually and cut and paste it into the already minified main stylesheet.

2. Another common point that Page Speed Makes is "combine external CSS"

This is extremely easy to do, instead of linking to two stylesheets (i.e. one for the web site and the other for print styles) like so:

<link rel="stylesheet" type="text/css" href="url/to/your.css"/ media="all">
<link rel="stylesheet" type"text/css"  href="url/to/your_print.css" media="print">

You can simply combine both your print and main styles into one stylesheet by writing the following:

@media all{PUT YOUR MAIN CSS HERE}
@media print{PUT YOUR PRINT CSS HERE}

and then linking to it like this:

<link rel="stylesheet" type="text/css" href="url/to/your.css"/>

A note about linking to your stylesheets, this will work across IE6 to 9, and of course the other browsers. You should definately think about dropping @import:

<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
  @import url(http://www.somesite.com/your_style.css);
  @import url(/to/your.css);
-->
</STYLE>

Also, stop putting your styles directly onto the same html page as your content, an external stylesheet is the only way to go.

3.Optomize images! Now, of course all of us try to optimize our images as much as possible with our favorite image manipulating program, but we all know that reducing quality too much in favor of size can result in some really ugly .jpgs.  Well Page Speed can help there too without any noticeable loss of quality. On each page of your site, after you have already optimized your images once in photoshop or the like, simply run Page Speed and you will see the suggestion for Optimize Images, if it has a plus sign by it, click to expand, and click save as on the images you wan to optimize.  Now there is something you have to be aware of, Page Speed will attach numbers to the original file name, so what you want to do is click on the original file before saving  so it has the correct name (i.e. you won't save logo.jpg as logo_10034848204ls43.jpg). Upload the newly saved images to your remote server.  Oh, and just in case, backup your image folder before doing this you would hate to find you had saved one image as another and lose the original by accident.

Also you can use All Smush.it  to optimize your images in Yslow  which is another addon which integrates with firebug, it too rates your page and gives you some insightful information on page loading.

4.And lastly you can ask your host whether or not Google's mod_pagespeed is available on their servers as an Apache module, this will help kick the loading speed up a few notches.

5. As I had mentioned earlier, hosting on the cloud can really help, optimizing images as well, but if you have no choice but to host your images on the same server as your site, then you need to reduce HTTP requests by using image sprites, or combining as many images into one large image as possible and using CSS to position them correctly as backgrounds, rollovers and the like.  Don't make four requests when you could make only one.

If you want more info on how to use Page Speed you can go to Google's docs on it HERE.