Archive for the ‘tutorial’ Category

Give WordPress a Speed Boost

Friday, January 8th, 2010

The other day I was looking at my sites performance score in Google’s Webmaster Tools. According to Google, my site was considered slow. This was very concerning as Google has made it known that in 2010 site performance will influence its rankings.

When I looked at my source code it became very clear what the problem was. I use WordPress to host this site and all of the plugins I was using were dragging down the performance. Each plugin had it’s own JavaScript file, it’s own CSS file, and several images. What makes WordPress so great can also be a detriment to you page load times.

Web Page Analyzing

I used the web page analyzer at www.websiteoptimization.com to find what areas of my pages could use optimization. The web page analyzer tool pointed out several JavaScript files that could be optimized along with CSS code that could be condensed.

WordPress Page Caching

Now that I knew where the problem was I had to find a way to fix it. There are several caching plugins for WordPress but the one that worked best for me was W3 Total Cache. This plugin allows you to perform several caching and page optimization techniques that will save you seconds on your page load times.

Page Caching
You can cache each page on your site to improve your response times.

Minify
Minify will shrink your web pages, JavaScript code, and CSS. It removes spaces and even comment tags to reduce the size of the files that are downloaded to support your site.

Database Caching
Caches database objects to improve your response time

Each of the features above have additional customizations which you should look at carefully. I found the minify settings to reduce my page load time significantly by putting most of JavaScript files into a single JavaScript file and the same for my CSS files. There are a lot of different features. I’d recommend trying several of them and then rerunning the web page analyzer to see which improve you site most.

Overall, I knocked several seconds off the load times shown in web page analyzer tool above. You’ll need to experiement a little to see which JS and CSS files can be combined in single files without breaking your web pages. I found that I could make great use of this feature but it didn’t seem to work with the Disqus plugin I’m using. This is unfortunate as Disqus is one of the biggest causes of slow page loads. If anyone is able to get W3 Total Cache and Disqus to work together, please let me know.

Create a Page Loading Animation Using Ruby on Rails and AJAX

Thursday, January 7th, 2010

I had a difficult time locating all the pieces needed to accomplish this so I’m pulling them together into one tutorial that will hopefully help more people out.

Purpose: I had a page in my Rails application which did a lot of processing before the page loaded. This could take up to a minute depending on how many items needed to be processed. Obviously, this made for a poor user experience. To correct this, I created a new page with an animated GIF and a short message explaining to the user that it could take some time to load. I then used AJAX to do the intensive processing and then overwrote the HTML in the DIV tag that displayed the animated GIF. I’ve outlined the steps I took below.

Step 1: Create Your Animated GIF

Go to www.ajaxload.info to generate your animated wait image. Store the animaged GIF in your images folder.

Step 2: Add Remote_Function

You need to add the Rails remote_function code to create an AJAX call that runs when the page loads. To do this, you will need to add this code to the body tag.

<body onload="<%= remote_function(:url => { :action => :get_content_to_display } ) %>">

Step 3: Add Code to Display Animated GIF

Example: products/web_page.html.erb

<div id="display_ajax">
     <p>Please wait while your information loads.</p>
     <p><img src="/images/ajax-loader.gif" /></p>
</div>

Step 4: Create Partial to Display HTML Code

Example: products/_name-of-your-partial.html.erb

This file includes your display code.

Step 5: Create Controller to Display Ajax

Example: products_controller.rb

def get_content_to_display
     #Place code here
     render :update do |page|
          page.replace_html "display_ajax", :partial => 'name-of-your-partial'
     end
end

Now when you load this page, the animated gif will run until Rails has completed your get_content_to_display action. When this done, page.replace_html will overwrite your animated GIF and display your new content.

If you have any questions, please email me, chris@marketingformavens.com or post them in the comments below.

Using Bit.ly and Ruby on Rails to Shorten a URL

Monday, January 4th, 2010

If you’re building a Rails application and you need to add a URL Shortening service then you should look at philnash’s bitly gem. Bit.ly is dominating the crowded URL Shortening category. Its dashboard provides statistics for each shortened URL which makes it a very valuable tool.

To get started simply type:

gem install bitly

In your controller you’ll want to add:

require 'bitly'

Finally, to use the service you’ll need an API key. First create an account at bit.ly and then go to the following URL to retrieve you key: http://bit.ly/account/your_api_key/

To shorten a URL:

bitly = Bitly.new('your-bitly-user-id','your-bitly-api-key')
page_url = bitly.shorten('www.marketingformavens.com')
page_url.shorten => http://bit.ly/7BWXcQ

The URL has been shortened and you can display or use it in your application. You can also log into your Bit.ly dashboard and see detailed statistics on each URL.

To display stats in your dashboard use the following code:

page_url = bitly.shorten('www.marketingformavens.com', :history => 1)

For other options such as expanding a Bit.ly URL check out the documenation on github.

Video Demo: How ReStream Helps You Find The Best Content on Twitter

Wednesday, December 23rd, 2009

This quick 4 minute demo will show you how ReStream helps you find the most valuable links being shared across topics, tags, lists, and your personal Twitter stream. It also show you how the ReStream Discovery Engine recommends content to you based on your interests and the people you favorite.

Watch the video.

How to Develop Your Own Twitter App

Thursday, October 29th, 2009

Recently, I’ve been working on a new Twitter application that you can find in the Marketing for Mavens lab called ReStream. I don’t want to get into the details of that app as you can read more here. What I’d like to do is help those that have their own Twitter app ideas get started.

Thanks to those who have walked this path before me, getting your own Twitter app running is much easier than you’d think, especially if you’re already familiar with Ruby on Rails. If you’re not familiar with Rails, don’t let it hold you back. If you’ve programmed in other languages before then you can quickly pick it up.

Getting Started

To get started you will need Rails setup on your local machine. Start with RubyOnRails.org and these tutorials which helped me (some are old but are still helpful).

Now that Rails is Setup

  • Go to github.com and download jnunemaker’s Twitter application.
  • You will want to create a new folder for your Twitter application and copy all of the files and folders from this zip file you just downloaded into your new folder.
  • Open a your terminal window and go to the new folder you created for your Twitter app.
  • Install this Twitter gem. sudo gem install twitter
  • Start your server. script/server
  • Your application should now be running.
  • Open http://localhost:3000 in your browser and login to your new Twitterapp.

What’s Next

The sky’s the limit. jnunemaker has provided a fantastic foundation for any one aspiring to use Twitter’s API to build new applications. Even if your not familiar with Rails, you can look through the existing code to see how everything comes together.

If you need help or have any questions please let me know in the comment section below.

Custom Web Content Distribution: Demo Now Available

Thursday, May 1st, 2008

After some delay, I’ve posted the demo to our web site. The demo takes you through the “getting started” process showing what it takes to open an account, setup page tracking, build tags, and analyze visitors to distribute custom web content. The full demo takes about 10 minutes. If you have any questions, please post your comments here or email me at chris@marketingformavens.com.

View the demo.