More speed that is!
As I have told you earlier this week, I have been working on my Need for Speed project, trying to speed up my websites. I feel that speeding up my sites will have a positive impact on my Google AdSense earnings, at least I am giving that a try.
Previously this week, I have told you about:
- Google’s Scorecard and how it pointed me to areas where I need to work
- My thoughts on things I might try to increase my website speed
- Caching for my WordPress sites
Today, I want to talk about my research and implementation of ideas beyond caching
After implementing Caching on my sites, using WP Super Cache, I brought my site speed up to where it was faster than 50 to 60% of other sites tested. This was a pretty good improvement since previous to my work, about 70% of sites were faster than mine, according to site testing using the Pingdom site speed tool. That is a big improvement, but I wanted better than that. My goal was to be at least at the 75th percentile for site speed. I still had a ways to go.
Leverage Browser Caching
I started doing research on how to get more speed, based on where I was getting low scores on the Pingdom tests. Most of my scores were pretty good, many in the 80% and above region. But, I had a few low scores, even under 40% optimized. These were the areas where I needed to concentrate. One of the areas was to leverage Browser Caching. I covered this in the last article, but basically, you can read this page and follow their guidelines to easily leverage browser caching.
Combine External CSS
The next area where my scores were low and I needed to focus on was to “combine external CSS”. CSS is a “Cascading Style Sheet” it basically works in conjunction with your HTML to style your site and make it look the way that it does. Problem is, these days you sometimes have many different style sheets that work to customize different parts of your site! I learned that one of my sites has 9 different style sheets! But, it is possible to combine all of these style sheets into one! Or, combine them into a small number of style sheets. Again the Feed the Bot site has great tips on how to accomplish this.
Additionally, if you prefer to do this a bit more “automatically” instead of tinkering with the code yourself, there are a number of WordPress plugins that will do this for you. I have only tested these plugins minimally, so I don’t have any certain one to recommend, at least at this time. However, you accomplish it, combining CSS files will speed up your site quite a bit.
CDN
CDN is a “Content Delivery Network”. Basically, it means that some of your content is hosted on a different server, or on multiple servers around the world, and then your site is served from multiple different servers. This has multiple benefits. Firstly, the person requesting a webpage can be downloaded from multiple different servers at one time. Another benefit is that it takes a load off of your server, and also the content can be served to the reader from a server that is near to his area. So, for example, if your main server is in the USA, but the reader coming to your site is in Tokyo, he can get the content served to him from a server in Japan, or at least somewhere in Asai, and it is all automatic.
I tried to implement a CDN using Amazon S3 hosting. Frankly, it never really worked properly. I had it working for a while, but then it stopped working. I got frustrated with it and gave up. But, after a few days, I found another way to get the advantage of having a CDN, but not having to do much work! I will be telling you more about that tomorrow because, to be honest, this change that I made had THE most significant effect on my site speed and brought me to speed levels that I never imagined were even possible. So, be sure to come back tomorrow and see what I am talking about!
Jetpack and Photon
Jetpack? Photon? This sounds like SciFi, but it’s not! Truth is, Jetpack is a WordPress plugin from WordPress.com. The plugin has a ton of good things in it, but I am only going to talk about one of the features today. That feature is called Photon. If you want to speed things up on your site, go download and install Jetpack on your WordPress site (I am talking your self hosted WordPress.org site, the plugin is for a self-hosted site, but is published by WordPress.com). Once you install Jetpack, you need to “connect” to WordPress.com by clicking on the button that will be staring you in the face. Once connected, turn on the “Photon” feature.
Photon basically allows WordPress.com to take over the hosting of your images, and all images will then be served by WordPress.com instead of from your server. Let’s face it, a big company like Automattic (the owner of WordPress.com) has a lot better server than you or I have, no doubt. Also, if you think about it, having your images served by WordPress is like a mini CDN, but only for your images. It is also free, which is a good price!
You know what the best part is? The ease of setting it up. What do you have to do? Turn on Photon. That’s all. Once you turn it on, everything else is automatic, and frankly, it takes only seconds until it is fully implemented. It is amazing. This step alone will help increase your site speed, and get you better scores for site health from Google!
How is my speed?
Well, after implementing these fixes, I have gotten my speed up to be faster than 75% of websites! That was my goal, so I should now be happy, right? Well, you guessed it. Having achieved my goal of 75%, I now wanted more. And, guess what… I found more. A lot more. I will be telling you about that tomorrow!
Dave Tamares-Little
Its worth noting that certain fonts and different colour backgrounds as well as different photo formats can alter your website loading speed. Though I expect you have already investigated all this.
Robert Martin
Yes, Dave, it is correct. You have to take into consideration every different element on your pages and how long each element takes to load. It should also be considered that if you want to load certain things, try using alternate domains, other servers to load from, etc. For example you mentioned fonts. You can load fonts from Google’s servers, which is a good strategy.