A Fast Website Is A Competitive Advantage - How to Blow Your Competition Away with a Better User Experience

Chris Love

Last Updated - Sun Jul 07 2019

It has been a while since Steve Souders published his book High Performance Web Sites and started the web performance optimization movement.

The book laid out 14 core practices web developers should implement to achieve optimal performance. His team at Yahoo created the now deprecated FireBug plugin, YSlow, to measure how well our sites implement these principles.

This book changed the way I developed web sites over a weekend. If you have not read it, please buy it and take about an hour to read it. I still fondly look back to that afternoon on my deck reading the book, enjoying the sun.

After reading the book you should be inspired to implement some of the principles to your applications. However, I will warn you some of the recommendations are not valid or important today. For example, with HTTP/2 you should not split assets across domains, or domain shard. You may also rethink bundling external assets because HTTP/2 make this practice a little questionable too. But by and large the 14 rules still hold up:

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put Stylesheets at the top
6. Put Scripts at the bottom
7. Avoid CSS Expressions (not even sure browsers support these today)
8. Make JavaScript & CSS External (I will argue against external CSS today)
9. Reduce DNS Lookups (Avoid multiple domains)
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags
14. Make Ajax Cacheable (Service Workers & IndexedDB FTW!)

The original 14 rules have expanded over time and changed. Today I can think of hundreds of web performance optimization best practices!

Sadly, as independent audits are performed across public web properties good performance principles are not implemented by most. According to Google the average web page takes 22 seconds to render😭😢. The #1 reason a proliferation of fast food JavaScript frameworks like Angular, React and Vue.

It amazes me how framework fan boys all swear their pages render fast. HTTP Archive data, which audits the top 500,000 websites twice a month shows these frameworks all take over 20 seconds to render the home pages.

And that includes many behind a login form, like Facebook! So, they are not even auditing pages with real content and heavier payloads. I guarantee if HTTP Archive audited pages behind the login the average render time would be higher.

Online properties executing web performance best practices are reaping the benefits and beating their competition. Why?

Duh, real people expect pages to load fast, like 1 second fast.

Because everyone likes a fast site Google rewards fast sites with better search engine rankings. Those rankings lead to more traffic. More traffic gives you more opportunity to make sales and therefor money!

I don’t care what your motivation is behind your site, it takes money for the site to run.

As we enter the big Christmas shopping season this week, I want to challenge you to think about your web applications in terms of performance, how it impacts your business and areas you can do to quickly improve your applications' performance metrics.

Navigation and site layout are part of a developer's responsibilities, but must be paired with user experience research and design creativity. However, performance is all on the developer and architect's shoulders. Placing performance as a first-class requirement fosters the culture needed to create not only better code, but faster experiences. This is a competitive advantage that can be proven with science.

How the Brain Perceives A Web Site

When designing a great application, especially the front-end, you need to understand how the human mind works. There are several critical points at which our mind shifts its impression of an application.

Up to 1000ms the mind perceives and action as instant. Therefore, I and many other web performance practitioners strive to reach a 1 second page/application load time.

Once the load time reaches 3000ms 53% of your visitors have decided to go somewhere else. That is a devastating number because you have worked so hard to get that customer to visit in the first place.

You get 3 seconds to make a positive impression, after that they leave in droves.

At 10 seconds the application is completely abandoned and thought to be broken.

Wait, the average web page takes 22 seconds to load, we have a problem!

No wonder most perceive the web is slow, developers have chosen to make the web slow.

Other studies have been done correlating perceived performance to brand quality. No matter what business you are in every application is in the customer service business, you need to keep customers happy with your application.

This applies to line of business applications as much as it does to a consumer e-commerce application. Your co-workers are people to and they don’t want to sit around all day waiting on your poorly developed web app to respond or allow them to enter data.

Performance as an SEO Strategy

Google, Bing and other search engines have made it known performance is a key factor to search engine ranking. With all things being equal the faster site has an advantage in search results. Each search engine wants to list the 'best match' first for your search query.

Search engines know faster sites are perceived as better sites. Making performance a priority gives you the edge over your competition.

What Are Some Easy Changes You Can Make to Go Faster?

Front-end architecture plays the biggest factors to web performance optimization. That means avoid the Fast Food! Here are some quick things I tell clients to implement:

• Minify Scripts and CSS files
• Inline a page’s CSS in the HEAD (just view this page’s source to see how its done)
• Place JavaScript references at the Bottom of the DOM, just before the closing BODY tag
• Keep JavaScript in external files
• Use a CDN
• Implement Proper Cache headers
• Optimize Images
• Eliminate any unused CSS and JavaScript
• Properly size images to the size they are being rendered
• Utilize Gzip Compression on all non-image resources
• Avoid HTTP Redirects
• Include a FavIcon
• Eliminate any 404 requests
• Use Service Worker Caching
• Use HTTPS over HTTP/2

These are actions you should be able to quickly implement in a day or two on just about any web site or application without changing the core code. OK, well maybe migrating to HTTPS might take 3 days 😊.

In other words, these actions can have a high impact without changing the site's integrity. The first step is measuring your site.

For that I recommend opening your browser's development tools’ (F12) network and performance tab. I also recommend using Lighthouse and WebHint. The dev tools network tab produces a nice waterfall to find many items in the list. If your site is public, then use WebPageTest.org to get more details on your application's performance characteristics. If you do not have all green grades in the top-right corner, you have work to do!

Summary

This Christmas season promises to be another active period for online commerce. Sites will be pushed to their limits and many will break in some way or another.

Many are going to fail because of performance. Do not let performance be a reason your company fails this season or in the future.

Performance is an advantage because customers want faster sites. Search engines reward faster sites with better rankings.

Faster sites also benefit from positive brand recognition. Give your company a competitive advantage over your competition that will pay off now and far into the future.