Category: Technology

MTV Names Artist Growth Best Music App

Austin, TX โ€“ CURTIS Digital, a leading technology service company, is proud to announce the app it developed for Artist Growth has been named Best Music App by the MTV O Music Awards.

Read More

AWS Glacier – Big & Slow But Cost-Effective & Good

When it comes to cloud services and software, Amazon has been one of the pack leaders for quite some time. The company recently released a new cloud storage service that promises to revolutionize how businesses consider their backup needs.

Read More

The Importance of Infographics in Conveying Information

According to the Social Science Research Network, 65% of the population are โ€œvisual learners.โ€ Within any given market, a significant spectrum of the potential audience is comprised of people who are more likely to respond to image-based media than to paragraphs of text. Kissmetrics suggests that articles with images get 94% more views than those without.

Read More

Should a UX Designer Know How to Code?

Is the architect expected to know everything about construction or welding?

This topic of discussion has been passed around the Internet for quite a few years now and elicits passionate responses from both sides as well as every point of view somewhere in the middle.

Read More

Reasons to Have UX in the Development Cycle

Most technology products are designed to be used by a person, making the analysis of user experience (UX) an important factor in their design and development. UX is more than just designing a good user interface, a stylish and eye-pleasing design, usability testing, bug fixing, or customer satisfaction.

Read More

The Importance of a Great Project Manager

Over 50% of IT projects fail as a direct result of poor project management practicesโ€ฆ

Project management is defined as the application of knowledge, skills, tools and techniques to project activities to meet project requirements. โ€” PMBOK

Read More

Why is Webpage Optimization (WPO) Needed?

“First and foremost, we believe that speed is more than a feature. Speed is the most important feature.”
Fred Wilson, Tech Venture Capitalist, Future of Web Apps Conference 2010

What is Web Performance Optimization?

Web Performance Optimization (WPO) is the process by which individual aspects of web pages are optimized to improve site performance. The term is often used interchangeably with that of search engine optimization (SEO), but it is actually much more focused than that. While the broader strategies for SEO involve several external aspects like social media participation, link building and content, web performance optimization concentrates on optimizing and improving the internal metrics affecting the speed of a site.

The 2 Second Rule? It’s Outdated

According to Forrester Research, user expectations in relation to site load times have significantly increased every year. Back in 2006, the majority of users were happy to wait 4s for a page to load. By 2009, the expectation had shifted downwards to 2s. The result? The industry became content with striving for the two-second rule. For a while those golden 2s became the benchmark of web performance. It seems that it was not to last.

Harry Schum, a Microsoft speed specialist interviewed by the New York Times, argues that the magic number is now closer to 250ms. That’s right, in less than a second, a site is open to losing its competitive advantage. Schum’s colleague, scientist Eric Horvitz, backs this idea up by stating that “the old two-second guideline has long been surpassed on the racetrack of Web expectations.” Waiting for a slow web page to load is an incredibly frustrating experience for visitors. That window of opportunity when a visitor will decide whether or not to stay on a particular web page is becoming increasingly limited.

What Do Optimized Sites Stand To Gain?

Achieving peak performance in less than a second will offer a site much more than the adulation of Google and its counterparts. Optimizing a website to this extent is going to bring gains to a host of important factors.

Improved Search Engine Ranking

The process by which search engines determine a page’s overall ranking is complex — understanding the exact algorithms and weighting remains the holy grail of SEO. We do know that latency and page load time are factors in an overall SEO ranking. Successful performance optimization means that page load time will decrease; hence, a higher search engine ranking and increased traffic should naturally follow.

Enhanced Crawl Time

Canadian-based optimization experts, Strangeloop, conducted a customer study that proved the googlebot webcrawler was able to crawl twice as many pages of a site after it had been optimized. Search engine ranking and traffic are directly affected by how many site pages can be crawled in a given period and subsequently indexed.

Page Views

The number of page views is admittedly less important than the bounce rate of individual pages, but nonetheless it remains a measurable performance indicator. Several of the big names in ecommerce have undertaken performance redesigns and seen a corresponding increase in page views. At Velocity 2009, Phil Dixon, VP of Engineering at Shopzilla.com, reported how their efforts to reduce page load time had resulted in a 25% increase in total page views.

Increased Revenue

Numerous studies have proven that site performance is key to online success and that conversion rates are directly affected by page load times. The Gomez Performance Indicator, devised by Compuware, found that a decrease in page load time from eight to two seconds resulted in a 74% corresponding increase in conversion rates. Former Amazon employee, Greg Linden refined it further than that when he states that for every additional 100ms it takes for their site to load, the global retailer loses 1% of sales.

Reduced Operating Costs

A site that has been well optimized has an increased reliance on cached copies and handles a reduced number of requests in order to load content quickly. An increased reliance on cached copies of the site results in reduced CPU and bandwidth usage. For a company operating its own data centers, caching optimizations can result in some serious cost savings in terms of CPU power and bandwidth usage. The same is true of capital expenditure in terms of reduction in the required spend on server quantity and performance.

Real World Examples

Steve Souders points to three real-world examples of companies who had reaped the benefits of improved performance.

Shopzilla

The shopping comparison site increased the speed of their site by just 5s. In response, they managed to cut their server load in half, gained increased conversions of up to 12%, and doubled the amount of traffic from organic search.

Mozilla

Cutting the load time of their landing pages by 2.2s saw an increase of 15.4% in download conversions; a significant increase that amounts to an extra 60 million annual Firefox browser downloads.

Netflix

The on-demand streaming media company adopted a single optimization, gzip compression that led to increased speeds of 13-25% and decreased their outbound network traffic by a half.

The Worldwide Wait: What’s Causing The Hold-Up?

The performance of an individual website can be looked at in terms of backend and frontend. Backend load times are used by generating the required HTML and similar resources. In practice, these tasks are not going to take all that long; it’s the frontend that tends to cause the delay. Optimization specialists, Blaze, describes four trends in the frontend bottleneck that account for up to 90% of user wait time.

Content

Since 1995, average page size and objects per page have grown 35x and 28x respectively. This is driving up load times for the frontend.

Client side code

Old school sites written in simple HTML with a few graphics thrown in for good measure are a thing of the past. Modern sites incorporate heavier code like JavaScript, AJAX and HTML5.

Third-party content

The phenomenal growth of social media and the various share buttons (Like, Tweet, +1) plays a part. Sharing may be caring but it’s having a significant impact on performance and rendering.

Mobile browsers

By 2014, mobile internet is set to take over desktop internet usage. The mobile web with traditionally weaker processing power and slower connections makes frontend optimization critical for mobile internet.

Best Practices for Effective Web Performance Optimization

The Exceptional Performance team from the Yahoo Developer Network identifies seven categories where best practices for improving website performance can be applied.

Content

  • Fewer HTTP Requests — Reduce components on a page by simplifying the design or use techniques like combined files, CSS Sprites and image maps to reduce HTTP requests.
  • Reduce DNS Lookups — Limit the amount of unique hostnames to reduce parallel downloading and the number of DNS lookups.
  • Avoid Redirects — Avoid degrading the user experience and use Alias and mod_rewrite for code paths on the same server or, in the case of domain name changes, create a new CNAME.
  • Make AJAX Cacheable — Optimize AJAX performance by making responses cacheable.
  • Postload Components — Post-load appropriate content and components to improve initial rendering speed.
  • Preload Components — Take advantage of browser idle time to request components required later.
  • Reduce the number of DOM Elements — Opt for semantic methods of markup to avoid excessive download speeds for complex pages.
  • Split Components Across Domains — Maximize parallel downloads between 2-4 domains.
  • Minimize Number of iFrames — Use effectively by placing HTML documents in the parent document.
  • Avoid 404s — Avoid HTTP requests for essentially useless responses.

Server

  • Use a Content Delivery Network (CDN) — Disperse static content across multiple locations to improve network proximity to end users.
  • Add Expires or Cache Control Headers — Implement a “Never Expire” policy for static components and use Cache-Control header for dynamic components.
  • Gzip Components — Improve response times by using Gzip compression to reduce the size of HTTP response.
  • Configure ETags — Reduces HTTP header size for initial and subsequent requests.
  • Flush Buffer Early — Save browser idle time by flushing within the HEAD.
  • Avoid Empty Image Sr — Avoid additional server requests from the browser.

Cookies

  • Reduce Cookie Size — Minimize impact on user response time by eliminating unnecessary cookies and reducing the size and setting expire dates for those required.
  • Use Cookie Free Domains For Components — Host static components on a subdomain to avoid unnecessary network traffic.

CSS

  • Put Style Sheet at Top — Allow pages to render progressively by placing stylesheets within the HEAD document.
  • Avoid CSS Expressions — Use one-time expressions to stop expressions being evaluated repeatedly.
  • Choose <link> over @import — Using @import in Internet Explorer forces CSS to the bottom of the page.
  • Avoid Filters — Use gracefully degrading PNG8 to avoid rendering blocks and browser freezes.

JavaScript

  • Put Scripts at Bottom — Use the DEFER attribute to force JavaScript to the bottom of the page.
  • Make JavaScript and CSS External — Use external files for browser caching with the exception of home pages where inlining should be used.
  • Minify JavaScript and CSS — Remove unnecessary code characters to reduce size and improve load time.
  • Remove Duplicate Scripts — Implement script management in the templating system to avoid multiple HTTP requests.
  • Minimize DOM Access — Avoid DOM access with JavaScript to boost page response metrics.
  • Develop Smart End Handlers — Use event delegation to avoid the problem of excessive event handlers.

Images

  • Optimize Images — Check palette size is optimal and convert to PNG format.
  • Optimize CSS Sprites — Arrange images horizontally and combine similar colors for a smaller file size and increased mobile compatibility.
  • Do Not Scale Images in HTML — Do not use bigger images than needed.
  • Make Favicon.ico Small and Cacheable — Keep under 1kb and set Expires header.

Mobile

  • Keep Components Under 25kb — The iPhone will not cache components that are larger than 25K.
  • Pack Components into a Multipart Document — Fetch multiple components with a single HTTP request.

A Piece of a Larger Puzzle

Web performance optimization and site performance are crucial to success on the web but when all is said and done, it is but a piece, albeit a significant piece, of a much larger puzzle. Success will need many forms of input including off-page optimization, whole site optimization and inbound marketing.

https://developer.yahoo.com/performance/rules.html

Read More

Progressive Enhancement – A Business Primer

Maximize the number of users who can access your content.

History of Progressive Enhancement
Throughout the history of web development, web designers have focused on giving computer users the greatest possible experience that they could receive on the most sophisticated browsers.

Read More

Using Inheritance Patterns

I want to introduce/reinforce a pattern for developing large applications with jQuery. I did not invent any of this, but I find that the resources that describe this technique are few and far-between.- so Iโ€™m taking a shot at it.

Read More