Performance Glossary

Here you can find important tech terms and definitions, explained in a simple and clear way.

Vector Graphic

A Vector Graphic is a digital image created using mathematical formulas—plotting points, lines, curves, and polygons on a 2D coordinate system—rather than a grid of static, colored pixels (which is how raster images like JPEGs and PNGs are built). Because they are driven by math, vector graphics can be scaled infinitely without any loss of resolution or quality.

JPEG (Joint Photographic Experts Group)

JPEG is one of the oldest and most widely used image file formats on the internet. It uses "lossy compression," meaning it drastically reduces file size by permanently discarding some of the image's hidden color data. It is highly optimized for complex, multi-color photographs, but it does not support transparent backgrounds (unlike PNG or SVG).

Infinite Scroll

Infinite Scroll is a web interaction technique where new content continuously loads at the bottom of the page as the user scrolls down, completely eliminating the need for traditional "Page 1, 2, 3" Pagination clicks. It is the core interaction model popularized by social media feeds like LinkedIn, Twitter, and Instagram.

Image Compression

Image Compression is the technical process of reducing the file size of a digital graphic (like a JPEG, PNG, or WebP) without significantly degrading its visual quality. This is achieved by removing hidden data, reducing color profiles, or grouping similar pixels together. It is divided into two types: Lossless (reduces size without losing quality) and Lossy (permanently removes some data for maximum size reduction).

Hosting (Web Hosting)

Web Hosting is a service that provides the physical server infrastructure and technologies needed for a website to be viewed on the internet.

Webpack

Webpack is a highly popular, open-source "module bundler" used in modern JavaScript applications. When developers build complex web applications, they write hundreds of separate, organized files for JavaScript, CSS, and images. Webpack takes all of these separate files, processes them, and "bundles" them together into a few highly optimized, minified files that the web browser can load efficiently.

Skeleton Screen

A Skeleton Screen is a UI (User Interface) pattern used to improve perceived performance during page load times. Instead of showing a blank white screen or a spinning loading wheel while a web application fetches data, the UI displays a wireframe-like, animated placeholder—often consisting of pulsing gray boxes and lines—that mimics the exact layout of the content that is about to appear.

Content Delivery Network (CDN)

A Content Delivery Network (CDN) is a geographically distributed group of servers that work together to provide fast delivery of internet content. Instead of housing your website's heavy files (like images, videos, and CSS) on a single server in one location, a CDN copies these files and stores them on "edge servers" all around the world.

Cache

A cache (pronounced "cash") is a high-speed data storage layer that stores a subset of data, so that future requests for that data can be served faster than accessing the original source.

Bandwidth

In web hosting and network architecture, Bandwidth refers to the maximum volume of data that can be transmitted over an internet connection in a given amount of time (usually measured in Megabits or Gigabits per second). For a website, it represents the total amount of data transferred from the website's server to the users' browsers when they load pages, view images, or download files over a specific billing period (usually a month).

Variable Font

Variable Fonts are a modern advancement in Typography that consolidates what used to be several different font files (e.g., thin, regular, bold) into one single, smaller file.

SVG (Scalable Vector Graphic)

SVG is the preferred format for logos, Iconography, and simple Graphic Design elements on modern websites. Because it is vector-based (using mathematical formulas rather than pixels), it offers two key advantages: scalability and performance.

Render Blocking

Render Blocking code is a major cause of slow Page Speed and a poor Lighthouse Score. When a browser encounters a large, external JavaScript or CSS file, it stops rendering the page until that file is downloaded and executed.

Reflow

Reflow is a heavy computational task that slows down a web page's rendering speed and causes Jitter in Animation or scrolling. It is triggered by changes to element dimensions, content, or specific CSS properties.

Page Speed

Page Speed is a critical metric that impacts both user experience and search engine ranking. It is a major component of the Lighthouse Score.

Lighthouse Score

The Lighthouse Score provides a benchmark (from 0 to 100) for the technical health of a website. Achieving a high score (typically 90+) is a goal for every modern developer. The Performance score is influenced by factors like: page speed and asset optimization.

Jitter (in animation)

Jitter is the visual symptom of the browser struggling to render visual changes at a consistent frame rate (ideally 60 frames per second). It's caused when the JavaScript or CSS used for Animation is computationally expensive or forces the browser to frequently recalculate the layout (known as Reflow or layout thrashing).

Asset Optimization

This technical process ensures that a website's media files (Assets) are as small as possible without sacrificing visual quality, leading to faster loading times. Techniques include: Image compression, lazy loading, and minification.