Web Performance Trends: Speeding up the Web

Welcome to an exciting exploration of the latest trends in web performance and how they are revolutionizing the online experience. In today's fast-paced digital world, where every second counts, users demand lightning-fast websites that load seamlessly and provide a delightful browsing experience. In this article, we will delve into the evolving landscape of web performance, discuss key trends that are shaping the industry, and provide actionable insights to help you optimize your website for speed and efficiency.

The need for speed: Why web performance matters

In an era where attention spans are shrinking and competition is fierce, the speed at which your website loads can make or break your online success. Studies have shown that users expect websites to load within a few seconds, and any delays can lead to increased bounce rates, lower conversion rates, and diminished user satisfaction. Therefore, prioritizing web performance is not just a technical consideration but a crucial business strategy.

Increasing Internet traffic and speeds

According to a trends and analysis case study by Cisco, the global Internet traffic will reach 5.3 billion Internet users by 2023. This means that almost two-thirds of the world's population will have Internet access. Just five years ago, this figure was around 50%.

The number of global mobile devices is set to witness a significant surge from 8.8 billion in 2018 to a whopping 13.1 billion by the year 2023. What's even more remarkable is that out of this staggering figure, approximately 1.4 billion devices will possess the remarkable capability of harnessing the power of 5G technology. This anticipated growth signifies a remarkable shift towards the widespread adoption of 5G-enabled devices and highlights the immense potential for enhanced connectivity and mobile experiences in the near future.

Total Internet traffic has experienced dramatic growth in the past decades. More than 30 years ago, in 1992, global Internet networks carried approximately 100 GB of traffic per day. Ten years later, in 2002, global Internet traffic amounted to 100 gigabytes per second (GBps). In 2022, global average Internet traffic reached 262,788 GBps.

Total Internet traffic benchmarks

Global average Internet speeds

The speed of broadband connections plays a pivotal role in facilitating the flow of IP traffic. As broadband speeds improve, users are empowered to consume and utilize high-bandwidth content and applications more extensively. Excitingly, there is a positive trend in the global average broadband speed, which is expected to more than double between 2018 and 2023. In specific terms, the average broadband speed worldwide is projected to increase from 45.9 Mbps in 2018 to an impressive 110.4 Mbps.

The table showcases the estimated broadband speeds for the years spanning 2018 to 2023. This substantial boost in broadband speed promises enhanced online experiences and sets the stage for a future characterized by faster, more efficient digital connectivity.

While internet traffic continues to grow at a booming rate and broadband speeds try to keep up, there are actually many countries that still lack access to Internet in 2023. Certain developing countries, particularly in parts of Asia, Latin America, and the Middle East, continue to struggle with providing universal internet access due to infrastructure limitations, political instability, and economic challenges.

It's important to highlight that initiatives and projects are underway to improve internet accessibility globally. Organizations such as the United Nations and non-profit entities are working towards bridging the digital divide and improving internet access in underserved regions. Additionally, technological advancements and the deployment of innovative solutions like satellite internet and wireless connectivity are also helping expand internet access to previously underserved areas.

Optimizing frontend performance

The Rise of progressive web apps (PWAs)

Progressive Web Apps combine the best of both worlds, offering the responsiveness and user experience of a native app with the accessibility and discoverability of a website. By leveraging modern web technologies like service workers, PWAs can be cached, load instantly, and work seamlessly across various devices and network conditions.

Embracing single-page applications (SPAs)

SPAs have gained popularity due to their ability to deliver dynamic and interactive user experiences. By loading the entire application upfront and dynamically updating content as needed, SPAs eliminate the need for frequent page refreshes, resulting in faster navigation and improved performance.

Lazy loading for enhanced performance

Loading all website resources simultaneously can lead to longer load times, especially for content below the fold. Lazy loading, an approach where resources are loaded only when they become visible on the screen, helps reduce initial page load time and conserves bandwidth, providing a smoother browsing experience.

Backend optimization techniques

The power of caching

Caching plays a crucial role in reducing server load and improving website performance. Implementing strategies like browser caching, server-side caching, and content delivery network (CDN) caching can drastically reduce response times and bandwidth consumption, leading to faster page loads.

Minification and compression

Minifying JavaScript, CSS, and HTML files by removing unnecessary characters, comments, and whitespace reduces file sizes and enables faster downloads. Additionally, compressing files using techniques like Gzip or Brotli further optimizes network transfer and decreases page load times.

Efficient database queries

Slow database queries can significantly impact website performance. Optimizing queries, indexing database tables, and utilizing caching mechanisms can help improve response times and reduce the load on your database servers.

## The future of web performance

As technology continues to evolve, several emerging trends show promise for further enhancing web performance. These include:

WebAssembly (Wasm)

WebAssembly is a binary instruction format that allows high-performance, low-level programming languages to run on the web. By leveraging the power of WebAssembly, developers can create complex applications that execute with near-native speed, opening up new possibilities for web performance and interactivity.

Read more about WebAssembly.

HTTP/3 and QUIC

After HTTP/2 we can expect to see QUIC coming next, which is a transportation protocol developed by Google based on UDP. The name "QUIC" stands for Quick UDP Internet Connection. HTTP/2 still runs over TCP which means it still has some of the latency cost, unlike QUIC.

HTTP/3, based on the QUIC protocol, aims to replace the traditional TCP-based connections used by the web. By reducing latency and improving connection reliability, HTTP/3 promises faster and more robust web communication, leading to improved web performance.

Google has found that 75% of all requests are served faster over QUIC and that TCP based websites and content that is streamed will greatly benefit from it. Especially video services like YouTube, where users report 30% fewer rebuffers when watching videos over QUIC. With such big changes it will take time for QUIC to become the most commonly used transfer protocol. QUIC is currently used by only 7.3% of all websites.

Read more about QUIC.

Preconnect

Preconnect allows the browser to set up early connections before an HTTP request is actually sent to the server. Connections such as DNS Lookup, TCP Handshake, and TLS negotiation can be initiated beforehand, eliminating roundtrip latency for those connections and saving time for users.

With the use of the new preconnect hint, we are able to give modern browsers a better idea of what connections should be initiated before actual requests for information are requested. This method is favorable over the previous method where browsers try to predict which websites they should use preconnect with on their own.

It's important to note that preconnect should be used judiciously and selectively. Unnecessary preconnect hints can result in wasted network resources and slower page loads. It is recommended to analyze and identify critical resources that significantly contribute to the page's rendering and performance, and only apply preconnect hints to those specific URLs.

Read our in-depth article on preconnect.

Machine learning for performance optimization

Machine learning algorithms can analyze large amounts of data to identify patterns and make intelligent predictions. Applying machine learning to web performance optimization can help automatically optimize resource loading, prioritize critical content, and personalize the browsing experience for individual users, resulting in faster and more tailored websites.

Faster and newer browsers

In recent years, the landscape of web browsers has seen significant advancements, leading to faster loading times and improved user experiences. Browser developers have invested heavily in optimizing performance, rendering engines, and implementing new web technologies. As a result, loading times have noticeably improved, enabling users to access websites and web applications more quickly than ever before.

One notable trend in the browser market is the rise of Google Chrome as the market leader. According to W3Counter as far as browser market share goes, Chrome has definitely been increasing the fastest at 72.5% as of April 2023. With its efficient rendering engine, V8, and continuous updates, Chrome has garnered a substantial user base and gained a reputation for its speed and compatibility with modern web standards. Its dominance is reflected in its widespread adoption and usage across various platforms and devices.

Additionally, other browsers have also made significant strides in improving their performance. Mozilla Firefox, for instance, has never been marketed as a fast browser but instead focuses on providing enhanced security and privacy features. Many users consider Firefox to be the most secure browser available, with features that prioritize a safe and private browsing experience. One notable feature is DNS over HTTPS (DoH), which encrypts traffic to prevent unauthorized access to user data by ISPs, advertisers, and malicious entities. While Firefox received a redesign in 2021, offering cleaner and more user-friendly menus and tabs, its main drawback remains its slower performance compared to other browsers.

Microsoft Edge, based on the Chromium open-source project, has gained popularity for its speed and compatibility. As the default browser for Windows, Edge offers a range of useful features. One notable surprise for many users was Edge's impressive speed, often on par with or even surpassing Google Chrome in speed tests. Edge is known for its lightweight nature, lacking unnecessary bloat that could slow it down. It boasts a user-friendly interface and delivers high reliability. In terms of security, Edge stands out by providing warnings about potentially dangerous websites, enhancing user safety. However, Edge does have a few downsides. It offers fewer extensions compared to some other browsers, and it collects browser history for analytics purposes. If advanced security features are of utmost importance to you, there may be better browser options available to explore.

In terms of loading times, the focus on performance optimization and the adoption of technologies such as preloading, predictive resource fetching, and improved caching mechanisms have led to faster overall browsing experiences. Browsers are now more efficient at rendering and executing web content, resulting in reduced page load times and improved responsiveness.

As browser competition continues to evolve, users can expect even more emphasis on performance and speed, driving further innovations in web browsing technology. Whether it's Chrome, Firefox, Edge, or other alternatives, the continuous pursuit of faster and more efficient browsers benefits users by providing quicker access to the vast online world.

Benchmark tests compared

In an informative blog article published by digitaltrends, comprehensive tests were conducted to evaluate the performance of various web browsers. One of the tests included the JetStream 2 benchmark, which assesses a browser's capability to launch and execute code efficiently, ensuring a smooth browsing experience. The results of the tests indicated that the Chromium-based browsers (Chrome, Edge, and Opera) outperformed Firefox, with minimal performance differences among them. In contrast, Firefox showed relatively poorer performance in comparison.

Another test carried out was the Speedometer 2.0 benchmark, which measures a browser's responsiveness to web applications by repeatedly adding a significant number of items to a to-do list. According to the test results, Opera emerged as the top performer in this category, while Chrome and Edge demonstrated similar levels of performance. Conversely, Firefox received a lower score in this particular test, indicating relatively less responsiveness compared to the other browsers.

Page weight

Page weight continues to increase which means web developers should always be focusing on optimization and ways to speed up the delivery of their content. Here is a comparison below from HTTP Archive of the increase in average bytes per page by content type.

In addition to the advancements in web performance, it is crucial to address the growing issue of increasing page weight, particularly due to the rise in video content. Over the past three years, videos have significantly contributed to the overall page weight, leading to a staggering increase of 257%. This statistic highlights the importance of optimizing video content to ensure faster loading times and a smoother browsing experience for users.

As websites incorporate more video elements, it becomes essential for web developers and content creators to prioritize efficient video compression techniques and implement video optimization strategies. By reducing the file size of videos without compromising their quality, website owners can mitigate the impact of increased page weight and enhance the overall performance of their web pages.

Aside from the substantial increase in page weight due to video content, it is also important to acknowledge the significant role that images play in overall page weight. While their increase may not have been as drastic as videos, images still account for a significant portion of the page weight. This information highlights the ongoing significance of optimizing images to maintain an efficient and fast-loading website. If you are using WordPress you can use our Optimus plugin for smart image compression.

WebP

Speaking of optimizing images, Google's WebP format is 26% smaller in size compared to PNGs. WebP has emerged as a valuable image format for optimizing web performance. Its ability to reduce file sizes while maintaining image quality makes it an attractive option for web developers seeking to enhance loading times and improve user experiences. By leveraging the advantages of WebP, websites can achieve faster page load speeds, reduced bandwidth usage, and ultimately deliver a more efficient and visually engaging browsing experience for their visitors.

If you are running on WordPress you can use your new free Cache Enabler plugin along with Optimus to deliver WebP images. Cache Enabler is the first plugin in the WordPress community to offer WebP support without JavaScript.

In our case study on WebP, we saw a 77% decrease in page size when comparing JPG to WebP and a 27% decrease when comparing PNG to WebP.

Brotli

Brotli is an open sourced compression algorithm also developed by Google. In a recent compression algorithm study done at Google, Brotli came out significantly faster with a 20-26% increase in compression ratio compared to Zopli.

We hope that this format will be supported by major browsers in the near future, as the smaller compressed size would give additional benefits to mobile users, such as lower data transfer fees and reduced battery use.

- Zoltan Szabadka

Read our in-depth post on brotli compression.

Web performance trends - User experience

Having a fast website and everything optimized might be more important than you think. Here are some quick stats on how this can affect your sales and conversions.

• 47% of consumers expect a web page to load in 2 seconds or less.
• 40% of people abandon a website that takes more than 3 seconds to load.
• A 1-second delay in page response can result in a 7% reduction in conversions.
• If an ecommerce site is making $100,000 per day, a 1-second page delay could potentially cost you $2.5 million in lost sales every year. (Source)
• Mobile users are five times more likely to abandon the task if the site isn't optimized or mobile. (Source)
• A 2-second delay in load time during a transaction results in abandonment rates of up to 87%. This is significantly higher than the average abandonment rate of 70%. (Source)
• 46% of online shoppers cite checkout speed as the number one factor that determines whether or not they will return to a site. (Source)

So as you can see, speed is everything!

Mobile

According to comScore mobile adoption surpassed that of desktop devices since 2017. Why is this important? Because mobile devices require things to be optimized even more than desktop. As mobile devices continue to dominate internet usage, optimizing web performance for mobile users is of paramount importance. Implementing mobile-friendly design principles and leveraging CDNs can significantly enhance the browsing experience on mobile devices. If you have a CDN you can take advantage of the following three additional features:

• Use of Gzip compression to control mobile data traffic
• Use of video pacing to control excessive progressive downloading of media content
• Use of TCP acceleration to adjust with the network environment of the mobile user

And if we take a look at the amount of data being used by mobile devices it has skyrocketed in the past few years, and isn't slowing down anytime soon. According to a New York Times case study, more than half of the data used on mobile devices over news sites came from ads!

Content delivery networks

CDNs have gained widespread adoption among website owners and developers, with a significant percentage of the largest websites worldwide leveraging their benefits. CDNs are networks of geographically distributed servers strategically placed in various locations worldwide. They act as intermediaries between websites and their users, optimizing content delivery by reducing latency and improving loading speeds. CDNs work by caching website assets, such as images, scripts, and videos, on their servers, allowing them to be delivered from the server closest to the user's location. This proximity minimizes the distance data has to travel, resulting in faster and more efficient content delivery.

According to Buildwith, a leading web technology tracking platform, nearly 46% of the top 1 million websites currently utilize a CDN. This statistic demonstrates the significant adoption of CDNs across the digital landscape. From small businesses to large enterprises, website owners recognize the importance of CDNs in optimizing web performance, improving user experiences, and staying competitive in an increasingly fast-paced online environment.

If you are using WordPress, KeyCDN has a free plugin, CDN Enabler, in which you can deploy our CDN within minutes!

Summary

With web performance trends continuing to change and evolve, and the internet delivering more traffic than ever before, there are a few things you will want to keep in mind moving forward:

1. Mobile optimization: With mobile usage surpassing desktop, prioritizing mobile optimization is crucial. Implement responsive web design, optimize images and videos for mobile, and streamline the user interface to provide a seamless mobile browsing experience.
2. Content delivery networks (CDNs): CDNs play a vital role in enhancing web performance. Leverage CDNs to deliver content efficiently, reduce latency, improve loading speeds, and ensure a reliable browsing experience. Nearly 46% of the top 1 million websites currently use CDNs, highlighting their widespread adoption.
3. Page weight management: Pay attention to the increasing page weight, particularly due to the rising use of videos. Optimize videos and images to reduce their impact on page load times. Implement modern image formats like WebP and utilize compression techniques like Brotli to further minimize page weight.
4. Browser performance: Stay updated with the latest browser trends. Chrome, Firefox, and Edge continue to improve their loading speeds, with Chrome currently leading the market. Mozilla Firefox is renowned for its security features, while Microsoft Edge has made significant strides in performance.
5. Performance testing: Regularly test your website's performance using tools like JetStream 2 and Speedometer 2.0. Compare your results with industry benchmarks and identify areas for improvement to enhance user experience and loading times.
6. JavaScript and CSS optimization: Optimize JavaScript and CSS files to reduce their size and improve loading speeds. Minify and concatenate files, remove unused code, and implement asynchronous loading techniques to enhance overall performance.
7. Web fonts optimization: Utilize modern font loading techniques like font-display to ensure the website's text content renders quickly and efficiently, even if custom web fonts are used.
8. Progressive web apps (PWAs): Consider implementing PWAs to provide native-app-like experiences, offline functionality, and fast loading times. PWAs utilize caching mechanisms and smart resource handling to deliver exceptional performance.
9. Performance monitoring: Continuously monitor your website's performance using tools like Google Analytics or New Relic. Analyze metrics such as page load times, bounce rates, and conversion rates to identify performance bottlenecks and make data-driven optimizations.

Are there other web performance trends you have been noticing over this past year? If so, we would love to hear about them below!