You know the situation: your site’s been slowing down for a while, but you just can’t put your finger on why. Then you get a tweet, an email, or a comment on your Facebook page mentioning it. Even worse, you see someone talking about your site in your niche’s main online forum—they’re not impressed with your sites performance.

What was once an amazingly quick-loading site has slowed and slowed to a crawl. Your visitors are growing unhappy and may even be starting to look for alternative sites. To be honest, who could blame them for wanting to seek out someone else that serves their needs better, in less time?

What makes things worse is that you’re not really a geek or a tech-head and you don’t know what to do about it.

You ask yourself:

• How can I find out what’s killing my sites performance?
• How do I know where the issues are?
• How can I give someone the right information to help me?

Well in this post, I want to help you do just that, by giving you a quick introduction to analyzing your site’s performance using one of the simplest, free, tool package of all—Google Chrome’s Developer Tools.

Now I appreciate that we’re not all geeks or tech heads, and that more than likely, this isn’t something that you’d do on a regular basis. But that needn’t stop you. You can be partially autonomous without being either a nerd or programmer.

So I am going to show you, quickly, just how easy it is to use the developer tools available in Google Chrome, to work out which components of your blog are causing you issues. With that information, you’ll be able to take action yourself if you host your own blog, or report this to your tech support if you don’t.

What are the Developer Tools?

The official Developer Tools blog describes them as follows:

The Developer Tools, bundled and available in Chrome, allows web developers and programmers deep access into the internals of the browser and their web application … The Developer Tools are organized into task-oriented groups that are represented by icons in the toolbar at the top of the window. Each toolbar item and corresponding panel lets you work with a specific type of page or app information, including DOM elements, resources, and scripts.

Now okay, there’s a bit to take in there, but if you’re not comfortable with all that, don’t worry: it simply means that these tools provide a way of finding out specific details about each component of the web page that you’re currently viewing.

They allow you to filter by category, and sort the available information by a simple set of key criteria, such as size, time and type. The image below shows you a working example.

Step 1. Open Developer Tools

The first thing that we want to do is to display the Developer Tools window in Google Chrome. After opening Google Chrome, click on the wrench icon on the right-hand side of the main Chrome window. In the menu that pops up, move your mouse over the Tools option and in the next window that pops up, click Developer Tools (this is second from the bottom).

Step 2. Get familiar with the Developer Tools window

All being well, you’ll see the Developer Tools main window, which looks similar to the screenshot above. You’ll see a set of tabs across the top, including:

• Elements
• Resources
• Network
• Scripts
• Timeline
• Profiles
• Audits
• Console.

The one that we’re focusing on is Network, so go ahead and click that tab. Now you’re going to see what seems like a large amount of information, but don’t worry—before you’ve finished this article, you’re going to be an ace at making sense of the parts that are most important.

Step 3. Filtering options

Now, take a closer look at the footer> of the window, right down the bottom. You’ll see a set of menus, which include:

• All: Displays all the components in the page
• Documents: Displays only HTML output
• Stylesheets: Display CSS stylesheets
• Images: Display all images (.png, .jpeg, .gif, etc.)
• Scripts: Display all Javascript (inline, external).

These options allow you to filter the components that make up the current page. In this case, it’s the Facebook fan page of my first blog, Malt Blue.

By default, the All option is selected. This shows you everything in the page. This is a bit much to work with, so go ahead and click each option and notice how the list can dramatically change in size.

Now take a closer look at the row under the main menu. It has a series of columns that allow you to sort the available information. They include:

• Name: the name of the HTML page, image, stylesheet, etc.
• Method: whether the item was requested with GET or POST
• Status: some information about status of the item
• Type: a text description of the item’s type
• Initiator: what requested the item
• Size: the size of the item
• Time: the time taken to retrieve the item displayed in text
• Timeline: the time taken to retrieve the item displayed as a graph.

The key columns, however, are Name, Size, Time, and Timeline. By focusing on these columns, you can see that of the eight displayed, the first one took 1.57 seconds to load with a size of 65.40KB. Not too bad overall. If you’re a visual person, like me, then sort using the Timeline tab.

Okay, so you’re now more familiar with the available options. But for the quickest assessment, the two key columns to look at are time and size. Let’s consider each in turn.

Step 4. Sort by time

This one is probably the best one to use when it comes to finding rogue components. It was a god-send recently when it was able to tell me that a MailChimp sign-up widget in my sidebar was taking over 15 seconds to fully load.

So click on the Time column until it has a downward facing arrow next to it. Then, you’ll see the components in the page, displayed from slowest to fastest. In the column, you’ll see two numbers for each component, one in grey and one in black.

The number that you want to focus on is the top number in the black font. This shows you the total time that the component took to load, right from when it was requested by the browser, to when it was displayed on the page.

Step 5. Sort by size

This is probably the second-best option to sort by, especially if you’re more of a numbers than a graphics person. As you did with sorting by Time, click on the Size column until it has a downward facing arrow next to it.

Then, you’ll see the components in the page, displayed from biggest to smallest. In the column, you’ll again see two numbers for each component. Once again, focus on the number in the black font. This is the total size of your component.

Step 6. What To Do

So far, we’ve opened the Developer Tools, familiarized ourselves with the Network window, played around with its key options, and finished up by getting to know the components in our web page.

But what do you do now?

Based on time and size, take an inventory of the biggest and slowest loading elements of your page. Then look to see what you can do to reduce these points. To save you time, here are my top suggestions for speeding up your site with this new knowledge:

• See if the elements relate to plugins or widgets that you’ve installed. If so, consider disabling them or finding an alternative that loads faster.
• Look at the slowest loading or biggest images. Maybe you’ve set the width and height to make them appear smaller. Could you:
  1. optimize them for displaying on the net?
  2. scale them down in size without losing quality?
  3. remove unnecessary parts of the image?
  4. use another image format, producing a smaller file size?
• Do you load a lot of CSS stylesheets or Javascript files? Could you:
  1. combine them in to one file?
  2. load some from external, faster, sources, such as Google?
  3. shrink the Javascript and CSS files with online services such as jscompress.com or minifycss.com?

Don’t manage the site?

What if your site’s managed for you by someone else?

In that case, get in touch with your tech support and tell them all that you can about the slow components that you’ve found. Tell them what they are, how long they’re taking to load, the size of them, and so on. An even simpler option may be to send them an annotated screenshot of the developer tools window where you’ve highlighted the results that you’ve found.

Experiment!

Like all new things, give yourself time to become familiar with the tool. As you do so, you’ll grow a proper appreciation for what’s fast and what’s not, what’s a good size for a file or an image and what’s not, and so on.

Then, as this knowledge builds, you’ll be increasingly autonomous and better informed about the state of your site.

I hope that you’ve found this helpful and that in future, when your site’s exhibiting poor performance, you’ll be in a much better position to perform the initial diagnostics yourself. You’ll be both better informed and more able to let your tech support know when issues need to be addressed and where.

Matthew Setter is a passionate writer, educator and software developer. He’s also the founder of Malt Blue, dedicated to helping people become better at web development.You can connect with him on Twitter, Facebook, LinkedIn or Google+ anytime.

Originally at: Blog Tips at ProBlogger

How to Know Which Plugins are Killing Your Site’s Performance

Everyday it seems like I find a story or two from a cities local online newspaper which delves into the topic of blogging and what it’s all about. The story usually goes through a mini backlog of history surrounding the term, what blogging is and at the end of the article, there is usually a list of suggestions on how to get started with the most popular suggestion being WordPress.com. Using WordPress.com is a great way to introduce yourself to blogging but if you decide that you want to turn blogging into a full time job or just want more control over your work, you’ll need to move.

Thankfully, the move from WordPress.com to WordPress.org (WordPress.org being the self hosted version of WordPress) is painless thanks in large part to a great export tool.

To start things off, login to your WordPress.com account and browse to your administration panel. From the menu on the left, click on TOOLS – EXPORT. At this point, you have the option to confine the export to a particular author or all authors. Using the export tool will compile your posts, pages, comments, custom fields, categories, and tags. This information is placed into a WXR file or, WordPress eXtended RSS file. Essentially, this file is just a normal XML RSS based file with a couple of custom fields added to it which makes it specific to WordPress. Once you’re finished, click on the Download Export File button and save it to your desktop.

Once you have that file on your desktop, you can breath a little easier considering your half way through the content migration process.

The second part of this guide refers to an installation of WordPress 2.7. Login to your self installed WordPress administration panel and from the menu on the left click on TOOLS – IMPORT. From the list of blogging systems click on WordPress. Next, click on the Browse button and locate the XML file you downloaded earlier. This will upload the XML file into your WordPress installation and will unpack all of the data the file contains. There is one caveat though regarding this entire technique.

Most webhosts for whatever reason still have their PHP.ini configured in such a way where end users can only upload files with a maximum file size of 2MB or smaller. Although it takes quite a bit of content in an WXR file to go over 2MB, 2MB is not a lot of head room. If you find yourself in the position where your WXR file is larger than the maximum file size, I highly suggest submitting a trouble ticket to your webhost and asking them to increase the limit. If they choose not to, then ask them if they can import the file for you. If that doesn’t work, you can pull a trick from your sleeve by uploading a custom php.ini file to your webhosting accounts root folder. This is what my host did for me and afterwards, I took a look at the php.ini file and noticed it had this line in it:

; Maximum allowed size for uploaded files.
upload_max_filesize = 7M

Apparently, the php.ini file overwrote the settings on the original file and I was able to bump my limit up to 7 Megabytes. This trick is not guaranteed to work. As a last ditch effort, you can also try adding these lines to your .htaccess file. Just replace the pound sign with a number that is above the size of your WXR file.

#set max upload file size
php_value upload_max_filesize #M

#set max post size
php_value post_max_size #M

Once the WXR file is unpacked on your self installed version of WordPress, you’re ready to walk through the gates of freedom without skipping a beat!

P.S. This strategy also works for those wanting to go from WordPress.org to WordPress.com.

Originally at: Blog Tips at ProBlogger

How To – Move From WordPress.com To WordPress.org

If you’re going to be upgrading and want a little tour of the new features check out Aaron Brazell’s great post 10 Things You Need to Know about WordPress 2.7 which will run you through some of the new features, design and usability.

Originally at: Blog Tips at ProBlogger

What You Need to Know about WordPress 2.7

If you have a multi-author WordPress blog then you’ll want to check out a great post at Hongkiat – 35 Tips Tricks To Manage and Handle Multi-Author Blogs.

The post is packed full of useful tools and plugins that will help make the task of managing more than one author on a blog a lot easier – enjoy.

Originally at: Blog Tips at ProBlogger

How to Manage a Multi-Author WordPress Blog

Since announcing the launch of TwiTip here on ProBlogger I’ve been asked quite a few times about what WordPress plugins I’ve installed to enhance and add features to the blog.

I still need to add a few more but so far I’ve added the following 10 WordPress plugins:

1. Akismet – a great comment spam plugin. Interestingly I had comment spam on TwiTip that Akismet filtered within minutes of launching the blog on Twitter.
2. All in One SEO Pack – a plugin that helps to optimize a blog for search engines. It gives easy ways to set up title tags, descriptions, keywords (both for home pages but also on individual posts) and a variety of other settings that have an impact upon SEO.
3. cforms – a powerful contact form plugin. It’s a lot more complex than other comment form plugins out there but has a lot more features (some that I’m yet to fully test).
4. Google XML Sitemaps – a plugin to help Google and other search engines to find every page and post on your blog – good for getting a new blog indexed quickly.
5. Simple Tags – extends the built in tags features on WordPress.
6. Subscribe To Comments – a WordPress plugin that allows those leaving comments to check a box and be notified when other people leave a comment on that thread.
7. Tweet This – ads an invitation for readers to Tweet a link to the post they are reading. While I wouldn’t put this on every blog – it seemed a no brainer on a blog about Twitter.
8. WordPress.com Stats – I’m using Google Analytics as my main metrics tool for TwiTip but it doesn’t update in real time so this plugin helps to get a quick update of what’s happening on the blog at any given point in time.
9. WP-Polls – an AJAX polling plugin with some nice features. I’ve previously used the Democracy Plugin but this one seems to be working really nicely so far.
10. WP Ajax Edit Comments – this plugin allows those leaving comments to edit their comments for a short period of time after they leave a comment.

These are just the first 10 that I’ve already installed (listed in alphabetical order and not in order of importance). There are more to come. For example I’ll install Related Posts (pointless at this point as there are only 5 posts on the blog), WP-Navi (again, no point to install it yet as I don’t have enough posts to need a navigation tool) and WP Super Cache (I’m not doing enough traffic to really need it yet).

They are the 10 WordPress Plugins I’ve installed on TwiTip. If you were starting a new WordPress blog today – which plugins would you be installing?

Originally at: Blog Tips at ProBlogger

10 WordPress Plugins for New Blogs

Some businesses start blogging to expand their website. Some start with a blog. For the strongest online presence, business websites need both static content and dynamic news, a.k.a a blog. The blog builds traffic and establishes authority. The static pages helps convert that interest into business.

Essential Content for Static Pages

When planning static pages for a business site, this content is essential to serve a local audience anywhere in the world.

• Information about what you’re offering – this could be your consultancy services, an e-book, affiliate deals, courses or anything else you’re selling.
• Benefits – how what you’re offering serves to make someone’s life better. Features lead to benefits, but the benefits are what really matters.
• Examples, testimonials and case studies.
• Support information – let people see answers to common questions
• Contact and ordering information (along with a firm satisfaction guarantee)

Using WordPress as a CMS

WordPress has everything you’ll need to build a complete website, without installing any plugins or changing anything. In fact, it’s already the most popular content management system being used today, competing with established CMS such as Joomla! and Drupal.

In WordPress, use ‘pages’ as your static contents and ‘posts’ as blog entries. Pages can have sub-pages allowing to create a complete hierarchy of contents. Using WordPress, you can also select a specific page to be your home page. Categories and tags make it easy to jump between related pages.

Choose or build a theme that displays posts and pages properly for both human visitors and search engines and you’re ready to open for business.

Building usable Websites

A effective website is critical to business anywhere in the world. Points to consider:

• Navigation - good navigation will make it clear where I am, what to expect on this page and where to go to get what I need. It should include the top tab for main sections and drop-down menus (or the equivalent) for sub-sections. Context, knowing where I am within the bigger picture, is important at all times.
• Page layout – A good website follows conventions. Don’t make me learn your rules. Visitors who need to learn how to use a website from scratch, often leave before they do.

Whether you’re just starting out or already have a pretty large website, you can get great ideas from Steve Krug‘s “Don’t Make Me Think“.

Search Engine Friendliness

A few years back, people considered search engine optimization (SEO) as a sort of witchcraft. Today, search engine spiders can find their way around a website and analyze page contents efficiently. Follow basic principles, you’ll be fine.

WordPress takes care of most SEO concerns for you by rendering valid HTML and using a correct hierarchy of headings. You can help (a lot) by writing short, topical pages, which search engines can easily understand. You’ll find it’s very helpful for humans, too, especially those you want to find your business and become your customers.

Originally at: Blog Tips at ProBlogger

Beyond a Blog – Running a Full Website Using WordPress