Tag: Web development
11 Ways to Speed Up WordPress
by Ranju Chaudhary on Jul.20, 2010, under Graphic Design

When you’re not prepared for lots of traffic, it’s common for a web host to suspend your account temporarily, and that’s something you don’t want. If your writing is decent and you’ve been doing some minimal promotion, then it could happen to you. Think positively and prepare your blog as though it’s going to be a huge success. To do that, here is a tutorial on how to speed up your WordPress site.
Note: As always, with everything, you should backup your WordPress installation before making any code changes.
1. Caching
Utilize WordPress Object Cache
By inserting this simple code into your wp-config.php file, you can set WordPress to begin caching database queries rather than initiating new server requests on each load. You don’t have to understand why this works, it just will.
1. // Enable the WordPress Object Cache:
2. define(ENABLE_CACHE, true);
Read more on this topic:
By reducing the number of queries, you’ll both increase the speed of your site, and reduce the server resources that are consumed each time you receive a visitor. As a result, you’ll find that it will make your web host much happier in the event of a huge traffic spike.
Utilize a caching plugin
The main plugin that meets this need is the WP Super Cache, which does exactly what it says. It caches posts and stores them as files on the server so that repeated requests are dealt with faster and with fewer resources. The plugin will automatically update as comments are added so the dynamic nature of the blog isn’t lost.
Another option, which is used right here on Mashable
, is W3 Total Cache. It’s a plugin that promises 10 times the speed of your site without it.
2. Choose the Right Host

There are several web hosts that are optimized to run WordPress. And while WordPress is not that picky, it does have a set of ideal server settings. Most web hosts meet the basic requirements, but you can find more information about what’s necessary here.
Choosing the right host means more that just buying storage space. Many discount hosts will try to fool you with promises of massive server space at a cheap price because they know you will likely never use the promised enormous allotment. You should really be aware of:
- Bandwidth
- Processor speed/type
- Databases allowed
- Domains allowed
- Which versions of PHP
, MySQL, etc. are installed
Look for hosts that have more of a commitment to WordPress as a CMS and blogging platform and not just a mention at the bottom of their features list. Another solid resource is the WordPress hosting page.
Also, though most shared hosts will likely be running Apache, keep in mind that WordPress can also run onNGINX, which can increase your server’s speed by changing the structure of the server requests. NGINX powers massive websites like Hulu
, SourceForge and WordPress itself.
If these big boys choose NGINX, you know it delivers.
3. Prune Your Plugins
Take a look at your plugin list and remove the inactive ones. Then remove the any actives ones that you don’t actually use; they are likely to place a strain on your serve resources because WordPress loads all plugins when a page loads.
Make sure you’re always running the latest stable release of both WordPress and your plugins. Many older WordPress plugins are not efficient and will weigh your blog down.
WordPress 3.0 comes with a revamped plugin update feature, allowing you to update plugins faster, smoother and easier. It also offers a bulk update feature that is completely new to WordPress, so there’s no excuse for letting your plugin versions expire.
4. Choose the Right Theme
Themes can make or break a WordPress installation. Go for something stylish but simple. It’s important to understand that fewer images will equals less loading time, which means a speedier site. Choose themes with the fewest possible images and a CSS-based design. Themes with tables, frames and static HTML will be slower than those based on the latest technologies. You might want to choose a minimalist theme and modify it to suit your needs.
There are many resources for minimalist themes, including this one Six Revisions and this one at Tripwire Magazine. Don’t just take the theme’s simplicity as a sign of load speed, though; check the actual speed using something like YSlow or Pingdom’s Page Test.
5. Compress Images
While a clean page means speed, you have to balance that with the fact that strong supporting images are key to a successful blog. But there is no reason to sacrifice speed for quality. By ensuring your images are appropriately formatted and compressed, you can help increase your blog’s speed.
The easiest way to remember formatting is like this:
Images that use only a few colors should be saved as .GIF or .PNG files, and images that use a full spectrum of colors (like true photographs) should be saved as .JPG files. If you use photo editing software, like Photoshop, you can “save for the web,” which will find the best format to save, while still maintaining quality.
Next you should resize images to the smallest possible size to get the job done. When doing so, the color format should be RGB, as indexed images don’t scale well.
When saving, set the total color amount to the smallest value possible without sacrificing quality. A combination of these steps will greatly decrease your image size and therefore your server response time. You should play around a bit to find the right format and experiment when uploading to determine which settings produce the smallest, high-quality image.
6. Compress Your Code

Stylesheets
Stylesheets are easy to compress, just use your favorite text editor to delete comments and unnecessary spaces and line breaks. Although you won’t see a drastic difference unless your style sheets involve tens of thousands of lines.
JavaScript
Compressing JavaScript isn’t as simple, but it is still relatively easy. There are a number of tools available, such as this one, which is free, that will compress your JavaScript code for you. Better yet, don’t rely on much JavaScript at all if you can help it. If your site has lots of interactivity, moving parts and fancy features, there is a good chance it is running a lot of JavaScript and that could slow things down.
Additionally, you may use the Yahoo! YUI compressor tool or the Google equivalent compression tool. Either one will tighten up your code to make it run more efficiently. Coder Journal has a nice comparison of the various tools for JavaScript compression.
Use CSS Sprites
CSS Sprites allow designers to create interactive images, or multiple images using CSS instead of bulky and slow loading JavaScript. Sprites are an advanced technique, but here is a great tutorial at A List Apart. There is even a plugin developed specifically for WordPress that helps with the use of CSS Sprites.
7. Keep It Local
Don’t rely on other people’s servers to be fast, so minimize any widgets, badges or applications that run off other locations. If possible, try to self-host all images and code, such as your analytics. That said, if you’re posting videos use a service that is built for such a load, like YouTube
But if you are expecting (or receiving) lots of traffic, you may want to look at paying for a dedicated server and not trying to host all your projects in that one place alone. A lot of people don’t realize that the geographical distance from a server actually matters. If the vast majority of your traffic comes from a specific country or region, consider locating your hosting close by.
8. Reduce PHP and HTTP Calls

Websites were once built statically, meaning that each page was hand-coded and built from the bottom up. Now, most websites are generated dynamically each time a visitor loads the page, which allows for each experience to be custom designed for each person, making for a richer browsing experience.
In order to accomplish this, many websites use PHP, a scripting language that allows you to reference remote content based on criteria set by the developer. For example, a site might use PHP to determine that this is a first-time visit, and the site may then use this information to generate a welcome message.
Each time one of these PHP “calls” is made, a request is made to the server hosting the website, which takes time (usually milliseconds). This time is called “latency,” and some websites have thousands of calls each time the site is loaded, which can translate to millions per day depending on traffic.
Wherever possible, scan your site for PHP requests and replace with static HTML. By doing this, the browser will simply read the HTML as opposed to asking the server what it should display. Here is an example of a slow and fast way to produce the same result:
Slow:
<?php bloginfo(name); ?><?php bloginfo(description); ?>
Fast:
<title>Mashable - The Social Media Guide</title>
There’s more you can do to minimize PHP calls. This tutorial will help you cut down the PHP calls that occur in the typical WordPress header. You can also reduce PHP calls by eliminating any logging that might be happening; some advanced plugins offer an option to track plugin activity with a log, which can significantly slow down your WordPress site.
9. Keep Your Code Clean
You can validate your code using the W3C Validator. It might seem snobby to have “standards” on the web, but the truth is, there are standards for a reason. If everyone met the standards, browsers would always know how to display the information they’re given. Use the tool at W3C to validate your code and fix any errors. This can be a painstakingly long process but it’s well worth the end result.
Coding errors will slow your load time, especially if images that are referenced but don’t exist. Use a bug tool like Firebug to identify coding errors and fix them.
10. Database optimization
Using a database administration interface like phpMyAdmin, you can select all tables and click “Repair” and “Optimize,” and scan for outdated tables that weren’t deleted when you removed old plugins.
This plugin will take care of the database optimization while letting you stay out of the database itself. While this other plugin offers automatic optimization which may be better for the hands-off blog author.
11. Adjust Your WordPress Settings
Go easy on the front page
There’s no reason to show 100 posts on the front page, and really, you don’t even need to display the full post content on the front page. You can adjust this setting in the WordPress Dashboard under the Settings > Reading panel.
Turn off inter-blog communication
By default, WordPress interacts with other blogs that are equipped with pingbacks and trackbacks. Every time another blog mentions you, it notifies your site, which in turn updates data on the post. Turning this off will not destroy links to your site, just the setting that generates a lot of work for your site. For more detail, read this explanation of WordPress Pingbacks, Trackbacks and Linkbacks.
17 Fresh Web Tools for Working with Colors
by Ranju Chaudhary on Jun.11, 2010, under Latest Web Technologies, What's Happening?
Color is a design tool that sets the tone, theme, and mood of a visual project. The colors you use greatly impacts how your design is perceived by its viewers.
Below are some handy web tools to help you choose the perfect colors for your designs. This post follows up on a Mashable
post published close to three years ago called “COLORS TOOLBOX: 20+ Tools For Working With Colors,” which you should also check out for even more color tools to add to your design arsenal.
Developing Color Palettes

1. ColoRotate – This web-based color palette generator is a fun and visually appealing method for putting together your color combinations. You can explore and tweak preexisting color palettes for inspiration, or create your own. You can also view color palettes in a variety of ways to give you a greater perspective on how well your colors work together.

2. COPASO – This web tool is a feature rich and advanced color palette generator created by COLOURlovers, a leading site for designers looking for color inspiration. The tool lets you develop color palettes that you can assign meta data information on to (such as keyword tags and a related URL) for easy searching and organization. You can attach a photo to your workspace to draw colors from, which can be handy if you already have a good picture of the color scheme you want to create.

3. ColorMunki Design – This palette generator gives you various options for choosing colors. You can select colors from established color systems, such as Pantone, choose colors from images and photos, or find user-generated color palettes. They have a built-in feature for sharing your color palettes that can prove useful for times when you’re seeking peer feedback about your color choices.

4. Toucan – Developed by popular web-based graphics editor software makers, Aviary
, Toucan is a user-friendly web tool for creating color schemes. It has a color wheel for more precise selection of colors as well as an image picker feature that lets users sample colors from a photo using an eyedropper.

5. Palette Man – This basic but highly useful color palette generator allows you to pick a certain color theme (such as “Romantic” or “Industrial”) that you can use as starting points for your color palettes.

6. Pictaculous – This simple tool will automatically generate a color palette for you based on an image that you upload, helping you find out which colors an image uses. This could be a quick method for developing a color scheme based on a website design screenshot or scanned copies of a company’s printed material.
Finding and Exploring Colors

7. 0to255 – This intuitive web tool gives you the opportunity to explore variations of certain selected colors. This is a wonderful web app for getting exactly the right shade of color that you want.

8. ColorPicker.com – This tool only does one thing, but it does it well: it puts the color picker feature that you often find in many graphics editor such as Photoshop and GIMP
, on the web. In a pinch, this tool can be of aid to designers needing access to this frequently used graphics editor feature.

9. ColorSuckr – If you find an inspiring image on the web that you want to extract colors from, ColorSuckr is just the tool that will get it done. All you have to do is supply the URL of the image and it’ll detect the colors within it, along with the colors’ hexadecimal, RGB and closest web-safe hexadecimal color codes.

10. Cymbolism – Color is a powerful tool for evoking emotional responses from its audience. For example, in most cultures, red is a symbol of danger and excitement. Cymbolism is a social experiment that presents its users a word and asks them to choose the color that they think represents that word. This gives designers developing color schemes a better way of picking colors based on words and subjects they intend to convey in a design project. The words directory displays the associated colors that people most commonly pick for a particular word.

11. Name that Color – Do you constantly ask yourself questions like, “Is this Royal Blue or Navy Blue?” If so, use this tool to learn what name (approximately) best describes a particular color.

12. 500+ Named Colour – This crib sheet lists color names and their associated RGB and hexadecimal color codes; it can be handy when writing descriptions or presenting your color choices to your clients and colleagues.
Checking Colors for Accessibility

13. Check My Colours – Poor color contrast affects readability. This easy-to-use web tool checks a website’s foreground and background color combinations. All you have to do is plug in the URL of a web page, and in turn, it’ll output a report showing page elements that don’t meet color contrast standards recommended by theW3C.

14. Luminosity Colour Contrast Ratio Analyser – This tool allows you to input the hexadecimal color codes of your foreground and background color, then runs a luminosity contrast algorithm recommended in the Web Content Accessibility Guidelines 2.0 from the W3C. This simple tool saves you from having to pull out a calculator and trying to remember the math lessons you had in high school.
Color Inspiration

15. Multicolr Search Lab – This web tool will show you a grid of photo thumbnails that embody the colors you pick. Photos come from a selection of 10 million interesting images from Flickr’s Creative Commons. This excellent tool is for discovering inspiring images based on colors that interest you.

16. Daily Color Scheme – Every day, this web resource is updated with an inspiring color palette that you can use in your design and art projects. Each color palette displays hexadecimal, RGB, and HSB color codes for your convenience in case you find a color theme that you want utilize out of the box or tweak on your own.

17. Colr Pickr – Colr Pickr is a useful tool for designers and photo editors looking for inspiring images based on certain colors. The tool presents you with Flickr
photos of a certain subject (such as flowers or graffiti
) that match the color you choose. It’s a great way to surround yourself with inspiring photos of a given color.
Which web tools do you use for working with color?

