How to use Google App Engine to act as a CDN to improve your blog page speed.
By Ivan Kristianto
Page speed is one aspect of SEO. Google and other search engines and – above all – your blog visitors love fast page loading. As the blog owner, you value your readers’ time, so don’t let them wait more than 10 seconds for any page they want to read in your blog. You may be aware that there are a lot of ways to improve your blog page speed, from using cache plugins (like W3 Total Cache) and optimizing themes, to using a good hosting server (like HostGator) and finally – using a CDN. Yes, WordPress beginners often miss out on the latter. Using a CDN will greatly improve your page speed performance, but generally such services are NOT free.
So what is CDN anyway? Wikipedia defines CDN as:
“A content delivery network or content distribution network (CDN) is a system of computers containing copies of data, placed at various points in a network so as to maximize bandwidth for access to the data from clients throughout the network. A client accesses a copy of the data near to the client, as opposed to all clients accessing the same central server, so as to avoid bottlenecks near that server.” (Source: Wikipedia)
Follow the step-by-step instructions below to start using Google App Engine to host your static files:
1. Create a Google Account. If you have a Gmail account that will do. I won’t explain it in details here, visit here to create one (Skip to Step 2 if you already have a Google Account).
2. Sign up for a Google App Engine Application. Your cell phone might need to be verified again.
3. Create a Google App Engine Application (in this example I called it myfreecdn).
5. Open Google App Engine Launcher and open Preferences from menu Edit » Preferences, then update the Python path to where you install the Python execute file.
6. Create a new Application by going to File » Create New Application, fill in Application Name (this should be the same as Application identifier so in my case: myfreecdn), then choose where your file will be saved.
8. Now edit the app.yaml file in the application folder and add the following:
- url: /images
- url: /styles
10. To deploy your Application, just press the button “Deploy” on the toolbar. You would need to enter your Google account account and password. Allow the process to be completed.
12. Now go to your WordPress theme, edit all your style URLs to use your Google App Engine URL. And don’t forget to update your style.css relative image URLs to use the Google App Engine URL as well.
13. Upload the updated theme files back into your WordPress blog and test it. (You can use FireBug from Firefox extensions for this purpose.) Now you should be able to feel the difference.
All in all, this is just one way to increase your blog performance. But using this method will have a great impact. I myself use this technique to increase my blog performance. I would like to share with you the benefits of my experience. I hope you find this advice useful.
While Ivan shares a great technique here to utilize Google App Engine as a CDN for static files, this is just a shortcut way for making some difference. If you are using it for a very small site, then this might be a good idea. Otherwise there are disadvantages to using this method:
1. You are still serving all blog post images, thumbnails, or any other post attachments without a CDN. So you are not maximizing performance.
2. This method is extremely time consuming if you decide to make changes to your theme because everything is hard coded.
3. There is a limit for free usage 1GB / Day, so if you exceed that you will still have to pay for this service (which is expensive compared to competitor prices). Even if you pay, you would not be able to utilize CDN for the entire site (See point 1) unless ofcourse you want to upload everything on Google App Engine account manually and then manually edit all of your previous post images and thumbnail URLs.
We recommend that you get it right from the start by using MaxCDN. We are using their services to speed up our site. You can pay $39.95 to get 1TB of Bandwidth which is good for one year of use (use the coupon “wpbeginner” to get additional 25% off). This is 635GB additional bandwidth then what Google gives you for the year, and if you pay google $0.12 for each additional bandwidth like their pricing says, then you will end up paying $76.2 for the year (almost twice the price that you would pay for MaxCDN for a year).
Second the best part is that MaxCDN uses Pull Zones which also works with WordPress when using the plugin W3 Total Cache. What this means is that all files will be served through their CDN without you altering a single line of code. Just have the right settings in W3 Total Cache.
By Editorial Staff
in WordPress Plugins
In our last few articles we have been focusing a lot on dealing with Short URLs and WordPress. While creating our new WordPress Gallery (Submit your WordPress Site), we had to deal with few issues that we did not cover on WPBeginner. Some of those issues were “How to Display Shortlinks in WordPress Theme“, or “How to Automatically Add Custom Fields on Every Post Publish“. Well in this article, we will actually show you how to automatically generate a Bit.ly or Bit.ly PRO URL (Remember the Branded Short URLs?) for each of your posts without editing a single line of code.
After going through numerous solutions, our developers came to the conclusion to use the plugin WP Bit.ly rather than reinventing the wheel. WP Bit.ly plugin allows you to generate short links using the Bit.ly API for all of your blogs posts and pages. In addition to that, this plugin generates a new meta box on your posts that show you statistics about your link (such as who’s clicking on your links). The best part about this plugin is that it hooks into the WordPress Shortlink filter, so it can be used by you, your visitors and a variety of other services that employ them.
Then the plugin will need to be configured with your Bit.ly account. If you don’t have one, then you would need to signup to have a personalized API. To retrieve your Bit.ly API, go under the Settings Tab in your bit.ly account (Hint: it is located in the top right where your username is).
Now let’s configure the plugin. Go to Settings » WP Bit.ly in your WordPress Admin Panel.
Enter your Bit.ly Username, and the API Key. Then select your Post Types that you want to generate the link for. Click save changes and you are done.
To check if it is working, simply open your Bit.ly account, and you will see tons of new links generated. Or you can simply go to any of your post and click on the Short Link button, and you should see a box with your Bit.ly link or Bit.ly Pro link like in the image below:
This plugin is extremely easy to use, it does the job very well, and it has amazing future development plans: “Future development will include the ability to use your own domain as the short link (http://yourdomain.com/bXhGjs).”
Great tip for Windows 7 users.
This is one of those life-changing, super-awesome tips that I wish I had known about years ago. Note that this only works on Windows, and I’ve only tested it on Windows 7.
Here’s the scenario: you’ve got a client who has a website up and running on their domain name, http://www.mysite.com. You are creating a new WordPress site for them, but their old site needs to stay up until the very last minute. It would be great to be able to get their whole WordPress site installed and ready to go on a live server (i.e. not your localhost on your computer), and switch the domain’s DNS and voila – the new site replaces the old site almost immediately.
But you can’t really install and work with WordPress on a server that doesn’t have a domain name pointed at it. So here’s how you can fake this by making your computer think that the new site installation should be displayed as http://www.mysite.com:
- Install WordPress on the new server via Fantastico, Quick Install, or something like that.
- Find the following file in Windows: ?C:WindowsSystem32driversetchosts. Open hosts in Notepad or another text editor.
- Save the file. Now visit mysite.com in your browser, and you’ll see your new WordPress installation.
Hat tip to Mark Kaplun for this amazing trick.