Web Performance Optimization

A Practical Approach

Sufyan bin Uzayr

• Publisher: CRC Press
• Year: 2022
• eBook ISBN: 9781000541397
• Edition: 1
• Topic: Computer Science
• Subtopic: Web Programming
• Index: Computer Science

If you are looking for practical, easy-to-implement measures to enhance your site's performance and improve speed and page load times, yet are still unsure where to start or how to develop your strategy, this book on Web Performance Optimization is the answer.

CHAPTER 1What Web Performance Is and Why It Matters

DOI: 10.1201/​9781003203735-1

IN THIS CHAPTER

• Explaining the concept and main objectives of web performance
• Answering the “why it matters” question about websites
• Giving reasons why web monitoring is the key to success

With so much business being conducted around the world online, nowadays, the success equation of presents itself quite simply: you have to learn how to handle performance pressure and incorporate fine-tuned technologies smartly into your business. And while the pressure just keeps growing and there is nothing much to do but to adapt and deliver, the technology part leaves plenty of room for leverage and creativity. And in today's hyper globalized and over-competitive world, there is no better way to reach and attract your potential audience/customers from anywhere in the world than through a website. Yet there is a tricky part: for the website to make a positive impact, it has to be simply outstanding.

With businesses pouring money into launching and constantly tuning the company website, it helps to know what's too much or too little to spend on professional web solutions. Thus, according to WebFX,¹ web developing and design prices range from $1000 to more than $100,000. There is a great variety of digital marketing companies that can provide you with a custom-made website. The standard design is expected to feature database integration, obligatory e-commerce functionality, and several services that could be as complex as interactive games, background music, and videos that attract attention and glue you to the site, as well as online store setup and virtual shopping cart. If you manage an enterprise, the advanced design offers a solution that matches your company's size, budget, and requests. It also maximizes your conversion rate and customers’ return, which is critical for striving in a competitive market. Making sure you know exactly what features you do not need will help you to save for further investment in website maintenance that can cost from $400 to $60,000² and include website security and updates to improve functionality, reduce errors, and prevent viruses.

WEBSITE PERFORMANCE IS KEY TO CUSTOMER RETENTION AND ACQUISITION

It should be clear by now that delivering a performant site is vital for an ambitious business. However, there could be cases when your site may have the best products, services to offer, and unique content on the web, but if it is even slightly glitchy or boring, you could end up hurting your brand and driving potential as well as loyal customers right in the hands of the competition. Performance is a big deal, especially when it comes to matching technology with the marketing vision of your own. The website you launch therefore has to represent your spirit and make sense of what your brand, product, or service hopes to become someday. The “wrong” website has to be viewed as a liability and dealt with accordingly. The “right” website will manage to transmit a clear sense of purpose. Keeping the vision and standards of operation on a high point results in capturing bigger market shares, increased efficiency, and profit. On the other hand, letting go of the site's performance issues and delays will cost you the very precious audience to the point where one day your website might be shut with its doors bolted permanently.

¹ https://www.webfx.com/​website-design-pricing.html, WebFX

² https://www.webfx.com/​website-design-pricing.html, WebFX

WEBSITE PERFORMANCE IS THE OBJECTIVE

In the early days, it was enough for a company to just draft a website that vaguely resembled a well-done online catalog. Sites were built with the aim to generate more views and consequently more sales. They were measured using quantitative tools like Google Analytics that launched on the November 14, 2005. At that early stage, website owners were trying to figure out how well their sites were performing by adding adequately ancient “visitors’ counters” at the bottom of the page. Those times have surely passed, but nowadays website owners still struggle with website performance measurement. In recent years, an alternative evaluation to judge each new website as the objective on its own, looking at the site's quality and interactive performance, was introduced.

Web performance objective has shifted from calculating viewers to make sure the website is fast, offers reassuring feedback, has smooth animations, and provides continuous, strategically an important service to the business.

WEB PERFORMANCE IS USER EXPERIENCE

Fast page load time equals more visitors willing to return and more people trusting the website. Ideally, viewers expect pages to load in 2 seconds, and after 3 seconds, up to 40% of users will abandon your site.³ Similar results have been presented by major sites like Amazon, which found that 100 milliseconds of additional page load time decreased sales by 1%,⁴ and also Google, who lost 20% of revenue⁵ due to half a second increase in webpage load time. Akamai has also summarized that 75% of online shoppers who experience page freezing or checkout process that takes too long will not buy from that site.⁶

³ http://www.mcrinc.com/​Documents/​Newsletters/​201110_why_web_performance_matters.pdf, Gomez

⁴ https://www.forbes.com/​sites/​oreillymedia/​2014/​01/​16/​web-performance-is-user-experience/​?sh=1bd5c0c45a52, Forbes ⁵ https://perspectives.mvdirona.com/​2009/​10/​the-cost-of-latency/​, Perspectives

These numbers are crucially important for understanding that great user experiences can only exist if a thorough, detailed approach to website performance is implemented. Putting performance first will save you and your customers’ precious time and money. Considerations about web presentation have to be at the core of business conversations, and investing in designing sites with impressive, rich content that includes complex animations and dynamic graphics can no longer be perceived as a luxury.

Think about your most recent website design you have seen. How many font weights have you noticed? Were the images well placed? Did the overall structure and design capture your attention? When you build your own site, sometimes you will have to make choices that favor art-conscious esthetics; other times, you will opt for lesser page load time. No matter what you do, the key is to always be thinking from the user perspective, making sure you keep in mind the following major areas of web performance application.

Reducing Website Load Time

In its simplest terms, page load time is the average amount of time it takes for a page to show up on your screen. It's calculated from initiation (when you click on a page link or type in a Web address) to completion (when the page is fully loaded in the browser).⁷ This includes all content on the page, such as text, images, and videos. The speed is mostly affected by latency (the time it takes from when a request is made to the time it takes for the response to get back)⁸ and the count and size of the initial files. A general strategy when creating a website is to make your files as small as possible and reduce the number of Hypertext Transfer Protocol requests (HTTP—used to structure requests and responses over the Internet).⁹ Additionally, with Google's Shift to mobile-first indexing, it became just as important to focus on your website's mobile loading speeds as well.

⁶ https://www.akamai.com/​us/​en/​multimedia/​documents/​report/​akamai-site-abandonment-final-report.pdf, Akamai

⁷ https://www.bigcommerce.com/​ecommerce-answers/​what-page-load-time-and-why-it-important/​, Big-commerce ⁸ https://developer.mozilla.org/​en-US/​docs/​Web/​Performance/​Understanding_latency, MDN Web Docs ⁹ https://www.codecademy.com/​articles/​http-requests, CodeAcademy

In 2019, a team at Portent,¹⁰ a web digital marketing company in Seattle, completed internal research to find out the extent to which site speed impacts the user experience and potential earning (conversion) of any given e-commerce website. They found out that the highest e-commerce conversion rate occurs between 0 and 2 seconds with an average of 8.11% conversion rate at less than 1 second; at a 5-second load time, the e-commerce conversion rate gets down to 2.20%. After that, expected returns are largely below 2%.

They have demonstrated how if 100 people visit your website for a $50 product at the given speed, it could easily make a difference in your earnings:

• A less than 1-second page load time at an 8.11% conversion rate would result in $405.50
• A 1-second page load time at a 6.32% conversion rate = $316.00
• A 2-second page load time at a 4.64% conversion rate = $232.00
• A 3-second page load time at a 2.93% conversion rate = $146.50

In 2006, Google conducted a similar experiment.¹¹ It occurred that Google received requests from viewers to receive more than ten results on their search page, precisely 30 results per page. Unfortunately, doing that resulted in a change in page load time from 4 seconds to 9 seconds a page. The addition of 500 milliseconds to the search results time eventually caused a reduction of 20% in page views and ad revenue. In the same year, Amazon followed that strategy, and surprisingly, only 100 milliseconds delay in their case negatively impacted sales.

The following proves once again, in simplest terms, how site speed could affect your conversion rates and, if ignored, may lead to drastic gaps in profit.

Making the Site User-Friendly

Usability basically means user-centered design. Both the design and development process are focused on the prospective user—making sure their goals, visions, and requirements are met.

¹⁰ https://www.portent.com/​blog/​analytics/​research-site-speed-hurting-everyones-revenue.htm, Portent

¹¹ http://glinden.blogspot.com/​2006/​11/​marissa-mayer-at-web-20.html, Blogpost

The very first principle of usability would then be “orderly access to your website.” If your website does not work, it would automatically be regarded as useless, leaving any potential customers unsatisfied and frustrated. To avoid that, you need to invest in two basic things. First, do not economize on web hosting. A good web provider has to be dependable and ensure fully available server uptime. And, second, you need to spare time to check and fix any broken links that might exist on your website.

Nowadays, it has become vital to “make sure your site is correctly optimized and adjusted to different screen sizes: desktop, tablet version, and mobile screen.” The device change therefore should not, in any case, affect the quality, clarity, and speed of the site. The outline has to be set automatically and present the original, explicit version of the website, without any clutter in content.

Visitors search for your website for a certain purpose. And ultimately, it is your job to deliver what they came for and please their initial needs. However, if their experience of your site does not match their requests or will be perceived as not user-friendly, they might not ever come back. Therefore, you should “try and connect to your audience's mental vision” of how they would wish you to form and layout the content of your site.

In most cases, in order to ease users’ perception, they would require “consistency in the web design,” certain predictability of the entire process of surfing the net. With that, it is also necessary to “guide them through your site,” making their exploration of what you can offer smooth and seamless. When planning the website architecture, it is highly recommended to think through how you are going to order pages, what information you want to highlight on the main and individual pages. People do not usually read much into websites, r...

Table of contents

• Cover Page
• Half-Title Page
• Title Page
• Copyright Page
• Contents
• Acknowledgments
• About the Author
• Chapter 1 ▪ What Web Performance Is and Why It Matters
• Chapter 2 ▪ Optimization Techniques for Front End, Content, and Back End
• Chapter 3 ▪ Web Performance and Speed
• Chapter 4 ▪ Conversion Rates: Localization and SEO-Specific Concerns, On-Page Optimization
• Chapter 5 ▪ Measurement and Analysis: Analytics Tools and Measuring Web Performance
• Chapter 6 ▪ Other Measures: File Compression, Minification, Graphics Optimization, Databases, Redirects, and Hotlinks
• Chapter 7 ▪ Server-Side Optimization
• Conclusion
• Index