Skip to main content

How to trick out the performance of your WordPress site

In Web Performant WordPress, Dave Rupert talks about the steps he took to dramatically increase the performance of his WordPress site.

Inspired by Dave’s work, I decided to make some updates the optimize the performance of Go Make Things. Total time investment: 30 minutes, and the site is noticeably snappier.

Here’s what I did…

Getting Started

First, there’s a few things you’ll need to do:

  1. Download and install Google Chrome, if you don’t already have it.
  2. Install the Page Speed add-on.
  3. Backup all of your WordPress files, just in case something goes wrong.

Minify

Minifying is the process of removing spacing, line breaks and comments from your CSS, HTML, and javascript. Though it might not seem like a big deal, removing all those unused elements can decrease the size of your files by 20 40 percent or more.

Unfortunately, it also leaves your code unreadable to humans, but that’s ok. I write and modify my code in human readable format, and then use an app to minify it for me.

Minify your CSS

In Google Chrome, run the Developer Tools and click on the “Page Speed” tab. Then click “Analyze.”

You’ll be given an overall score, and a list of things you can do to improve your score.

One of the items on the list will be “Minify CSS.” Click it. Under “Suggestions for this page” is a link to “see optimized content.” Follow that to get a minified version of your CSS provided by Google.

I created a copy of my stylesheet, removed the header information, and renamed it “style-unmin.css.” This is the human readable file I’ll now edit when I need to update my site. Without the header info, it just sits on the server.

Then I went to my active stylesheet, and pasted in the minified CSS provided by Google. When you do this, make sure you leave the header information (theme name, etc.) intact or WordPress won’t be able to access your theme.

Click “Update” and you’re done. Easy, right?

Minify your javascript

In the Developer Tools Window, click on “Minify Javascript” and repeat the process above to access a minified version of your script from Google. If you’re using jQuery, Google also provides a minified version of that you can use.

I created a new file called “js-min.js” and dropped the minified code into that. Then I changed the link in my footer to point to the new javascript file. (You do call your javascript in your footer for better performance, right?)

And again, you’re done.

Minify your HTML

Because your HTML is server up dynamically using PHP, minifying your HTML requires you to add a few lines of code to your functions file in WordPress.

Between <?php and ?> add this bit of code (txt file), courtesy of DVS. (If you’d prefer to use a plugin, I threw one together. Download it here.)

This tells WordPress to remove the spaces and comments from your HTML and inline CSS and javascript. If you view source after making this update, you’ll see a message at the bottom of the page telling you how much the file was compressed.

One issue I have discovered: If you use inline AJAX, this code may prevent it from working properly. If you find this to be the case, set protected $compress_js = true; to false instead, and it will leave javascript uncompressed.

And you’re done.

Compress

With a simple modification to your .htaccess file, you can tell the server your WordPress site sits on to send your files compressed as gzip files. This reduces file size by about 70 percent, which can make a huge difference, especially for people browsing on low bandwidth devices.

Underneath your WordPress stuff, add this bit of code courtesy of Dave Rupert:

#Specify Font Types
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-woff .woff
AddType image/svg+xml .svg
AddType application/vnd.ms-fontobject .eot

# Enable GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css font/ttf font/otf image/svg+xml application/vnd.ms-fontobject application/x-javascript application/javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
</ifmodule>

For browsers that will support it, your files should now get gzipped by the server prior to being sent. If not supported, the server will just ignore it and send the regular files.

And you’re done.

(You may read some posts that tell you that shared hosting on GoDaddy does not support gzipping. That’s no longer true. I’m on GoDaddy shared hosting, and this works fine for me.)

Cache

Setting cache headers tells browsers to keep static assets stored locally so that a visitor’s browser doesn’t have to re-download them every time they visit your site.

Again in the .htaccess file, drop the following code underneath the gzipping code (again courtesy of Dave):

# Expires Headers - 2678400s = 31 days
<ifmodule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 0 seconds"
  ExpiresByType image/gif "access plus 2678400 seconds"
  ExpiresByType image/jpeg "access plus 2678400 seconds"
  ExpiresByType image/png "access plus 2678400 seconds"
  ExpiresByType text/css "access plus 518400 seconds"
  ExpiresByType text/javascript "access plus 2678400 seconds"
  ExpiresByType application/x-javascript "access plus 2678400 seconds"
  ExpiresByType font/ttf "access plus 2678400 seconds"
  ExpiresByType font/otf "access plus 2678400 seconds"
  ExpiresByType application/vnd.ms-fontobject "access plus 2678400 seconds"
  ExpiresByType application/x-woff "access plus 2678400 seconds"
  ExpiresByType image/svg+xml "access plus 2678400 seconds"
</ifmodule>

# Cache Headers
<ifmodule mod_headers.c>
  # Cache specified files for 31 days
  <filesmatch ".(ico|flv|jpg|jpeg|png|gif|css|swf|eot|woff|otf|ttf|svg)$">
  Header set Cache-Control "max-age=2678400, public"
  </filesmatch>
  # Don't cache HTML
  <filesmatch ".(html|htm)$">
  Header set Cache-Control "max-age=0, private, must-revalidate"
  </filesmatch>
  # Cache PDFs for a day
  <filesmatch ".(pdf)$">
  Header set Cache-Control "max-age=86400, public"
  </filesmatch>
  # Cache Javascripts for 31 days
  <filesmatch ".(js)$">
  Header set Cache-Control "max-age=2678400, private"
  </filesmatch>
</ifmodule>

And you’re done!

Smush Your Images

Images in their raw form often have a lot of extra but unneeded data in them. This makes the file sizes up to 30 60 percent bigger than they need to be.

“Smushing” images is the process of removing that unneeded data and optimizing them for web viewing.

Dave recommends going back and smushing all of the old images on your site. I was far too lazy for that. Instead, I simply optimized the photo on my Info page, and will be smushing all photos I post on the site going forward.

Smushing Apps

So how exactly do you smush an image? There’s an app for that!

I downloaded ImageOptim, which is unfortunately Mac only. It’s a simple drag-and-drop application, and actually shows you how much smaller the file is after smushing.

If you’re on a PC, you can also use Smush.it, a web-based app from Yahoo.

Better file types

It’s worth noting that I’m not just smushing my images, but also making smarter decisions about file types.

Historically, I would save all of my images as PNGs files. PNG is a lossless image format, so it keeps graphics sharp and crisp (as opposed to the lossy JPG format). However, PNGs are also substantially larger than JPGs.

For icons, PNGs make a lot of sense (or used to – more on that in a minute). But for something like a photo of people or places, which already have a lot of noise in them, a JPG is actually a better format because it’s much smaller in size.

Fonts, not images

I had already done this a while ago, but rather than using PNGs for my icons, I actually use an embedded web font.

Using the IcoMoon app, I was able to create a custom font set with just the icons I need. It weighs in at just 8 kb for most file types and results in just a single HTTP request, which drastically improves performance.

And because I’m loading a font and not images, my icons don’t get distorted on retina displays. If you don’t go the icon font route, you should use image sprites instead.

What I didn’t do

Dave recommends one additional thing that I haven’t done: Install WP Super Cache.

In simple terms, when a user visits your site, WordPress compiles your content from the database with the content from your theme and serves up a webpage. WP Super Cache converts your pages into cached static HTML pages ahead of time, reducing load time by cutting the database out of the process.

I’ll probably get around to adding this at some point down the road.

Referenced & Useful Resources

  1. Web Performant WordPress by Dave Rupert.
  2. The Page Speed add-on for Google Chrome and Firefox.
  3. YSlow, another website performance tester from Yahoo.
  4. Pre-minified jQuery and other code from Google
  5. Easy Trick to Minify HTML by DVS.
  6. ImageOptim, a Mac app for smushing images.
  7. Smush.it, a web-based app for smushing images from Yahoo.
  8. IcoMoon, an amazing icon font app.
  9. My tutorial on using icon fonts.
  10. Image Sprites: What They Are, Why They’re Cool, and How to Use Them by Chris Coyier.

2 Comments

Leave a comment or contact me on Twitter at @ChrisFerdinandi.


Cliff

Heya i’m for the first time here. I came across this board
and I find It truly useful & it helped me out a lot.
I hope to give something back and aid others like you aided me.


Elijah

Ahaa, its good dialogue regarding this paragraph here at this weblog, I have
read all that, so at this time me also commenting here.

Leave a Comment

Share links, code and more with Markdown.