Excerpt from:  Marketing. Communication. Results.
.
May 28, 2008

Blog Rendering Performance Suffers With Lots of Embedded Objects and Images

As the velocity, volume, and types of information objects grow in your Web 2.0 content strategy, a key success factor will become performance and agility.
We determined that performance issues could be mitigated if blog posts had a "display context".

Do you wonder how often visitors abandon your Web page before it has finished loading? In his book, Designing Web Usability, Jakob Nielsen states that a fast load time should be your most important design consideration. This comes from the Internet's leading usability guru.

Have you noticed [sometimes] when you have lots of posts, your blog page begins to slow down? You might be thinking the problem is your blog server, the blog platform you use, or your blogging service provider. But you shouldn't assume the problem is so easily diagnosed. Before jumping to conclusion, take your blogsite URL over to WebsiteOptimization.com and get a detailed analysis of the performance (or lack thereof). This tool will provide some insights concerning your blog (or website) performance.

Typically, the problem is related to a high number of images or embedded objects. This is usually not a problem for websites because those pages are generally static and contain few embedded objects and images. However, blogs have a greater likelihood of containing things like YouTube videos, flash components that show real estate search and features. Blogs are also a high-velocity content environment -more pages are written in a blogsite in one month than most websites see in a year. So blogs have a higher incidence of performance problems.

If you use lots of photos or embedded resources (IDX is a popular one for real estate) that require scripts and iFrames, your are likely to see display degradation for your pages, especially since most blogs show all posts for the current month or some portion of an adjacent month. Imagine 20 posts, and two thirds of them reference a script-based plugin that is on another server. Each of the 13 requests for the embedded script components must execute across the web to the servers where the information is retrieved before the next embedded object request can be serviced. And your blogsite home page cannot render until all requests are completed. Frankly, I'm surprised this works as well as it does - good thing most of your visitors have a T1, or do they? ;-)

The same issue holds true for images. While your blogsite home page may be just 30k bytes in text, the images might be another 3 to 7 megabytes. All those image requests must come down to the browser and from servers that are likely not where your blog text content is hosted. I see lots of folks using Flickr - notoriously sluggish (at times). But your visitor's browser must wait patiently for all images to fully download before rendering your blog pages unless you've meticulously added HTML height and width attributes for all the images in your pages.

Addressing this issue is not easy, but we've taken an approach in our own platform that's unique and seems to help. We determined that performance issues could be mitigated if blog posts had a "display context". This means that when posts are viewed as a collection (i.e., lots of posts together on your blogsite home page), what is displayed could (or should) be different from that which is shown when the post is displayed by itself.

Imagine a post that contains an embedded script component. It displays fully when someone searches Google and lands on that specific post as a page by itself. But, when the post is displayed as part of a collection of many posts, it magically detects the display context and suppresses any calls to the embedded script. You can see an example here - this post displays the embedded video component when it is shown by itself. But when it is in a collection of posts (such as the April archive), the video is suppressed.

We call this approach "context scoping" and we've designed a wide range of "scopes" that authors can use to control the display context of any embedded objects, images, videos, graphical quotes, etc. Other interesting use cases for context scoping are immediately apparent once you grasp this idea.

  • Imagine embedded property ads that display at the footer of your site when (and only when) the visitor is viewing a specific post.
  • Imagine a contact form that is displayed only when a specific category of post is being viewed.
  • Imagine a syndicated feed about related news is displayed embedded in a post.
  • Imagine certain images are displayed in a post only when you are logged into your blog as an author.

As the velocity, volume, and types of information objects grow in your Web 2.0 content strategy, a key success factor will become performance and agility; display context provides the agility to affect performance (and useability) in positive ways.

Syndication OptionsRSS (Rich Site Summary) Feed Atom Feed OPML (Outline Processor Language) Feed MYST-ML (MyST Markup Language) Content Feed MS-Office Smart Tag Subscription