Insights into Web Speed: Practical Solutions
Web speed has transitioned from a technical curiosity to a fully-fledged field over the past few years. It influences conversions, SEO, and ad costs, and boasts its own metrics (Core Web Vitals), tools, and conferences. But how does one navigate it all?
At PageSpeed.ONE, we've gathered approaches through years of consultations that consistently deliver results. We present them here as articles, case studies, and checklists. Forget theoretical essays – this is about concrete numbers and actionable steps.
Choose a topic you need to tackle practically:
Why Web Speed?
Psychology, conversions, and Google. Why should you care about a fast website?
Why Monitoring?
Occasional speed testing isn't enough. Without continuous speed monitoring, hidden issues remain undiscovered, historical data for analysis is absent, and trends that could cost your website conversions and visitors are easily overlooked.
LCP Element
To optimize LCP, it is crucial to identify the "LCP element", which is the largest element in the viewport.
CLS Optimisation
Let’s explore how to avoid CLS issues and how to fix them if they occur.
LCP Optimisation
Let us explore the challenges you might face with the Largest Contentful Paint (LCP) metric and how to optimise it effectively.
INP Optimisation
INP is not the easiest metric to optimise, so we have selected the most common issues and solutions from our experience.
BFcache
Back/forward cache (or BFcache) is a browser optimization that allows instant back and forward navigation. It significantly enhances the browsing experience, particularly for users with slower networks or devices.
Gzip and Brotli Compression
At PageSpeed.ONE, we often delve into very specific issues. Even so, I am still amazed at the level of detail we explore. The same goes for data compression, which we will examine in this article.
Navigation Types
Understanding different navigation types is crucial, as some are markedly faster than others. From a web speed optimization perspective, the goal is to steer as many users as possible towards faster navigation types.
Speculation Rules
The Speculation Rules API offers a means to prefetch or even pre-render another page, allowing for near-instantaneous loading of the page a user navigates to, enhancing the overall web experience.
Cloudflare
Cloudflare acts as a middleman between your website and its visitors. Unlike a standard CDN (Content Delivery Network), it is not just a system for distributing images and files.
Web Font Optimization
The world of web fonts is much like a beauty salon – we all want the best, but we’re not always willing to wait while the stylist finishes their work. And your visitors? They’re particularly impatient.
DOM Optimisation
A large and inefficient page structure (Document Object Model, or DOM) can significantly slow down your website 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 affect interaction response speeds (INP metric).
Lazy Loading Images
Lazy loading images and other elements is recommended as one of the fundamental yet highly effective methods for optimizing page load speed. We suggest conservatively deferring the loading of all images outside the first viewport. Be cautious when applying lazy loading to images that are LCP elements, as this can actually worsen speed.
CLS: How to Maintain Heights?
Discover why and how to ensure dimensions for elements like <img>, <iframe>, or JavaScript components that are asynchronously inserted into a page, using HTML or CSS.
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, thereby affecting metrics like Total Blocking Time (TBT) or Interaction to Next Paint (INP), an essential part of the Core Web Vitals set.
Image Optimization
Even mere mortals can tame their images and make them work for you, not against you. Just use WebP or AVIF, compress well, and remember lazy loading.
React Optimisation
React is a popular tool for developing modern websites, but speed and interactivity aren’t always automatic. In this article, we present key techniques for optimising Core Web Vitals – from hydration to <Suspense> and DOM handling – to help you speed up your React projects.
Optimising Vue.js/Nuxt.js
Enhance your Vue.js website's speed with SSR, lazy loading, and other tips. Better performance means happier users and increased conversions.
Backend Optimisation
The backend plays a crucial role in web speed optimisation, as proper code and server optimisation can eliminate delays often caused by request processing and content delivery.
Optimising WordPress Speed
Website speed is not just a cosmetic detail – it is a crucial factor influencing the success of your online business. A sluggish WordPress site is often due to poor plugin choices, bloated themes, or a lack of knowledge about speed optimisation.
Shoptet Optimization
Shoptet is fast, unless you slow it down. We show you how to optimize speed: what harms, what helps, and how to keep an eye on your e-shop.
Cookie Banners and Speed
Got your web speed fine-tuned? Excellent, but perhaps you haven't deployed a cookie banner yet.
HTML <head> and Speed
You love WebExpo and you love performance. And we also love Harry Roberts because his talks and articles always go in-depth.
WebP Images
Web loading speed is often a matter of seconds. The WebP image format could be your secret weapon to save kilobytes and achieve 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 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 eternal question is: Is it faster to have many small CSS files divided by components, or just 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 data set provided by Google that collects and anonymously analyses real user experience data while browsing the web using the Chrome browser.
Google Search Console
How to decipher web speed data and Core Web Vitals in Google Search Console. A practical guide for developers, marketers, and website owners: where to find reports, how to interpret them correctly, and what GSC doesn't cover.
Performance Budgets
Performance budgets are a methodology used to maintain website speed at a predetermined level. Think of a “budget” as a set of limits for different metrics.
Lighthouse Diff
Lighthouse Diff is a tool for visually comparing two Lighthouse reports. It helps identify exactly what has changed on your website – from overall scores to metrics and individual recommendations.