{"id":3667,"date":"2012-04-12T00:36:49","date_gmt":"2012-04-12T00:36:49","guid":{"rendered":"http:\/\/help-o.ning.com\/?p=3667"},"modified":"2019-09-06T05:50:09","modified_gmt":"2019-09-06T05:50:09","slug":"optimize-your-main-page","status":"publish","type":"post","link":"https:\/\/www.ning.com\/help\/optimize-your-main-page\/","title":{"rendered":"Optimize Your Main Page"},"content":{"rendered":"

By now you’ve added\u00a0diagnostic tools for your Ning Network<\/a>\u00a0and 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\u00a0trim your main page down to a maximum of 500 KB<\/strong>.<\/p>\n

PICK YOUR FAVORITE ONE OR TWO EMBEDS AND TRIM THE REST.<\/h3>\n

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.<\/p>\n

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:<\/p>\n

    \n
  1. Your main page will only load as fast as your slowest embed<\/strong>. An embed that is slow or unavailable can block or severely delay the rest of your main page from loading.<\/li>\n
  2. Embeds are like small applications<\/strong>. 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.<\/li>\n
  3. Even beautifully written embeds are very heavy<\/strong>. A single flash player from a third party can add 100K to the weight of your main page.\u00a0Use YSlow\u00a0to pinpoint the most cumbersome embeds.<\/li>\n<\/ol>\n

    For every embed on your main page, you should ask yourself how much value it will add to\u00a0the member experience. If it’s critical, great. But if it is just nice to have, it\u2019s 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.<\/p>\n

    TRIM YOUR IMAGES DOWN TO SIZE.<\/h3>\n

    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\u00a0Seashore<\/a>,\u00a0Skitch, or\u00a0Gimp<\/a>.<\/p>\n

    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:<\/p>\n

    Don’t scale images with HTML, resize them.<\/strong>\u00a0If 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,\u00a0resizing the image makes it 6x smaller<\/strong>.<\/p>\n

    \"OptimizeScaled 600×600 image (62kb)<\/div>\n
    \"OptimizeUnscaled 200×200 image (10kb)<\/div>\n

    Your images don’t need to be print quality.<\/strong>\u00a0Consider 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\u00a0over 6x smaller<\/strong>.<\/p>\n

    \"OptimizeOriginal JPG image (54kb)<\/div>\n
    \"OptimizeMedium-quality JPG (8kb)<\/div>\n

    Eliminate whitespace.<\/strong>\u00a0You 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\u00a0page<\/a>.<\/p>\n

    Use YSlow’s built-in Smush.it tool.<\/strong>\u00a0This tool further optimizes images by removing unnecessary bytes from the image file. This great thing about this process is that it typically reduces file size by 20% (exact figures can be found with Smush.it), yet won’t affect the quality of an image. When you open up YSlow and access the “Components” tab, you’ll see an option to “Smush.it” in the Action column for images. Click the “Smush.it” link to compress your image. Compressing an image with Smush.it should be the last step you take to optimize your images. Anytime you resave or recompress an image with your image editor, you’ll want to run your image through Smush.it to ensure that it’s as small as possible.<\/div>\n

    Keep it local<\/strong>. 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.<\/p>\n

    CHOOSE THE RIGHT DISPLAY OPTIONS FOR YOUR FEATURES.<\/h3>\n

    Limiting\u00a0the number of\u00a0embeds 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\u00a0having only 1-2 RSS and text boxes will greatly improve the speed and usability of your main page.<\/p>\n

    Pick\u00a0your favorite RSS and display it in\u00a0Title view.<\/strong>\u00a0RSS 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\u00a0instead 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\u00a0outside website.<\/p>\n

    Don’t go all-out with blog posts.<\/strong>\u00a0You 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.<\/p>\n

    Think about what you’re putting inside your text boxes<\/strong>. Though you can add up to\u00a010 text boxes\u00a0to your main page, try keeping this number down to 2-3.\u00a0In these text boxes, try putting the most lightweight widgets, and lightweight HTML code to show awesome custom content while keeping your main page speedy.<\/p>\n

    MINIMIZE CUSTOM CSS AND JAVASCRIPT.<\/h3>\n

    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,\u00a0do you need it?<\/p>\n

    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.<\/p>\n

    Network Creators who use a good amount of custom code will want to follow these advanced guidelines:<\/p>\n