YSlow

This month’s 20 21 best new web performance links

31 Mar 2011

2 Comments

It’s always interesting to look back at the performance-related articles, posts, and reports I’ve read over the previous month and try to frame them as a snapshot of our industry. If I were to do that now, I’d say that March wasn’t a month of sexy studies and flashy numbers. Instead, it seemed to mostly be about getting our hands dirty — refining our performance measurement tools and getting into the finer nuances of optimization.

How-to’s and case studies

Mobile comparison of Top 11
 Steve Souders talks about how to use Jdrop to gather, analyze and share mobile performance data.

Speeding Up Your Website’s Database
 Good how-to piece from Smashing Magazine that explains how a database can slow down your site, and how to speed it back up.

YSlow/Chrome hacking
 Excellent post from performance expert Stoyan Stefanov on hacking the brand-new YSlow for Chrome.

Automating HTTPWatch with PHP
 Another good how-to from Stoyan. This is a three-part post about automating and scripting HTTPWatch to perform various “monitoring-like” tasks.

How You Doin? 5 Free Ways to Check Your Site Performance
 Linda Bustos at Get Elastic wrote a great post rounding up free tips and tools for analyzing five different aspects of your website’s health: competitive benchmarks, backlinks, social sentiment, business ratings, and of course, site performance.

Getting ‘mobile-ready’ part 1: Creating a mobile-optimized website
From the Google Mobile Ads blog, a guide for creating your mobile site. Note my favourite, tip #4. Optimize, optimize, optimize.

Testing and Optimizing Single Page Web 2.0/AJAX Applications: Why best practices alone don’t work any more
 Andreas Grabner explains why Web 2.0 applications can’t be optimized with best practices alone, and offers some good tips for testing and optimizing.

Faster page loads with image lazy loading
From the Slideshare Engineering Blog comes this great case study demonstrating how the folks at Slideshare implemented lazy loading to postpone loading of thumbnails and other below-the-fold images. The result was pages that loaded up to 10 seconds faster.

Tools and performance measurement

Please welcome YSlow for Chrome
Yahoo! announced the beta release of YSlow for Chrome, which works in much the same way as their Firefox add-on.

Google Page Speed Online
Now you can bypass the extensions and access PageSpeed online to analyze the content of a web page and get suggestions to make that page faster.

Above-the-fold render time (AFT) on WebPagetest
Google’s Jake Brutlag demonstrated this new feature at Velocity Online. It runs in tandem with video capture to analyze screen shots to identify the time/frame at which browser window visible content is rendered.

Measuring Page Performance
Yahoo! performance engineer Shanti Subramanyam’s thoughts on perceived and above the fold timing (AFT) for web page response time.

HTTPArchive
A great resource for anyone who really wants to get their hands dirty, this open-source archive lets you see and analyze performance data and trends aggregated from almost 18,000 websites. The description from the archive’s mission statement:

In addition to the content of web pages, it’s important to record how this digitized content is constructed and served. The HTTP Archive provides this record. It is a permanent repository of web performance information such as size of pages, failed requests, and technologies utilized. This performance information allows us to see trends in how the Web is built and provides a common data set from which to conduct web performance research.

Velocity news

Velocity online conference – March 2011
Good review of last week’s Velocity Online Conference from Yahoo! performance engineer Praveen P.N.

Velocity Conference 2011
O’Reilly announced the dates for this year’s Velocity Web Performance & Operations Conference (June 14-16) and began to roll out the schedule. Very exciting to note that — in addition to the operations, performance, and culture tracks — there will also be a mobile performance track. Also exciting to note the tagline for this year’s event: “Automated, Optimized, Ubiquitous.”

Awards

Gomez’s Best of the Web 2010 Web & Mobile Performance Awards
This is Gomez’s second annual report showcasing the leaders in website and mobile web performance in six major industries nationwide: retail, travel, media, healthcare, government, and financial services.

Cloud performance

The Era of the End User
In the lead-up to Cloud Connect, BitCurrent released a very readable report called The Era of the End User, which discusses the cloud, user experience, and internal productivity. Among other things, the report posits that, in the future, the efficacy of websites and web applications will be measured by a formal metric like “cost per visitor-second.”

Browsers and connectivity

Internet Explorer 9 Network Performance Improvements
From Microsoft’s IE blog: A really good explanation of how browser bottlenecks occur and how IE9 addresses these issues.

The History of Internet Usage And Speeds
A whole bunch of statistics you probably already know, presented in a brand-new set of infographics. If you’ve been looking for a graphic that compellingly illustrates global stats on IP traffic per internet user, your search is over.

Third-party content

Your Web, Half a Second Sooner
Google’s been hard at work addressing known latency issues with their AdSense code. Recently announced on the Google Code blog: New AdSense javascript means that “the latency overhead from our ads is basically gone.”

Just for fun

What If Lag Seeped Into Real Life?
What would your life be like if latency affected everything you do? This animated video addresses this very serious and important question.

You can find all of these links (and many, many more) on the WPO Hub, which Strangeloop launched earlier this month. We’re working hard to keep it up to date with the best performance-related research, case studies, and blog posts we can find.

Related posts:

By: Tammy Everts Category: Tags: , , , , , , , , , ,

Almost half of the top 1000 retail websites don’t follow two easy performance best practices. Does yours?

22 Oct 2010

13 Comments

I’m hip-deep in data from a big research project (the topic is still under wraps) that we’re working on here at Strangeloop. We’ve been studying the top 1000 online retailers, and we noticed a trend so significant that it merits some attention of its own.

Check out these charts showing how the top 1000 retail sites rated with two page speed scores: Keep-alive Enabled and Compress Text.*

Alexa Retail 1000: Page speed score for keep-alivesAlexa Retail 1000: Page speed scores for text compression

Summary

  • 85% of these sites use keep-alives.
  • 53% do compression.
  • But when I overlaid these two sets of numbers, I was surprised to find that 47% don’t do one or the other.

These are two of the easiest, lowest-hanging fruit on the performance optimization tree, and almost half of the leading retail websites aren’t taking advantage of them simultaneously.

Keep-Alives

TCP connection is the process by which both the user and the server send and receive acknowledgment that a connection has been made and data can begin to be transferred. Too many TCP connections will slow down your site. It’s not easy to speed up TCP connection, but you can control how many times the connection takes place.

If you’re an exec/marketing manager: First, test your site and get its keep-alive score. If it’s anything less than an A, then take a look at your site’s waterfall chart. (Here’s a quick primer on how to interpret this chart.) If you’re seeing a lot of orange bars, you have a problem that could be fixed by using keep-alives.

If you’re in dev/ops: Make sure you have the proper configuration on your servers and load balancer. Also, we saw a number of CDNs that don’t do keep-alives properly, so keep your eyes open for lots of orange bars on content coming from your CDN.

Compress Text

The average size of the web pages we studied is 836kb, which is a major slowness factor. Compressing resources can reduce the number of bytes sent over the network. Text compression isn’t the only way to reduce your payload, but it is the easiest.

If you’re an exec/marketing manager: As above, test your site and get its compress text score, then check out its waterfall chart. If you’re seeing a lot of bright blue bars, you have a problem that could be fixed through compression.

If you’re in dev/ops: Make sure you’re following Google’s best practices for compression, as outlined here.

Don’t underrate these two simple measures.

They can have a huge impact on page speed. In a session where I first de-optimized, then re-optimized, the Velocity website, the first fixes I implemented were keep-alives and text compression. With just these two fixes, the site experienced major improvements in these areas:

  • Start render: 52% faster
  • Document complete: 40% faster
  • Fully loaded: 31% faster

These two steps alone are not enough, but they’re definitely must-haves before you reach for the fruit on the higher branches.

*All tests conducted on Webpagetest — IE7 on DSL via the server in Dulles, VA.

Related posts

By: Tammy Everts Category: Tags: , , ,

Demystifying web performance automation

15 Oct 2010

11 Comments

This past Wednesday, I had the great privilege of hanging out with the New York Web Performance Meetup crowd, where I led a session on web performance automation. If you’re interested, here’s the slideshow deck:

Web Performance Automation – NY Web Performance Meetup

Summary

I wanted to identify what kinds of performance best practices are manually do-able versus which practices lend themselves better to automation. After going over performance-related terminology and concepts — such as waterfall charts, first vs repeat views, and concurrency — we jumped into a hands-on case study: optimizing the Velocity website. (Full disclosure: O’Reilly recently became a Strangeloop customer, though we’re not yet implemented.)

Delivery vs transformation: The history of performance automation

It’s important to note how performance optimization has changed over the years, from a delivery-focused approach to a transformation-based approach:

Delivery = “I will deliver what the server gives me as efficiently as possible to the browser.”

Transformation = “I will transform what the server gives me to optimize it for the user’s browser.”

Methodology

This presentation is based on a similar session that I ran with Strangeloop’s VP Product, Hooman Beheshti, at the Velocity conference. Much like that session, I artificially “de-optimized” the Velocity site, then implemented a series of best practices, one by one, showing the speed improvements that accompanied each one.

We reviewed the major performance pains of the unoptimized site:

  • Too many connections
  • Too many bytes
  • Concurrency
  • Bad caching for repeat views
  • No CDN
  • Too many roundtrips
  • And some others

Then we implemented a handful of performance best practices (some from Yahoo and Google, and some from Strangeloop), starting with the low-hanging fruit:

  • Keep-alives
  • Compression
  • Client-side caching
  • Use a CDN
  • Reduce roundtrips
  • Reduce payload further
  • Increase concurrency

Throughout this exercise, we talked about the pros and cons of each of these best practices, including the work involved in implementing and maintaining them.

My hope in doing this session was to demystify the automation process, and show how it can complement hand-crafted optimization, making it another useful tool in the developers’ arsenal.

Many thanks to my hosts, Sergey Chernyshev and Alla Gringaus, who did an incredible job of coordinating the entire event, bringing together a great group of people and making me feel very welcome.

Related posts:

By: Tammy Everts Category: Tags: , , ,

Web Performance Consulting: Five questions for Andrew King

23 Aug 2010

2 Comments

In the past month, I’ve had three major corporations ask for my opinion about independent web performance consulting: What is it? Is it worthwhile? How do you find a good consultant? I decided to take these questions directly to one of today’s leading performance consultants, Andrew King.

In addition to authoring the book Website Optimization (O’Reilly, 2008), a must-have for any performance library, Andrew is also President of Website Optimization, LLC. His company has provided performance consulting and optimization for sites like AOL.com, Time Warner, and WhitePages.com.

1. First off, what’s the value in engaging an outside performance consultant versus, say, doing a performance audit internally?

An outside consultant has seen more sites and has a more global perspective than someone from the inside. When you hire an outside consultant, I’ve found that management tends to listen and act more to the recommendations as well (even though the recommendations from an employee on the inside may be just as valid).

2. Performance consulting is a relatively new and unregulated field. If a company is looking to bring in a consultant, where would they even start to hunt for one?

Good question. The Velocity conference is a good place to start. We both attended it this year. Many consultants attend this event. I’d look for people with experience and a history of publishing quality articles and books (and tools). Google the terms you are interested in.

3. What kinds of questions should a company ask a prospective consultant to weed out the unqualified candidates?

How much experience do you have? Who are some of your clients? Can you show us case studies? Do you optimize websites as well as analyze them for performance? Can you handle ecommerce websites? Windows? What specifically do you do for a performance audit or optimization (front-end or back-end)?

4. Is there a common process that consultants follow — or should follow — when conducting a performance audit? As a corollary to this question, is there a standard toolset that should go along with this process?

Well, there is a common process that we follow. :) If it is a front-end audit (80% of the performance problems are on the front-end, according to Steve Souders’ book), we typically use YSlow, Page Speed, and WebPageTest.org for metrics and then dive into the code for before/after recommendations.

We look at the (X)HTML, CSS, JavaScript, multimedia, and server settings for areas of improvement. Many times you can replace old-style techniques (JavaScript-based menus with CSS-based, for example) and eliminate code altogether. Lately we’ve been providing optimized files for audits, which makes it a bit of a hybrid.

For back-end performance audits, we have different teams for Linux- and Windows-based sites. We look at the server setup, middleware, SQL queries, caching, old modules or code, etc. We provide recommendations in a similar format to the front-end audits. We also do a hybrid audit that includes both front-end and back-end analyses.

5. Say I’m a client who has hired a consultant. At the end of the process, what should I expect as a deliverable?

For a performance audit, you should expect a detailed report with baseline performance metrics (useful for comparison after subsequent optimizations or audits), executive summary, web page behavior (waterfalls etc.), and actionable recommendations for improvement.

Thanks, Andrew! If anyone has questions for Andrew, ask in the comments.

Related posts:

By: Tammy Everts Category: Tags: , , , , , , ,

From the Bottom Line to “Faster by Default”

21 Jun 2010

0 Comment

I just arrived here in Santa Clara for Velocity. I’ve got a million things to do to get ready for the sessions and keynote I’ll be presenting, but I just wanted to jot down a few thoughts I had on the plane about the evolution of web performance.

Performance has come a long way in an incredibly short time. It doesn’t seem that long ago (2007, to be specific) when Steve Souders was evangelizing the nitty gritty of the newly developed YSlow best practices.

Here’s a snapshot of how the performance landscape has changed in the past three years:

April 2007 – At Web 2.0 Expo, Steve laid the foundation by talking about the research projects that led to the development of the YSlow rules.

June 2008 – At Velocity 2008, Steve moved the conversation to metrics by asking “Fast web pages are critical to a good user experience, but what is “response time” and how should it be measured?”

June 2009 – At Velocity last year, Steve moved on to accountability and the impact of performance on the bottom line. He presented the new best practices he developed at Google, then scrutinized some popular websites to see how well they heeded the rules.

June 2010 – As you may know, the theme of this year’s Velocity conference is “Faster by Default”. What this means to me is recognizing that, given constantly permutating variables such as browser standards and dynamically delivered websites, we need to recognize the complexity of the problem and the complexity of the solution – or, more accurately, the set of solutions – needed to fix the problem. And wherever possible, we need to automate our solutions to respond nimbly and immediately.

By: Tammy Everts Category: Tags: , , , , ,