357 all the latest security patches, bug fixes, and script improvements. Likewise, keeping your plugins up-to-date ensures compatibility with the latest versions of WordPress and helps keep everything running smooth in general. While we’re on the subject, serious WordPress developers and users may benefit from reading the WordPress Development blog, which is displayed by default in your WordPress dashboard. This is a great place to learn about all the latest WordPress development news. And, if you happen to discover a bug while working with WordPress, you may report it at the designated page via the WordPress Codex http://digwp.com/u/328. If you think that you have discovered a security vulnerability, email the security team at “security@wordpress.org” with the information and wait for a response before sharing it anywhere else. 9.4.2 Updating WordPress Those of us who have used WordPress for any length of time understand well how frequently new versions of WordPress are released. When everything goes according to plan, WordPress is updated four times every year. That’s a lot of upgrading for everyone involved: users, designers, and developers. Fortunately, the busy WordPress devs have integrated an easy way to stay current: automatic updates from the comfort of the WordPress Admin! Before WordPress 2.7, upgrading to the latest version of WordPress required manually uploading files to your server. In 2.7 or better, you simply need to navigate to the “Tools > Upgrade” page of the Admin area and click on the “Upgrade” button. If your server is properly configured and everything goes as planned, the WordPress core will be updated with a single click! Likewise for plugins – single-click installs and updates for any plugin listed in the 358 WordPress Codex. To install a plugin, go to “Plugins > Add New” in the Admin area and knock yourself out. There you will be able to search the WordPress Plugin repository and install any plugin by clicking on the “Install” button in the right-hand column. Similarly, to update any of your installed plugins, click on the “update” link when it becomes available. Automated convenience at its best. As useful as this is, however, keep in mind that there are several situations where manual upgrades – for core files and/or plugins – are a better way to go about it. Here are some scenarios where manual updating might prove more beneficial: • If you are running an older (pre-2.7) version of WordPress • If you have a highly customized site with lots of core hacks, mods, etc. • Your server settings forbid this type of behavior In these and other situations where automatic upgrading is neither possible nor advisable, you should take the time to upgrade manually. It isn’t always fun, but staying current is one of the best ways to ensure that your site is kept secure. 9.4.3 Logging Changes How do you know if your site has been hacked? If some unscrupulous attacker breaks into your site and injects a few thousand invisible spam links, how would you know? Waiting until your site is penalized by Google is a bad strategy. Instead, check out these plugins that will keep an eye on your site and notify you if anything changes: • WordPress File Monitor - http://digwp.com/u/330 Monitors your WordPress installation for added/deleted/changed files. When a change is detected an email alert can be sent to a specified address. • MonitorHackdFiles - http://digwp.com/u/331 Watches your site, and when it detects a file has changed (or been added), it notifies you via email and tells you which file was changed. Know thy files If you are automatically updating your plugins and/ or core les through the Admin (or any other method), it is wise to remember that the les on the server will be newer than the ones on your local machine. This may sound totally obvious, but much confusion and many errors may be avoided by not overwriting updated les with older ones. A good way to prevent this is to either use some sort of a version control system (such as Subversion), or else play it safe and go with the manual- update method. 359 • ChangeDetection.com - http://digwp.com/u/332 Free online service that monitors your site and sends you an email/SMS if anything changes. Simple, easy, and effective. 9.4.4 Backing Up Your Database and Files As with all work that is done on a computer, it is essential to ensure that regular backups are made of your work. For dynamically powered websites such as those powered by WordPress, this practice involves backing up your database, core files, and added content. The easiest way to keep regular backups of your database is to use the WP-DBManager plugin http://digwp.com/u/334. This is a powerful backup plugin that provides a ton of features, including everything from scheduled database optimizations to completely customized database backups. Backup databases are then stored either on your server or delivered to you via email. This plugin does require a specific server configuration in order to work, so if things don’t go well, you will need to either use an alternate plugin or backup your database manually. Fortunately, using a MySQL interface such as phpMyAdmin makes the process of creating manual backups very easy. Simply log in, choose your database from the left sidebar, and click the “Export” tab. From the “Export” page, check the following settings, which may be different depending on your specific situation: Another good practice is to backup your physical files. These include the entire WordPress core along with any additional files or content that you may have added. It is a good idea to back up these files periodically, as well as specifically before any upgrades, updates, or other modifications. To backup your content files automatically, check out the Content WP Backup plugin: http://digwp.com/u/335. Wait, there is Another… Although WP DBManager would be our rst choice, there is another database plugin called WordPress Database Backup that focuses entirely on one task: backing up your database. Check it out at: http://digwp.com/u/333 360 9.5.1 Optimizing WordPress There are many ways to optimize the already-great, out-of-the-box performance of WordPress. Let’s take a look at a few of the most effective ways to improve the speed and consistency of your site. 9.5.2 Content and File Caching Each time a visitor requests a page from your site, the server kicks into gear, processing scripts and querying the database to generate the page. For sites with small amounts of traffic, the load on your server is probably not a big deal and your pages should load just fine. For highly trafficked sites, however, the strain on the server to crank out thousands or millions of pages can really slow things down. A great way to circumvent this problem is to install a caching plugin for your WordPress-powered site. A good caching plugin reduces server load by generating a static copy of each requested page and then delivering that for all subsequent requests. Serving static pages requires fewer resources from your server and can speed things up considerably. Here are a few of the most popular caching plugins: • WP Cache - http://digwp.com/u/336 Stores and delivers static versions of your pages. Saves work for the database, but still uses the PHP engine to operate. Choose the Right Host Perhaps the best way to ensure that your site is running as fast, smooth, and consistent as possible is to find the best host. More than anything, with web hosting, you get what you pay for. If you are serious about running a solid site that is fast and reliable, stay away from cheap, sold-out web hosts and find something with excellent servers and strong service. We can’t stress this enough: a good host is worth the extra money. Of course, just because a host costs more doesn’t necessarily mean that it’s actually better. Our advice? Do your research, check the message boards, and email your favorite sites for tips and clues on finding the right host. 361 • WP Super Cache - http://digwp.com/u/337 Creates static HTML versions of your pages, eliminating the need to invoke PHP and the database. • DB Cache - http://digwp.com/u/338 Faster performance by caching database queries instead of HTML output. • Batcache - http://digwp.com/u/339 Uses memcached to store and serve rendered pages. Not as fast as WP-Super- Cache but it can be used where file-based caching is not practical or not desired. • Hyper Cache - http://digwp.com/u/340 Stores HTML page output as file content. Uses the PHP engine. • AskApache Crazy Cache - http://digwp.com/u/341 Works in tandem with WP-Cache, WP Super Cache, or Hyper Cache to cache your entire blog. • WP Cache Inspect - http://digwp.com/u/342 Displays information about cached content and provides useful options for management. It is important to read the documentation carefully before installing any of these caching plugins. In general, caching is a process that fundamentally affects the way your site performs, so it is important to understand the pros and cons of each plugin as well as the requirements for installation. You definitely should not try to combine caching plugins unless you really know what you’re doing. And even then, we don’t recommend it. One thing to keep in mind is that there are some common downsides to using WP Cache, WP Super Cache, and some of the others, namely the inability to track certain page statistics, outdated content displayed in sidebars, and other issues involved with trading dynamic functionality with static page delivery. 362 9.5.3 File Compression Methods Another excellent way to improve performance while also saving bandwidth is to compress your web pages and other site content. Compression does exactly what you would expect: files and content are compressed by the server in order to reduce their overall size. Once the content is received by the browser, it is immediately uncompressed and displayed properly. This results in faster loading times and reduced bandwidth usage. While a complete excursion into the realms of file compression is well beyond the scope of this book, here are a few ideas to get you started in the right direction: • File compression via Apache’s gzip module - for servers running older versions of Apache, an easy and effective way to compress your content is to enable mod_gzip via your server configuration or root .htaccess file. • File compression via Apache’s deate module - for servers running newer versions of Apache, an easy and effective way to compress your content is to enable mod_deflate via your server configuration or root .htaccess file. • File compression via PHP - It is also possible to compress your files using PHP’s output buffer. This method usually involves adding a small snippet of code to the beginning of your theme’s header.php file. • Manual le compression - For JavaScript, CSS, and other static files, it is also possible to implement compression manually. This typically requires gzipping the files in question and then delivering them via targeting script to supportive browsers. • Minifying CSS and JavaScript les - Apart from compressing the actual file, it is also possible to compress the contents of your CSS and JavaScript files. This process is called “minifying” and usually involves removing as much white-space as possible. For JavaScript, there are also additional techniques that further reduce the size of the file. Spoiled rotten, WordPress users enjoy such awesomely useful plugins as WP Minify http://digwp.com/u/344 and PHP-Speedy http://digwp.com/u/345 that will minify, compress, combine, and cache your CSS and JavaScript files. There are also some 363 great online services for compressing CSS and JavaScript file content, including these great sites: • YUI Compressor - http://digwp.com/u/347 • Dean Edwards Packer - http://digwp.com/u/346 • JavaScript Compressor - http://digwp.com/u/349 • Another JavaScript Compressor - http://digwp.com/u/348 • Styleneat.com - http://digwp.com/u/350 • JSMin - http://digwp.com/u/351 While there are many different ways to take advantage of file compression, your implementation will depend on the tools and resources available to your server. If possible, enable mod_gzip or mod_deflate and forget about it. Otherwise, if these modules are not available to you, there are many other solutions available. 9.5.4 Optimizing CSS and JavaScript If all that server/database compression/optimization stuff leaves you gasping for air, relax – a significant amount of optimization can be accomplished by focusing on the code and content used to create the user interface. By optimizing the content of JavaScript, CSS, and even HTML files, you can reduce file size, save bandwidth, and reduce loading times for visitors. Here are some key strategies that will help you to optimize various types of code: • Keep your code clean! - Eliminate unnecessary comments and superfluous markup. Focus on clean, well-written code and you will have a strong foundation for optimizing your pages. • Keep HTTP requests to a minimum - One of the best ways to improve the loading times for your pages is to reduce the number of HTTP requests to the server. Every JavaScript file, CSS file, and image requires its own HTTP request and thus slows down loading time. By consolidating multiple CSS and JavaScript files and implementing “sprite” techniques, you can reduce the number of HTTP Optimize with WP CSS If you don’t mind an additional plugin to optimize your CSS les, you’ll want to check out WP-CSS. WP-CSS uses a shorthand technique to strip extraneous whitespace from your CSS les. Then after reducing le size, WP-CSS compresses your CSS les with Apache’s powerful gzip compression. It even includes any @import les into the mix. http://digwp.com/u/355 Easy PHP Compression More information on how to compress your les with PHP: http://digwp.com/u/343 364 requests and increase the performance of your site. • Use sprites for images - Put simply, sprites are multiple images consolidated into a single image. By strategically placing different images in a single image file, we decrease latency in visual display while also reducing the overall number of HTTP requests. Sprites are commonly used together with CSS to create stunning and effective rollover effects, background imagery, and more. • Include your stylesheets at the top of your pages - When including external stylesheets in your pages, be sure to include them at the top of the page in the <head> section. This will enable browsers to render your pages progressively, which makes them appear to load much faster than they would otherwise. • Include JavaScript at the bottom of your pages - When including external JavaScript files, placing them at the bottom of the page, just before the closing <html> element, ensures that your clients’ browsers are able to download the maximum number of components, decreasing load times and improving performance. • Validate your code! - One of the best ways to ensure that you are adhering to the principles of modern web design and web standards is to check your code with an online validator. After checking your page, the validator will return a report telling you either that your code has passed with flying colors, failed miserably, or anything in-between. If there are problems with your code, the validator will explain each issue and provide suggestions for fixing them. There are many different validators available depending on code type, however, the W3C (World Wide Web Consortium) provides just about everything you need right under one roof. Here are some URLs for two of their free code-validation services: • W3C (X)HTML Validator - http://digwp.com/u/353 • W3C CSS Validator - http://digwp.com/u/354 Spriting Made Easy Creating sprites is an art form that many have yet to master. Thankfully, designers now have a free online service that automagically creates sprites for you: http://digwp.com/u/352 365 9.5.5 Reducing the Number of HTTP Requests One of the biggest factors of site performance is the number of HTTP requests that your pages are making to the server. Each request for a CSS file, JavaScript file, image, or any other external file requires a separate call to the server, which then must acknowledge, process, and return the requested file. When you have too many files linked to a document, either in the <head> area or in the content itself, your site’s performance may be negatively affected. This effect is easily seen by comparing the load times of sites that include many different CSS and JavaScript files with sites that have taken appropriate measures to reduce the overall number of requests made by their pages. Here are a few tips for reducing the number of HTTP requests made by your site: • Eliminate unnecessary les - Anything that you are calling from your web page that is not absolutely essential should be cut out from the picture. When possible, replace design-related images such as rounded borders with pure CSS alternatives. • Consolidate CSS les - Instead of linking to five different CSS files, combine them into a single, optimized file. If you’re not sure, check your source code - you may be surprised to find that some of your plugins are calling additional CSS files. • Consolidate your JavaScript les - As with your CSS files, combine multiple JavaScript files into a single, optimized file. Check your source code and consolidate anything that you can get your hands on. Just make sure to preserve the order of appearance of the various scripts. • Use image sprites - If your theme design makes heavy use of images, the number of HTTP requests may be very high indeed. Check your design and look at the images being used. If any of them can be combined into a single image, then try to do so. Granted, combining images into so-called “sprites” is a bit of a dark art, but with a little research and some practice, you will find the reward of improved performance to be well worth the effort. A great example of image sprites is seen with social-media icons that have been combined into a single file and then positioned differently for each link with a little CSS. This one technique can drastically cut down on requests and help speed things up. Hey Look, it’s a Sprite! In this social-media sprite, all of the icons are contained within a single, transparent PNG and simply shifted with CSS to display the appropriate image being called. 366 How to Stop Leeching and Improve Site Performance As explained in section 9.1.10 of this chapter, “hotlinking” is bandwidth theft that happens whenever another site is linking directly to your files. For example, if you have some spicy picture of Chewbacca in a swimsuit, you may quickly discover that unscrupulous bastards are linking directly to it, stealing your image, your bandwidth, and your traffic. To prevent this sort of leeching, add the following slice of HTAccess code to your site’s root .htaccess file (or Apache configuration file): # HOTLINK PROTECTION <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{REQUEST_FILENAME} -f RewriteCond %{REQUEST_FILENAME} \.(gif|jpe?g?|png)$ [NC] RewriteCond %{HTTP_REFERER} !^https?://([^.]+\.)?domain\. [NC] RewriteRule \.(gif|jpe?g?|png)$ - [F,NC,L] </ifModule> There are of course many ways to customize this code, including changing the domain name to match your own, adding additional approved domains to the list (so your images are visible in feed readers, for example), and so on. As-is, this code simply returns a 403 Forbidden error for anything other than your site that is requesting images. This may be changed to return some nasty image, so that people who try to steal your zesty picture of Chewbacca will get some nasty shot of your armpit instead. Currently, this code blocks hotlinking for GIFs and JPGs, but you can add many other types of files to the list as well. For a more comprehensive look into the fine art of protecting your site against hotlinking, check out http://digwp.com/u/294. . http://digwp.com/u/333 360 9.5.1 Optimizing WordPress There are many ways to optimize the already-great, out-of-the-box performance of WordPress. Let’s take a look at a few of the most effective ways to improve. the busy WordPress devs have integrated an easy way to stay current: automatic updates from the comfort of the WordPress Admin! Before WordPress 2.7, upgrading to the latest version of WordPress. keeping your plugins up-to-date ensures compatibility with the latest versions of WordPress and helps keep everything running smooth in general. While we’re on the subject, serious WordPress developers