Familiarize yourself with web performance and GTmetrix terms!
The world of web performance (and indeed GTmetrix) uses many technical terms and web-performance jargon that many users may not be familiar with.
This Glossary is intended to help you get a better understanding of commonly used terms that are referenced in our documentation, blog posts, and reports, or may otherwise be relevant within the context of GTmetrix usage.
“Above-the-fold” refers to the portion of the page that is within the user’s viewport. Basically, it is the area that the user normally sees on a webpage before having to scroll down to see the rest of the content.
Above-the-fold area would change depending on the device used to access your webpage (mobile, desktop, tablet, etc.)
Adaptive design is a website design practice, in which, the layout of the website changes according to the screen width of the device used to access that website.
It is generally used to design separate versions of a website e.g., desktop-specific and mobile-specific websites.
In common practice, adaptive design is used to design a website for 6 common screen widths ranging from 320 px all the way up to 1600 px.
However, the actual number of versions depends on many factors such as budget, the individual website’s needs, designer’s preferences, etc.
Adaptive design is similar to Responsive design in that the website’s layout (and subsequently page assets) changes based on the viewport; however, where this design philosophy differs is that it provides various pre-set layouts for different viewports.
Asynchronous loading refers to the process of loading scripts, stylesheets, and other resources simultaneously to prevent delays in the loading of your page.
Normally, resources are loaded synchronously i.e., one after the other. When resources are loaded in this manner, the browser must stop executing other tasks (i.e., stop rendering the page) and focus on loading these resources. This can drastically slow down the loading of your page.
Asynchronous loading enables the browser to load resources in parallel so that they won’t delay page rendering, facilitating faster loading of your page.
Bandwidth is the the maximum amount of information transmitted through the network in a given time period. Reducing bandwidth consumption can result in faster loading pages as fewer bytes of data are transferred, which speeds up browser execution time.
Strategies to reduce bandwidth consumption include, among others:
- Properly sizing images
- Efficiently encoding images
- Setting efficient cache policies for static resources
- Compressing and minifying your text resources
“Below-the-fold” refers to the portion of the page that is outside or below the user’s viewport. It is the area that the user normally sees after scrolling down the page.
Below-the-fold area would change depending on the device used to access your webpage (mobile, desktop, tablet, etc.)
BMP refers to the Bitmap image file format. It is a raster image format used to store bitmap digital images independent of display devices.
BMP images can be both monochrome and colour. BMP images are generally uncompressed and of higher quality than JPEG images.
Brotli is a general purpose lossless compression algorithm developed by Google.
Note that choosing brotli over GZIP isn’t a straightforward task. Even though brotli provides higher compression ratios than GZIP and is supported by most modern browsers, it is slower to compress data in the first place. Hence, choose your compression algorithm wisely.
A cache is a repository that temporarily stores data to help browsers, webpages and web applications load faster.
There are many kinds of caches used, like website cache, browser cache, as well as, server-side caches such as proxy cache, CDN cache, opcode cache, and gateway cache.
Browser caching is often used to speed up loading of webpages on repeat visits.
A cache policy is a set of rules that determine whether a browser request for a static page resource can be served from the cache instead of the server, for returning users.
When set, the browser will store local copies of these resources in its cache and serve them to users on repeat visits, instead of downloading them again from the server. This helps your page load much faster on subsequent visits.
Setting an effective cache policy means ensuring that the latest page content is delivered to your page visitors in the quickest manner.
When the server provides a page resource, it uses the response headers to indicate that particular resource’s caching policy.
- Longer cache policies instruct the browser to store these resources in the cache for longer (e.g., 1 year). These are used for resources that are unlikely to change frequently, like logo images or page fonts.
Content Delivery Network (CDN)
When a user requests your site, the node closest in proximity to the user will deliver the static content, ensuring the shortest distance for the data to travel (i.e., reduced latency), therefore providing the fastest site experience.
CDNs are a good way to ensure a consistently fast site experience for all your visitors, around the world.
Content Management System (CMS)
CMS stands for Content Management System. It is basically software that is used to manage the creation and modification of digital content such as your websites and all their associated content.
With a CMS, you can publish, organize, change, or remove various kinds of content, like text, images, video, interactive code, etc.
A CMS can help many users build and manage websites more easily as opposed to doing the same with a static, hard-coded website.
Among the different CMS, WordPress is the most popular one followed by Shopify and Joomla. Other CMS include Wix, Drupal, Squarespace, Magento, OpenCart, etc.
Critical Rendering Path
When a user tries to visit your page, the browser requests your origin server for your page’s HTML so that it can load the page.
When the server responds appropriately, the browser parses through your page’s HTML code line-by-line. When the browser finds links to external resources (i.e., scripts, stylesheets, etc.), it initiates new requests to retrieve those resources.
Some of these resources are render-blocking i.e., they will require the browser to halt other tasks and process these. These render-blocking resources will delay the rendering of your page.
Once the stylesheets have been parsed and the scripts have been executed, the browser fixes the layout for your page elements and then paints the pixels onto the screen.
The Critical Rendering Path encompasses the entire sequence of steps from the first browser request to the final painting of pixels onto the screen. Shortening the Critical Rendering Path can result in faster-loading pages.
Any request made for a resource that is essential to page rendering is considered a critical request.
For example, a heading text or hero image. Both of these may be among the first things seen by your visitors and would be considered essential site content.
Requests that aren’t considered critical can usually be deferred or asynchronously loaded.
For example, an image that only becomes visible when the user scrolls down or a widget in your page’s footer. Both of these aren’t needed when your page initially loads and can be loaded after other essential resources have finished loading.
CSS stands for Cascading Style Sheets. While the HTML determines the structure of your webpage, CSS specifies your webpage’s style.
This is accomplished through one or more CSS files (also known as stylesheets) that define and specify rules related to your webpage’s styling such as page design, layouts, colours, fonts, etc. Separate stylesheets can also be used to style content for display in different devices and screen sizes (i.e., mobile, desktop, tablet, etc.).
CSS can be external, internal, or inline.
- External stylesheets can handle styling for your entire website and are usually added to your page’s HTML using link tags.
- Internal stylesheets comprise of CSS code written directly in your page’s HTML header.
- Inline CSS, on the other hand, includes CSS code that is directly embedded within your page’s HTML code. Inline CSS is usually used for individual styling changes.
CSS Object Model (CSSOM) Tree represents your webpage’s styling. It is a programming interface similar to the Document Object Model (DOM) Tree.
While the DOM Tree pertains to your page’s HTML relationships, the CSSOM Tree contains information on each element’s styling.
As is the case with the DOM Tree, the CSSOM Tree contains nodes that represent your CSS and related properties. These nodes are connected to other nodes with parent-child relationships, sibling relationships, and so on.
Document Object Model (DOM) Tree
The Document Object Model (DOM) Tree is the structural representation of a document (i.e., your webpage).
It is a programming interface that represents the nodes and objects that comprise the structure and content of your HTML webpage.
The tree contains nodes that are a representation of your page’s HTML elements. These are linked with other nodes, and the DOM Tree establishes the relationship between them, such as parent-child relationships, sibling relationships, etc.
Deferring refers to the practice of delaying the loading of certain page resources like scripts, stylesheets, and images that aren’t needed during the initial page load.
Usually, the browser loads resources in the order that they were retrieved from the server. When the browser encounters scripts and stylesheets, it needs to pause all other tasks and focus on loading these resources. This blocks the initial rendering of your page.
Depending on how long these resources take to execute, your page load times could end up being severely delayed.
It is considered an industry best-practice to defer the loading of non-critical resources i.e., resources that aren’t needed for initial page rendering.
DNS stands for Domain Name System. DNS is a hierarchical and decentralized naming system for internet resources. In other words, it maintains a directory of domain names along with their associated resources (like IP addresses).
Think of DNS as the internet’s phonebook. When you type a website’s human-readable domain name into the browser’s address bar (e.g., gtmetrix.com), the DNS server translates it into a unique IP address (e.g., 126.96.36.199). This IP address is used by browsers to find internet resources.
You can also access the domain by entering the IP address directly into the browser’s address bar. DNS servers eliminate the need for humans to memorize each website’s IP address.
The process of mapping or converting a human-friendly domain name to the appropriate machine-friendly IP address is known as DNS Lookup or DNS Resolution.
The time taken to accomplish this is known as DNS Lookup time, which is represented by the teal coloured request timing bar on the Waterfall chart.
Event listener/Event handler
An event is some action that happens in the system you are designing or programming. For example, a user clicking a button on your webpage.
Note that event listeners and event handlers are sometimes used interchangeably. However, in the strictest sense, an event listener is used to listen for the event that is happening, and an event handler is used to respond to that user input.
It is possible to add more than one event handler to the same element, without overwriting existing events.
ES5 is commonly used for scripting on, both, the client-side and the server-side, adding more features and functionality compared to the previous editions.
ES5 enjoys near-universal support across different browsers. Consequently, it is favoured by many developers over the latest (and possibly more advanced) ES6 standard.
ES6 (or ES2015+)
There have also been further revisions to ES6 post 2015, with each successive version being named according to the revision year (i.e. ES2016, ES2017, etc.).
While most modern browsers support ES6, it doesn’t have the same levels of support as the ES5 standard. Consequently, many developers continue to ship ES5 code.
Basically, parsing is the process of extracting structural information from the code while execution is the actual processing of that code to create the required functionality. This could involve reading and writing files, invoking functions, setting event handlers, etc.
Note that script execution is usually synchronous i.e., it executes code line-by-line (unless explicitly deferred). Scripts are also executed on the main-thread, by default.
A favicon (i.e., favourite icon) is a tiny icon included along with a website. It is also known as shortcut icon, website icon, tab icon, URL icon, or bookmark icon.
It is usually 16 x 16 pixels in size and found next to any mention or identification of your website (e.g., page tabs, bookmarks menu, history results, etc.). It may be stored as a GIF, PNG, or ICO file.
A favicon is something that instills familiarity with your website and is generally used for the purposes of branding and improving user experience. When users see your favicon, it immediately helps them identify your website and lets them know that they’re in the right place. It also helps them to easily find your website when they have multiple tabs open in their browser.
Most favicons tend to be the same as the brand logos for that particular website.
GIF stands for Graphics Interface Format and is an image format that uses lossless compression. While GIFs can be used to serve still images, they are more commonly used for animations as they can hold multiple pictures at once that can be sequentially loaded.
GZIP is one of the best compression algorithms available and enjoys wider browser support than other compression algorithms, like Brotli.
While brotli can provide higher compression ratios than GZIP, GZIP is faster at compressing data in the first place.
HTML stands for Hypertext Markup Language. It is a descriptive language used to create webpages.
HTML contains a series of elements (e.g., heading, paragraph, bullet list, etc.) that describe the structure of your webpage and tells the browser how to display the content.
HTTP stands for Hypertext Transfer Protocol and is the application-level protocol used for data and information transfer (e.g., requests, resources) over the internet.
HTTP/1.1 refers to the particular standard introduced in 1995, and was an update on the HTTP/1 specification. Since 2015, however, many websites have switched over to HTTP/2, which is the updated HTTP standard.
HTTP/2 is the revised HTTP standard, and represents a major upgrade to HTTP/1.1. HTTP/2 offers many performance benefits compared to HTTP/1.1, like lower latency, higher connection limit to handle parallel requests, and lower protocol overhead.
In general, HTTP/2 allows more efficient handling of pages with a large number of requests compared to HTTP/1.1, allowing for faster loading pages.
Jank refers to any form of stuttering, halting or visual instability while your page is rendering content on the screen. Jank can happen during transitions, animation, or scrolling, resulting in users perceiving your site to be choppy or unreliable when they use it.
Jank usually happens because the webpage’s frame rate can’t keep up with the refresh rate of the user’s display. Most devices refresh the display 60 times per second (i.e., refresh rate = 60 Hz). When there is motion on the screen, the browser usually matches this refresh rate by creating 60 frames per second (i.e., frame rate = 60 Hz).
JPEG stands for Joint Photographic Experts Group. It is a lossy compression format used for digital images.
JPEG is the most widely used image format in the world, with the widest support among browsers and devices. JPEG allows you to adjust the compression ratio as needed, to reach an acceptable trade-off between size and image quality.
JPEG is best used for still images, photos, images and graphics with complex colours and light/dark shades. JPEG is less suitable for monochrome and line-based graphics as they don’t support transparency.
JSON is often used to transport data from server to a webpage and can be used to represent numbers, booleans, strings, arrays, and objects, etc.
Lazy-loading refers to the practice of delaying the loading of resources (usually, images) until they are needed by users.
When implemented correctly, they allow fast loading of webpages and facilitate a smoother user experience.
For example, images that aren’t visible in the user’s viewport can be lazy-loaded so that they appear into view as the user scrolls down to see the rest of the page.
Latency refers to the time taken for a packet of data (e.g., for a requested resource) to be sent over the network. It is used to express how much delay is experienced over the network.
A network with low latency will ensure swift transfer of resources from the server to the client (i.e., browser).
A network with high latency will suffer from delays in transferring the resources to the client.
Legacy Reports in GTmetrix refer to reports that are generated using the old PageSpeed/YSlow libraries.
Link tags are HTML elements that are used to define relationships between the current document (i.e., your webpage) and external resources.
Link tags are placed in the HTML header and are commonly used to link or import external stylesheets to your webpage’s HTML.
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css">
In the above example,
- the rel attribute tells the browser that the referenced document is a stylesheet.
- the type attribute tells the browser that the file is a .css file.
- the media attribute specifies that this stylesheet should be displayed on a handheld device.
- the href attribute specifies the name of the .css file being referenced.
A long task is typically associated with the main-thread and refers to any task that runs for longer than 50 ms.
Long tasks cause the browser to block other essential tasks related to the page load process and can delay initial rendering of content on your page.
When a webpage starts loading (or a web application starts running), the system starts a new process to execute different events related to the application. By default, all the components run on the same process or “thread”, and this is referred to as the “main-thread”.
The main-thread is where the browser processes most of the tasks related to your page load, like rendering/painting content or handling user interaction.
Some of the browser tasks executed on the main-thread include, among others:
- Handling layouts
- Parsing CSS and HTML
- Building the Document Object Model (DOM)
Minification refers to the process of removing unnecessary or redundant data without affecting the way a resource is processed by the browser.
For example, when the browser parses your webpage’s HTML, it extracts information like the the page title, different paragraphs, text headings, links, etc. and uses that information to build the DOM Tree.
Similarly, parsing the CSS is used to extract information related to your page styling like background colours, text colours, fonts, positioning of images, etc. and build the CSSOM Tree.
Payload refers to the amount of data transmitted over the network from the server to the client (i.e., browser). Your network payload depends on the size of your page resources sent by the server.
A lower network payload can result in faster loading pages, improving your visitors’ page experience. Reducing the network payload can also help reduce overall bandwidth consumption, lowering internet and data costs for mobile users.
PNG stands for Portable Network Graphics. It is an image and graphics file format that supports lossless data compression.
PNG is best used for images that need to maintain their original quality, like graphics, logos, charts, and infographics.
Note that since PNGs are typically larger file sizes than JPEGs and GIFs, it is recommended that you serve optimized images that are as small as possible for the intended application.
A raster image is an image format that is represented as a grid made up of numerous individual pixels, e.g., photographs.
The more pixels the image has, the higher resolution/quality/file size it is. Common raster formats on the web are JPEG, PNG, and GIF.
Real User Monitoring (RUM)
Real User Monitoring (RUM) is a form of passive monitoring that measures the performance of a webpage from real users’ devices as opposed to synthetic monitoring that specifically launches tests against set criteria.
An example of RUM is Google’s Chrome User Experience Report (CrUX), which collects user experience metrics for how real-world Chrome users experience popular websites. Click here to learn more about CrUX.
A URL redirect maintains continuity between an old, potentially broken URL and another active URL. When a user attempts to access the old link, they are automatically ‘redirected’ to the new link ensuring a smooth transition.
This happens behind the scenes, and enables developers to avoid scouring through all possible mentions of the old link on the internet in order to change them to the new link.
Common use cases for URL redirects include website migration, https encryption, canonicalization (i.e. redirecting from www to non-www or vice versa), geolocation, platform-specificity, or combinations of the above.
Depending on how they are set up, redirects are broadly classified into Server-side and Client-side redirects.
In the interest of web performance, avoid redirects, if you can; when this is not possible, try to minimize them as much as possible.
The Render Tree is the result of the combination of the DOM and the CSSOM Trees.
The DOM Tree contains all the information about the structure of the page’s HTML elements, and the CSSOM Tree contains information pertaining to how the elements are styled.
When combined, the Render Tree contains the entire information about all the visible DOM content on the page, as well as, all the CSSOM information related to styling of the various nodes.
The construction of the Render Tree enables the browser to start establishing your page’s layout so that your page can be rendered. The information in the Render Tree enables the browser engine to calculate styling and geometry for each element, following which, the pixels are painted onto the screen.
A request header is an HTTP header sent by the browser, along with the HTTP request.
The request header lets the browser pass information related to the HTTP request, such as what the browser wants, what file formats are accepted by the browser, what type of compression is accepted by the browser, etc.
The request header also contains information related to the version, type, and capabilities of the browser making the request so that the server can send compatible data.
A response header is an HTTP header sent by the server, along with a page resource.
The response header lets the server pass information to the browser that is related to the resource being sent, such as the resource’s file type, resource’s file size, which server/CDN was used to serve the resource, etc.
The response header also contains more information related to the server that sent the resource, as well as, additional details like how long the resource can be cached for, when the resource was last updated, etc.
Responsive design is a website design practice, in which, the layout of the website varies according to the screen width of the device used to access that website.
It can be considered a “one-size-fits-all” solution as it is generally used to design one version of a website (e.g., for mobile) and then scale it based on the device used to access the website.
Moreover, many CMS (e.g., WordPress, Magento, Shopify, etc.) and website builders provide themes, plugins, and other tools to enable users to create websites that utilize responsive design.
Responsive design, when done properly, results in the website layout smoothly adjusting to the browser width, no matter what device is used.
Responsive design is similar to Adaptive design in that the website’s layout (and subsequently page assets) changes based on the viewport; however, where this design philosophy differs is that it modifies the existing layout depending on the user’s viewport.
Round-Trip-Time (RTT) is defined as the time taken for a data packet to be sent to a destination, plus the time it takes for that packet’s acknowledgement to be received at the origin.
Within the context of web performance, it is the time taken from the moment an HTTP request is sent by the client (i.e., browser) to the server plus the time taken by the server to return a 200 OK status response.
A high RTT usually indicates slow server response, or multiple redirects that could cause delays in your page loading time.
Secure Socket Layer (SSL)
Secure Socket Layer (SSL) is an encryption-based internet security protocol to keep the internet connection secure between networked devices.
It was created to enforce privacy, authentication, and data security so that attackers couldn’t read, modify, or steal the data and information being transferred between devices. The devices could be a server and a client or two different servers.
SSL works by encrypting (i.e., scrambling) the data being sent between users and your site to prevent hackers from reading it while the data is in transit. This information could be sensitive or personal information like your users’ personal details, financial information, login/authentication details, etc.
SSL encryption is implemented through the use of digital documents known as SSL certificates, which are installed on your server. Each certificate has a key pair – a private key and a public key, which act together to provide encryption. Each certificate also contains the identity of the website owner.
When your site is protected by SSL encryption, your domain name starts with https:// instead of http:// and a padlock is seen on the browser’s address bar next to your URL. Clicking the padlock reveals information related to the SSL certificate issued for that website.
To understand speculative parsing, we have to revisit how the browser loads your page.
However, the DOM Tree is built bit-by-bit as the browser has to sequentially parse through each line of your HTML code. When a script is encountered, HTML parsing has to be paused because scripts can manipulate the DOM Tree.
If the browser paused the HTML parsing process every time it encountered a script, the browser would be significantly delayed in discovering the rest of the resources that are slated to be loaded. This delay may, in turn, cause delays in DOM Tree construction, creating a bottleneck in the page loading process, and ultimately resulting in a slow loading page.
Speculative parsing is a feature found in many modern browsers to partially overcome the above limitation. In this case, the browser starts looking ahead to load scripts, stylesheets and images it finds in the parsing stream.
This allows the DOM Tree to continue being built through predictive runs, in the interest of page load performance.
If the speculation is successful, the browser need not re-parse the portion of your page’s HTML that was already scanned for scripts, stylesheets, and images. However, if the speculation fails, there’s more work lost because the browser has to parse the HTML for those resources again.
Note that using
document.write() to inject scripts is known to cause failures in speculative parsing, and you should avoid doing so to prevent significant delays in DOM Tree construction.
TCP /TCP Connection
TCP stands for Transmission Control Protocol, which is a connection standard that specifies how different applications exchange information with each other. TCP, along with the Internet Protocol (IP), define how devices send data packets over the internet.
TCP is in charge of establishing and maintaining the connection until the application programs have finished exchanging information. This includes everything from the initial opening of the connection to how the application data is broken into packets for delivery, and further steps, all the way up to the final acknowledgement received upon successful data transmission.
When the browser wants to fetch a resource from your server, it opens a TCP connection to send the HTTP request.
Transport Layer Security (TLS)
Transport Layer Security (TLS) is basically an updated and more secure version of Secure Socket Layer (SSL).
Uniform Resource Locator (URL)
URL stands for Uniform Resource Locator. A URL is basically a web address that points to a web resource (e.g., image, CSS file, etc.) or document’s (e.g., webpage) location.
It incorporates the domain name, along with other important information to create a unique web address so that you can find specific webpages or resources.
For example, https://gtmetrix.com/blog is the URL for the blog section on our website.
A URL is helpful as it is human-readable and you don’t need to memorize IP addresses to find resources or webpages.
Think of a specific webpage as a house that you need to find on the street (in this analogy, the website). The URL is the navigation route/path you must take to locate the house.
The User-Agent is a computer program that represents a user e.g., a browser, within the context of the internet and/or web performance.
user-agent is a characteristic string in the HTTP request header that helps webservers and other network devices identify the application, operating system, vendor, and/or, version of the user-agent making the specific request.
user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KTHML, like Gecko) Chrome/85.0.4183.83 Safari/537.36
User experience (also known as page experience) is a holistic concept that encompasses every aspect related to how a potential user (i.e., one who visits and uses your website) perceives your website’s performance.
In a nutshell, it takes into account how fast your website loads, how quickly a user can use it, and how delightful the experience is.
A vector image is an image format composed by having the renderer follow algorithms that define lines, curves, shapes, and colours to generate the image, e.g., logos.
Because there are no pixels to work with, vector images are much smaller in file size compared to their raster counterparts.
They can also be scaled to whatever size is needed without sacrificing quality due to their algorithmic nature. The common vector format on the web is SVG.
Viewport refers to the user’s visible area of a webpage. The size of the viewport varies based on the device used to access the webpage (e.g., desktop, a mobile phone, a tablet, etc.).
Your webpage will need to be appropriately sized and scaled depending on the devices used by your page visitors.
The Waterfall Chart shows the request-by-request loading behaviour of your webpage. It displays every single resource requested by your page, like scripts, media files, third-party resources, etc.
With a Waterfall Chart, you can see what requests loaded and in which order. The duration and execution time of each request is also displayed, with colourful bars representing how long each one took to request, download, and/or execute.
The Waterfall Chart aids you in debugging performance issues, as well as, general page issues as a whole. You will find the Waterfall Chart on a separate Waterfall Tab on the GTmetrix Report.
A web server is a combination of hardware and software that uses various protocols (e.g., HTTP, TCP, etc.) to respond to client requests made over the internet.
In the context of software, a web server contains several parts that process network requests and control how users access these hosted files.
When a user visits your website, the browser requests these files over the internet (i.e., HTTP requests). The web server hosting your website accepts the request, finds the requested files, and sends them so that the browser can display content on your website.
Each response from the server is accompanied by a 3 digit code indicating the status of that request (i.e., a status code).
- 301 status code – indicates that the URL has moved permanently.
- 200 status code – indicates that the HTTP request is successful.
- 404 status code – indicates that the requested resource could not be found.
Common web servers include Apache, NGINX, Microsoft IIS, among others. Click here to read more about web servers.
WebM is an open-source, compressed multimedia format developed by Google for audio-video files. WebM was specifically developed for use with HTML5 for the purpose of serving videos on the web.
WebM is free to use for everyone – from developers, to website owners, to web users. This differentiates it from the MP4 video format, where licensing costs may be involved for the codecs used in MP4 videos.
WebM is also particularly suited to streaming videos on the internet (e.g., YouTube uses WebM videos), achieving a good balance of file size and video quality.
Even though the WebM format is not as widely supported as MP4, it is compatible with nearly all modern browsers.
WebP is a next-generation image format employing, both, lossy and lossless compression. It is a sister format to WebM and is also developed by Google.
WebP can be used on a large variety of photographic, translucent, and graphical images on the web. The lossy compression ratio can be adjusted to achieve an acceptable trade-off between file size and image quality.
WebP images have been shown to be much smaller than equivalent PNG, JPEG and GIF images – by upto 25-50% in some cases. This makes them suitable for optimizing the performance of your websites.
Even though WebP is not as universal as JPEG images, it is supported by nearly all modern browsers.