It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
From timkadlec.com
Tim Kadlec on the issues surrounding poor web performance and why it’s so important for us to care about making our sites as fast as possible:
… Read articlePoor performance can, and does, lead to exclusion. This point is extremely well documented by now, but warrants repeating. Sites that use an excess of resources, whether on the network or on the device, don’t just cause slow experiences, but can leave entire groups of people out.
There is a growing gap between what
Lots from Divya with the setup:
There are 2 kinds of problems that can arise when using webfonts; Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT) ... If we were to compare them, FOUT is of course the lesser of the two evils
If you wanna fight FOIT, the easiest tool is the font-display CSS property. I like the optional value because I generally dislike the look of fonts swapping.… Read article
It's all too easy to go crazy with the imports and end up with megabytes upon megabytes of JavaScript. It can be a problem as that weight burdens each and every visitor from our site, very possibly delaying or stopping them from doing what they came to do on the site. Bad for them, worse for you.
There is all sorts of ways to keep an eye on it.… Read article
Web performance is a huge complicated topic. There are metrics like total requests, page weight, time to glass, time to interactive, first input delay, etc. There are things to think about like asynchronous requests, render blocking, and priority downloading. We often talk about performance budgets and performance culture.
How that first document comes down from the server is a hot topic. That is where most back-end related performance talk enters the picture. It gives rise to architectures … Read article
From csswizardry.com
JavaScript and images tend to get the bulk of the blame for slow websites, but Harry explains very clearly why CSS is equally to blame and harder to deal with:
… Read article
- A browser can’t render a page until it has built the Render Tree;
- the Render Tree is the combined result of the DOM and the CSSOM;
- the DOM is HTML plus any blocking JavaScript that needs to act upon it;
- the CSSOM is all CSS rules applied against the DOM;
From blog.tomayac.com
Say you have a stylesheet linked up like this:
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">But as the page loads, you're on a desktop browser where the screen is 1753px wide. The browser should just skip loading that stylesheet entirely, right? It doesn't. Thomas Steiner explains:
… Read articleit turns out that the CSS spec writers and browser implementors are actually pretty darn smart about this:
The thing is, the user could always decide to resize their window (impacting width, height,
From medium.com
Both a sobering and interesting read from Stacey Tay on how the team at Carousell gathered the metrics to define a performance budget and, in turn, developed a better experience for their customers:
… Read articleOur new PWA listing page loads 3x faster than our old listing page. After releasing this new page, we’ve had a 63% increase in organic traffic from Indonesia, compared to our our all time-high week. Over a 3 week period, we also saw a 3x increase in
From csswizardry.com
We've been covering performance quite a bit — not just recently, but throughout the course of the year. Now, Harry Roberts weighs in by identifying three types of ways performance can be tested.
Of particular note is the first type of testing:
… Read articleThe first kind of testing a team should carry out is Proactive testing: this is very intentional and deliberate, and is an active attempt to identify performance issues.
This takes the form of developers assessing the performance
From infrequently.org
Alex Russell describes his thoughts on the current state of JavaScript and how we might sometimes put a ton of focus on the ease-of-use of development at the expense of user experience. So, for example, we might pick a massive framework to make development easier and faster but then that might have an enormous impact on the user.
Alex describes it as substituting “developer value for user value.”
… Read articleThe “developer experience” bait-and-switch works by appealing to the listener’s parochial interests
Images are critical. Whether it is marketing banners, product images or logos, it is impossible to imagine a website without images. Sadly though, images are often heavy files making them the single biggest contributor to the page bloat. According the HTTP Archive’s State of Images report, the median page size on desktops is 1511 KB and images account for nearly 45% (650 KB) of that total.
That said, it’s not like we can simply do away with images. They’re … Read article
From mediatemple.net
I kicked off a really poppin' Twitter thread the other day:
What are the LOWEST hanging fruit of web performance? Nothing fancy, anyone can do, big impact.
Gzip. Optimize stuff. Reduce requests...
What are other big ones?
— Chris Coyier (@chriscoyier) August 17, 2018
So, I decided to round up all the ideas (both my own and yours) around that in a post over on the Media Temple blog.… Read article
From medium.com
Even though we mentioned it earlier, I thought this outstanding post by Addy Osmani all about the performance concerns of JavaScript was still worth digging into a little more.
In that post, Addy touches on all aspects of perf work and how we can fix some of the most egregious issues, from setting up a budget to “Time-to-Interactive” measurements and auditing your JavaScript bundles.… Read article
The process of a web browser turning HTML, CSS, and JavaScript into a finished visual representation is quite complex and involves a good bit of magic. Here’s a simplified set of steps the browser goes through:
display: none elements are avoided).
The web has grown bigger. Both in expansiveness and weight. Nick Heer's "The Bullshit Web":
The average internet connection in the United States is about six times as fast as it was just ten years ago, but instead of making it faster to browse the same types of websites, we’re simply occupying that extra bandwidth with more stuff.
Nick clearly explains what he means by bullshit, and one can see a connection to Brad Frost's similarly framed … Read article
Over the past six months, I've become increasingly interested in the topic of web sustainability. The carbon footprint of the Internet was not something I used to give much thought to, which is surprising considering my interest in environmental issues and the fact that my profession is web-based.… Read article
When we produce a PNG image, we use an <img /> tag or a CSS background, and that's about it. It is dead simple and guaranteed to work.… Read article
From www.youtube.com
I really enjoyed this chat between Bruce Lawson and Mustafa Kurtuldu where they talked about browser support and the health of the web. Bruce expands upon a lot of the thoughts in a post he wrote last year called World Wide Web, Not Wealthy Western Web where he writes:
… Read article...across the world, regardless of disposable income, regardless of hardware or network speed, people want to consume the same kinds of goods and services. And if your websites are made for
Y'all know about font-display? It's pretty great. It's a CSS property that you can use within @font-face blocks to control how, visually, that font loads. Font loading is really pretty damn complicated. Here's a guide from Zach Leatherman to prove it, which includes over 10 font loading strategies, including strategies that involve critical inline CSS of subsets of fonts combined with loading the rest of the fonts later through JavaScript. It ain't no walk in the park.… Read article
From www.youtube.com
There's been two really interesting videos released recently that use the "Local Overrides" feature of Chrome DevTools in order to play with web performance without even touching the original source code.
The big idea is that you can literally edit CSS and reload the page and your changes stick. Meaning you can use the other performance testing tools … Read article
There’s a lot of good news in the world of web fonts!
unicode-range, the last modern browser to do so.font-display are landing in Safari and Firefox.Using custom fonts in a performant way is becoming far easier. Let’s take a peek at some things we can do when using custom fonts to make sure we’re being as performant as we can be.… Read article