By now you’ve added diagnostic tools for your Ning Network and you’ve pinpointed those components on the main page that are weighing it down. You’ve also calculated your main page’s total weight – its size in KB. Now it’s time to optimize performance and trim your main page down to a maximum of 500 KB.
PICK YOUR FAVORITE ONE OR TWO EMBEDS AND TRIM THE REST.
Text boxes make it easy to embed 3rd-party services, custom apps, and other content on your Ning Network. These include YouTube videos, flash games, Twitter feeds, advertisements, PollDaddy widgets, and just about anything else you can think of.
While this embedded content can add flavor to your Ning Network, you should have no more than 1 or 2 on your main page an any time. Here’s why:
- Your main page will only load as fast as your slowest embed. An embed that is slow or unavailable can block or severely delay the rest of your main page from loading.
- Embeds are like small applications. If your embeds are not well-written, they will quickly use up the limited resources in your browser. This noticably slows things down and can even cause your browser to crash.
- Even beautifully written embeds are very heavy. A single flash player from a third party can add 100K to the weight of your main page. Use YSlow to pinpoint the most cumbersome embeds.
For every embed on your main page, you should ask yourself how much value it will add to the member experience. If it’s critical, great. But if it is just nice to have, it’s best to remove it. You can always keep a healthy rotation of main page widgets to keep things fresh. You can also take a screenshot of an embedded application or widget, and hyperlink the screenshot to the embed itself on a separate page. This keeps things visually interesting without adding much weight to your main page.
TRIM YOUR IMAGES DOWN TO SIZE.
In general, the images on your main page will take up between 1/3 to 1/2 of the total page size – you can get the exact figure for your main page with the Statistics tab in YSlow. The good news is that there are simple ways to optimize image size without sacrificing quality. And this doesn’t require expensive software – you can use free image editors like Seashore, Skitch, or Gimp.
A good place to start is with images that always appear on your main page – like the header, background image, side images, and any custom module headers – and put them on the following diet:
Don’t scale images with HTML, resize them. If your original image is larger than the space it actually occupies on the page, it will be automatically rescaled. This rescaling process doesn’t actually shrink the image size, and adds needless weight to your main page. In your image editor, resize your image so that its dimensions are exactly what you need for the main page. In the example below, resizing the image makes it 6x smaller.
Your images don’t need to be print quality. Consider converting your image to an 8-bit PNG, medium-quality GIF, or medium-quality JPG. This usually doesn’t have a noticeable impact on your image. Likewise, if you’re using a PNG or GIF format, you can even restrict the color palette for your image in most cases as well. When restricting your color palette, try starting with the least number of colors possible and increase the colors incrementally as needed. Unless your image is a detailed photograph or artwork, you can often use a fairly limited color palette (32 colors or 256 colors) and still get great results. In the example below, we took a very detailed JPG image and converted it to a medium quality JPG. This made it over 6x smaller.
Eliminate whitespace. You want your images to be trim and blank space around the edges of your images is a waste of space. If you need to keep a certain amount of space around your images, you can easily add this in with CSS which takes less time to load. For more information on adding padding around your images using CSS, check out this page.
Keep it local. Make sure that your images are hosted directly on your Ning Network whenever possible. If you’re using CSS or HTML that reference images hosted elsewhere, this will create unnecessary work for your browser as it tries to resolve DNS records and cookies. DNS lookups take anywhere 20-120 milliseconds each. During this time, the browsers can’t actually download anything from the domain where your images are hosted.
CHOOSE THE RIGHT DISPLAY OPTIONS FOR YOUR FEATURES.
Limiting the number of embeds and putting your images on a diet will go a long way. You can also control the display options for your features that appear on the main page. Limiting how many blog posts appear on the main page, choosing Title view instead of Detail view, and having only 1-2 RSS and text boxes will greatly improve the speed and usability of your main page.
Pick your favorite RSS and display it in Title view. RSS feeds, like other embedded content, will slow down the main page of your Ning Network. One way to speed things up is to simply have fewer RSS boxes on the main page. Another way is to click the “Edit” button on the RSS box and choose Titles Only instead of Detail View in the “Display” drop-down menu. This is a great option when your RSS feed is media-rich and is pulling in photos or videos from an outside website.
Don’t go all-out with blog posts. You can display up to 20 blog posts on the main page, but doing so will impact the speed of your main page. Media-rich blog posts that contain photos, flash players, and custom widgets are hampering performance in the same way that embeds in text boxes do. Try displaying 5 or 10 blog posts, and consider displaying Featured blog posts only. That way, you have tight control over what blog posts will show up on the main page. And just like with RSS, you can choose to display Titles Only instead of Detail View to achieve the speediest results.
Think about what you’re putting inside your text boxes. Though you can add up to 10 text boxes to your main page, try keeping this number down to 2-3. In these text boxes, try putting the most lightweight widgets, and lightweight HTML code to show awesome custom content while keeping your main page speedy.
MINIMIZE CUSTOM CSS AND JAVASCRIPT.
As a Network Creator, you can add custom CSS in the Advanced tab of the Appearance page. You can also add custom CSS and JavaScript to the Analytics box. While these customizations are useful, it’s important to remember that they will load on every page on your Ning Network, including the main page. They also cannot be cached by browsers, which means your custom code will take the same time to load whether it’s the 1st ot 100th time someone is seeing your main page. Take a look at what you have in the Advanced tab of the Appearance page. If it’s CSS that might not be written perfectly, or might not even be doing anything, see if you can live without it. Likewise, peek inside the Analytics box. If it’s not Google Analytics tracking code, do you need it?
You should also check your JavaScript for errors. You can easily spot errors by loading your main page in a Firebug-enabled browser and check the bottom right hand corner of the browser window for a red error message.
Network Creators who use a good amount of custom code will want to follow these advanced guidelines:
- Use external files for your JavaScript and CSS – By using external files for JavaScript and CSS, members will generally see quicker load times for your pages since these files are cached by most browsers and so only require the browser to load your code once (any required time to run your code is still added to subsequent page loads). Conveniently, CSS added to the Advanced Appearance tab of your Ning Network is automatically added to an external file that is called on every page. For JavaScript, you can call external files using the include statemtent shown below from any Textbox or from the Analytics box of your network.
<script language="JavaScript" src="YOUR_JAVACSRIPT_FILE.js"></script>
- Make your CSS files short and efficient – Making your CSS as short and efficient as possible will reduce the amount of data your browser needs to load. Here are a things to check for in your custom CSS.
- Validate your CSS using a CSS validator. You can validate your custom CSS by copy and pasting it to this page.
- Avoid redundant code that can be consolidated into fewer statements or are setting the same property over and over again.
- When calling images from your CSS try to make sure they’re hosted on the same domain or as few other domains as possible. This reduces the number of DNS lookups and requests that need to be performed.
- Combine background images such as icons with CSS sprites when possible. This lets your browser load a single image in place of dozens.
- Avoid CSS expressions that dynamically set properties. These expressions are constantly evaluated when your pages are rendered, scrolled, and resized. These frequent evaluations and subsequent visual adjustments generally take away from your member’s overall experience as things can appear jumpy and laggy.
- Make your JavaScript files short and efficient – Making your JavaScript short and efficient helps reduce the amount of data your browser needs to load and the time to fully render your page. Here are easy ways to improve the code on your pages.
- Limit the amount of 3rd party code you include on your page. Most of the time, you don’t have control over 3rd party JavaScript. The way it’s written and the effect it has on your main page’s speed is out of your control.
- Check for JavaScript errors. Anytime you add a piece of code to your network, be sure to check to see if you’ve introduced any errors on your main page. You can easily spot errors by loading your Ning Network in a Firebug-enabled browser and check the bottom right hand corner of the browser window for a red error message.
If you’ve already added several scripts to your network and you see a JavaScript error, the easiest way to isolate the issue is to temporarily remove or disable all your scripts and add each script back one at a time, testing as you go along. - Test to see if your JavaScript has degraded the performance of your main page. Anytime you add a piece of code to your network, Load your network up in Yslow and check to see if there’s a significant change in page weight or load time.
If you’ve already added several scripts to your network, the easiest way to isolate the performance of each script is to disable all your scripts and add each script back one at a time, testing as you go along. - Replace redundant code with functions. If you’re writing your own Javacript, and you find yourself writing the same code over and over again, you can probably replace the repetitive code with a function. For more information on writing functions, check out this page.
- Avoid long operations. If you’re writing your own Javascript, avoid things like nested loops and operations that will take an exponential amount of time to run. Especially as your Ning Network grows and the data that your code interacts with grows, efficient operations will help maintian your main page’s performance.
- Take advantage of JavaScript libraries. The jQuery library is already available to you on your network. Take advantage of its prebuilt functionality for doing things like selecting, inserting, and manipulating elements on the page. Using libraries is useful for writing really short and efficient code.