974 articles on Performance.
In this three-part series, Adrian Bece is going to go through the CSS refactor process from the beginning to the end, starting with knowledge on how to approach it and some general pros and cons of refactoring, then moving onto the refactoring strategies themselves and ending with some general best practices on CSS file size and performance. CSS refactoring is not an easy task — it needs to be don
We’ll discuss how we scaled our interactive query infrastructure to handle the rapid growth of our datasets, while enabling a query execution time of less than 5 seconds.
Even though Vue.js claims to have an approachable minimalist framework that can be incrementally adaptable, it can be a little bit overwhelming when starting as a Vue.js newbie. In this tutorial, Uma Victor will take a look at some tips and tools to help you become a better Vue developer. You will start with some helpful insights on organizing your projects for scale and other great points to note
Cloudflare's global network is always expanding. We've recently added ten new cities and four new countries to our network.
Static Generation is great for performance — until the app gets too big and build-times go through the roof. Today, we’ll have a look at how Netlify’s fresh On-Demand Builders can fix that. Additionally, we pair it up with Next.js’ Incremental Static Regeneration for the best user and developer experience. And, of course, benchmark those results!
Vercel has added an additional $102 million of investment at a valuation greater than $1BN. This is a major milestone for our company, customers, and community in our mission to build a faster web, together.
As more clients rely on GraphQL to query data, we witness performance and scalability issues emerging. We share some query strategies for GraphQL at scale.
Did you know PostgreSQL has the ability to synchronize sequential scans? If you are running data warehouses, you might have already used it without knowing.
We don’t need to write everything from scratch every single time. With boilerplates and starter kits, we can set up our projects faster, and get to work immediately. We’ve also just recently covered CSS auditing tools, CSS generators, accessible front-end components and VS code extensions — you might find them useful, too. This collection is by no means complete, but rather a selection of things t
Building a faster website can be a rocket task these days. There are so many things to consider, so it’s challenging to get everything right. Here are some less-known tools that might help you get there.
It’s here! For the last year, we’ve been working with Addy Osmani on a new Smashing Book all around image optimization. And now it’s here. Meet “Image Optimization”, our deep-dive guide to understand how to deliver high-quality images on the web fast. 528 pages. From formats and compression to delivery and maintenance. Get the book right away!
I just joked that we're basically getting everything we want in CSS super fast (mostly referring to container queries, my gosh, can you imagine they are
Google’s Core Web Vitals initiative has taken the SEO and Web Performance worlds by storm and many sites are busy optimizing their Page Experience to maximize the ranking factor. The Cumulative Layout Shift metric is causing trouble to a lot of sites, so let’s have a look at ways of addressing any issues for that metric.
Getting a good performance score from Google is hard for any website — but doing so for an online store is even harder. We achieved green scores — even several for mobile. Every front-end developer is chasing the same holy grail of performance: green scores in Google Page Speed. In this article, Jennifer Brehm is going to highlight some of the work she did and how her team was able to achieve thei
Critical CSS is one of those things I see in my performance reports but always seem to ignore. I know what it means. It means to put only the CSS required to
In this episode, we’re talking about React performance. What factors slow our React apps down, and how can we fix it? Drew McLellan talks to expert Ivan Akulov to find out.
QUIC is a new fast and secure transport protocol. Version 1 has just been published as RFC 9000 and today Cloudflare has enabled support for all customers, come try it out.
UPDATED July 2023: How to use EXPLAIN ANALYZE in PostgreSQL, learn tools to visualize the output. See query execution time and row count.
This article is about bulk loading, which is the quickest way to import large amounts of data into a PostgreSQL database.
Web fonts are often terrible for web performance and none of the font loading strategies are particularly effective to address that. If you want to use web fonts your choices are basically Flash of Invisible Text (aka FOIT) or Flash of Unstyled Text (FOUT). Neither option has really “won out” because neither is really satisfactory, to be honest. Upcoming font options may finally deliver on the pro
Making GitHub’s new homepage fast and performant — Tobias Ahlin describes how the scrolling effects are done more performantly thanks to IntersectionObserver
Google’s “Page Experience Update” will start rolling out in June. At first, sites that meet Core Web Vitals thresholds will have a minor ranking advantage in mobile search for all browsers. Search is important to any business, and this is the story of how Beau Hartshorne and his team at Instant Domain Search improved their Core Web Vitals scores. Plus, an open-source tool they’ve built along the w
Since its early days, JavaScript programs have grown in complexity and the number of tasks they perform. The need to compartmentalize such tasks into closed scopes of execution became apparent. “Tree-shaking” is a must-have performance optimization when bundling JavaScript. In this article, we dive deeper on how exactly it works and how specs and practice intertwine to make bundles leaner and more
UPDATED Mar 2023: How to use pg_stat_statements to detect slow queries - including examples and code - improve PostgreSQL performance
Over the past few months, we’ve added several new features to Stripe Invoicing to help any business get paid faster and streamline their collection workflows.
Is it ok to have if clauses that will basically never be run? Surely, there must be some performance cost to that...
When tackling a big refactor, what are the things you should focus on and what performance improvements can you expect? Dealing with themes for large platforms and CMS, legacy issues often become a bottleneck. In this article, Carson Shold discusses how his team improved the performance and organization of their Shopify themes, and improved maintainability along the way.
This article showcases a case study of Bookaway’s landing page performance. It’s about a couple of things that Bookaway faced and Liran Cohen (as part of a company in the traveling industry) managed to optimize the pages, so that the HTML they send is smaller. Smaller HTML means less time for Google to download and process those long strings of text. Today you’ll see how taking care of the props y
At GitHub, we pride ourselves on delivering a first-class developer experience. A considerable part of our work is on our front end, which we strive to keep as lightweight, fast,…
Raygun is an error and performance monitoring software for websites and mobile apps. In the case of websites, you install their JavaScript snippet onto your
Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from Addy Osmani
The cat is out! For the last year, we’ve been working with Addy Osmani on a new Smashing Book all around image optimization. And now it’s here. Meet “Image Optimization”, our practical modern guide to delivering high-quality images on the web with the best performance. Image optimization, loading behavior and rendering in the browser require understanding of image formats and image compression tec
At GitHub, we’re continually working to improve existing features and shipping new ones all the time. From our launch of GitHub Discussions to the release of manual approvals for GitHub…
Easing functions can change the look and feel of an animation by affecting the rate, or speed, of an animation. As human beings, we are accustomed to a natural, non-linear motion. Using those custom-easing functions in the animations can lead to an improved impression on users and a more delightful user experience. In this article, we’re going to take a deep dive into easing functions and see how
Complex systems are difficult to reason about at scale; we often can’t accurately extrapolate system behavior and performance, so we need to derive that data empirically. We use load testing to do just that: find the limits of our systems and weed out bugs at a large scale in a controlled environment. Slack is a…
Here's Jess B. Peck writing all about Google's Core Web Vitals:
Sometimes it’s the little things in web life that make us look twice. From carousels to documentation to cookie disclaimers, here are some sites taking the mundane and sprinkling in a little magic. Great ideas in web design come so thick and fast that it can be easy to miss them if you’re not careful. In this article, Frederick O’Brien brings you a small antidote to that, piecing together splashes
There is no doubt that CSS plays a huge role in web performance. Milica Mihajlija puts a point on exactly why:
How are Core Web Vitals measured? How do you know your fixes have had the desired effect and when will you see the results in Google Search Console? Let’s figure it out! In this post, Barry Pollard is going to attempt to explain a bit more about what’s going on here and explain some of the nuances and misunderstandings of these tools.
In the spirit of quickly solving problems, we’re excited to launch three new improvements to the Workers experience, so you can take your next idea and ship it even faster.
If you’re an agency owner, you know that you need customers to grow. No matter how big your dreams are, customers are the lifeblood of your business. But you’re probably wondering — how do you attract quality, high-paying clients?Selling is key to growing your web design business, but it doesn’t have to be complicated! With clear goals, customer research, and proven closing techniques, anyone can
At Smashing, we’ve been busy over the last few months. We’ve set up new workshops, redesigned our navigation, refined performance and improved accessibility. There are subtle UX changes coming in, and we’d love to share what we’ve been cooking. A sincere thank you for your kind, ongoing support and generosity — thank you for being smashing, now and ever!
Landing a top spot on Google can have a multi-million dollar impact on your business. Starting in June 2021, the performance of your site (determined by Core Web Vitals) will be critical to your search ranking.
In 2019 we set out to rewrite the Shopify storefront implementation. Our goal was to make it faster. We talked about the strategies we used to achieve that goal in a previous post about optimizing server-side rendering and implementing efficient caching. To build on that post, I’ll go into detail on how the Storefront Renderer team tweaked our load balancers to shift traffic between the legacy sto
Rendering logs in a web UI might seem simple: they are just lines of plain text. However, there are a lot of additional features that make them more useful to…
How do we get media performance right while staying within performance budgets? In this article, Akshay Ranganath will take a look at the recent stats and data around performance budgets, video playback performance issues and some techniques and tools to address these issues. Having a performance budget as a standalone metric might not be of much help. That’s why we must correlate performance to o
Get insight into how the PostgreSQL optimizer works and how it speeds up queries. Find out about anti-join & from_collapse_limit.
A customer writes in and says the dreaded words: “My app is slow”. Here we go… Performance problems can be a real struggle to track down, especially if they aren’t easily reproducible. Looking at the customer’s logs, you see that it takes over 1.5 seconds to switch between channels on their Android client! That must…
Eleventy (aka 11ty) is rising in the ranks among static site generators. This Node-based builder is attractive due to its zero-config starting point, purely static output, and ease of achieving the coveted top Lighthouse performance score of four perfect 100s. Let’s dive into what else makes it unique, and learn about some essential concepts to help you successfully get started.
One of the drivers of the popularity of headless options is that expectations for the quality of user experience are constantly going up. We have a wealth of tools to help developers build things fast so results are expected quickly. Going headless lets your team take full control of the user experience instead of wrestling with a large tool that doesn’t do quite what you wanted. In this article,
How we use gRPC in combination with Kubernetes to improve the performance and usability of internal APIs.
Wondering what’s happenin’ at Smashing? Well, we’ve been busy. Here’s a little story of how we removed floating labels, improved performance on mobile, and launched a new series of articles. Oh, and how you can contribute to Smashing, too.
The secret to growing a successful web design business is thinking of design as a service, not a product. When you focus on recurring revenue and sell to one targeted niche, you can grow a business faster than ever. In this two-part series, Stephen Roe shares the agency growth lessons we’ve learned. In this first part, we break down the pricing model that’s worked best for us and explain how to le
We explored almost 200 websites with the activated Automatic Platform Optimization feature in Chrome User Experience Report data. Automatic Platform Optimization consistently demonstrated better aggregate performance among sites we analyzed in TTFB, First Paint, FCP, and LCP metrics.
Every day, GitHub serves the needs of over 56M developers, working on over 200M code repositories. All but a tiny fraction of those repositories are served with amazing performance, for…
Today, we’re excited to announce the release of three of the most requested features: adding multiple websites to an account, supporting Single-page Applications (SPA) as well as showing Core Web Vitals in Web Analytics.
Ideally, a CSS auditing tool would provide some insights about how heavily CSS implact rendering performance, and which operations lead to expensive layout recalculations. It could also highlight what properties don’t affect the rendering at all (like Firefox DevTools does it), and perhaps even suggest how to write slightly more efficient CSS selectors. In a new short series of posts, we highlight
