“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
