The Essentials of Web Speed
Everything you need to know about web speed.
Why Web Speed?
Psychology, conversions, and Google. Why should you also have a fast website?
Why Monitor?
Occasional speed checks aren’t enough. Without continuous speed monitoring, hidden issues remain unseen, you lack historical data for analysis, and trends that can cost your site conversions and visitors are easily overlooked.
LCP Element
To optimize LCP, it is crucial to identify the "LCP element," which is the largest element within the visible part of the browser.
CLS Optimization
Let’s explore together how to avoid CLS issues and how you can fix them when they occur.
LCP Optimization
Join us as we explore common issues with the Largest Contentful Paint (LCP) metric and how to optimize it most effectively.
INP Optimization
INP isn’t the easiest metric to optimize, so we’ve selected the most common issues and solutions from our experience.
BFcache
Back/forward cache (or BFcache) is a browser optimization that enables instant back and forward navigation. It significantly enhances the browsing experience, especially for users with slower networks or devices.
Gzip and Brotli Compression
At PageSpeed.ONE, we often delve into very specific issues. Yet, I’m still amazed at the depths we reach. It was the same with data compression, which we’ll explore in this article.
Navigation Types
Understanding the different types of navigation is crucial because some are significantly faster than others. From a web speed optimization perspective, the goal is to direct as many users as possible to the faster navigation types.
Speculation Rules
The Speculation Rules API offers us the ability to preload or even pre-render another page. This can lead to nearly instantaneous page loading for users transitioning between pages, enhancing their overall web experience.
Cloudflare
Cloudflare acts as an intermediary between your website and its visitors. Unlike a regular CDN (Content Delivery Network), it’s more than just a system for distributing images and files.
Web Font Optimization
The world of web fonts is like a beauty salon—everyone wants the best, but not everyone is willing to wait for the stylist to finish their work. And your visitors? They are particularly impatient.
DOM Optimization
A large and inefficient webpage structure (Document Object Model, or DOM) can significantly slow down your site and negatively impact Core Web Vitals metrics. Keeping it reasonably sized and highly efficient is crucial for the overall technical performance of your project and will influence the interaction response speed (INP metric).
Lazy Loading Images
We recommend lazy loading images and other elements as one of the fundamental and highly effective methods for optimizing page load speed. Conservatively defer loading all images outside the first viewport. Be cautious when applying lazy loading to images that are the LCP element, as this can actually worsen speed.
CLS: How to Maintain Height?
Learn why and how to ensure dimensions for elements like <img>, <iframe>, or JavaScript components that are asynchronously inserted into the page, at the HTML or CSS level.
Web Vitals in the Browser
Core Web Vitals are metrics we use to evaluate website performance in areas such as loading speed, interactivity, and layout stability. These metrics are increasingly important for ensuring a good user experience, and Google uses them as one of the criteria for search result rankings.
INP and setTimeout()
The setTimeout() method is used to optimise long tasks in JavaScript that block user interactions and degrade metrics such as Total Blocking Time (TBT) or Interaction to Next Paint (INP), a vital part of the Core Web Vitals suite.
Image Optimization
Even you, mere mortals, can tame your images and make them work for you, not against you. Just use WebP or AVIF, compress well, and don’t forget about lazy loading.
React Optimization
React is a popular tool for developing modern websites, but speed and interactivity are not always automatic. In this article, we present key techniques for optimizing Core Web Vitals—from hydration to <Suspense> and DOM manipulation—and show you how to use them to speed up your React projects.
Vue.js/Nuxt.js Optimization
Enhance your Vue.js website speed with SSR, lazy loading, and other tips. Better performance means happier users and improved conversions.
Backend Optimization
The backend plays a crucial role in website speed optimization, as proper code and server-side optimization can eliminate delays often caused during request processing and content delivery.
WordPress Speed Optimization
Website speed is not just a cosmetic detail – it's a crucial factor that affects the success of your online business. A slow WordPress site is often due to poor plugin choices, bloated themes, or a lack of knowledge about web speed optimization.
Shoptet Optimization
Shoptet is fast unless you slow it down. Discover how to optimize speed: what harms, what helps, and how to keep your e-shop in check.
Cookie Banners and Speed
Got your website speed fine-tuned? Great, but perhaps you haven’t deployed a cookie banner yet.
HTML <head> and Speed
You love WebExpo and you love performance. Plus, we love Harry Roberts because his lectures and articles always dive deep.
WebP Images
The speed of a website often hinges on seconds. The WebP image format can be your secret weapon to save kilobytes and edge closer to optimal performance.
AVIF Images
The AVIF format offers even better compression than WebP. Let’s explore when it makes sense to use it and how to implement a fallback for older browsers.
Study: Chats and Speed
Live chat is used by twenty percent of Czech e-shop operators. But how do these components affect website speed?
Study: CSS One or Many?
At PageSpeed.ONE, we often find ourselves in "evergreen" discussions that divide the team. One perennial question is: Is it faster to have many small CSS files divided by components, or one large file?
Synth vs. CrUX vs. RUM
Let's clarify the differences between various types of web speed measurements. We’ll discuss synthetic data (“synth”), Google user data (“CrUX”), and data from all users (“RUM”).
Chrome UX Report (CrUX)
The Chrome UX Report (CrUX) is a public dataset provided by Google, collecting and anonymously analyzing real user experience data when browsing the web with the Chrome browser.
Performance Budgets
Performance budgets are a methodology designed to maintain the speed of web pages at a predetermined level. Think of a "budget" as a set limit for various metrics.