Front-End Developers Have to Manage the Loading Experience

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 …
The post Front-End Developers Have to Manage the Loading Experience appeared first on CSS-Tricks.

Link: https://css-tricks.com/front-end-developers-have-to-manage-the-loading-experience/

CSS and Network Performance

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:

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;


The post CSS and Network Performance appeared first on CSS-Tricks.

Link: https://csswizardry.com/2018/11/css-and-network-performance/

Cross-language Performance Profile Exploration with speedscope

speedscope is a fast, interactive, web-based viewer for large performance profiles, inspired by the performance panel of Chrome developer tools and by Brendan Gregg’s FlameGraphs. Jamie Wong built speedscope to explore and interact with large performance profiles from a variety of profilers for a variety of programming languages. speescope runs totally in-browser, and does not send any profiling data to any servers.
The post Cross-language Performance Profile Exploration with speedscope appeared first on Mozilla Hacks – the Web developer blog.

Link: https://hacks.mozilla.org/2018/11/cross-language-performance-profile-exploration-with-speedscope/

How we made Carousell’s mobile web experience 3x faster

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:
Our 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 …
The post How we made Carousell’s mobile web experience 3x faster appeared first on CSS-Tricks.

Link: https://medium.com/carousell-insider/how-we-made-carousells-mobile-web-experience-3x-faster-bbb3be93e006

The Three Types of Performance Testing

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:
The 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 …
The post The Three Types of Performance Testing appeared first on CSS-Tricks.

Link: https://csswizardry.com/2018/10/three-types-of-performance-testing/

The “Developer Experience” Bait-and-Switch

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.”
The “developer experience” bait-and-switch works by appealing to the listener’s parochial interests …
The post The “Developer Experience” Bait-and-Switch appeared first on CSS-Tricks.

Link: https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/

The Complete Guide to Lazy Loading Images

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 …
The post The Complete Guide to Lazy Loading Images appeared first on CSS-Tricks.

Link: https://imagekit.io/blog/lazy-loading-images-complete-guide/

The Low Hanging Fruit of Web Performance

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.

These are the things we dive into in that post:…
The post The Low Hanging Fruit of Web Performance appeared first on CSS-Tricks.

Link: http://mediatemple.net/blog/tips/low-hanging-fruit-web-performance/