Content tagged “webperf”

See all tags or all content.

In this talk, I will walk through how I built the themevitals.com website which displays web performance data by Shopify theme populated with data from HTTP Archive and CrUX. In a similar talk for the 11ty meetup, I spoke more about the static website building process. In this talk, I will focus more on what data is available in HTTP Archive and CrUX and show this example of how I use it.

On this bonus episode of Honest Ecommerce, we have Sia Karamalegos. She is a freelance developer and web performance engineer, a Google Developer Expert in web technologies, and formerly worked on the Shopify performance team. We talk about the difference between Lighthouse and Core Web Vitals, why site performance matters for bounce and conversion rates—not just SEO, how ThemeVitals collects and uses real-world data to benchmark Shopify themes, and how both merchants and theme developers can use it to make better performance decisions and so much more!

103 Early Hints allow us to preconnect and even preload resources before the main document arrives. Come learn how the partnership between Shopify, Google, and Cloudflare led to this performance breakthrough, how Shopify is continuing to experiment with it at scale, and thoughts on what the future holds.

Lazy loading is a performance strategy that de-prioritizes assets like images that are not needed immediately after a webpage is loaded. As with any strategy, you can misuse it causing worse performance.

Published on Performance at Shopify

At Shopify, we’ve seen what works and what doesn’t work when companies want to improve their web performance. We want to share with you our top learnings to get you on the path of success.

Published on Performance at Shopify

The state of web performance in 2021 including the Core Web Vitals (LCP, CLS, FID) as well as FCP and TTFB for the top ~8M websites.

Published on Web Almanac by HTTP Archive

Fonts are lovely but can slow down our loads. How can we make them faster? We all love fonts. From Google Fonts to Typekit, Hoefler&Co and more, they give character and tone to our websites. The down side of fonts is that they can really slow down our loads. In this talk we'll learn about common pitfalls like critical requests depth and how to use resource hints to play tricks with latency to load web applications faster. We'll walk through a network profile to understand what's going on in the browser and how to make it faster.

Web performance matters. From SEO to bottom-line revenue impacts, performance can make or break your app. However, fixing performance feels like a quagmire of expert-level topics. What if I told you JavaScript bundle sizes could be cut up to 50% by doing one thing only? Nearly 90% of web traffic runs on modern browsers, but we're transpiling all of our JavaScript to ES5. That’s expensive. In this talk, we'll learn about differential serving, or serving both modern bundles and legacy bundles using webpack. This talk is framework agnostic, and best if you have at least a basic understanding of JavaScript.

Images account for 50% of the bytes downloaded to load a website. How can you make sure that your users only download the smallest image necessary while preserving image quality? In this talk, we'll focus on the underlying concepts in HTML and CSS for serving responsive images, which you can take with you no matter which tool you use.Which file formats suit which image types best? How can you use art direction in images to show the best image for a viewport layout? Come learn about this and more!

Fonts are lovely but can slow down our loads. How can we make them faster? We all love fonts. From Google Fonts to Typekit, Hoefler&Co and more, they give character and tone to our websites. The down side of fonts is that they can really slow down our loads. In this talk we'll learn about common pitfalls like critical requests depth and how to use resource hints to play tricks with latency to load web applications faster. We'll walk through a network profile to understand what's going on in the browser and how to make it faster.

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

App loading and run-time affect your bottom line. Fancy features aren’t worth anything if users leave the app out of frustration. Every second counts! React is super fast, but you could be shooting yourself in the foot with design decisions. Come learn how to make your React apps lightning fast! Page abandonment increases with every second of load time.Also, profiling and debugging performance issues can seem like an overwhelming topic to learn.In this session, we’ll cover the usual suspects of performance issues, from the basics of using the correct build, to the fundamentals of immutable data, to higher- level tools like Perf, shouldComponentUpdate, PureComponent, and memoizing computed props in Redux. We will both cover the concepts and walk through examples step- by - step so that by the end of this session you will feel like a React Speed Racer.You’ll get the most out of this session if you’re at least comfortable with React and ES6 syntax.

A strategic partner you can depend on

I make websites faster, smarter, and easier to grow.

If you want someone who’s creative and precise, deeply reliable, and not afraid to tell you what’s what to get you to the next level—I’m your partner.

Let's get started