How to Speed Up Your WordPress Website

“out of the box” wordpress is neither SEO friendly, or configured for performance…

Right now, wordpress is running on over 10 million websites, or just over 18% of the websites currently on the internet. While wordpress isn’t without its problems, there’s no denying it’s a popular, easy to set up, and easy to use CMS. However, despite what many will tell you, “out of the box” wordpress is neither SEO friendly or configured for performance. Additionally, many of the plugins that extend and improve the functionality of wordpress negatively affect its performance. In this post, I’m going to offer some tips on how to speed up your wordpress website, hopefully without boring you with too much technical detail. If you find this post useful, please bookmark it for later use or share it with your friends.

Plugins

P3 Plugin

Plugin Performance Graph (Click to Enlarge)

Plugins are one of the best and worst things about wordpress. As I mentioned above, they enhance and extend functionality, but they also impact performance–in some cases dramatically. So job #1 is identifying which plugins are doing more harm than good. The tricky part is that, if you are running more than handful of plugins, this is challenging. Fortunately there are some tools that can help, such as the P3 plugin profiler. It will check all of your front end and back end plugins and identify the worst offenders so you can decide how mission critical they are and whether to keep them or not. For example, after running this analysis on multiple websites, I have decided to remove “popular posts” plugins and “related post” plugins. They were doing more harm than good (click the image for a detailed view).

Mobile Websites & Responsive Design

While it may be 2 years old, I still stand by my post that, if you don’t have one, building a mobile friendly website should be your number one IT project. If you have already implemented a mobile solution using something like WP Touch, that’s fine. However, a better solution is to go with a responsive design. I use the Metro Theme on Genesis framework on this site. It has responsive design built in. If you think responsive design is something only used by bleeding edge techno weenies, try checking out the Boston Globe on your desktop and smartphone and see how it works on both. If you don’t think Google thinks mobile performance is important, notice that they default to mobile on their new page speed insight tool (more on this tool later).

Hosting

For most people, hosting is one of the least fun aspects of running your own website. That said, choosing the wrong hosting company can affect your website’s performance. That doesn’t mean everyone needs to shell out big bucks for a dedicated server, but it does mean you have to do your research and find a good, dependable hosting company within your budget. I’ve been with Tigertech for 5 years. I love them and the price is very reasonable at under $10 a month. When is the last time you loved a hosting company who was that cheap for that long?

Combine CSS & Javascript

Friends don’t let friends use Jetpack… 

Out of the box wordpress will serve multiple CSS and Javascript files and each plugin you add will increase that number. It’s not uncommon to see sites serving 10-12 CSS files and half a dozen JS files. Each of these files is a performance hit on your visitors. Fortunately, there is a way to solve this problem by using the Combine CSS and Combine JS plugins. These plugins will combine and minify your files into one CSS and one JS. Now, depending on the plugin, this may break some functionality, so you will have to exempt a plugin or two, but going from eight CSS files to two is a big deal. These plugins may not play nicely with some other plugins, for example Jetpack. But if you ran the P3 performance profiler, chances are good that you already noticed Jetpack was a problem child. And remember: “Friends don’t let friends use Jetpack.”

Another way to make a performance boost is to move the scripts to the footer. Normally this kind of thing requires some good programming skills and the ability to hack apart your theme. Fortunately, there is a another solution the Scripts to Footer plugin. Again, you may run into some conflicts with the plugins you are running so be sure to test things.

Caching

Caching is one of those things that really can make dramatic improvements with your website’s performance; however, enabling caching can be somewhat intimidating if you don’t understand the technical aspects. I like WP Super Cache. Other folks prefer W3 Total Cache. If it’s beyond your skill set to get it properly configured and running, you might want to buy someone dinner and enlist a friend. IMHO both of these plugins are far more complicated than they need to be, but they are definitely worth running.

Compression

Many moons ago, wordpress had a setting that let you turn on compression, which served out smaller and faster version of your pages. At some point the brain trust running wordpress decided it was more important to give you things like an AJAX dashboard, which nobody NEEDS instead of compression, which everyone does, Go figure. Fortunately, there is a plugin that can help you out: WP HTTP Compression.

Image Compression

Working with any desktop image editing software often results in image files that have a lot of digital cruft. Reducing those files without sacrificing image quality is key. Again, there’s another plugin that can help called WP Smush it. It automagically compresses files as you upload them, making the process painless. You may want to go back and “smash” your logo, advertisements, or any other images that are part of your key templates for maximum savings.

HTACCESS File

borimirWARNING: working with and editing your Htaccess file is a very powerful tool. It will have huge ramifications on your website, and it IS NOT forgiving about syntax errors. If you have one missing character, your website goes boom. So make a backup before you start, make sure you have FTP access in case something goes wrong, make sure you have a phone a friend on standby for when you do make a mistake you can’t fix yourself.

Depending on how you set up your permalinks, wordpress will usually set up your htaccess for you, but this configuration is usually sub optimal. Use the code written by JDMORGAM from this WebmasterWorld post instead of the default code.

# BEGIN WordPress
#
RewriteEngine on
#
# Unless you have set a different RewriteBase preceding this point,
# you may delete or comment-out the following RewriteBase directive
# RewriteBase /
#
# if this request is for "/" or has already been rewritten to WP
RewriteCond $1 ^(index\.php)?$ [OR]
# or if request is for image, css, or js file
RewriteCond $1 \.(gif¦jpg¦ico¦css¦js)$ [NC,OR]
# or if URL resolves to existing file
RewriteCond %{REQUEST_FILENAME} -f [OR]
# or if URL resolves to existing directory
RewriteCond %{REQUEST_FILENAME} -d
# then skip the rewrite to WP
RewriteRule ^(.*)$ - [S=1]
# else rewrite the request to WP
RewriteRule . /index.php [L]
#
# END wordpress

These next two changes are kinda technical and beyond the scope of this post to review in much detail, but I tell you what they are doing. Next, we want to make sure all of the file types being served are compressed.

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png

Finally, we want to turn on caching and expiration headers for all file types.

# Turn on Expires and set default to 0
ExpiresActive On
ExpiresDefault A0
# Set up caching on dynamic media files
<filesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A29030400
Header append Cache-Control "public"
# Set up caching on static media files
<filesMatch "\.(gif|jpg|jpeg|png|swf|jss|css)$">
ExpiresDefault A604800
Header append Cache-Control "public"
# Set up caching on javascript and jquery files
<filesMatch "(jquery|js)">
ExpiresDefault A604800
Header append Cache-Control "public"
# Set up caching on commonly updated files
<filesMatch "\.(xml|txt|html)$">
ExpiresDefault A7200
Header append Cache-Control "proxy-revalidate"
# Force no caching for dynamic files
<filesMatch "\.(php|cgi|pl|htm)$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"

Conclusion

optimize

Optimization Results

What does all of this get you? The end the result should be a fairly dramatically optimized and performance tuned website with very few “warnings” from Google. Depending on what you’re doing, and what plugins or programming you are using to accomplish your goals, you may have to make some trade offs or live with some issues, but those should be decisions you consciously made,  not things you didn’t know were going on. When I started this process, my score was in the high 40’s; while my mobile score is only 70 now, it’s really just the CSS and JS that I couldn’t reduce any farther. I can live with that. Performance tuning and speeding up your website may not be a huge factor in ranking now, but if you wait until they are, you will be playing catch-up instead of being ahead of the game.

Creative Commons Licensephoto credit: Flickr/Tambako The Jaguar

GraywolfSEO.com runs on the Genesis Framework

Genesis Framework

Genesis lets you to quickly and easily build amazing websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.
It's that simple - start using Genesis now!


Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.


tla starter kit

Advertisers:

  1. Text Link Ads - New customers can get $100 in free text links.
  2. BOTW.org - Get a premier listing in the internet's oldest directory.
  3. Need an SEO Audit for your website, look at my SEO Consulting Services
  4. TigerTech - Great Web Hosting service at a great price.