Frank Schulte-Ladbeck

Site optimization can be wonderful and frustrating, but it could lead to a better user experience.

I was fairly satisfied with the load times on my main business site, so I never considered some optimization steps beyond what I had already accomplished. I decided to download Google’s Page Speed, and take another look at Yahoo’s Yslow to see what I could do for my site. This led me on an adventure that I thought would be good to share.

What to do with CSS

How many stylesheets do you have? I have my main stylesheet, then I have a css file for when a person prints the page. I knew about the stylesheets for plugins, but I did not give them much thought. My first step was simple: combine stylesheets. On my main css file, I enclosed the rules with the following: @media { /*css rules here*/ }. I added the rules from my print css file, enclosing them within @print { /* print css rules*/ }. I was thinking about a mobile stylesheet, but I use a plugin to create a mobile version of the site. Next, I took the css file from my popular posts plugin, and incorporated it into my main css rules. This was the only plugin using a stylesheet for items on my site. I went over to my header.php file to delete my link to the print style sheet. On my other stylesheet link, I replaced the word “screen” with “media”. That gives me: <link rel=”stylesheet” type=”text/css” href=”http://example.com/stylesheet.css” media=”media”>, combining all of my stylesheets. Problem: if the popular post plugin is updated, I may need to go in and delete that css file, while updating the main one.
    Over the years I have made changes to my site without going back to delete some stylesheet rules. I had one page to which those rules applied, while the rest of the site no longer needed them. I took those rules out, and cleaned up that page to match the rest of the site. What you have to remember is that Page Speed or YSlow will point out that you have unused css on the page being examined. I have a static page set as my main landing page on the site, so I was examining that page. Most of the unused css applied to other pages. A good thing to remember is that you may want to go over all of your top landing pages, and then examine which css rules are truly not used.

Changed My Plugins

I deleted plugins which did not serve a purpose to my users. Adding plugins can be great for making your site more functional to users, but if users do not require them or interact with them, why have them. Since I updated to the latest version of WordPress (2.9.2), I wanted to find which plugins would help me optimize the site. After wrecking my site several times after testing out the various plugins, I came up with this list:
WP Super Cache Plus: (this plugin needs to uploaded to your site via file transfer) this plugin builds upon WP Super Cache, but I found one issue. I thought that the plugin had written the mod rewrite rules to my htaccess file, but it did not. I copied the rules and pasted them over the existing rules from WP Super Cache. This was pretty good, but I did add one more item to my htaccess file:

FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch “.(jpg|gif|png|ico|css|js)$”>
ExpiresActive on
ExpiresDefault “access plus 1 year”
</filesmatch>
</ifmodule>

This sets up the expiration date for my images. I do not know if there is a plugin that will help you with that, but this worked out well.
Autoptimize plugin can be installed through WordPress) this plugin works well with WP Super Cache to compress css and javascript, and it did the job well.
If you are worried about other sites using your images, called hotlinking, you can add the following code to your htaccess file:

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?example.com/.*$ [NC]
RewriteRule .*.(gif|jpg|png|ico)$ – [F,L]
</ifModule>

Image Optimization

I do not know why some sites use really large jpegs for some images. I always take GIMP to scale images down in size for my site. I use somewhere in the vicinity of 200pixels by 200pixels for images. The nice thing about Page Speed is that it allowed you to save the images in a more optimized format to use for your site. Besides sizing them right, and setting the expiration date as mentioned above, another technique is using subdomains to store your images. I am not a person who adds images to every post or page, but users do like them. I do have an image rich site though. I have them spread out over the theme. I created subdomains for these images. Browsers will load images from different subdomains at the same time. Images inside the post are uploaded in WordPress Media. All of the images used in my header go into a headerimage subdomain(headerimage.example.com). Images from the side bar go into sideimages subdomain, and so on. Google suggests 2 to 5 subdomains.

Minimized DNS requests

To improve my analytics, I had added various bits of code which called upon other sites to help create various reports. When you look at your entire site, you may find several requests to other sites to accomplish some task. I went through these request to determine which ones that I wanted to keep, and which ones no longer served a purpose. Do I need that bit of code from Compete or eXtreme Tracking? Are all of those widgets useful? I evaluate each request to see if it adds value to the user then if it adds value to me. If it adds value, then the request stays.

In the end, was using Page Speed or YSlow helpful? I think that they do help you make a better site, but I do not think that they should be the sole focus of a site owner. Optimization is great, but everything has to be done for the user. I noticed that some top sites have poor showings when using these evaluation tools. YSlow is a bit harder on sites than Page Speed. Some suggestions, like moving images to a cookieless domain, preferably a network, is not practical for all site owners. If the user experience is good or great, then you have a better site.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

One Response to “Using Page Speed to Optimize WordPress”