50+ Web Performance Terms: A Glossary for Understanding the Landscape

October 26, 2015 Alex Pinto

This glossary of web performance terms will be updated periodically with new terms and definitions.

1. Web Performance Optimization (WPO)

In the broadest sense, WPO is the process, methodology and various techniques to measure, benchmark and improve app performance, where performance refers to the speed at which application pages are rendered on the end-user’s browser. More simply put, WPO is the art of tuning a web application for faster and smoother page loads, and an overall improved user experience.


2. Application Performance Monitoring (APM)

Application performance monitoring refers to a broad category of monitoring practices to determine the consistency, availability, and performance of web apps. The metrics observed with application performance monitoring drive the WPO process, since improving performance requires a baseline understand of how your application performs around the world, on different browsers, and with different last-mile connectivities.

3. Real user monitoring (RUM)

This type of APM solution takes performance data from actual user visits as they happen, via a JavaScript injected into the browser.  RUM is effective for gathering data to find trends and patterns in performance. RUM is limited, however, when it comes to pinpointing the source of a problem on your site, since each datapoint is specific to a single session.

4. Real-Browser Monitoring

This type of APM uses a real browsers operated by a computer to assess the performance of a web application in an automated fashion. This means it gathers information on what a user would see – if he or she accessed the site with the given criteria of browser, geographic location, and type of Internet connection. This testing is great for finding bottlenecks and developing a picture of performance, since the data is reliable and detailed. However even if the browsers are real, they are launched via a datacenter, so the location and connection speed are simulations, and not always a perfect stand-in for real-life user experiences.

5. Domain Name Server (DNS)

Your domain name server is part of the universal system that translates page URLs into IP addresses so that they can be fetched from the server. The service is typically either low-cost or free (as when bundled with hosting service), and hands-off except for when setting up a new application or page. Despite this seeming insignificance, DNS is crucial. If the name server goes down, your site is totally inaccessible to all visitors – not even a 404 page will show up.

6. Content Delivery Network (CDN)

A Content Delivery Network consists of a number of proxy servers at various points of presence (POPs) around the world. It works by creating and storing cached copies of web content at these POPs, and serving them to users upon command. CDNs offer companies greater consistency and uptime by reducing strain on origin servers at times of heavy traffic, and also dramatically reduced geographic latency.

7. Front-end Optimization (FEO)

Front-end performance refers to how quickly a visitor’s browser can execute and render the application content once it has been downloaded. FEO, then, is a sub-category of the broader web performance optimization field, focusing specifically on techniques related to the content itself, rather than how the content is stored or how it gets from point A to point B. It includes techniques like image compression, script concatenation, minification, image spriting, and more.

8. Waterfall Chart

sort-descending-cnn2A waterfall chart is a graphical representation of a page’s load process. It visually displays each asset that composes a web or mobile application, and uses horizontal bars to show how long each asset took to download. At the most basic level, a longer bar is a longer download time, and color codes mark various stages in an individual element’s journey to the end user’s screen.

Columns in the chart provide information on WHAT the asset is, WHERE the asset comes from (be it your origin server, or a third party), how HEAVY the asset is (in B, KB, MB), and the STATUS of the asset (if there was an error involved in its delivery or not).

With all this information you can achieve a complete picture of how an application performs in a given situation.

9. JavaScript Blocking Behavior

big_gap

JavaScripts drive much of the interaction and connectivity found on web pages today. However, because of the way they are built into the page and how browsers read the document object model (DOM), there’s a possibility that they will block other elements from loading while they execute on the page. This might not impact performance much in the majority of cases, but if the script happens to have an error it could cause a problem for the entire page. The blocking behavior of JavaScript can be mitigated by forcing it load asynchronously.

It?s easy to see this in a waterfall chart where the smooth pattern breaks: there’s a left-to-right gap from one line to the next down. This gap indicates that an asset, usually a third party script, activated blocking behavior as it executed, which stalled other asset downloads.

10. Time to title

The elapsed time from the moment the user requests a page to the moment the page title appears in the browser tab.

11. Time to start render

The elapsed time from the moment the user requests a page to the moment the visual elements of the page start to appear in the browser.

12. Time to display

The elapsed time from the moment the user requests a page to the moment all visual elements of the page have been rendered. If sequencing or lazyloading is in place, this will only apply to the elements that are visible “above the fold”  in the user’s viewport.

13. Time to interact

The elapsed time from the moment the user requests a page to the moment the app page is fully usable for the visitor, ready for scrolling, interaction with elements, and clicking links. The page load process may not be 100 percent complete, as some trackers and background elements may continue to load, but should have no effect on the user?s experience.

14. Caching

Caching means storing application assets so that a user can access them quickly. Caching can apply to content that’s proactively stored on a CDN, or content that’s stored “locally” on the user’s device (a browser cache – see below) after it’s been downloaded once. Application owners must manage their cache settings to ensure the right balance between seeking the performance benefits of caching with the risk of delivering users an outdated version of the site.

15. Browser Caching

Caching elements benefits repeat visitors of an application, because static app elements can be accessed locally rather than be retrieved from a server. Web applications can be optimized to cache more of their content in the browser.  This, however, only applies to content that changes rarely, or never. “Dynamic” content must be retrieved from the origin server upon each visit.

16. Proxy server

A proxy server, in terms of web applications, is a server that operates as an intermediary between a user requesting a web page and the “origin” server, or the server owned by a business. A CDN, for instance, is a network of proxy servers.

17. Reverse Proxy

A reverse proxy is the technique employed by CDNs that drives the functionality of their proxy servers. The term indicates that the proxy server is acting entirely in the stead of the origin server. The reverse proxy technique enables CDN providers to alter, adjust, re-route, or filter content or requests to achieve desired optimizations or outcomes.

18. Edge

Edge is a figurative word indicating the furthest extent of a CDN’s points of presence, the last “layer” of the network before the last mile. For instance, one might say that a CDN customer’s content is served “from the edge” or stored “at the edge”.

19. TTL (Time to Live)

TTL is the length of time before a cache is automatically refreshed, so that it serves content that reflects changes that may have been made since the last time the cache captured data.  blog-responsive-web-design-2

Pages that have content that almost never changes can be set with a very long “far-future” TTL, so that effectively it will stay cached forever unless it is manually changed.  Other app content changes daily or weekly, and can be set with a TTL that reflects its scheduled changes. Other content is subject to change so frequently that it should not be cached at all.

20. Responsive Design (RWD)

Responsive web design is a mode of web design that seeks to achieve a quality user experience on a screen of any size, with the same URL. This is opposed to the method of identifying the user’s device and redirecting the user to a separate version of the website (and “m.dot” site).

21. Adaptive Web Design (AWD)

Adaptive web design is another approach to designing for multiple devices. It centers on the idea of adapting a web application to match the user’s device on the server side, rather than within the client (user) browser, as is the case with RWD. For instance, a request from a smartphone will trigger certain content and layout to be delivered, instead delivering all content and letting the browser resize and reshape the content. This is sometimes referred to as “progressive enhancement.” AWD is linked to significant gains in performance on mobile devices.

22. Omni channelshutterstock_240525622-min

Omni-channel refers to a coordinated approach employed by retailers to interact with and serve customers across multiple touchpoints, including online, mobile, in-store, and more.

23. laaS

Infrastructure-as-a-Service is a near-synonym of cloud computing. It describes the provisioning and use of hardware that’s owned and operated by a separate provider.  Leveraging IaaS and other cloud offerings can reduce infrastructure costs, ensure high levels of security and compliance, and provide scalability and speed.

24. Web application

Web Apps are application programs that are stored on a remote server and delivered over the Internet through a browser interface, often called the client. This term is often used interchangeably with the much more common “website,” but is more inclusive of other kinds of web-accessible locations like portals, SaaS apps, and social media sites.

25. Static content

All content that doesn’t update on an automated basis is called static content. On most web applications, the basic structure, navigation elements, images, and text are all static, and can thus be stored in a cache, either on a CDN or locally in the user’s browser.

26. Dynamic Content

Dynamic content is anything on a web page that is either personalized to the user, or updated in real time. It’s an important distinction for performance because dynamic content must always be fetched from its origin, rather than cached. This means it is difficult to optimize. Pages of all kinds are growing the amount of dynamic content they display, causing widespread problems for peformance. The only way to significantly optimize a page with dynamic conten is to employ application sequencing by breaking the critical rendering path (definitions below). shutterstock_186292982

27. Third Party Tags

Tags are bits of code, often consisting of JavaScript, that are added to a web page to deliver functionality like tracking, analytics, A/B testing, social media integration, and much more. Since they are mostly supplied by a service provider (rather than built and operated in-house) they are referred to as third-party tags. Third party tags can impact web performance, since they are introducing an element to the site that cannot be directly controlled or optimized with typical front-end optimization techniques.

28. Benchmarking performance

Many companies benchmark their web performance against other web apps, especially competitors, in order to establish goals for a WPO initiative. The idea is that there is no universal “magic” number or metric that defines quality performance — it can only be assessed by looking at the current state.  (Try using this guide to create a benchmarking strategy that will prove valuable for your company.)

29. Service Level Agreement (SLA)

SLAs are commonly used in the web industry when entering into a contract with a service provider, for instance for cloud storage, hosting, or CDN services. The SLA defines exact thresholds for the successful delivery of the service that must, at minimum, be met for the contract terms to be valid. A common example would be a hosting provider promising 99.999% uptime over the course of a given time frame.

30. Shopping Cart Optimization

Optimizing a checkout process for simplicity helps retailers account for customers using multiple devices throughout the buying process. Being presented with unexpected costs at checkout is the number one reason users abandon shopping carts. It is far easier to offer an omni-channel experience when the checkout process is simple to begin with.

31. A/B Testing or Split testing

shutterstock_281379068 A/B testing is a technique to test, measure and improve your company’s landing pages, shopping carts, email campaigns and other key online areas. It involves creating two or more versions of a web page and serving each of them in turn to different segments of traffic, in order to see if user behavior is affected.

Performance is sometimes a concern with A/B testing because it operates through substantial JavaScripts that will add complexity and weight to every page. Sometimes the effect on performance is enough to skew the results of the test.

32. User Context

Context is frequently cited when discussing web perfomance and user experience, as the circumstances of a user’s visit matters a great deal for page speed. A user on a mobile device with a slow 3G connection, for instance, will have a much different experience than a user on a desktop. When working on performance optimization different user contexts must be taken into account, and certain measures should be taken to solve for performance problems for specific contexts.

33. User Experience (UX)

User experience is the encompassing term for how the user interacts with a web application. It means considering everything from the performance of the initial page load, to the design and functionality of the pages, to the processing of transactions. Basically, every aspect of a web app that a user can percieve can be counted as part of the user experience.

34. User Interface (UI)

UI in the context of web apps is simply shorthand for the front-end — the part the user sees and interacts with. It’s most often used when talking about portals and SaaS applications that require lots of interaction from the user, such as online banking, email, or business tools.

35. Conversion Rate Optimization (CRO)

CRO is an approach to designing and optimizing web pages to induce certain user behaviors, most notably converting on a task such as making a purchase or downloading a piece of content. Tactics that are commonly part of CRO include A/B testing the design and placement of buttons, forms and other web elements, the use of modal pop-ups or pop-overs to divert attention, and the use of compelling imagery, copy, and calls-to-action. Performance optimization also has an impact on conversion rates, and as awareness of WPO has grown it’s now more often considered a CRO tactic.

36. Bounce Rate

Bounce rate is the percentage of all visitors to your web app that leave after viewing just one page. High bounce rates are a sign that your performance is slow, or your content does not match users’ expectations. Find out more about how a high bounce rate can affect your goals.

37. Scalability

Scalability refers to the ability of a system to handle growth and the demands that may accompany it. Scalable systems can quickly be adjusted to meet the needs of a rapidly-expanding company, or a website that suddenly experiences a surge in traffic.

38. Sequencing

Sequencing, or application sequencing, is a method of re-prioritizing and controlling the rendering of content on a web page. It’s possible through a reverse proxy that reads and understands the document object model (DOM) and manipulates the order of objects, thus overriding the browser’s natural tendencies.

39. Critical Rendering Path

The critical rendering path is a term used to describe the natural sequence a browser goes through to begin rendering a web page. It includes downloading and reading the HTML, downloading and parsing any CSS and JavaScript files called for in the HTML, and overall verifying that it has all bases covered (so that nothing will break once it starts rendering). This concept is important for performance because browsers that are burdened with lots of content will not adjust the path to accommodate a better user experience. “Breaking” the critical rendering path is a key aspect of application sequencing, as it artificially changes the path so that browsers can begin rendering faster.

40. Distributed Denial of Service (DDoS)

A DDoS attack involves a group of connected devices, called a botnet, that sends repeated requests for a particual application. Unless the rush of requests is diverted or blocked from completing, DDoS will slow down or completely crash a web application, making it impossible for real users to access it.

41. Web Application Firewall (WAF)

A web application firewall is a type of security technology designed to act as a filter that reads all traffic to and from a particular application or site and can block or divert certain requests according to rules that the WAF has been configured to follow. It differs from traditional “on-premise” firewalls in that a cloud-based WAF can cover the flow of requests and responses to third-party sites that are integrated into a web application, such as a social media widget.

42. DD4BC

DD4BC is a cyber extortion group best known for its utilization of DDoS, and Bitcoin demands. The group initiates by sending ransom emails that threaten 400 Gbps DDoS attacks unless the Bitcoin amount has been paid.

43. Hyper Text Transport Protocol Secure (HTTPS)

HTTP is the best-known site address prefix, but often, it is replaced with HTTPS, which involves the management of a session by a security protocol. For sites with HTTPS, Transport Layer Security (TLS) or Secure Socket Layer (SSL) may be used as a sublayer.

44. HTTP 2.0 (HTTP/2)

The second iteration of the web’s HTTP protocol is focused on making the web faster. Its development began in 2007 and the protocol was published in 2015. It has been adopted by a small percentage of websites. It was designed based on Google’s SPDY protocol and intends to minimize the perception of latency, while also making the use of network resources more efficient.

45. Domain sharding

When a site is “sharded,” its resources have intentionally been split across several domains in order to allow for expedited loading. This is largely an outdated technique and will be further outmoded as HTTP 2.0 is adopted.

46. CSS Sprite

In a CSS sprite a number of images, typically small images, are combined to form a single graphic. The various pieces of this larger graphic are positioned around the page using instructions from CSS. This approach saves bandwidth and optimizes page loading since it cuts down on the total number of images that must be fetched. In most cases it will not have an impact on page weight, however.

47. Concatenation

Concatenation involves the joining of two or more character strings in order to save space. The concatenated character strings are then addressed as one item, thus saving on processing time (fewer requests means less work for the browser and faster rendering).

48. Lossy Compression

shutterstock_209409565-min

Lossy compression refers to a type of data encoding in which inexact approximations are used and some amount of data is potentially lost.

This technique is commonly used in video and audio compression, but for web applications it’s used for images. Often images on the web are higher in resolution than they need to be, so it’s possible to significantly reduce the weight of an image using lossy compression in a way that is not actually perceptible to the human eye, or at least not noticeable to the vast majority of users.

49. Lossless compression

In lossless compression, data is encoded to be lighter weight without compromising the original  resolution. Although full quality is maintained, the reduction in file size is marginal compared with that provided through lossy compression.

50. GZIP

A common compression and decompression file format, gzip reduces file size and, ultimately, minimizes bandwidth expenses. The process is completed behind the scenes, leaving the end user unaware that data compression has taken place.

51. Last mile

The last mile is the path data must travel to get from the edge of the internet to the user’s device. This could be an internet service provider’s broadband connection to a home or business, or a celullar network’s wireless transmission from a tower to a smartphone. Latency in the last mile poses a distinct challenge, since it is a variable that a business has no control over, unlike the “middle mile” or the datacenter.

52. Middle mile

The middle mile is the path data travels from a business’s server to the edge of the internet, where it meets an internet service provider. It consists of a number of “hops” between the servers that make up the backbone of the internet, as well as CDN nodes. Routes within the middle mile can be optimized to reduce latency.

 
 
 
 
 
 
 
 
 
 

The post 50+ Web Performance Terms: A Glossary for Understanding the Landscape appeared first on Yottaa.

Previous Article
Retailers: Don’t Overlook eCommerce Web Security This Holiday Season
Retailers: Don’t Overlook eCommerce Web Security This Holiday Season

Breaking News – Massive data breach! Exclusive – Looming cyber-threat detected. The headlines have become r...

Next Article
5 Best TED Talks by Web and User Experience Experts
5 Best TED Talks by Web and User Experience Experts

Technology, Entertainment, Design (TED) conferences expose attendees to a whole host of intriguing and ofte...