Web performance

Last updated

Web performance refers to the speed in which web pages are downloaded and displayed on the user's web browser. Web performance optimization (WPO), or website optimization is the field of knowledge about increasing web performance.

Contents

Faster website download speeds have been shown to increase visitor retention and loyalty [1] [2] and user satisfaction, especially for users with slow internet connections and those on mobile devices. [3] Web performance also leads to less data travelling across the web, which in turn lowers a website's power consumption and environmental impact. [4] Some aspects which can affect the speed of page load include browser/server cache, image optimization, and encryption (for example SSL), which can affect the time it takes for pages to render. The performance of the web page can be improved through techniques such as multi-layered cache, light weight design of presentation layer components and asynchronous communication with server side components.

History

In the first decade or so of the web's existence, web performance improvement was focused mainly on optimizing website code and pushing hardware limitations. According to the 2002 book Web Performance Tuning by Patrick Killelea, some of the early techniques used were to use simple servlets or CGI, increase server memory, and look for packet loss and retransmission. [5] Although these principles now comprise much of the optimized foundation of internet applications, they differ from current optimization theory in that there was much less of an attempt to improve the browser display speed.

Steve Souders coined the term "web performance optimization" in 2004. [6] At that time Souders made several predictions regarding the impact that WPO as an "emerging industry" would bring to the web, such as websites being fast by default, consolidation, web standards for performance, environmental impacts of optimization, and speed as a differentiator. [7]

One major point that Souders made in 2007 is that at least 80% of the time that it takes to download and view a website is controlled by the front-end structure. This lag time can be decreased through awareness of typical browser behavior, as well as of how HTTP works. [8]

Optimization techniques

Web performance optimization improves user experience (UX) when visiting a website and therefore is highly desired by web designers and web developers. They employ several techniques that streamline web optimization tasks to decrease web page load times. This process is known as front end optimization (FEO) or content optimization. FEO concentrates on reducing file sizes and "minimizing the number of requests needed for a given page to load."

In addition to the techniques listed below, the use of a content delivery network—a group of proxy servers spread across various locations around the globe—is an efficient delivery system that chooses a server for a specific user based on network proximity. Typically the server with the quickest response time is selected.

The following techniques are commonly used web optimization tasks and are widely used by web developers:

Web browsers open separate Transmission Control Protocol (TCP) connections for each Hypertext Transfer Protocol (HTTP) request submitted when downloading a web page. These requests total the number of page elements required for download. However, a browser is limited to opening only a certain number of simultaneous connections to a single host. To prevent bottlenecks, the number of individual page elements are reduced using resource consolidation whereby smaller files (such as images) are bundled together into one file. This reduces HTTP requests and the number of "round trips" required to load a web page.

Web pages are constructed from code files such JavaScript and Hypertext Markup Language (HTML). As web pages grow in complexity, so do their code files and subsequently their load times. File compression can reduce code files by as much as 80 percent, thereby improving site responsiveness.

Web Caching Optimization reduces server load, bandwidth usage and latency. CDNs use dedicated web caching software to store copies of documents passing through their system. Subsequent requests from the cache may be fulfilled should certain conditions apply. Web caches are located on either the client side (forward position) or web-server side (reverse position) of a CDN. Web browsers are also able to store content for re-use through the HTTP cache or web cache. Requests web browsers make are typically routed to the HTTP cache to validate if a cached response may be used to fulfill a request. If such a match is made, the response is fulfilled from the cache. This can be helpful for reducing network latency and costs associated with data-transfer. The HTTP cache is configured using request and response headers.

Code minification distinguishes discrepancies between codes written by web developers and how network elements interpret code. Minification removes comments and extra spaces as well as crunch variable names in order to minimize code, decreasing files sizes by as much as 60%. In addition to caching and compression, lossy compression techniques (similar to those used with audio files) remove non-essential header information and lower original image quality on many high resolution images. These changes, such as pixel complexity or color gradations, are transparent to the end-user and do not noticeably affect perception of the image. Another technique is the replacement of raster graphics with resolution-independent vector graphics. Vector substitution is best suited for simple geometric images.[ citation needed ]

Lazy loading of images and video reduces initial page load time, initial page weight, and system resource usage, all of which have positive impacts on website performance. [9] It is used to defer initialization of an object right until the point at which it is needed. The browser loads the images in a page or post when they are needed such as when the user scrolls down the page and not all images at once, which is the default behavior, and naturally, takes more time.

HTTP/1.x and HTTP/2

Since web browsers use multiple TCP connections for parallel user requests, congestion and browser monopolization of network resources may occur. Because HTTP/1 requests come with associated overhead, web performance is impacted by limited bandwidth and increased usage.

Compared to HTTP/1, HTTP/2

Instead of a website's hosting server, CDNs are used in tandem with HTTP/2 in order to better serve the end-user with web resources such as images, JavaScript files and Cascading Style Sheet (CSS) files since a CDN's location is usually in closer proximity to the end-user. [11]

Metrics

In recent years, several metrics have been introduced that help developers measure various aspects of the performance of their websites. In 2019, Google introduced metrics such as Time to First Byte (TTFB), First Contentful Paint (FCP), First Paint (FP), First Input Delay (FID), Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP) allow for website owner to gain insights into issues that might hurt the performance of their websites making it seem sluggish or slow to the user. Other metrics including Request Count (number of requests required to load a page), [12] DOMContentLoaded (time when HTML document is completely loaded and parsed excluding CSS style sheets, images, etc.), [13] Above The Fold Time (content that is visible without scrolling), [14] Round Trip Time, [14] number of Render Blocking Resources (such as scripts, stylesheets), [15] Onload Time, Connection Time, Total Page Size help provide an accurate picture of latencies and slowdowns occurring at the networking level which might slow down a site. [16] [17] [18]

Modules to measure metrics such as TTFB, FCP, LCP, FP etc are provided with major frontend JavaScript libraries such as React, [19] NuxtJS [20] and Vue. [21] Google publishes a library, the core-web-vitals library that allows for easy measurement of these metrics in frontend applications. In addition to this, Google also provides the Lighthouse, a Chrome dev-tools component and PageSpeed Insight a site that allows developers to measure and compare the performance of their website with Google's recommended minimums and maximums. [22]

In addition to this, tools such as the Network Monitor by Mozilla Firefox help provide insight into network-level slowdowns that might occur during transmission of data. [16]

Related Research Articles

<span class="mw-page-title-main">Cache (computing)</span> Additional storage that enables faster access to main storage

In computing, a cache is a hardware or software component that stores data so that future requests for that data can be served faster; the data stored in a cache might be the result of an earlier computation or a copy of data stored elsewhere. A cache hit occurs when the requested data can be found in a cache, while a cache miss occurs when it cannot. Cache hits are served by reading data from the cache, which is faster than recomputing a result or reading from a slower data store; thus, the more requests that can be served from the cache, the faster the system performs.

<span class="mw-page-title-main">Web browser</span> Software used to access websites

A web browser is an application for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used on a range of devices, including desktops, laptops, tablets, and smartphones. In 2020, an estimated 4.9 billion people have used a browser. The most-used browser is Google Chrome, with a 64% global market share on all devices, followed by Safari with 19%.

<span class="mw-page-title-main">Web server</span> Computer software that distributes web pages

A web server is computer software and underlying hardware that accepts requests via HTTP or its secure variant HTTPS. A user agent, commonly a web browser or web crawler, initiates communication by making a request for a web page or other resource using HTTP, and the server responds with the content of that resource or an error message. A web server can also accept and store resources sent from the user agent if configured to do so.

A Web cache is a system for optimizing the World Wide Web. It is implemented both client-side and server-side. The caching of multimedia and other files can result in less overall delay when browsing the Web.

<span class="mw-page-title-main">Content delivery network</span> Layer in the internet ecosystem addressing bottlenecks

A content delivery network or content distribution network (CDN) is a geographically distributed network of proxy servers and their data centers. The goal is to provide high availability and performance ("speed") by distributing the service spatially relative to end users. CDNs came into existence in the late 1990s as a means for alleviating the performance bottlenecks of the Internet as the Internet was starting to become a mission-critical medium for people and enterprises. Since then, CDNs have grown to serve a large portion of the Internet content today, including web objects, downloadable objects, applications, live streaming media, on-demand streaming media, and social media sites.

Link prefetching allows web browsers to pre-load resources. This speeds up both the loading and rendering of web pages. Prefetching was first introduced in HTML5.

A web accelerator is a proxy server that reduces website access time. They can be a self-contained hardware appliance or installable software.

Web analytics is the measurement, collection, analysis, and reporting of web data to understand and optimize web usage. Web analytics is not just a process for measuring web traffic but can be used as a tool for business and market research and assess and improve website effectiveness. Web analytics applications can also help companies measure the results of traditional print or broadcast advertising campaigns. It can be used to estimate how traffic to a website changes after launching a new advertising campaign. Web analytics provides information about the number of visitors to a website and the number of page views, or creates user behavior profiles. It helps gauge traffic and popularity trends, which is useful for market research.

<span class="mw-page-title-main">Google Analytics</span> Web analytics service from Google

Google Analytics is a web analytics service offered by Google that tracks and reports website traffic and also mobile app traffic & events, currently as a platform inside the Google Marketing Platform brand. Google launched the service in November 2005 after acquiring Urchin.

Time to first byte (TTFB) is a measurement used as an indication of the responsiveness of a webserver or other network resource.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

<span class="mw-page-title-main">Firebug (software)</span> Web development add-on for Firefox

Firebug is a discontinued free and open-source web browser extension for Mozilla Firefox that facilitated the live debugging, editing, and monitoring of any website's CSS, HTML, DOM, XHR, and JavaScript.

<span class="mw-page-title-main">Slicing (interface design)</span>

In fields employing interface design skills, slicing is the process of dividing a single 2D user interface composition layout (comp) into multiple image files of the graphical user interface (GUI) for one or more electronic pages. It is typically part of the client side development process of creating a web page and/or web site, but is also used in the user interface design process of software development and game development.

Mobile web analytics studies the behaviour of mobile website users in a similar way to traditional web analytics. In a commercial context, mobile web analytics refers to the data collected from the users who access a website from a mobile phone. It helps to determine which aspects of the website work best for mobile traffic and which mobile marketing campaigns work best for the business, including mobile advertising, mobile search marketing, text campaigns, and desktop promotion of mobile sites and services.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

Dynamic Site Acceleration (DSA) is a group of technologies which make the delivery of dynamic websites more efficient. Manufacturers of application delivery controllers and content delivery networks (CDNs) use a host of techniques to accelerate dynamic sites, including:

Google PageSpeed is a family of tools by Google, Inc. designed to help optimize website performance. It was introduced at a Developer Conference in 2010. There are four main components of PageSpeed family tools: PageSpeed Module, PageSpeed Insights, PageSpeed Service, and the PageSpeed Chrome DevTools extension. These components aim to identify and automatically correct deviations from Google's Web Performance Best Practices.

Cross-site leaks, also known as XS-leaks, is an internet security term used to describe a class of attacks used to access a user's sensitive information on another website. Cross-site leaks allow an attacker to access a user's interactions with other websites. This can contain sensitive information. Web browsers normally stop other websites from seeing this information. This is enforced through a set of rules called the same-origin policy. Attackers can sometimes get around these rules, using a "cross-site leak". Attacks using a cross-site leak are often initiated by enticing users to visit the attacker's website. Upon visiting, the attacker uses malicious code on their website to interact with another website. This can be used by a attacker to learn about the user's previous actions on the other website. The information from this attack can uniquely identify the user to the attacker.

References

  1. ↑ "Google Adds Site Speed To Search Ranking" . Retrieved 4 December 2012.
  2. ↑ Sharon, Bell. "WPO | Preparing for Cyber Monday Traffic". CDNetworks. Retrieved 4 December 2012.
  3. ↑ Souders, Steve. "Web First for Mobile" . Retrieved 4 December 2012.
  4. ↑ Bellonch, Albert. "Web performance optimization for everyone" . Retrieved 4 December 2012.
  5. ↑ Killelea, Patrick (2002). Web Performance Tuning. Sebastopol: O'Reilly Media. p. 480. ISBN   059600172X.
  6. ↑ Frick, Tim (2016). Designing for Sustainability: A Guide to Building Greener Digital Products and Services. Boston: O'Reilly Media. p. 195. ISBN   1491935774.
  7. ↑ Frick, Tim (2016). Designing for Sustainability: A Guide to Building Greener Digital Products and Services. Boston: O'Reilly Media. p. 56. ISBN   1491935774.
  8. ↑ Souders, Steve (2007). High Performance Websites. Farnham: O'Reilly Media. p. 170. ISBN   0596529309. Archived from the original on 8 March 2019.
  9. ↑ "Lazy loading - Web Performance | MDN". developer.mozilla.org. Retrieved 2022-03-15.
  10. ↑ "HTTP/2 Frequently Asked Questions". HTTP Working Group. Retrieved 14 April 2017.
  11. ↑ "HTTP/2 – A Real-World Performance Test and Analysis". CSS Tricks. Retrieved 14 April 2017.
  12. ↑ Mobile Web Performance Optimization. 2015. ISBN   9781785284625.
  13. ↑ The Web Performance Collection. 2018. ISBN   9781492069805.
  14. 1 2 Performance Optimization: Techniques And Strategies. ISBN   9783944540948.
  15. ↑ Responsive Web Design with HTML5 and CSS. 2022. ISBN   9781803231723.
  16. 1 2 "Measuring performance - Learn web development | MDN". developer.mozilla.org. Retrieved 2023-01-09.
  17. ↑ "Measuring Web Performance in 2023: The Definitive Guide". Request Metrics. Retrieved 2023-01-09.
  18. ↑ "Front-End Performance Checklist 2021 (PDF, Apple Pages, MS Word)". Smashing Magazine. 2021-01-12. Retrieved 2023-01-09.
  19. ↑ "Measuring Performance | Create React App". create-react-app.dev. Retrieved 2023-01-09.
  20. ↑ "@nuxtjs/web-vitals". npm. Retrieved 2023-01-09.
  21. ↑ "vue-web-vitals". npm. Retrieved 2023-01-09.
  22. ↑ "User-centric performance metrics". web.dev. Retrieved 2023-01-09.

 

This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.