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

“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

Agile development is collaboration…

Being a newbie to User Experience Design (UX), I find myself working very hard to gain a greater understanding of software development and the needs of the development team. Now, of course, in more recent years I’ve also seen a significant focus on the application of agile development methodologies. In an effort to familiarize myself with  Principles of Agile Development, I researched modern applications. My understanding is that the focus of these principles is on these attributes: collaboration, expedition, simplicity, adaptability, viability and sustainability; all of course in the name of exceeding the needs of the client. Seems like common sense doesn’t it? But guess what? It took a team of developers about 10 years ago to verbalize what we, as children of technology, should all be consciously doing as we continue to strive for excellence. As I aspire to mastery of User Experience Design and personal excellence, understanding these methodologies has become essential to my growth. In a very general way, these principles have very practical applications, but let’s examine how these can apply specifically to the practices and processes of the UX team member(s).

Ways to Apply Principles of Agile Development to UX

Direct Collaboration Throughout the Development Lifecycle

 At its very root, agile development is collaboration. It would not be possible to do so much, so quickly and so efficiently without a collaborative team effort and constant open communication. Face-to-face communication and collaboration for overall and constant assessment is integral with the:

Client – to discover needs and gain insight, develop objectives mindful of end-users, get regular input on ideas, designs, etc.
Project management team – to review and understand requirements, stay focused on short-term goals (sprints), and remain in scope.
UX team members – to understand project needs, expectations, plans, optimal delegation and execution of sprint tasks delegate and quickly execute elements of the sprints.
Development team – to understand limitations and feasibility of UX proposals, and to plan and synchronize implementation of various portions of the sprints. Less time will be spent documenting, since rationale can be communicated directly to dev. According to UXer Austin Govella, this collaboration with dev also affords the opportunity to sync the current UX sprint to developments next planned sprint.

Frequent and Expeditious Delivery

 

Let’s face it: UX work can be very tedious and not so time friendly. Many of UX deliverables consist of some form of detailed documentation. A favored tool of UXers is the digital wireframe, meticulous in detail with tons of screens rendered to convey user stories and the minutest of interactions. Thus, our work can be quite contrary to agile processes, which are about maximizing communication in order to minimize unnecessary documentation and misplaced work efforts. Agile Coach and fellow UXer JC Grosjean puts heavy emphasis on choosing the most appropriate tools that are not just effective and allow for the quickest execution, but are also highly collaborative and great for communicating design elements. Tool selection will also aid in the development of milestone timetables.

Let me emphasize, as pointed out by Kathrin Peek, CURTIS Digital’s Lead UX and one of my mentors, this process of selecting tools is done once you have gone through the preceding process of uncovering who the user is and what their needs are. Below are a few options:

User flows – I am a believer and huge proponent of this step. It allows you to map the entire flow of your objectives, and clearly distinguish processes that may require high or low fidelity tools to further assist the UX design process.
Paper Prototypes – It’s the quickest way to communicate an idea. Prototypes can also be interactive depending on the software and methods chosen to prototype; i.e. sticky notes in conjunction with a whiteboard vs. Axure RP.
Whiteboard wireframes – An exercise that might be the most collaborative and adaptive tool in the agile UX design process.
Balsamiq sketches – This software allows for rapid low-fidelity digital sketching with an easily accessible library of common UI components.

Flexible, Easily Adaptable Work and Processes

 

This goes hand in hand with the tool selection to ensure expeditious delivery. The tools are paramount in determining the flexibility of your processes for development and work output. “Modular Web Design” is an interesting book from  Nathan A. Harris about establishing a design system whereby there are foundational elements of designs and assets that can be reused, adapted and updated as needed. There is definitely something to be said about not always working from a blank canvas. Obviously UX work is not something that can be standardized similarly to McDonald’s processes, but there are ways to make our work consistent as well as reusable.

• Research – from the steps used to conduct the research, to who will conduct it and which tools are used.
• Diagrams – Adaptive Path’s Jesse James Garrett clearly outlined  “a visual vocabulary” for the flow diagram process. Let this idea of having a “visual vocabulary” be the foundation to determine design standards.
• Documentation – Consistent language, formatting, and usage goes a long way. Establishing templates for ALL forms of documentation leaves little room for confusion.
• Wireframes & prototypes – Everybody has their own method for creation, their own patterns, and libraries to which they refer. However, pooling resources of the team and agreeing on the best standards, and thereby establishing and adopting a universal standard will create a harmonious synergy within the UX team as well as between UX and development.

Thoughtful UX Designing for Viability

The great thing about agile principles is that they are congruous. I say this because thoughtful design is far beyond artistic creativity and even design literacy. It is more about being knowledgeable in all areas relevant to the experience design. And for us, if you have truly worked collaboratively, then you have discovered from:

Your client – What they see the potential enhancements are, what they envision and if they can articulate this vision as well as what their expectations are of you to translate this vision. Stakeholder interviews hopefully will also unearth valuable information about their end-users.
Project management – what is expected from the UX Team,and the parameters to help guide the project schedule and production.
Your UX team – their findings on who the user truly is and, their ideas on how best to cater to that user’s experience, and finally their design strengths and most effective ways to contribute to the team.
Development team – which UX ideas can be developed and which require potential alternatives and offer explanations for what, why and how ideas will be  executed.

Simple to Understand = Simple to Use

Ultimately, the goal of UX is to enhance the end-users’ experiences of websites and software apps by:

• Clearly and intuitively guiding them to desired objective/goal.
• Making the paths to meet user objectives as quick as possible to navigate.
• Creating an enjoyable journey.

What if we used these goals as guiding principles for our work and processes as UXers in general? Imagine that our approach to collaboration with the team and cross-functional teams was simplicity;  simple rationale, documentation, methods and processes.

 Is Sustainable UX Possible?

What does sustainable even mean, right? Essentially, it is something that is built to last. Indubitably, there is a paradox in having the mindset of endurance, as obsolescence is an inevitable occurrence in fields related to technology. However, the hardest part of UX is the actual organization (architecting) of information to ensure its “findability .” This part of our work is what I believe can be relatively sustainable. Surely there will be needs to edit, add, modify, etc. But the most prevalent change are the methods and technology by which we design this path to finding the information, as they most certainly will evolve. Think of it this way: You can look at a map and see where something is in relation to everything else, but the methods that enable you to get there today, may be very different tomorrow. This notion isn’t concrete, but you get the idea.

Effortless Execution of Agile UX

No. Not really. Organizations are cutting back. Let’s be real. There are many UXers that are freelancers or consultants. Human resources are running low, so having a project manager may even be a luxury. Having such close, regular communication with the development team may not be realistic either, especially if they are outsourced. Language barriers can also come into play with a remote team. With collaboration of multiple teams being such a significant part of Agile Development, these common challenges already make application of its principle another a hurdle. How practical is frequent and regular delivery of portions of your work? It seems like such fragmental thinking. I imagine that for development, it may be easier since they can look at something in terms of code snippets. But, for User Experience Designers, we consider the whole picture; not just the technology, but the business and marketing aspects as well. Agile UX is definitely something to be mastered, but it has its place and time for appropriate usage.

Has a User Experience Designer ever had a client seek their services specifically to augment a SEO plan?

What User Experience Designer has ever had a client seek their services specifically to augment a search engine optimization plan?

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.

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.

Marie Kondo has set the world on fire with the release of her bestselling decluttering guide The Life-Changing Magic of Tidying Up and the related Netflix series Tidying Up, which is perfect binge watching material!

At CURTIS Digital, we provide custom designed software and websites that not only meet the fast-pace technological demands of today, but also adapt to current client and market needs. Our service lines focus on custom software development, web development, and UX design. Our Austin-based company, made up of highly skilled engineers, has worked with an eclectic group of clients ranging from large enterprise businesses to medium-sized and small businesses.

Perhaps you’ve heard of Donut. Donut is a bot, and he (yes — Donut is male), pairs colleagues for coffee chats. He runs through the office chat app Slack, and he’s not in the bot pen alone. Slack, the messaging medium of choice for 3+ million daily users, hosts over 150 chatbots.

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.