Optimizing a Website with Google Page Speed and Dust-Me Selectors

I’ll tell you about two wonderful FireFox plugins that helped me optimize the client side: Google Page Speed and Dust-Me Selectors, which I learned about from Alexander Makarov (here and here).

Google Page Speed

Let’s start with Google Page Speed. This plugin is similar to YSlow and shows bottlenecks, such as “uncached content,” as well as a “site loading chart.”

The plugin runs in FireBug, and two utilities are available:

1. Page Speed
2. Page Speed Activity

We’ll use the first utility, “Page Speed,” which will show us:

• Which content is NOT cached
• Which JS and CSS files are not minified
• Which images need to be optimized (compressed)
• Which CSS and JS files should be combined into a single file
• Which CSS styles are unused
• How much space cookies take up
• Whether Gzip compression is enabled

And so on… It will also provide full information on each procedure!

Once we’ve identified the bottlenecks, let’s move on to actually optimizing your website:

Whether Gzip compression is enabled

I explained how to enable gzip compression in Nginx in the article “Configuring Gzip in Nginx.”

Which CSS and JS files should be combined into a single file

Although I understand the problem of creating connections for each file, I won’t be combining CSS or JS files into a single file because of dependencies on the architecture of my blog engine.

Of course, you could use Web Optimizer or HTTP_StaticMerger. The former is preferable, IMHO.

Which content is NOT cached

Let’s move on to caching, which is more important to me. Take a look at the image:

As you can see, many of my images aren’t cached… More precisely, none of the images are cached :)

Let’s fix this problem by adding the “expires” parameter to the Nginx configuration, set to “max” (maximum caching, for many years):

    server_name adw0rd.ru www.adw0rd.ru;

    location ~* \.(jpg|jpeg|gif|png|ico)$ {
            expires max;
            root /home/adw0rd.ru/www;
    }

Next, restart Nginx:

# /usr/local/etc/rc.d/nginx restart

That’s it. We go into Nginx and see that the files are now served with the header:

Cache-Control: max-age=315360000

This means the cache will be stored in the browser for 10 years :)

Which CSS styles are unused

Of course, you can see which styles are NOT used in Google Page Speed itself, but I’d like to introduce a more visually clear utility, Dust-Me Selectors, which I’ll discuss next… :)

Dust-Me Selectors

It lets you analyze a page and see how many—and, more importantly, which—styles are not used on that page of your site. It also tells you which stylesheet defines them and the line numbers in the file!

Next, we run this plugin over the main pages and draw conclusions about which styles should be removed from the CSS file.

After that, I recommend using the Code Beautifier service to minify CSS. You can read about this in my article: Compressing and Minifying CSS with Code Beautifier.