Exploring different approaches to optimizing INP is fascinating. Developers at the Italian marketplace Subito conducted A/B tests to identify issues. TikTok and Facebook scripts were problematic, so they implemented Next.js 16 and the React compiler. Their efforts led to a 5% increase in ad detail views.
From our experience, embedded videos often increase the Total Blocking Time metric. Stefan Bauer suggests placing videos inside a <details> element, entirely without JavaScript. The browser won't download or initialize the video until the user clicks the element.
Bart Veneman analyzes CSS data from 100,000 websites. The median CSS size is 309 kB, but he found a site with 52 MB of styles. Check your site's status in the Network panel in DevTools or our Technical report after starting a PLUS test.
INP, TBT, JS Long Tasks—overwhelmed by JavaScript metrics? Our help article clarifies them with practical examples and specific recommendations like DOM optimization and code splitting.
More websites are meeting Core Web Vitals. Mobile compliance rose from 36% in 2023 to 48%, and desktop from 48% to 55%. However, 16% still incorrectly lazy-load LCP images. We now also collect data on Long Animation Frame (LoAF).
WebP is great, but AVIF offers more. It provides better compression, supports transparency, avoids blocking artifacts, and handles HDR and more color spaces. Just be aware of the higher server load during generation.
Martin Michálek warns against the myth that 100 ms equals 1% revenue. Many studies, including those from Walmart and Amazon, confuse correlation with causation or overlook that wealthier users simply have faster devices. The solution? Conduct rigorous A/B tests and rely on statistically significant data.
Michal Matuška's article guides you through implementing React 19.2 updates, featuring practical examples of the new Activity component. Be cautious with Server Side Rendering, as React doesn't include hidden Activity components in HTML, which can affect SEO.
ContentSquare analyzed data from 997 users, finding that INP correlated with bounce rates. Users with poor INP were 15% more likely to experience frustration (rage clicks). Those with good INP had a conversion rate of 2.5%, compared to just 2% for those with poor or needs improvement INP, a 25% difference.
Every year, we look forward to Alex Russell's device speed graphs. Unfortunately, the results are less encouraging. The median mobile page is growing larger each year, while the performance of budget Android phones remains stagnant, making the reduction of every kB an ongoing challenge.
Website operators have more to worry about. An avalanche of AI scraping is driving up operational costs, degrading server response (TTFB), and slowing down websites for real users who should be generating revenue. Read more on Seznam Zprávy.
You can already watch Barry Pollard's talk on the Speculation Rules API and Michal Mocný's on measuring metrics on soft navigation pages. More videos from the largest speed conference will be added continuously.
CrUX data are a crucial source of information on how your website performs in the real world. In addition to basic metrics, you'll also receive data on server-to-user latency and detailed LCP tuning. Learn more in Michal Matuška's fourth highest-rated talk.
React has released a fascinating version focused on speed. New features include timeline profiling integration, providing detailed performance profiles directly in Chrome DevTools, and the Activity component that saves performance.
Addy Osmani published an extensive article on his blog about the development of CWV metrics and Google's approach to speed. The future outlook is particularly intriguing, as CWV metrics will continue to evolve. For instance, the metric for screen repaint smoothness is being explored, along with solutions for measuring metrics in SPAs.
Through successful collaboration, we improved deNatura's Core Web Vitals metrics to the green zone, resulting in a 17% increase in Google traffic. Read how we optimized Shoptet on our website.
Chrome has taken another big step in AI and web development. The MCP server for DevTools allows your AI assistants to discuss web debugging directly in the browser. You can also upload and analyze recordings in the Performance tab.
Martin discusses with Michal Mládek why website speed remains crucial for business, why Core Web Vitals alone aren't enough, common hosting myths, frequent company mistakes, and how AI is changing the role of websites.
Harry Roberts published an article on his blog comparing the websites of cycling gear brands sponsoring teams in the Tour de France. Along with a complete ranking of websites based on Core Web Vitals results, there are also a few recommendations for each page.
Cloudflare is a tool that is free in its basic version. How can it help you, and why do we recommend it to everyone? It can assist with DDoS attacks, ensure higher website availability, and reduce server load. Learn how to set up Cloudflare for your website in our article.
Paul Volcano compiled statistics on the use of robots.txt for AI bots on websites. Recently, more and more projects are addressing high traffic due to AI crawlers and setting their own rules in robots.txt. For instance, 21% of the top 1,000 websites have rules for these bots.
In practice, we often hear the opinion that what is behind a login doesn't need to be measured. Nevertheless, the speed of SaaS websites is a topic in itself. So how did the comparison of 19 platforms like Asana, Slack, Trello, and Jira fare in terms of speed, reliability, and stability?
A new article on Podnikatel.cz discusses e-shop speed. Experts like Honza Bartoš, David Kazda, and Martin Michálek contributed insights. The article covers essential know-how for your business, including common mistakes that lower conversion rates and how to improve them.
Scott Moore offers an interesting perspective on speed culture. Let’s discuss how to unite the team, stop separating website speed into backend and frontend, and start viewing it as an end-to-end process. The article summarizes key issues and provides guidance on understanding each other better and which metrics to track.
Our Help Center now features a section on another popular JavaScript framework. Speed issues with Vue.js often stem from human error, not the framework itself. Focus on architecture, test on low-performance devices, and optimize based on best practices.
You can also check out two talks on web speed. Tammy Everts connected web speed and user experience with business metrics, while Tim Kadlec discussed implementing CSS View Transitions and Speculation Rules.
In his video, Paul Irish showcases many interesting features. Notably, he introduces new tagging for elements that degrade CLS metrics, adding scripts to the ignore list, and more personalized AI performance tips for websites.
If this question concerns you, find the answer in an article by the Speed Kit team. Their solution dives into the reading and writing of the src attribute in img tags, which is fundamental for measurement. Be warned, it's quite technical and experimental—what we call 'geeky' at PageSpeed.ONE.
Having a Shoptet e-shop provides a solid foundation, but even the best shops require regular maintenance. In our article, you'll discover common issues on this platform, such as clumsy design tweaks and adding third-party plugins and scripts without monitoring their impact on speed.
Let’s dive into the minds of developers optimizing LCP for a Next.js project. This article covers key topics like deferring non-critical resources in the header, fixing hydration issues, and addressing double rendering of LCP elements.
Do you live and breathe making websites faster every day? Then the virtual meetups of PerformanceObserver are for you. The web speed community is scattered worldwide, and this is a chance to connect. So far, they have mainly shared talks on INP.
TTF and SVG fonts haven't completely disappeared. To avoid speed 'faux pas' on your website, read our article on web font optimization. Discover the necessary formats today and how to eliminate unnecessary characters in font styles.
Dive into real case studies revealing challenges, solutions, and results. Look forward to advanced optimization techniques in production applications running on React/Next.js for major projects like DoorDash, Vio, and Preply.
QuintoAndar, Brazil's largest rental portal, improved its INP from 1000 ms to 216 ms. This was achieved through async optimizations, React transitions, and removing unnecessary scripts. Consequently, web conversions increased by 36% year-over-year.
MDN has published a comprehensive guide on website speed. You can learn about fundamental topics, such as using dns-prefetch, how browsers render pages, and the performance of CSS and JavaScript animations.
Loading speed and SEO make the difference between a selling website and one that fades into mediocrity. Investing in these areas can provide a competitive edge that's hard to catch up to. Find more arguments in Martin Stepánek's article.
Who better to guarantee speed than a development agency? Monitoring can be part of regular maintenance or service packages. Discover why agencies like PragueBest and Programia use our monitoring in Martin Michálek's article.
An inefficient page structure can significantly slow down your website and negatively impact your Core Web Vitals. Michal Matuška shares his extensive experience, explaining why DOM structure is crucial, how to measure it, and how to optimize the DOM to speed up your site.
Long synchronous tasks in JavaScript affect all websites. Alex MacArthur wrote a great article discussing task splitting options, mentioning async/await, setTimeout, scheduler.postTask, and requestIdleCallback. Speed enthusiasts will appreciate it.
Zuzana Fatrdla explains how to approach performance budgets in her new article. Want to set measurement limits correctly? Analyze data, set limits for worst-case scenarios, start with key metrics, and regularly review measurements. Read the article for more tips.
An inefficient page structure can significantly slow down your website and negatively impact your Core Web Vitals. Michal Matuška shares his extensive experience, explaining why DOM structure is crucial, how to measure it, and how to optimize the DOM to speed up your site.
Long synchronous tasks in JavaScript affect all websites. Alex MacArthur wrote a great article discussing task splitting options, mentioning async/await, setTimeout, scheduler.postTask, and requestIdleCallback. Speed enthusiasts will appreciate it.
Zuzana Fatrdla explains how to approach performance budgets in her new article. Want to set measurement limits correctly? Analyze data, set limits for worst-case scenarios, start with key metrics, and regularly review measurements. Read the article for more tips.
The start of the year invites trend predictions. According to Uxify, 2025 will focus on the INP metric, AI integration in optimizations, moving away from SPA architecture, and supporting Core Web Vitals in all modern browsers. We look forward to what 2025 will bring.
Chrome DevTools now offers an experimental AI assistance feature to help with website speed. After recording the timeline, you can ask the AI to analyze specific issues, just like in other tools. Have you tried this functionality yet?
Martin Michálek will answer that, having spoken with Otakar Lucák and Daniel Bauer. This time, they focused on the impact on marketing and business websites, discussing business metrics and specific advice on improving speed.
A valuable tool for assessing the impact of speed on SEO is the Chrome extension called Keyword Vitals. After installation, simply search for a keyword on Google, and you'll see Core Web Vitals metrics along with their correlation to rankings and target values.
The Speculation Rules API is still new, and we welcome an article from Harry Roberts. It explains how to use prefetch for preloading and reducing TTFB. We appreciate Harry's deep insights and layered approach to Speculation Rules. Very valuable!
After two years, Michal Matuška attended the Performance.now() conference in Amsterdam, featuring industry leaders like Harry Roberts, Tammy Everts, and Paul Calvano. Want to discover the hot topics in speed? Read our article.
While React offers smart optimization techniques, its performance ultimately depends on how developers use it. In Michal Matuška's article, you’ll learn how to leverage Suspense, Server Components, and the impact of DOM size on speed.
Think you can't improve website speed from the backend? Think again. There are many ways to influence speed. Zuzana Fatrdla has written tips for our Help section, including lossless compression, UTM parameters, Early Hints, and the Speculation Rules API.
Google's Core Web Vitals metrics have become an industry standard, but we can only measure them in Chromium-based browsers. We don't know the metric values in Safari. Read Brian Luis Ramirez's article to understand why this should change.
You’ve likely come across advice in many articles to defer non-essential scripts using setTimeout(). But how does it work? Michal Matuška has written a detailed piece explaining how setTimeout() works, along with the risks of this method.
Do you ever have the same question? Check out Wes Bose's video where he discusses the technologies behind McMaster.com. He covers specific techniques like using preload and the Speculation Rules API. Want a teaser? The website in the video uses jQuery.
Up to 17% of mobile visits can't use the browsing history cache due to the no-store header on the website. Chrome allows caching in such cases, improving the speed of many sites. We're excited!
Redesigning a website, especially when the current version is already lightning-fast, is no easy task. However, we succeeded with our client, the SvetSvitidel.cz e-shop. We documented our experiences and recommendations in a case study on how to tackle such a project.
In Chrome version 129, developers can look forward to new features in the Performance tab. It provides a different perspective on locally measured speed metrics and compares results with metrics obtained from real users. This could replace the well-known Web Vitals extension.
Cloudflare introduces a new service that preloads pages using the Speculation Rules API, potentially reducing overall load time. Speed Brain currently preloads static content, with plans to implement prerendering in the future.
We’ve written a guide on reliably finding the LCP element. The Largest Contentful Paint metric is crucial, but it can be tricky to identify. Our guide shows you how to find the LCP element in PageSpeed Insights, Lighthouse, or DevTools.
Google plans to implement the blocking=render attribute in its Chrome browser. Yes, this attribute will ensure that the loaded resource blocks rendering. Why would we want this? Harry Roberts explains its use.
Speculation Rules allow you to prefetch or even pre-render another page. You can define Speculation Rules directly in HTML. Learn more in our article, which also covers practical applications.
Our latest tool version is even better. We’ve put a lot of effort into improving the help section and automating PLUS monitoring. The main update will delight anyone who loves instant-loading pages.
Fast loading is great, but what about instant loading? Understanding different types of navigation is crucial, as some are much faster than others. The goal is to transition as many users as possible to faster navigation types. We’ve detailed this update in our documentation.
Why do the size and depth of nesting in the DOM have such a significant impact on website speed? Maxi Ferreira conducted an experiment explaining browser functionality, measuring the impact of DOM nesting on page rendering, and analyzing how your CSS plays a role.
From experience, we know that differences in speed measurements can confuse even knowledgeable individuals. Let’s define what synthetic data (“synth”), Google user data (“CrUX”), and all user data (“RUM”) mean.
DevTools now features new functionalities. For instance, in the Network panel, you can better debug Early Hints headers, and in the Performance tab, there’s a new checkbox for “Enable CSS selector stats,” allowing you to analyze selector performance.
This year, we organized two meetups for the WebPerf.cz community, one in Prague and one in Bratislava. Both events were successful, and now you can access the insights from them in one place, including our concise notes.
We continuously improve our tool, pagespeed.one. We've added a speed development graph showing the 75th percentile and included results from the Monitor in the Summary. Our new documentation will also share our insights with you.
The latest addition to our documentation is an article on optimizing LCP metrics. Learn how to use Priority Hints, preloading, and lazy loading to enhance your website's speed. Are you already using the efficient WebP image format everywhere?
DebugBear released a new study on the impact of extensions on browser performance. The results are intriguing. The influence of extensions is significantly higher than three years ago. Who are the main culprits for performance slowdowns now? AI and Copilot extensions like Monica, Merlin, and Sider.
Harry Roberts is a global web speed expert and will lead a full-day workshop titled 'How to Think Like a Performance Engineer' at the WebExpo conference on May 31. Expect professional tips to improve your skills. Don't miss this unique opportunity.
Martin Michálek wrote a comprehensive article for Lupa.cz about the INP metric, providing all the essential information in an accessible, non-technical format. The key takeaway? Address INP as soon as possible: start monitoring, provide instant feedback to users, and shorten lengthy tasks.
We’ve long needed a single place to gather all speed-related information, so we’re launching the PageSpeed.ONE help center. Here, you’ll find extensive knowledge on website speed, metrics, and eventually tool documentation. We’ll continuously update this resource, as we have big plans for it.
Back/forward cache (BFcache) is a browser optimization that enables instant navigation back and forth. It significantly enhances the browsing experience, especially for users on slower networks or devices. To implement it on your site, check out Radek's article on the blog.
There’s never enough good content on INP, and this article by Andy Davies is excellent. It covers identifying long interactions and provides a step-by-step guide on how to interpret and optimize them.
Starting with Chrome version 122, the Speculation Rules API enhancement is available. This native feature pre-renders links you can click from the current page, ensuring instant loading. A new option allows you to set eagerness, specifying when to trigger the rules.
We have recently launched a new version of the tester with updates based on user requests from the PLUS plan. You can now test more URLs or domains for an additional fee, we’ve added a metric for monitoring third-party JS, included INP, and you can now send notifications to multiple Slack or Teams channels. We've made many changes, so be sure to read our article.
3D models are still a niche topic, so we appreciate Jason Grigsby's article covering the most common components for displaying 3D models, file formats, user experience, optimizations, and the potential future hinted at by Apple with the new HTML element <model>.
Curious about the performance comparison between the latest iPhones and a budget Android device? Which countries can dream of 5G mobile connectivity? And what does all this mean for developers in terms of website speed? Alex Russell's article answers these questions.
The Speed Monitor is a core feature of our PLUS plan. We focused on simplicity, automation, and notification accessibility across various channels during its development. How did we do? Judge for yourself in the detailed article about the Monitor.
Is an unmet CLS metric bothering you? Radek Šír has outlined common CLS issues based on our extensive experience and how to resolve them. Did you know you need to perform an action in the interface within 500 ms after user interaction?
INP will soon replace FID in Core Web Vitals. Many developers are grappling with INP, facing challenges in accurate measurement and problem detection. Tsvetan Stoychev shares his attempt to automate INP measurement using Puppeteer.
In the video, we cover tips for optimizing the LCP metric, introduce the new INP metric, share examples of issues from our experience, and showcase the benefits of the PLUS plan.
December is a great month to learn about web speed through articles by experts from around the world. This year, topics include INP, expressing speed with a single score, and optimizing JS libraries.
A fundamental question for website owners is whether their investment in speed will pay off. With an ROI calculator, you can estimate your return. Just know values like monthly traffic, conversion rate, and order value.
Learn more about the PLUS plan in our article. It’s designed for anyone who professionally manages websites and understands that speed matters, as it improves business metrics. If you’re a website owner, developer, or marketer, read on.
Before launching the PLUS plan, we've prepared a batch of improvements for our tool. Look forward to new graphs in the Monitor reports, refined behavior after URL changes in settings, and clearer modals with test results.
Google has released a new course on web speed at web.dev, aimed at beginners. It covers key concepts and approaches to speed, offering techniques for improvement. Trust us, it's excellent.
We are excited to launch our new tester after months of development. Look forward to many updates, including new metrics, reports, and graphs.
The Interaction to Next Paint metric is stricter than the outdated FID. Optimizing this metric can take several months, so now is the best time to address it.
Our favorite, Harry Roberts, shares insights on improving LCP. Get ready for size calculations, as Chrome version 112 ignores images with low informational value.
Radek Šír attended the renowned Smashing Magazine conference to gather insights on speed optimization for you. Andy Davies from SpeedCurve fine-tuned the INP metric on-site, and thanks to Radek, you'll learn about the highlights.
A great case study from Yahoo! JAPAN News on speed optimization using BFcache (Back/Forward Cache), which we are also experimenting with for our clients. Besides increased ad revenue, the test showed a 2.26% rise in mobile page views.
The Long Animation Frames API is a proposal to innovate the current Long Tasks API, designed for machine identification of long tasks in JavaScript. This new API significantly expands capabilities that can be useful for optimizing the INP metric.
The Cumulative Layout Shift metric has long been part of Core Web Vitals. It measures unwanted layout shifts, and Radek Šír can optimize it. Read his article to learn how to improve your CLS scores.
This is a fascinating and regularly updated talk on JavaScript's impact on speed. The author? Addy Osmani, of course. We recommend developers watch how JS increasingly negatively affects website performance and what can be done about it.
With the new INP metric, we won't let you rest. Because we can't. In the article “Interaction to Next Paint: What SEOs Need to Know,“ Wix experts view the interactivity metric through the lens of SEO. How does it differ from FID? How can you optimize it?
From our workshop comes another article summarizing key insights on the Largest Contentful Paint metric. We also share practical experiences and optimization options.
The GIF format is a key part of web technology, but it's been around for 36 years. Is there a more modern and efficient format for animated images? The short answer is yes. Read the article below for a comparison of WebM, AVIF, MP4, and WebP.
Harry Roberts advocates for the use of DOMContentLoaded, even though modern practice favors user UX metrics. DOMContentLoaded provides valuable insights into page loading and helps identify issues with asynchronous code.
Martin Michálek compiled ten tips on the latest web speed updates. Look forward to practical code examples and insights on size-adjust, priority hints, BF cache, and the still underused image formats WebP/AVIF.
Harry Roberts addressed the order of elements in the <head> a few months ago, and it was a significant topic. Now, a Chrome extension by Rick highlights the current state on the page.
SpeedCurve has prepared a comprehensive comparison of loading speeds for various websites. You can view sites by focus, location, and specific metrics. How did European news websites, including Novinky.cz, perform in the LCP metric?
Have you ever wondered which Czech e-shop is the fastest? Can large e-shops be fast enough? And how does your e-shop compare? Find the answers in the latest post on the PageSpeed.ONE blog.
Google announced a major change in Core Web Vitals. The First Input Delay metric will be replaced by Interaction to Next Paint (INP) in March 2024. This new metric will better reflect the impact of JavaScript on browsing an already loaded page.
Identifying issues with Core Web Vitals metrics is now easier. The Chrome extension called Web Vitals now displays information about the INP metric and enhances console logging for all metrics.
Developers often lack knowledge in testing Core Web Vitals in the browser, skills as crucial as implementing features well. In her blog article, Zuzana Fatrdla discusses why you should avoid using Lighthouse for testing and focus on Dev Tools instead.
Since around April 6, 2023, Google changed the rules for evaluating LCP elements, significantly limiting the ability to use various hacks for this metric. Images with less than 0.05 bits of image data per pixel are not considered LCP elements. This typically applies to large, simple images that cover the entire viewport or placeholder images.
WebExpo was beautiful and intense. Martin Michálek shares his impressions from this year's conference, focusing on speed. He discusses intriguing talks by Harry Roberts and Scott Jehl, along with insights from his own presentation on Cumulative Layout Shift.
We are continuously improving our tester. Version 3.1 introduces customizable test settings, new domain types, and enhanced email reports. We've also added the option to download results in JSON format for Lighthouse and removed outdated metrics.
The changelog for the new Safari 16.4 will delight many developers. For web speed, it introduces the font-size-adjust property and the loading=“lazy“ attribute for iframes.
Single-page applications can greatly enhance user experience. However, they pose challenges in measuring Core Web Vitals, as 'soft' navigation isn't counted as unique page visits. The new Chrome 110 introduces experimental features to better measure CWV on SPAs.
Brotli and GZIP are the most common types of compression for CSS, JS, and other files. Did you know you can also set the compression level? Higher levels save more data but require more computational power and time. We’ve detailed how to choose the most effective compression level in our article.
Google is releasing a new version of the Lighthouse tool, which will be reflected in Chrome 112. The TTI metric is being removed from the LPS calculation, while the CLS metric will increase its share to 25%. This and much more will soon be in your browsers.
Currently, we have two options for prioritizing files on the web: using preload or priority hints. While they may seem similar, it's important to understand their differences, as explained in Kevin Farrugia's article.
Last year was a sharp start for PageSpeed.ONE. We provided more consulting services focused on website speed optimization and developed our own speed tester. Read about our other successes on our blog.
During website speed testing, you may encounter various issues in the Performance tab that you need to share with colleagues. Here’s a tip on how to easily upload the measured profile to the web and share the URL conveniently.
The Chrome DevRel team has compiled a list of recommendations they believe will be most effective for speed optimizations in 2023. Learn about fetchpriority, bfcache, and other ways to speed up your website.
.png)
In this article, we’ll explore some features, techniques, and tools that caught our attention in 2022. Look forward to Early Hints, a change in the calculation of the CLS metric, the CSS property size-adjust, and more.
.png)
Browser extensions can greatly affect your website's speed. The Chrome Extension Performance Lookup tool shows the impact of the 1,000 most popular Chrome extensions on page loading.
Keep your Web Vitals metrics at recommended levels: LCP < 2.5s; INP < 200ms; CLS < 0.1.
At the end of October, we attended the Perf.now() conference in Amsterdam. We heard 14 talks, with the best from Harry Roberts, Ivan Akulov, and Nolan Lawson. Check our article for the full list and details.
If you want to optimize speed but find the Performance tab in Chrome DevTools complex, try Performance Insights. It displays only the most relevant information, especially regarding Web Vitals. A detailed guide on using the tool is available on the Chrome Developers website.
Since 2009, December has been the month for the Web Performance Calendar. This year is no exception—starting December 1st, enjoy daily insights on speed. We believe you'll find it valuable.
Is LCP not enough for you? Measure the rendering of a specific element using the Element Timing API, which allows you to mark the element of interest in Chromium-based browsers. When should you use it, and what are its limitations?
Web Almanach has released its latest summary, focusing on third-party JavaScripts. Did you know that 94% of mobile sites use at least one third-party script?
The difference between your website's web font and the system font can cause unwanted layout shifts. Fortunately, there's a new CSS property, size-adjust, to help you implement this.