Wordpress Customization | Blog Design Studio

Use Content Delivery Network to load blog faster!

5 Feb, 2010 | mayank

In last post, I told you about Content Delivery Networks and how to use them along with WordPress. Although, now I can suggest that one should certainly use Content Delivery Network as I’ve experienced the change in speed myself! Yesterday, I implemented CDN on this blog and the notice is considerable. The pages that used to take around 9 seconds to load are now loading in about 5 seconds. That’s a decent amount of difference! Now, I would tell you some of the questions that I had in my mind and I’m sure that you will be having them too -

Is it a costly affair?

Content delivery networks are considered to be costly, however surprisingly they are not. Most of the CDN providers run on Pay as you go pricing model and that lets you take control of things. In order to run the test, I signed up with MaxCDN, they have a fantastic offer – they are giving away 1 TB for $ 10. Of course, this is a trial run and a customer will be charged near about $100 for the next 1 Tb. Anyway, I’m not trying to promote any CDN provider, I went for MaxCDN for couple of reasons -

1. It was cheaper than other CDN providers.
2. It has been referred by Mashable, Joost de Valk, W3 Total Cache and I think that was more than enough for me.
3. 1 TB will run for months, there is no monthly payment, so I don’t have anything to lose.

Is it really hard to setup the CDN?

I wasn’t sure about this answer because there wasn’t anyone to tell me that how should I go about it. However, while playing with it – I realized that it is way to simple to setup the CDN. Of course, it would have been a nightmare without the W3 Total Cache. I just don’t have enough words for the praise of this plugin, still I would try to sum up in 2 words – Simply Marvelous!

So what’s the procedure?

I did the setup on MaxCDN and therefore, I would mention the steps for MaxCDN and W3 Total Cache settings only. If you plan to use any other CDN then you may have to refer to their support. I’m assuming that most of the CDN providers will have similar options only. Anyway, here’s how I completed the task -

1. Create a Pull Zone on CDN provider. In this (screenshot) most of the settings are generic, the only place where I got confused was Origin Server URL section. Anyway, I used the following settings and created the pull zone.

2. Asked WPWebhost to change the CName record as asked by MaxCDN. In many cases, Cname can be changed by you only, however WPWebhost doesn’t give the direct option to its users. However, support team was pretty quick in making the change. After the change, I waited for about 10-12 hrs for propagation. I tried to check http://cdn.blogdesignstudio.com and once I saw the whole website load without issues, I thought that it must be the right time to make changes in W3 Total Cache settings.

3. In the General Tab of W3 Total Cache, make sure that CDN should be enabled and the type should be selected as Origin Pull (mirror) [as shown in the screenshot]

4. In the CDN Settings tab of W3 Total Cache, you can configure various options related to what you want to use through CDN and what exactly you want to serve using your own web host. What I changed was just one value; ensure that you need to just put the value of Custom CDN Domain (of the first screenshot) in “Replace Default Hostname With”. Here’s the screenshot of what I have -

That’s it! I just saved the settings and everything was working neatly for me. If you get decent traffic and want to ensure that your blog loads faster than others, then you should surely use a CDN. In the end, I can say that I’m happy with what I’ve achieved – I’ll be posting more optimization techniques to ensure that we also contribute in making the web faster!

1 Comment / Add yours

What is Content Delivery Network & how to use it with WordPress?

1 Feb, 2010 | mayank

Topics: Wordpress Customization

What is Content Delivery Network?

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 bottleneck near that server. Content types include web objects, downloadable objects (media files, software, documents), applications, real time media streams, and other components of internet delivery (DNS, routes, and database queries). [via Wikipedia]

Well, I’m sure it sounds alien to some of you. However, I can try and simplify this for you. Let’s take an example – You upload a 2 Mb file on a server that is located in United States, one of your visitor comes to the website from UK and at the same time another from US only. Who’ll get the faster download speed of that file? Of course, it’ll be the US guy. That is how a normal scenario runs. In CDN, a normal file is replicated on multiple servers (shown as middle servers in the image below) placed across the world. So, if a UK guy will be trying to access the same MP3 file, then he’ll get it delivery through UK server only and that will considerably reduce the page load speed.

[Image credit - netdna]

Should we use CDN for a blog?

As we found out that CDN helps in reducing the speed. However, the question is that is the speed difference considerable enough? There have been many bloggers who have done their tests and found huge difference in the speed. Joost de Valk found out that his blog pages started loading in 2 sec. as compared to 7 seconds prior CDN’s application.

Well, that certainly sounds effective! Other than that, Dave Ward gives us a tip where we should use Google’s CDN based hosted javascript libraries to improve the blog page load speed. Other than that, Yahoo also suggests website owners to use CDN to improve the page load speed. Well, this only means that it makes sense to use CDN. Now, the big question arises -

How to use CDN with WordPress?

Of course, if you just want use the Google’s CDN based Javascript library then Dave Ward’s link will be more than enough for your help. However, if you want to make proper use of CDN, you’ll have to shell out some money from your pocket. Thankfully established companies like Amazon, MaxCDN, RackSpace and various others offer CDN services, you can always choose the one that suits your pocket.

Once you’ve decided the CDN provider, then you can use its power with the help of W3 Total Cache -

W3 Total Cache improves the user experience of your blog by improving your server performance, caching every aspect of your site, reducing the download time of your theme and providing transparent content delivery network (CDN) integration.

[Click the image for bigger version]

So, as you can see with the help of W3 Total Cache you can easily make use of power of CDN’s and it should certainly help in improving the page load speed. Are you going to apply CDN on your WordPress blog?

No Comments / Add yours

WordPress Security Service for free!

18 Jan, 2010 | mayank

Topics: Wordpress Customization

(Image Credit – ClickonF5)

Since few months, I’ve been hearing lot of horror stories regarding the security compromises that bloggers have to deal with. It’s open source nature, what has been the boon for WordPress, is now standing against it (For Hardcore Open-source lovers – I am in favor of Open-source all the way and that statement of mine should not be taken as personal attack). There have been many blogs that weren’t using the latest version of WordPress are now infected with some sort of worm or some hacker gets access to the web server and misuses your precious resources. There are cases where they even harm the website by effecting its search engine rankings.

read full article →

1 Comment / Add yours

Widgetizing Your Non-Widget WordPress Theme

8 Jan, 2010 | Igor

Topics: Wordpress Customization

(Image credit - Clockless)

Many of the WordPress themes promoted are described as being widget-ready. Widget-ready WordPress theme is a theme that has widgetized areas which allows you to dynamically manipulate these areas in a simple drag-and-drop fashion. Widgetized sidebar is another way to describe the same thing because most of the widgets are used in the sidebars of the themes. However, sometimes you find a WordPress theme that you really like, but discover that it’s not widgets ready. Don’t give up just yet, making themes widget-ready really isn’t as difficult as you might think. Follow the steps in this article and we will teach you how to Widgetize a WordPress theme making it a drag-drop widget theme.

read full article →

No Comments / Add yours

How to Create Tabs in your WordPress theme using DOMtab

15 Dec, 2009 | Igor

Topics: Wordpress Customization, web design

Dom Tabs Save Space
If you run a blog for a longer time, you will notice that there is always more and more contents to display but less and less space for it. A solution for that can be the tabs feature. The Tabs are used in sidebars but also in the header for providing easy navigation and make information more available in a compact space. By using tabs you can have wide variety of content on your blog and all you need is to click on any tab and only the content for that tab gets displayed and the rest of the tabs’ content remains hidden.

read full article →

No Comments / Add yours

Managing your images in WordPress

13 Nov, 2009 | Igor

Topics: Wordpress Customization

“A picture is worth a thousand words”.

This phrase emerged in the USA in the early part of the 20th century. Its introduction is widely attributed to Frederick R. Barnard, who published a piece commending the effectiveness of graphics in advertising with the title “One look is worth a thousand words”, in Printer’s Ink, December 1921.
It points out the power of a single image that can present complex stories that need many words to be described, or that a single image may be more influential than a great amount of text. Today in our dynamic world this is more important than ever before. Today we must absorb large amounts of data quickly.

In WordPress it’s quite easy for you to add images to your WordPress site. Upload them directly from within WordPress by using the built-in file uploading utility in the post screen or use any FTP Client software to upload as much as you want images to your WordPress site. In WordPress you can resize images and create thumbnails too. Actually there are three size settings available for you: thumbnail, medium and large. In the same moment when you upload an image, Wordpress will automatically generate these three image sizes not affecting the aspect ratio. The thumbnail is a resize with a crop, and the other settings are “max” width and height. So don’t worry.

Styling your images on your Wordpress blog/site

Most likely your theme is already styling your images i.e. it is set to put a border around images in your posts, and float them to the left or to the right, and most of the time this is working good for you, but sometimes, you would like to style them in a different manner. In those cases you can easily change this “default” styles by few simple edits in the HTML code.

At Blog Design Studio in most of our themes we use these styles for the images:

.alignleft {
float: left;
}
.alignright {
float: right;
}
img {
border: none;
}
img.alignleft {
float: left;
margin: 5px 10px 5px 0;
}
img.alignright {
float: right;
margin: 5px 0 5px 10px;
}

And here is what you get:

men at work

But let’s say you want to add a thick black border around the picture. Before the /> that closes the tag just insert: style=”border: 3px solid #000000″

You can add space between the border and the picture too:

You can float it to the left:

Or to the right:

And of course you can add margins according to your preferences:

Optimizing your images for WP

You should not overlook image optimization. This is also an important part of WordPress SEO. By writing good alt tags for images and clever thinking of how you name the files, you can get extra traffic on your blog from the different image search engines. You can help your lesser able readers who check out your site in a screen reader, to make sense of what’s otherwise hidden to them too.

Heavy images can cost you traffic. Your visitors won’t wait 10 seconds for your image to load! So you should optimize your images for the web. Your images should be in either .gif or .jpg formats (.gif is best for logos and navigation buttons, while .jpg is best for photographs.) Reduce the size of your graphics so that they take as few bytes as possible while retaining acceptable quality.

In following posts, we’ll come up with some of the tools and plug-ins that will help you in making your life easier when it comes to dealing with images!

3 Comments / Add yours

Boost Your Blog’s Speed!

2 Nov, 2009 | Igor

Topics: Wordpress Customization

So you want to create a high-traffic site? It’s so cool to have all those plugins too. But will WordPress be sufficient for your high-traffic site? Will it survive tons of heavy traffic every day? Well the answer can be yes as long as you take care of few things. Here are some tips on how to speed up your WordPress site. Before you go ahead with this blog post, you should go ahead and read the following post as well – Unclutter your blog.

read full article →

6 Comments / Add yours

Page 1 of 61 2 3 4 →

...

Last

Is it a costly affair?

Is it really hard to setup the CDN?

So what’s the procedure?

What is Content Delivery Network?

Should we use CDN for a blog?

How to use CDN with WordPress?

Styling your images on your Wordpress blog/site

Optimizing your images for WP

Topics

Tags