Web Performance in The Real World: How to Make Fast Sites
An exploration of work the Microsoft Edge team does to help developers build faster sites, and how to think of performance as an investigative activity, beyond a checklist approach. - https://goo.gl/5ReAoA
#web #performance
An exploration of work the Microsoft Edge team does to help developers build faster sites, and how to think of performance as an investigative activity, beyond a checklist approach. - https://goo.gl/5ReAoA
#web #performance
Channel 9
Web performance in the real world: how to make fast websites
There is boundless advice out there on how to improve web performance. Some folks will tell you to avoid complex CSS selectors, others will tell you to reduce your JavaScript bundle size, and others w
Optimizing CSS: Tweaking Animation Performance with DevTools
Maria Antonietta Perna explores the Performance Tool available in the Firefox to find out more about CSS animation performance. - https://goo.gl/uJec5x
#css #animation #performance
Maria Antonietta Perna explores the Performance Tool available in the Firefox to find out more about CSS animation performance. - https://goo.gl/uJec5x
#css #animation #performance
Fixing React Performance Issues on Airbnb’s Listing Pages
A practical look at grabbing some of the low-hanging performance-affecting fruit present on a live, production site. -
https://goo.gl/9MUKDe
#react #performance
A practical look at grabbing some of the low-hanging performance-affecting fruit present on a live, production site. -
https://goo.gl/9MUKDe
#react #performance
Medium
React Performance Fixes on Airbnb Listing Pages
There may be low-hanging fruit 🥝 affecting performance in areas you might not track very closely but are still important.
Evolution of <img>: Gif without the GIF
Now, with the latest Safari, you can use videos as Gifs. -
https://goo.gl/29besE
#web #css #performance
Now, with the latest Safari, you can use videos as Gifs. -
https://goo.gl/29besE
#web #css #performance
Performance Calendar
Evolution of : Gif without the GIF
tl;dr
GIFs are awesome but terrible for quality and performance
Replacing GIFs with is better but has perf. drawbacks: not preloaded, uses range requests
Now you can <img src=".mp4">s in Safari Technology Preview
Early results show mp4s in tags display
GIFs are awesome but terrible for quality and performance
Replacing GIFs with is better but has perf. drawbacks: not preloaded, uses range requests
Now you can <img src=".mp4">s in Safari Technology Preview
Early results show mp4s in tags display
The Front-End Performance Challenge: Winner And Results
Some really impressive real-life improvements on sites when it comes to performance. Each of these examples takes a slightly different approach to their performance improvements so there’s certainly going to be something you can do on your own site. - https://goo.gl/tJ3JVF
#web #performance
Some really impressive real-life improvements on sites when it comes to performance. Each of these examples takes a slightly different approach to their performance improvements so there’s certainly going to be something you can do on your own site. - https://goo.gl/tJ3JVF
#web #performance
Smashing Magazine
The Front-End Performance Challenge: Winner And Results
A few weeks ago, we asked the community to use everything they could to make their websites and projects perform blazingly fast. Today, we're happy to finally announce the winner.
Rethinking Web Performance with Service Workers
The author makes a bold claim of this article covering ‘30 years of research in a 30 minute read’. It gets a bit tool/platform specific at the end but does cover many key points and best practices in Web performance. - http://bit.ly/2K7hsOy
#web #performance
The author makes a bold claim of this article covering ‘30 years of research in a 30 minute read’. It gets a bit tool/platform specific at the end but does cover many key points and best practices in Web performance. - http://bit.ly/2K7hsOy
#web #performance
Medium
Rethinking Web Performance with Service Workers
30 Man-Years of Research in a 30-Minute Read
Measuring Sites with Mobile-First Optimization Tools
Not sure how to remove the code debt that bloats and weighs down your site? Here are specific ways mobile performance impacts your site and page speed results. - http://bit.ly/2wwZR0m
#mobile #performance
Not sure how to remove the code debt that bloats and weighs down your site? Here are specific ways mobile performance impacts your site and page speed results. - http://bit.ly/2wwZR0m
#mobile #performance
Smashing Magazine
Measuring Websites With Mobile-First Optimization Tools
Not sure how to remove the code debt that bloats and weighs down your site? Here are specific ways mobile performance impacts your site and page speed results. It's time to change our mindset.
Improving Performance with Background Data Prefetching
Instagram wants their client to feel as fast as possible, and this post explains their approach to decoupling network availability and app usability. - http://bit.ly/2I2Kna4
#web #performance
Instagram wants their client to feel as fast as possible, and this post explains their approach to decoupling network availability and app usability. - http://bit.ly/2I2Kna4
#web #performance
Instagram Engineering
Improving performance with background data prefetching
The Instagram community is bigger and more diverse than ever before. 800m people now visit every month, 80% of whom are outside of the…
Web Performance 101
An easily accessible, diagram and code heavy primer to making a site or webapp faster by optimizing assets like JS, CSS, images and fonts. - http://bit.ly/2DA2BNk
#web #performance
An easily accessible, diagram and code heavy primer to making a site or webapp faster by optimizing assets like JS, CSS, images and fonts. - http://bit.ly/2DA2BNk
#web #performance
PerfPerfPerf
Web Performance 101: JS, CSS, HTTP, images & fonts
Learn how (and why) to make your app faster by optimizing JS, CSS, images/fonts and other things
A Netflix Web Performance Case Study
An interesting look at how Netflix worked to improve the ‘time-to-interactive’ metric on their desktop Web experience. It involved both prefetching and ripping out React. - http://bit.ly/2DF4dVr
#web #performance
An interesting look at how Netflix worked to improve the ‘time-to-interactive’ metric on their desktop Web experience. It involved both prefetching and ripping out React. - http://bit.ly/2DF4dVr
#web #performance
Medium
A Netflix Web Performance Case Study
Improving Time-To-Interactive for Netflix.com on Desktop
Front-End Performance Checklist 2019
This popular frontend performance checklist has been updated for the year ahead. - http://amp.gs/VNit
#checklist #performance #2019
This popular frontend performance checklist has been updated for the year ahead. - http://amp.gs/VNit
#checklist #performance #2019
Smashing Magazine
Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word] — Smashing Magazine
Let’s make 2019... fast! A front-end performance checklist (PDF/Apple Pages/MS Word), with everything you need to know to create fast experiences today.
How We Improved Smashing Magazine's Performance
It’s no secret Smashing Magazine is one of our favourite sources for high quality articles, so it's interesting to see how they've made it even quicker for you to consume their content by optimizing their React and Jamstack-based site. - http://amp.gs/QnNq
#performance
It’s no secret Smashing Magazine is one of our favourite sources for high quality articles, so it's interesting to see how they've made it even quicker for you to consume their content by optimizing their React and Jamstack-based site. - http://amp.gs/QnNq
#performance
Smashing Magazine
How We Improved SmashingMag Performance — Smashing Magazine
In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we’ve made, and some of the unexpected…
Performance-Testing the Google I/O Site
Another solid performance review from Jake here, this time looking at how the Google I/O site fares on a 3G mobile connection. - http://amp.gs/b0lE
#javascript #performance
Another solid performance review from Jake here, this time looking at how the Google I/O site fares on a 3G mobile connection. - http://amp.gs/b0lE
#javascript #performance
Jakearchibald
Performance-testing the Google I/O site
Deep-diving on the load performance of the Google I/O website.
Top Metrics You Need to Understand When Measuring Front-end Performance
5 metrics you need to understand how your UI is performing - http://amp.gs/jTCnJ
#web #performance
5 metrics you need to understand how your UI is performing - http://amp.gs/jTCnJ
#web #performance
Medium
Top Metrics You Need to Understand When Measuring Front-end Performance
5 metrics you need to understand how your UI is performing
How I Made Google’s Data Grid Scroll 10x Faster With One Line of CSS
Johan Isaksson shares his amazing skill in making Google’s data grid scroll 10x faster with one line of CSS. - http://amp.gs/jtwYI
#performance
Johan Isaksson shares his amazing skill in making Google’s data grid scroll 10x faster with one line of CSS. - http://amp.gs/jtwYI
#performance
Medium
How I made Google’s data grid scroll 10x faster with one line of CSS
And the debug process leading up to it. Try it yourself!
How JavaScript Engines Achieve Great Performance
If you’ve ever wondered what it is browsers actually do to get JavaScript to execute quickly, this post digs into it a little. - http://amp.gs/jtXdB
#javascript #performance
If you’ve ever wondered what it is browsers actually do to get JavaScript to execute quickly, this post digs into it a little. - http://amp.gs/jtXdB
#javascript #performance
Medium
How JavaScript engines achieve great performance
Ever wondered what browsers do to get JavaScript to execute quickly? Let’s take a look.
12 Front End Performance Patterns You Need to Know
Reduce page load times with these performance solutions - http://amp.gs/jlNPZ
#performance
Reduce page load times with these performance solutions - http://amp.gs/jlNPZ
#performance
Medium
12 Front End Performance Patterns You Need to Know
Reduce page load times with these performance solutions
Getting Started with Web Performance
Alistair Shepherd goes through some of the reasoning, jargon, metrics, tools, and top tips on improving your web performance. - https://www.htmhell.dev/adventcalendar/2023/14
#web #performance
Alistair Shepherd goes through some of the reasoning, jargon, metrics, tools, and top tips on improving your web performance. - https://www.htmhell.dev/adventcalendar/2023/14
#web #performance
Getting started with Web Performance 🚀 - HTMHell
A collection of bad practices in HTML, copied from real websites.
Web Performance Experts Guide to Mastering Interaction to Next Paint
Today we see Interaction to Next Paint take its (rightful) place in the Core Web Vitals, replacing First Input Delay (FID) as the primary metric for measuring website responsiveness and interactivity. This comprehensive guide, which includes insights from 13 web performance specialists, will provide you with the knowledge and practical advice you need to master INP. - https://www.rumvision.com/blog/experts-guide-to-mastering-interaction-to-next-paint/
#performance
Today we see Interaction to Next Paint take its (rightful) place in the Core Web Vitals, replacing First Input Delay (FID) as the primary metric for measuring website responsiveness and interactivity. This comprehensive guide, which includes insights from 13 web performance specialists, will provide you with the knowledge and practical advice you need to master INP. - https://www.rumvision.com/blog/experts-guide-to-mastering-interaction-to-next-paint/
#performance
RUMvision [Real User Monitoring]
Web Performance Experts Guide to Mastering Interaction to Next Paint (INP)
Struggling with a slow website? The web performance community helps you fix Interaction to Next Paint (INP), the latest Core Web Vital metric, for faster, smoother user experiences.