Max Kiesler - Responsive Designer

Decrease Load Time and Increase ROI in Web 2.0 and AJAX Sites


Posted on 6th February, by max in Writing. Comments Off

image In this article I’ll be explaining the concept behind content encoding and discussing how this issue relates to web 2.0 web and AJAX sites. Next, I’ll be showing some examples of web 2.0 sites that are using this technology and those that are not. I will also do some simple tests with a few of the sites that are not currently using HTTP compression, to show what the benefits would be. Finally, I will give you all the resources you need to need to implement content encoding on your own website.”

The Concept and How the Problem Relates to Web 2.0 and AJAX Sites

rnThe concepts behind content encoding are very easy to understand. For example, when you download an image from your digital camera and make that image ready to upload to your website, you would compress the raw image from your camera to a format like gif, jpg or a png. In most cases, the images that are sent to you by websites are delivered in a compressed format, significantly decreasing the file size of the image. However, in most cases the html code, page content, css, and javascript files are delivered “raw.” Most of these files can be compressed from 20% to 80% or more, decreasing the overall page’s load time. This has the direct effect of keeping your users satisfied with an efficient web service and coming back, which in turn increases the ROI of your site.”Most next generation Web 2.0 sites are driven by content. Also, many of these web applications use AJAX on their front-end. Javascript files, libraries and HTML content can represent a significant load time for the end user. Given that performance (and server up-time) has become a growing concern for both designers and developers in the web 2.0 space, content encoding and compression is critical. In my recent study of many social bookmarking, search, blog and web 2.0 sites, a fair number of them are not using content encoding and deliver web pages to you uncompressed. What does this mean to you as a user? In most cases, it means more than twice the load time as necessary. “rnAt this point you might be thinking, “is this is going to take years to implement, and cost millions of dollars?” Surprisingly, the answer is no. In most cases there is little or no cost, and it can take as little as 10 minutes to implement for an entire website. HTTP compression technology has been around for a long time, and is well documented and tested. Recently as performance issues and ROI are becoming a greater concern for web businesses, many companies are turning to HTTP compression as an easy to implement strategy for decreasing bandwidth. For large and small web companies alike, less bandwidth equals a cost savings, whether you have a personal blog or social bookmarking system with millions of daily visitors. “

The Tests

rnAs a quick sample, I tested some of the sites I go to every day. The methodology was to use WebSiteOptimization.com’s Web Page Analyzer and test each site to see if they where using HTTP compression.”If the site was one of the three sites chosen for the extended test, I then viewed the pages source in my browser, made a copy and saved it to my desktop. Next I uploaded the file to my server (Apache) and tested it. I then added the one line of code to the top of the page to enact the zlib compression and re-tested. I chose this method so I was only testing the html content of the page. What was not tested as far as content encoding was javascript, css or any other associated files. All of these file types can and should be encoded as well. “rnMaxKieslerrnWithout Compression: HTML: 43809 bytesrnDownload Times – Connection Rate – ISDN 128K – 11.59 seconds”With Compression: HTML: 8337 bytesrnDownload Times – Connection Rate – ISDN 128K – 9.43 seconds”TechMemeorandumrnWithout Compression: HTML: 43809 bytesrnDownload Times – Connection Rate – ISDN 128K – 11.59 seconds”rnWith Compression: HTML: 15524 bytesrnDownload Times – Connection Rate – ISDN 128K – 1.64 seconds”RawSugar – search ruby on railsrnWithout Compression: HTML: 109508 bytesrnDownload Times – Connection Rate – ISDN 128K – 6.68 seconds”With Compression: HTML: 16381 bytesrnDownload Times – Connection Rate – ISDN 128K – 1.00 seconds”rnOther sites not using HTTP compressionrnFeedBurnerrnpopulicio.usrnredditrnBloglinesrnBlogger”Sites that are using HTTP compressionrnTechnorati”del.icio.usrnDiggrnsix apartrnWordPressrnBlinklist”

The Resources to Compress Your Website

rnAs stated above you can and should compress all of the files associated with your website. Javascript, css, html, and content can all be encoded and compressed. There are several ways to encode you content including through your server, through software applicaitons, in your htaccess file if you’re on Apache, or in the web page code itself. Below you’ll find a list of categorized links which should give you all of the information you need to compress your website.”Javascript CompressionJSMin – The JavaScript MinifierrnJSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.”Apache Server Side Compression rnCompressing Web Output Using mod_deflate and Apache 2.0.xCompressing Web Output Using mod_gzip for Apache 1.3.x and 2.0.xCompressing with .htaccess Using Apache and phprnIf your server is running php just add the following line of code to your .htaccess file.”php_flag zlib.output_compression On”Sample code to compress your web pages on an apache server running phprn

rnrn<?phprnob_start( 'ob_gzhandler');rn?>rn<html>rn<head>rn</head>rn<body>"<p>This web page is now COMPRESSED!</p>rn</body>rn</html>rn

rnIIS Server Side Compression rnhttpZip 3.5 for IIS 4/5/6rnhttpZip is an IIS server module for ISAPI-based compression on IIS 4, 5, and 6.0 Web servers. The software compresses static and dynamic Web content using encoding algorithms supported by all modern browsers, with flawless decompression secured by real-time browser compatibility checking."rnTurboIISrnTurboIIS is HTTP compression software for your Windows Server which accelerates the delivery of webpages. Compressing and optimizing files means less data to send so your server can send more data per minute, therefore fewer servers are needed.The integrated TurboCache feature prevents redundant access to database resources, speeding up page download times even more."IIS AcceleratorrnThe IIS Accelerator speeds up Web sites running on Microsoft IIS Web servers. Designed as an ISAPI filter, it smoothly integrates into your IIS environment. "Proxy-Based CompressonrnWebsite AcceleratorrnThe Website Accelerator reduces the transfer volume of static and dynamically generated web sites down to a fraction of the original size and proportionally speeds up the load time performance. This results in a better Internet experience for the Web site visitors and in reduced traffic costs for you."rnHyperWebrnOur HyperWeb series of products accelerate web-based applications, e-commerce and high-volume web-sites for both wired and wireless user bases. HyperWeb allows for dramatic reduction in bandwidth, hardware, software and human resource expenditures.rnHyperWeb is dynamic HTTP compression software for your existing web architecture. Designed to function as a stand-alone process (daemon) existing outside of the web server, HyperWeb eliminates the need to invest in additional costly hardware."Software CompressonrnHTML Compress 5.5rnDownload HTML Compress 5.5 which supports VBScript, JavaScript and CSS. HTML Compress will optimize the site making it smaller Without altering the appearance of the page. The fully customizable optimization algorithm supports XML, and you can add support other HTML like files."HTML Compact"HTML Compact is a powerful HTML compression tool created for webmasters. Its effective compression algorithm can reduce the size of your pages by as much as 80% while keeping the appearance of the page the same. When implemented, the documents will be uncompressed in the user's browser, delivering the page exactly how it looked before compression. By using HTML Compact, your web pages will become much smaller which results in faster load times, saving you both bandwidth and disk space."HTML Protection RocketrnHTML Protection Rocket is an amazing and easy-to-use tool that protects (and reduces in size) your HTML and JavaScript code:"HTTP compression Analysis For Your WebsiternWeb Page AnalyzerrnFree Website Performance Tool and Web Page Speed AnalysisrnEnter a URL below to calculate page size, composition, and download time. The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time. The script incorporates best practices from HCI research into its recommendations."rnPipeBoostrnSimple Real-time URL Compression Reports."Port80 ToolsrnHTTP Analysis Tools for Testing Port80 Software Products"Website Compression and Performance ResourcesrnWebSiteOptimization.comrnHTTP compression, otherwise known as content encoding, is a publicly defined way to compress textual content transferred from web servers to browsers. HTTP compression uses public domain compression algorithms, like gzip and compress, to compress XHTML, JavaScript, CSS, and other text files at the server."rnWebPerformance.orgrnA repository of Web performance data on compression, caching, and measurement approaches."SummaryrnHopefully the take away from this article to the web 2.0 and AJAX community is that HTTP compression is easy to implement and very cost effective. It's a benefit to both you and your website users by facilitating lower bandwidth usage and faster load times. In short, there is no reason not to adopt HTTP compression on every website. "Also SeernAJAX and CSS Optimization - Digg.com"Port80 Surveys HTTP Compression on the Top 1000 Corporations' Web Sites"rn[Technorati tags: , , , , , , , , , , , , , , , , , , , ]rn





Comments are closed.