Posts
Links
-
![]()
Maximally optimizing image loading for the web in 2021
2020-12-29
-
![]()
Automatic persisted queries - Apollo Server - Apollo GraphQL Docs
The size of individual GraphQL query strings can be a major pain point. Apollo Server implements Automatic Persisted Queries (APQ), a technique that greatly improves network performance for GraphQL with zero build-time configuration. A persisted query is an ID or hash that can be sent to the server instead of the entire GraphQL query string. This smaller signature reduces bandwidth utilization and speeds up client loading times. Persisted queries are especially nice paired with GET requests, enabling the browser cache and integration with a CDN.
2020-05-22
-
![]()
jsPerf: JavaScript performance playground
jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks. For more information, see the FAQ.
2020-05-07
-
![]()
Is it time for a Web Performance rebrand? – Simon Hearne
Web performance has been a hot topic in web development and browser engineering since the first public web pages. The first book on the topic, Web Performance Tuning: Speeding Up the Web was published in 1998, with Steve Souders kicking off the Web Performance Optimisation industry when he published his book High Performance Websites nine years later in 2007.
2020-05-05
-
![]()
WPT-Compare - WebPageTest comparison URL generator
Quickly generate the correct URL for comparing WebPageTest runs. It should also work with custom instances and SpeedCurve URL's.Simply enter a set of test URL's (e.g. https://www.webpagetest.org/result/191128_E6_8f81ddf9ba2ba82ef814fff7baaa5005/) and click 'Generate'.
2020-05-04
-
![]()
DebugBear | Front-end website monitoring
Track front-end performance and quality metrics for your production site and in CI.Compare results and see what caused the problem.
2020-04-14
-
![]()
Metrics
User-centric performance metrics are a critical tool in understanding and improving the experience of your site in a way that benefits real users.
2020-01-31
-
![]()
Web Perf Links
A collection of perf links
2019-12-11
-
![]()
Font-display playground
Before we talk about what font-display is, let's talk about the lifetime of a web font. For a super detailed explanation of where web fonts fit in the browser rendering process, Ilya Grigorik has an amazing blog post on web font optimization. But, if we're just trying to understand the basics, there are basically three parts to it:
2019-09-12
-
![]()
The Simplest Way to Load CSS Asynchronously | Filament Group, Inc.
One of the most impactful things we can do to improve page performance and resilience is to load CSS in a way that does not delay page rendering. That’s because by default, browsers will load external CSS synchronously—halting all page rendering while the CSS is downloaded and parsed—both of which incur potential delays. Of course, at least a portion of a site’s CSS should be loaded before the page should be allowed to start rendering, and to get that initial CSS to the browser immediately, we recommend inlining (or HTTP2 server-pushing) the CSS. For sites with a small amount of overall, that alone might be enough, but if the CSS is large (say, bigger than 15 to 20kb), it can help performance to split it up by priority. Once split, less-critical CSS should be loaded in the background—AKA asynchronously. In this post, I aim to describe up our preferred way to do that these days, which has actually been around for years.
2019-07-25
-
![]()
Create performance budgets and set alerts | SpeedCurve Support
How to create and edit performance budgets for your LUX and Synthetic metrics in your Favorites dashboards
2019-07-11
-
![]()
leeoniya/dropcss: A simple, thorough and fast unused-CSS cleaner
DropCSS is an unused CSS cleaner; it takes your HTML and CSS as input and returns only the used CSS as output.
2019-03-25
-
![]()
Chromium Blog: Chrome Lite Pages - For a faster, leaner loading experience
Chrome on Android’s Data Saver feature helps by automatically optimizing web pages to make them load faster. When users are facing network or data constraints, Data Saver may reduce data use by up to 90% and load pages two times faster, and by making pages load faster, a larger fraction of pages actually finish loading on slow networks. Now, we are securely extending performance improvements beyond HTTP pages to HTTPS pages and providing direct feedback to the developers who want it.
2019-03-20
-
![]()
AddyOsmani.com - JavaScript Loading Priorities in Chrome
How browsers schedule and execute scripts can impact the performance of web pages. While techniques like
2019-02-20
-
![]()
React 16.x Roadmap – React Blog
You might have heard about features like “Hooks”, “Suspense”, and “Concurrent Rendering” in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React.
2019-02-12
-
![]()
SpeedCurve | JavaScript Dominates Browser CPU
2019-02-06
-
![]()
Why Bandwidth Still Matters - DEV Community 👩💻👨💻
I remember going to a local mall in New Jersey and walking into a T-Mobile store back in 2014. I had just moved to the US the previous year, and I was just about sick of using Google Voice to keep in touch with people. Opening my laptop just to send a text or make a call wasn't very convenient. Unfortunately, it was all I could afford to do because I didn't even have a working phone at that time. I was a recent graduate and very unemployed. So I said to myself that the minute I get hired for a job I was going to get myself a new phone.
2019-01-01
-
![]()
The Cost Of JavaScript – Dev Channel – Medium
As we build sites more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that we can’t always easily see. In this post, I’ll cover why a little discipline can help if you’d like your site to load & be interactive quickly on mobile devices.
2017-11-27
-
![]()
Can You Afford It?: Real-world Web Performance Budgets – Infrequently Noted
performance budgets are an essential but under-appreciated part of product success and team health. Most partners we work with are not aware of the real-world operating environment and make inappropriate technology choices as a result. We set a budget in *time of
2017-10-23
-
![]()
The State of the Web – Karolina Szczur – Medium
The Internet is growing exponentially, and so is the Web platform we create. Often though we fail to reflect on the greater picture of connectivity and contexts the audience of our work might find themselves in. Even a short glance at the state of the World Wide Web shows that we haven’t been building with empathy, situation variability awareness, let alone performance in mind.
2017-09-25
-
![]()
Progressive Image Rendering
Stephan Lavavej has a great page outlining the difference between fancy interlacing and plain old progressive rendering:
There are four ways to transmit an image over the Internet. Over a fast connection there won't be any apparent difference, but over a modem connection the difference is stunningly obvious. Choosing the right way can make your connection seem much faster than it really is.
Wait until every bit of image data has been sucked through the modem before displaying the whole image. So blindingly dumb that not even Internet Explorer does it.
Display image data as it is received, resulting in a top-down filling in of the image. One variant -- the one that everyone has seen -- of JPEG does this. This is noninterlaced display, and both GIF and PNG are capable of it as well. Non-interlaced images are smaller than interlaced images.
Use a one-dimensional interlacing scheme. This is how GIF interlacing works. Every eighth horizontal line is transmitted in the first "pass", filling up the dimensions of the image in 1/8th of the time that the entire image will take to download. The next pass transmits every fourth line, making the image less distorted. The next pass transmits every second line, making the image even less distorted, and the fourth and final pass transmits the remaining lines.
Use a two-dimensional interlacing scheme. This is how PNG interlacing works. Instead of four passes through the image, PNG makes seven passes. In 1/64 of the time that the whole image will take to display, one pass is already completed, showing the image in a very rough manner. Successive passes fill in more information, never distorting the pixels by more than a factor of two to one.
Here's a demo of simple progressive as-received rendering:
And here's a demo of the superior PNG style two-dimensional interlaced rendering:
You don't get this for free, of course -- turning this feature on adds about 20% to the size of PNG images, and about 10% to the size of JPEG and GIF images. Whether this improved rendering behavior is worth the bandwidth cost I leave as an exercise to the reader.
I am not aware of any browsers that actually bilinearly interpolate the low-resolution incremental images, as shown in the sample screenshots on Stefan's page. But that would be really cool! Why doesn't Firefox add this?
NEXT
This Just In: Internet Makes Books Obsolete
PREVIOUS
UI Follies, Volume III
Written by Jeff Atwood
Indoor enthusiast. Co-founder of Stack Overflow and Discourse. Disclaimer: I have no idea what I'm talking about. Find me here: http://twitter.com/codinghorror
2017-08-07
-
![]()
ImageOptim — better Save for Web
Removes bloated metadata. Saves disk space & bandwidth by compressing images without losing quality.
2017-08-07
-
![]()
Trick users into thinking your site's faster than it is | Creative Bloq
Before getting to the psychological part of performance optimisation, let's answer one question: what is web performance? For the majority of frontend developers, the answer would cover things like page response time, speed of animations, load times.
2017-07-19
-
![]()
Secrets of High Performing Teams: Science Edition • Jez Humble - YouTube
This presentation was recorded at GOTO Copenhagen 2016
2017-07-07
-
![]()
Optimising the front end for the browser
Recently my whole team got a chance to spend some time spiking out our proposed upgrade to our codebase, potentially using React. This really got me thinking about how we should build our front end. Pretty quickly I realised that the browser would be a large factor in our approach and equally large bottleneck in our knowledge.
2017-06-28
-
![]()
The State of Online Retail Performance
While almost half of all consumers browse via their
phones, only 1 in 5 complete transactions on mobile
(page 5).
• Optimal load times for peak conversions ranged from
1.8 to 2.7 seconds across device types (page 6).
• Just a 100-millisecond delay in load time hurt
conversion rates by up to 7% (page 7).
• Bounce rates were highest among mobile shoppers and
lowest among those using tablets (page 9).
• Optimal load times for lowest bounce rates ranged
from 700ms to 1.2s across all device types (page 10).
• A two-second delay in load time hurt bounce rates
by up to 103% (page 10).
• Pages with the lowest bounce rates had start render
times ranging from 0.9 to 1.5 seconds (page 12).
• A two-second delay correlated with up to a 51%
decrease in session length (page 14).
2017-06-28
-
![]()
Performance Tooling Today
Perf-tooling is a collection of powerful resources which will help you to improve your workflow and to deliver better and faster websites.
2017-05-18
-
![]()
Aerotwist - Don't Guess it, Test it!
I recently was invited to give a talk at Spotify in Stockholm, Sweden to the local developer community. My talk centered around performance, since that’s the topic that fills my days at Google, specifically site and application performance.
2017-05-15
-
![]()
SpeedTracker
WebPageTest is an incredibly useful resource for any web developer, but the information it provides becomes much more powerful when monitored regularly, rather than at isolated events. SpeedTracker runs on top of WebPageTest and makes periodic performance tests on your website and shows a visualisation of how the various performance metrics evolve over time.
2017-05-09
-
![]()
Tarantool - Get your data in RAM. Get compute close to data. Enjoy the performance.
Get your data in RAM. Get compute close to data. Enjoy the performance.
2017-05-04
