Understanding Web Performance – Frontend Optimization

Web performance optimization means equipping your website with whatever gets it to load more speedily. Ideal time is 2 seconds, but many top brands keep losing customers, or customer interest due to bad performance, frequent downtimes, and overall lack of understanding the best practices.

However, many experts in the field have turned web performance optimization into science, or even art – while building tools, analyzing performance data, and sharing valuable insights.

How One AI-Driven Media Platform Cut EBS Costs for AWS ASGs by 48%

How One AI-Driven Media Platform Cut EBS Costs for AWS ASGs by 48%

Impatient Customer

There is a simple rule to web performance – faster website. But ‘fast’ isn’t what ‘fast’ used to be. 250 millisecond delay can lead your user to a competitor. 1 out of 4 customers expect websites to load in under 4 seconds. Most will abandon (to never visit again) your website in 6-10 seconds. PhoCusWright and Akamai (2010) cite a three second rule – 57% of online shoppers will wait three seconds or less before abandoning the site.

The internet user doesn’t wait, and this can result in losing massive revenue, page ranking, conversion rate, page views and downloads.

The Web Page Growth

The average webpage has doubled in size since 2010. The need to standardize performance optimization rules hasn’t even appeared until late 90s. According to Web Performance Today results:

  • In November 2010, the average top 1,000 site had a total payload of 626 KB. By May 2013, this number almost doubled to 1246 KB.
  • Much, though not all, of this growth is due to the proliferation of images. In 2010, images accounted for 372 KB of the average page. By 2013, that number grew to 654 KB.

Add to this the increased usage of mobile devices, proliferation of video, responsive web design attempts – and suddenly, you have a whole list of routines to re-check to achieve this simple goal of a – faster website.

Essential Rules

Steve Souders is considered an establisher of web performance optimization, and the coiner of the term in 2004. He is the Head Performance Engineer at Google where he works on web performance and open source initiatives. His book, High Performance Web Sites, was #1 in Amazon’s Computer and Internet bestsellers.

The key rules, which are explained in the book, are valued as the original performance rules:

  • Rule 1 – Make Fewer HTTP Requests
  • Rule 2 – Use a Content Delivery Network
  • Rule 3 – Add an Expires Header
  • Rule 4 – Gzip Components
  • Rule 5 – Put Stylesheets at the Top
  • Rule 6 – Put Scripts at the Bottom
  • Rule 7 – Avoid CSS Expressions
  • Rule 8 – Make JavaScript and CSS External
  • Rule 9 – Reduce DNS Lookups
  • Rule 10 – Minify JavaScript
  • Rule 11 – Avoid Redirects
  • Rule 12 – Remove Duplicate Scripts
  • Rule 13 – Configure ETags
  • Rule 14 – Make AJAX Cacheable

Souders’ follow-up book, Even Faster Web Sites, provides performance tips for today’s Web 2.0 applications.

The golden performance rule, according to Sauders, is that 80-90% of the end-user response time is spent on the front-end which has the greatest potential for improvement, and needs to get simpler. Souders also claims that the user perception is more relevant than actual unload-to-unload response time.

Tools

There are many tools that can detect the root cause of your website being not fast enough, such as YSlow, Pingdom, WebPageTest, Cuzillion, Wireshark, HTTP Archive, PageSpeed and so on.

They basically let you run a test, from multiple locations around the globe, from different browsers and get back diagnosis charts and suggestions for improvements. Most of them are free, but some include advanced options and require extra payment.

Interface for testing website performance with URL and browser options.

The test results help you in narrowing down the list of problems which are causing delays, whether those be too many HTTP requests, slow caching, image formats, hosting service, junk lines in your code, DNS name resolving etc.

Web Diet

Performance optimization is not only essential for your business, that is, not only that your whole revenue depends on it, as well as the customer satisfaction, but less data also needs to travel on the web to keep the network less clogged.

Chris Heilmann, a Mozilla evangelist, builds on the idea for the Smashing Magazine, on burning the excessive code, and making leaner and more future-proof websites. “The Web as it is now is suffering from an obesity problem,” Heilmann claims. Reasons for “an obese web” as he perceives them, are:

  • we don’t develop in realistic environments
  • there is a false sense of allegiance to outdated and old technology, namely browsers of the ’90s
  • browser differences (API performances)

He suggests a vanilla web diet to slim down the products we build and describes the principles as building on what works, using a mix of technologies, asking questions from environment, load only what’s needed and so on. You can read more from the full manifesto.

Crash Course

Finally, we recommend the crash course video on web performance with Ilya Grigorik, a web performance engineer and developer advocate on the Make The Web Fast team at Google.

“I could give you one rule per minute, but it doesn’t help if you don’t understand the problem,” Grigorik explains.

Video Link: http://parleys.com/play/5148922b0364bc17fc56ca0c/chapter3/about

Sources/Further Reading:

Advertisement promoting a free trial for a Content Delivery Network (CDN) service.

Latest Articles

How Optimizing Kafka Can Save Costs of the Whole System

Kafka is no longer exclusively the domain of high-velocity Big Data use cases. Today, it is utilized on by workloads and companies of all sizes, supporting asynchronous communication between even small groups of microservices.  But this expanded usage has led to problems with cost creep that threaten many companies’ bottom lines. And due to the […]

29th September, 2024
Migrating Volumez RedHat VMs into Amazon Linux 2 for higher effective discounts rate of Saving Plan

A cloud data infrastructure company relied on extensive use of multiple instance types to test its products. But this made it difficult to optimize costs – a fact which had begun to impact their ability to scale the business.   The GlobalDots team helped the company identify and implement a new infrastructure configuration that both saved […]

19th September, 2024
How Yuki Achieved SOC 2 Compliance 6x Faster

Overview A fast-growing Snowflake optimization platform was missing out on customers because they didn’t have the right data security compliance. Through multiple consultations and extensive vendor-testing, the GlobalDots team selected a solution to provide both tech and human support, helping the company achieve SOC 2 compliance within just 3 months – and win new customers […]

16th September, 2024
Agile Content partners with GlobalDots to revolutionize CDN management ahead of IBC 2024

New partnership between Agile Content and GlobalDots promises to introduce automated multi-CDN solutions, optimizing content delivery and easing provider management for broadcasters worldwide. Amsterdam, Netherlands, September 9th, 2024 – Agile Content, a leading provider of digital TV and video distribution solutions, proudly announces its strategic partnership with GlobalDots, a global leader in cloud performance optimization and […]

Miguel Fersen Director for Iberia and LATAM, GlobalDots
12th September, 2024

Unlock Your Cloud Potential

Schedule a call with our experts. Discover new technology and get recommendations to improve your performance.

    GlobalDots' industry expertise proactively addressed structural inefficiencies that would have otherwise hindered our success. Their laser focus is why I would recommend them as a partner to other companies

    Marco Kaiser
    Marco Kaiser

    CTO

    Legal Services

    GlobalDots has helped us to scale up our innovative capabilities, and in significantly improving our service provided to our clients

    Antonio Ostuni
    Antonio Ostuni

    CIO

    IT Services

    It's common for 3rd parties to work with a limited number of vendors - GlobalDots and its multi-vendor approach is different. Thanks to GlobalDots vendors umbrella, the hybrid-cloud migration was exceedingly smooth

    Motti Shpirer
    Motti Shpirer

    VP of Infrastructure & Technology

    Advertising Services