Mullenweg: Scale WordPress to 20,000,000 Views per Day for $100 p/month
An interesting article appeared on the front page of the drupal.org website, detailing the migration of the popular “crooks and liars” blog from WordPress to Drupal. According to the developers, when the site was averaging around the “200,000 hits per day mark, we started experiencing a lot of down time from server overloads. We were utilizing the famous wp-cache plugin for Wordpress, as well as hosting the database on a single master and two slaves, using the HyperDB class for Wordpress to handle the replication.” After experiencing a high degree of server downtime from the massive number of comments on the site, “crooks and liars” began to consider porting the site to Drupal for performance issues.
According to the site development team, benchmark tests showed that a Drupal 5.x installation was able to serve more than 8 times the number of pages per second vs. a standard WordPress 2.3 set up:
“I setup default installations of Wordpress 2.3 and Drupal 5. I only enabled the core caching mechanisms in both setups and populated them with the exact same data and display options. Both systems also used the default themes and features. After running a series of tests through JMeter, I quickly confirmed my beliefs and even exceeded them as I saw Drupal was able to handle about eight times the requests per second as Wordpress, both on the front page and the same single post view with 157 comments.”
An interesting overview of the migration, and custom modules used in the development of the “crooks and liars” site can be found online here:
What is more interesting, is after the post was published, WordPress / Automattic founder Matt Mullenweg weighed in personally on the issue, by commenting on the post and listing ways to configure WordPress to scale to 20 million hits per day – at a cost of only $100 per month. He writes:
“Always sorry to see someone leave WordPress, but you ended up pretty much the other best place I could think of. Features are a great reason to switch, but scaling doesn’t need to be. We host some of the largest poltical blogs like all of CNN’s which regularly get thousands of comments per day and we do about a billion pageviews a month on WordPress.com, so here are some tips for future people who may come across this post (some which may be useful to the Drupal community as well):
1. Every release of WP gets faster, so upgrading can get you sometimes significant boosts depending on your bottleneck.
2. Use the memcached object cache backend.
3. If memcached is set up, use Batcache instead of wp-cache.
4. If you get a lot of comments, consider using InnoDB as your storage engine instead of MyISAM inside of MySQL.
5. Double-check that your webserver is set up properly for static requests, this is the cause of 90%+ of the problems we see.
With the above and a single $100/month server from LT you can get around 20,000,000 pageviews a day. With shared Batcache and HyperDB (which you already used, nice) it’s a lot easier to scale out both the web and database tier independently as needed. We haven’t found the upper limit of this strategy yet.”
Included are links to Quantcast’s statistics proving 1 billion page hits per month on wordpress.com (globally): http://www.quantcast.com/p-18-mFEk4J448M/traffic
Link to the Memcache Plugin: http://plugins.trac.wordpress.org/browser/memcached/trunk
Link to the Batcache Plugin: http://wordpress.org/extend/plugins/batcache/
According to the site:
“Development testing showed a 40x reduction in page generation times: pages generated in 200ms were served from the cache in 5ms. Traffic simulations with Siege demonstrate that WordPress can handle up to twenty times more traffic with Batcache installed.”
Based on Quantcast statistics, Drupal.org ranks 13,298 overall while WordPress.org ranks #11. Global tracking statistics are not available for drupal.org on the site.
Styling the Drupal User Login Block - PHP Code & CSS
This tutorial goes through the steps of one way to create a custom user login block for Drupal. Best is to disable the original login block in the admin/build/block section, start with a new block with custom code, and then style the details with CSS. The requirements for this project are a rounded corner, blue background block with two custom tabs at the top.
1. in admin/build/blocks – click on the “add new block” tab
2. enter the following code:
<?php global $user; ?>
<?php if ($user->uid) : ?>
<span class="login_text">Welcome, </span> <?php print ($user->name); ?> <br>
<?php print l("Your Account",'user/'.$user->uid); ?> |
<?php print l("Log-Out","logout"); ?>
<?php else : ?>
<div id="usertabs">
<span class="utabs1">Log In</span><span class="utabs2"><a href="/user/register">Sign Up!</a></span>
</div>
<div id="umain">
<form action="/user?<?php print drupal_get_destination() ?>" method="post" id="user-login-form">
Username:
<input type="text" maxlength="60" name="name" id="edit-name" size="20" value="" tabindex="1" class="form-text required" />
<br>
Password:
<input type="password" name="pass" id="edit-pass" size="20" tabindex="2" class="form-text required" />
<br>
<span class="utabs3"><a href="/user/password" title="Forgot your password?">Forgot your password?</a></span>
<span><input type="submit" name="op" id="edit-submit" value="Log In" tabindex="3" class="form-submit" />
</span>
<input type="hidden" name="form_id" id="edit-user-login" value="user_login" />
</form>
</div>
<?php endif; ?>
This code originally came from: http://nossdutytask.com/node/240
There are also some nice examples at: http://nossdutytask.com/node/228
I modified the code to add some css IDs, classes, span tags, and also the text/links for the top tabs.
3. Select PHP code for the input and save the block.
4. From the main blocks page, click on “configure” for the block you just created. I selected to show this block only for “anonymous user” because I did not need the simplified display after the user has been logged in. The code generates a block that can also be customized to show the site status for authenticated users, but usually the navigation menu does this sufficiently. Enable the block and position it where you like in the display.
5. The rest is basically CSS – setting the image as the background for the login area and the tabs, positioning the text elements and fields. This example is based on a 250px wide column with a two column layout. It includes bold text on the display and overrides the default styling of the Drupal user login form elements.
There is a vertical-alignment fix to standardize the display in IE, and a 1px addition to the lower input field so that the form will align evenly on both ends. Add the following CSS to your theme in style.css, blocks.css, or wherever fits best.
#block-block-4 {
color: #fff;
}
#block-block-4 a {
color: #fff;
}
#umain {
font-weight: bold;
height: 127px;
width: 250px;
background: transparent url("../img/login_bg.jpg") no-repeat top left;
padding-top: 20px;
vertical-align: middle;
}
#usertabs {
height: 23px;
width: 250px;
background: transparent url("../img/tabs1.jpg") no-repeat top left;
}
#usertabs a {
color: #333;
}
.utabs1 {
font-weight: bold;
float: left;
padding-top: 4px;
padding-left: 25px;
}
.utabs2 {
font-weight: bold;
float: right;
color: #333;
padding-top: 4px;
padding-right: 60px;
}
.utabs3 {
font-weight: bold;
float: left;
padding-left: 25px;
padding-top: 4px;
}
#umain #edit-name {
margin-bottom: 5px;
width: 147px;
}
#umain #edit-pass {
margin-bottom: 10px;
width: 148px;
}
Note: the “block-block-4” value will be contingent on the name of the block that was created to input the custom PHP code of the login form.
IMAGES:
Upload to your theme’s “image” folder (in this case named ‘img’):
Tabs Background image: tabs1.jpg:
tabs1.jpg
Login Background image: login_bg.jpg
login_bg.jpg
7. To add a custom button, also upload and add this CSS:
#umain #edit-submit {
float: right;
margin-right: 20px;
background-color: transparent;
color: #333;
border: none;
font: 9pt/1.5em Arial, Tahoma, Verdana, "Lucida Grande", sans-serif;
font-weight: bold;
background-image: url("../img/button1.jpg");
background-repeat: no-repeat;
height: 24px;
width: 58px;
cursor: pointer;
}
BUTTON IMAGE:
button1.jpg
button1.jpg
FINAL RESULT:
screenshot-login.jpg
Hopefully, this will save some people a lot of time and is also a good base for doing further customization with the background images and CSS.
FURTHER REFERENCES:
http://drupal.org/node/134319
http://drupal.org/node/19855
http://drupal.org/node/92657
http://drupal.org/node/84724
Xavisys Acquires Attackr.com – Web Development News Network
Xavisys, a professional WordPress development company specializing in website design, custom module programming, WordPress themes, and ecommerce solutions, has acquired the blog site Attackr.com to add to their media and publishing division. Xavisys was founded by Aaron Campbell six years ago in Phoenix, Arizona, and is also the design group behind WebDevNews.net. Attackr.com is a collective of tech bloggers working primarily in WordPress development offering news, “how to” guides, and plenty of tips and tricks. Web developers are encouraged to share their thoughts, experience, and design tips on both Attackr.com and WebDevNews.net, and to participate in the Open Design Community.
Xavisys
Xavisys was started in 2002 as a web development firm specializing in custom PHP solutions for web applications, and subsequently began focusing in web design and web development for Open Source Content Management Systems. According to company founder Aaron Campbell, “the experience doing things from scratch helps a lot when it comes to creating custom solutions for an Open Source project.” Aaron is a PayPal Certified Developer, and many of their clients seek advanced ecommerce solutions with integration of the PayPal API. Xavisys creates modules and plug-ins for WordPress, as well as WordPress themes, and is also developing for the Magento, Joomla, and Drupal platforms. After launching WebDevNews.net this year as a place for blogging on web development news and information, the company has recently acquired Attackr.com. It is hoped that the partnership and shared communication between the sites in the Xavisys network will lead to enhanced personal and creative partnerships among Open Source developers, as well as increased business to business networking.
Xavisys - WordPress Plugins:
WordPress Google Analytics Plugin
Provides an easy way to integrate Google Analytics into your WordPress Blog
Download: http://xavisys.com/2007/02/wordpress-google-analytics-plugin/
WordPress Twitter Widget Pro Plugin
Add Twitter feeds to your WordPress blog, including friends, profile images, & link parsing
Download: http://xavisys.com/2008/04/wordpress-twitter-widget/
Google Maps for Wordpress
Easily integrate Google Maps displays into your Wordpress blog and customize the settings
Download: http://xavisys.com/2008/04/google-maps-for-wordpress/
WordPress Gallery Widget Pro Plugin
Displays rotating images from a post’s gallery in the sidebar of your site
Download: http://xavisys.com/2008/05/gallery-widget-pro/
WordPress Reorder Gallery Plugin
Modifies the Wordpress “gallery shortcode” to allow you to manually reorder the images in embedded gallery slideshows. This was included into WordPress 2.6 core and is only needed for WordPress 2.5.x
Download: http://xavisys.com/2008/05/wordpress-reorder-gallery-plugin/
WordPress Mark Parent Pages Plugin
Adds collapsible menus to WordPress by inserting custom CSS tags in list displays. This was included in WordPress 2.5 core, and is only needed for older version of WordPress
Download: http://xavisys.com/2008/01/wordpress-mark-parent-pages-plugin/
Validate Empty Wordpress Posts/Pages
Fixes tag wrapping in empty pages, preventing them from being invalidated
Download: http://xavisys.com/2008/01/validate-empty-wordpress-postspages/
Xavisys – Image Free Templates:
Minimalist:
An extremely light weight, configurable template, with no images at all
Download: http://xavisys.com/2008/01/free-template-minimalist/
BlueBox:
A simple, fluid width, imageless, XHTML Strict 1.0 template
Download: http://xavisys.com/2008/01/free-template-bluebox/
Attackr
Attackr.com evolved from a partnership of WordPress developers active in the Open Design Community, and is a place for web designers to share news, information, “how to” guides, technology reviews, and personal thoughts on the development scene. The site has a core group of bloggers that post on these topics, and is open for new members who would like to share ideas on the platform. The Attackr theme is one of the best I’ve seen for WordPress, which is not surprising as that is the specialization of the design team behind the site.