E-Commerce Glossary

Adaptive images are images that are adjusted to the screen size or connection speed in order to strike the best balance between image quality and load time. Put simply: adaptive images adapt to the situation so they load fast and still look good.

API-based image optimisation uses interfaces to compress images automatically and convert them into the best format while they are uploaded to or displayed on a website. Put simply: images are optimised automatically through an API, with no manual step involved.

Asynchronous image loading means that images are loaded independently of the other content of a page, which improves the page's loading speed because the remaining content is displayed first. Put simply: images are loaded later while the text appears immediately, so the page feels faster.

Automated image format detection is a system's ability to select the best image format for different browsers or devices automatically, ensuring the optimal load time and image quality. Put simply: the system detects on its own which image format works best to keep the page fast.

Automated image optimisation is a process in which images are compressed and optimised automatically as they are uploaded to a website, in order to improve load times. Put simply: images are made smaller the moment they are uploaded, which saves time and speeds up the page.

AVIF is a new, extremely well compressed image format based on the AV1 video codec. It offers better compression than WebP and JPEG, but is not yet fully supported in every browser.

Bandwidth optimisation refers to measures taken to reduce the amount of data transferred between a server and a client, which minimises the bandwidth required and improves load times. This matters particularly for the performance of websites and apps, because reducing the data volume lowers the load on the network and increases speed for the end user.

BMP is an older, uncompressed image format that offers high quality but is rarely used on the web because of its large file size. It has been superseded by more efficient formats such as PNG and JPEG.

Browser caching for images stores images in the browser's local storage so that they do not have to be downloaded again when the page is visited repeatedly. Put simply: the browser keeps the images so they load faster next time.

Browser rendering of images refers to the process by which a browser displays images on a page. Good optimisation ensures that images are rendered quickly and correctly. Put simply: the browser shows the images in the best possible way.

Cache-control headers for images govern how long and under which conditions images are stored in the user's browser cache. An effective cache-control setting can shorten load times drastically on repeat visits and reduce the load on the server at the same time.

Cache-control for images is a technique that defines, in the HTTP headers of a website, how long an image should be kept in the cache of the browser or of a CDN. It determines how often the browser or the CDN has to request the image from the server again. Put simply: cache-control sets how long images are cached, in order to optimise load times and save bandwidth.

Caching is a mechanism that stores data temporarily so that access to that data is faster the next time it is requested. In web hosting, caching means that content such as images, HTML pages or database queries is placed in an intermediate store in order to shorten load times for users. Put simply: caching stores frequently used data so it can be delivered faster, which improves website performance.

A CDN (content delivery network) is a network of geographically distributed servers that speeds up the delivery of content to users. These servers hold copies of website content and serve it from whichever server is closest to the user. Put simply: a CDN helps make websites faster by delivering the content from a nearby server instead of from the web server's central location.

A content delivery network (CDN) for images distributes image files across several servers worldwide so they can be loaded faster, wherever the user happens to be. Put simply: a CDN for images makes sure images are loaded from a server near the user, which shortens the load time.

GIFs are converted to more modern formats such as WebP or MP4 in order to reduce the file size of animations and optimise load times. Modern formats offer better compression and handle the playback of animations more efficiently than the dated GIF format.

Cumulative Layout Shift (CLS) is one of the most important metrics in Google's Core Web Vitals. It measures how much the layout of a page shifts unexpectedly while it loads. A high CLS score points to a poor user experience, because visual instability can confuse or annoy the user — particularly when it happens mid-interaction (for example when clicking a button that suddenly moves somewhere else).

How is CLS calculated?

Cumulative Layout Shift (CLS) is the sum of all unexpected layout shifts on a page. These shifts occur when elements such as images, text or buttons change position while the page loads. Google calculates the CLS value from two main factors:

1. Impact fraction: the share of the viewport that changes during the layout shift. If an image suddenly jumps down and alters 50 % of the visible area, the impact value is 0.5.

2. Distance fraction: the share of the viewport the shifted element actually travelled. If the element moves down by 25 % of the screen, the distance value is 0.25.

The CLS value is the product of the two:

CLS = impact fraction × distance fraction

Examples of layout shifts:

- Images without defined dimensions: if images load without their width and height being declared beforehand, the layout can shift as soon as the image has fully loaded.

- Web fonts loading late: if a font arrives only after the fact and changes the size of the text, that can shift the layout.

- Ads and embedded content: dynamic content such as banner ads or embedded videos that appear suddenly in the visible area of the page can shift the layout.

- Asynchronous content loading: if parts of a page load at different times without the layout being stabilised, shifts occur.

Why does CLS matter?

A high CLS score harms usability and can frustrate users when elements move or shift unexpectedly, especially while they are trying to interact with the page. A button might be pushed down at the very moment the user wants to click it. That not only causes confusion, it can also make the user click a different button or the wrong element entirely.

Google also takes the CLS metric into account in its search engine optimisation (SEO) rankings, which means a page with a high CLS value may be placed lower in the search results.

What counts as a good CLS value?

Google classifies CLS values into three categories:

Good (CLS ≤ 0.1): no perceptible layout shifts, or barely any. This is considered optimal for the user experience.

Needs improvement (0.1 < CLS ≤ 0.25): some smaller layout shifts occur, which can harm usability.

Poor (CLS > 0.25): pronounced layout shifts that signal a poor user experience.

How do you improve CLS?

Here are a few techniques for improving the CLS value and minimising layout shifts:

Declare image and video dimensions: make sure the dimensions (width and height) are given in the HTML/CSS for all images, videos and embedded content. This reserves the space in the layout and prevents shifts when the content loads.

Use placeholders: use placeholders (grey blocks or animated skeleton screens, for instance) while content such as images or ads is loading. That keeps the space reserved until the content has fully loaded.

Optimise fonts: avoid the "flash of unstyled text" (FOUT) and the "flash of invisible text" (FOIT) by loading web fonts correctly. Google recommends loading fonts with font-display: swap to keep the layout stable while the font is swapped in.

Avoid ads that load after the fact: if ads are loaded dynamically after the page content, assign them a fixed place in the layout to prevent layout shifts.

Make dynamic content loading predictable: when content such as pop-ups or banner messages loads, make sure it does not push the rest of the content around. It should appear in an overlay above the current content.

Optimise asynchronous content loading: when content that appears in the visible area is loaded, make sure the layout stays stable beforehand.

Tools for checking CLS:

Google PageSpeed Insights: measures the CLS value and gives recommendations for optimisation.

Lighthouse: an analysis tool built into Google Chrome for monitoring the CLS value and other web vitals.

Chrome DevTools: developer tools that show CLS directly on a page and make layout shifts visible.

Web Vitals Extension: a Google Chrome extension that shows the CLS value and the other Core Web Vitals directly in the browser.

Conclusion:

Cumulative Layout Shift (CLS) is an important measure of a website's visual stability. A low CLS score makes for a better user experience and helps improve the SEO ranking. With the right optimisations — fixed dimensions for images, avoiding dynamic layout shifts and optimising fonts — the CLS score can be improved considerably.

Dynamic image adaptation refers to resizing images and changing their format automatically, based on the user's device characteristics and network conditions. The technique helps minimise load times while ensuring the best possible image quality for different devices.

FastCGI is a communication protocol that makes script processing more efficient by sparing the server repeated process starts. It allows persistent PHP processes and is therefore faster and easier on resources than traditional CGI methods.

Generating thumbnails means creating small versions of images that are often used as previews in galleries or product lists. They load faster than the full images. Put simply: small previews of images are created so they can be displayed more quickly.

GIF is a format used for simple animations and images with a limited colour palette. Because it supports only 256 colours it is mainly used for simple graphics and animations, but it has meanwhile been superseded by more modern formats.

HEIF is a modern image format that achieves high compression at excellent image quality. It is supported above all by Apple devices and is more efficient than JPEG.

Image alt tags (alternative text tags) are HTML attributes that provide descriptive text for images. They serve accessibility, because screen readers read them out, and at the same time they improve SEO ranking by making the content of an image intelligible to search engines.

Image caching stores images locally in the user's browser so that they load faster on later visits. This reduces the website's load time. Put simply: image caching makes sure images do not have to be downloaded again every time, which speeds up the page.

Image compression is the process of reducing the file size of an image without noticeably compromising its quality. This helps shorten the load time of web pages and saves storage space. Put simply: image compression makes images smaller so they can be loaded faster.

Image compression algorithms are mathematical procedures used to reduce the file size of an image without affecting the visible quality too much.

Image compression for e-commerce optimises images in online stores in order to shorten load times without compromising visual quality. Efficient image compression leads to a better user experience and can raise the conversion rate, because faster pages increase the willingness to buy.

An image conversion API is an online service that converts images automatically from one format into another, for example from PNG to WebP, in order to optimise load times. Put simply: this API converts images into the best format automatically so they can be loaded faster.

Image deduplication is the process of identifying and removing duplicate image files in a database or on a server, in order to save storage space and improve performance. Avoiding redundant files lets you optimise load times and lower server costs.

Image format detection allows a server or a website to identify and deliver the most suitable image format for the user's browser automatically. A modern browser can be served WebP images, for instance, while older browsers receive JPEG or PNG, ensuring maximum compatibility and speed. smoxy detects automatically whether the browser can load modern formats and delivers them accordingly.

Choosing the right image formats for fast load times is decisive for a website's performance. Formats such as WebP or AVIF offer high compression rates at unchanged quality and can improve load time drastically compared with traditional formats like JPEG or PNG.

Image hosting refers to storing images on external servers in order to embed them into websites from there. This helps reduce the load on your own server and improves loading speed. Put simply: images are stored on a dedicated server so they load faster.

Image loading prioritisation refers to techniques in which certain images on a page are loaded with priority, based on their importance and visibility. Critical images in the visible area of the page are loaded first, while less important images that only become visible on scrolling are loaded with a delay. This improves load times and the user experience considerably.

Image minification is the process of removing unnecessary data from an image file in order to reduce its size without changing the visible quality. Put simply: minification makes the image file smaller by deleting information that is not needed.

Image optimisation for SEO means designing images so that they improve the website's loading speed and carry the right alt tags and file names, so they are found more easily by search engines. Put simply: images are optimised so the website ranks better in search engines and loads faster.

Image optimisation for social media refers to adapting images so they are displayed at the best quality and size on platforms such as Facebook, Instagram and Twitter. Put simply: images are optimised so they look good on social media and load fast.

Image optimisation tools are software applications or web services that help reduce the file size of images without noticeably affecting quality. Examples are TinyPNG or ImageOptim. Put simply: these tools make images smaller and let web pages load faster.

Image optimisation under high load covers the measures that keep the performance of images on web pages consistently high even under heavy traffic. Techniques such as caching, CDNs and server-side compression are used to prevent bottlenecks and ensure fast load times.

Image resizing means adjusting the dimensions of an image to make it smaller or larger. This helps ensure the right image size for different devices or layouts. Put simply: resizing changes the size of an image so it fits the screen.

Image scaling refers to enlarging or reducing an image to fit different screen sizes or resolutions without losing quality. Put simply: image scaling adjusts the size of an image so it looks good on every device.

JPEG is a lossy image format that is particularly well suited to photos with many colours. It offers an excellent balance between image quality and file size, which makes it one of the most widely used formats on the web.

JPEG is an image format that uses lossy compression and is ideal for photos. PNG, by contrast, offers lossless compression and supports transparency, which is why it is often used for logos and graphics. Put simply: JPEG is good for photos with many colours, while PNG suits images with transparency and crisp lines better.

Lazy loading is a technique in which images and other resources are only loaded once they are visible to the user. This reduces a website's initial load time and saves bandwidth. Put simply: lazy loading loads images only when the user scrolls to them, which improves the page's load time and avoids unnecessary traffic.

Lossless compression reduces the file size of an image without losing any information. That means the image looks exactly the same after compression as it did before. Put simply: with lossless compression the image quality stays unchanged even though the file becomes smaller.

Lossless compression reduces the file size of an image without losing any information. Lossy compression removes data to make the file smaller still, which can lead to a slight loss of quality. Put simply: lossless compression keeps the quality, lossy compression makes the image smaller but with a small loss of quality.

Lossy compression reduces the file size of an image by removing some data permanently, which can slightly affect quality. The method is often used to produce very small files. Put simply: lossy compression makes images smaller, but with a slight loss of quality.

mod_php is an Apache module that executes PHP directly inside the web server. It is easy to integrate, but less flexible and less performant than newer alternatives such as PHP-FPM. It is often found in smaller or older hosting setups.

NVMe is a high-performance storage technology that connects flash memory with the lowest possible latency and maximum speed. In hosting, NVMe enables fast load times and better performance, particularly for data-intensive applications.

On-the-fly image compression is the process of compressing images in real time as they are sent from the server to the user. It provides an optimal balance between image quality and loading speed, because images are compressed only when needed and depending on network conditions.

Optimising for mobile devices makes sure images load quickly on smartphones and tablets and are displayed at the right size. Put simply: images are adapted so they look good on mobile devices and load fast.

Optimising image databases means storing and managing images and their metadata efficiently in order to ensure fast load and access times. This includes optimising the database structure, deduplicating files and compressing image files.

Optimising product images is an important process in e-commerce. File size and image quality are adjusted so that images load quickly without losing clarity. Using suitable formats and compression methods matters especially here, in order to maximise conversion.

PHP-FPM is an alternative to the traditional mod_php for executing PHP scripts. It uses FastCGI to manage PHP processes efficiently and thereby delivers higher performance and a lower load on the server. It is particularly suited to high-traffic websites, because it controls processes deliberately and optimises caching.

PNG is a lossless image format that supports transparency and is ideal for graphics and logos. PNG files are larger than JPEG, but they offer higher image quality, especially for images with crisp lines and few colours.

Progressive JPEGs are a kind of JPEG image that loads in several passes. A blurred version of the image appears first and then sharpens step by step. This makes for a better user experience on slow connections. Put simply: images appear blurred at first and gradually become clearer as they load.

Reducing image size means decreasing the file size of an image in order to improve a page's load time. This can be done through compression, a change of format or by removing unnecessary data. Put simply: images are made smaller so the page loads faster.

Reducing server load through image optimisation means minimising the number and size of the images on a page in order to lower the load on the server and improve performance. Put simply: fewer and smaller images mean the server has less work to do and the page is faster.

Responsive images are images that adapt automatically to the size of the screen they are displayed on. This optimises load time on mobile devices and on desktops. Put simply: images adjust to different screen sizes in order to load faster and look better.

Retina display optimisation means providing images at high resolution to make sure they appear sharp and clear on high-resolution displays such as Apple's. Put simply: images are adapted so they look better on high-resolution screens.

Reusing images across different pages allows an image to be used several times on a website without being loaded again each time. This reduces the number of server requests and speeds up load times, especially on image-heavy pages.

Rsync is a popular tool for file synchronisation and transfer. It works incrementally, which means only the changed parts of a file are transferred. Ideal for backups or for mirroring server content.

Server-side image optimisation means that images are compressed and optimised on the server before they are sent to the user. Put simply: the server makes the images smaller before they are loaded, in order to improve the load time.

SVG is a vector-based image format that can be scaled without any loss of quality. It is particularly suited to logos, icons and graphics, because it renders razor-sharp at every resolution.

Thumbnail generation creates small preview images that need less storage space and can be loaded faster; they are often used in galleries or product overviews. Put simply: small versions of images are generated that can be displayed quickly.

TIFF is a lossless format widely used in the printing and image editing industries. It offers high image quality but is unsuitable for the web because of its large file size.

Time to First Byte (TTFB) is a measurement of the time the browser needs to receive the first byte of data from the web server after a request has been made. It is one of the most important metrics affecting a website's loading speed and performance.

TTFB in detail:

TTFB is measured in three steps:

Request time: the time the browser needs to send the request to the server. This depends on network latency and on the distance between the user and the server.
Server processing time: the time the server needs to process the request and generate a response. This is influenced by server performance, the efficiency of the server configuration and the load on the database or application.
Response time: the time the server needs to send the first byte of the response back to the browser.

Why does TTFB matter?
A low TTFB value is decisive for a fast website load time. The shorter the TTFB, the faster the page loads and the better the user experience. A long TTFB can point to problems such as:

- slow server performance or overload
- inefficient database queries
- unoptimised back-end processes
- a large geographical distance between server and user

Typical TTFB values:
Under 200 ms: excellent, the website responds very fast.
200–500 ms: good, but there is still room for optimisation.
500–1,000 ms: acceptable, though an improvement would be worthwhile.
Over 1,000 ms: slow, steps should be taken to reduce the server response time.

Tools for measuring TTFB:
There are various tools for measuring TTFB:

- Commerce Score: measures TTFB alongside other metrics https://commerce-score.io/de

- Google PageSpeed Insights: rates a website's performance and gives recommendations for improvement.
- WebPageTest: a detailed analysis of TTFB and other performance metrics.
- GTMetrix: offers insight into load times and the TTFB value.
- Chrome DevTools: Chrome's developer tools let you check TTFB in real time.

In summary: TTFB is an important measure of a website's performance and can be improved considerably by means such as using a CDN, server optimisations and caching. A fast TTFB leads to a better user experience and can have a positive effect on a website's SEO ranking.

WebP is a modern image format from Google that supports both lossless and lossy compression. It achieves smaller file sizes at the same image quality compared with JPEG and PNG, which makes it an ideal choice for fast load times.

The WebP format is a modern image format developed by Google. It offers both lossless and lossy compression, and the images are usually smaller than JPEG or PNG. Put simply: WebP makes images smaller and quicker to load without compromising quality much.

Using the WebP format matters particularly for search engine optimisation (SEO). Reducing the file size of images improves the load time of pages, which leads to a better user experience. Search engines such as Google favour fast pages, because they tend to perform better in the rankings and show a lower bounce rate. In e-commerce especially, a faster load time often means higher conversion rates and therefore increased revenue.

In summary, the WebP format is an ideal choice for site owners who want to shorten load times and preserve image quality at the same time — an important step towards better website performance and SEO impact.

X-Keys are special header fields used by caching systems to control cached content precisely. They make it possible to invalidate or refresh specific content without flushing the entire cache — ideal for dynamic sites whose content changes frequently.