#webperf
When it comes to delivering a fast experience to your users, not every pixel on a page has the same importance! Come to Web Directions Code '23 in June and learn from @zeman how to prioritize which content elements to optimize. #webperf #ux
https://webdirections.org/speakers/web-directions-code-23-session-spotlight-pushing-pixels/
How to build zero-CLS A/B tests with Next.js and Vercel Edge Config
https://vercel.com/blog/zero-cls-experiments-nextjs-edge-config
Streaming for Serverless Node.js and Edge Runtimes with Vercel Functions
https://vercel.com/blog/streaming-for-serverless-node-js-and-edge-runtimes-with-vercel-functions
ThumbHash: A very compact representation of an image placeholder. Store it inline with your data and show it while the real image is loading for a smoother loading experience. Similar to BlurHash. #WebPerf #JS
https://evanw.github.io/thumbhash/
⚡ i wrote this a good while ago, but i still firmly believe it. any type of generalised score for performance, accessibility, user happiness or whatnots is bound to fail.
⛔ Of the pages that got a 90+ in Lighthouse in September 2021, 43% didn’t meet one or more Core Web Vitals threshold. Relying on Performance Score is not a bulletproof strategy and here’s why.
#Development #Techniques
Fighting inter-component HTML bloat · Ways to deal with an unwanted byproduct in design systems https://ilo.im/11xzob · by @elise
_____
#DesignSystem #Webperformance #WebPerf #WebDevelopment #WebDev #Frontend #HTML #Markup #Accessibility #A11y
If websites weren't such a car crash of JavaScript, contending connections, over-engineering etc, I reckon 90% could get away with one reset/global/layout stylesheet and one per-page stylesheet (i.e. home.css, product.css, category.css) and that would be plenty fast and maintainable.
There'd be no need for critical CSS, complex bundling or inline styles.
...almost like how we used to build sites back in the 2000s, except with the benefits of h2/h3.
I have a superpower... finding sites with huge images 🙈
❌ Almost 80 MB in images
❌ An image larger than 19 MB
❌ With a Cache-Control=0
... TTFB gets a different meaning with 103 Early Hints!
TTFB now corresponds to your (faster) 103 Response, and no longer the 200 Response of your HTML.
Without implementing TTP you will be blind for your HTML performance
Before deploying 103 Early Hints my advise is to measure: "Time To Parsing" (TTP)
Without this new TTP you otherwise have a blindspot tracking HTML Performance.
As TTFB gets a different meaning...
If you want to know like *everything* about image optimization, head right here: https://calibreapp.com/blog/image-optimisation-guide
The Ultimate Guide to Image Optimisation
https://calibreapp.com/blog/image-optimisation-guide by @fox
8 Causes of Slow Website Loading (And How To Fix Them)
https://calibreapp.com/blog/causes-of-slow-websites by @calibre
Pour les passionné·es de webperf, on commence à dévoiler le programme #WeLoveSpeed 2023 ! 📈
Ne loupez pas le talk de
@bluesmoon : "Understanding Cognitive Biases in Performance Measurement"
Rendez-vous le 10 mai à Paris !
Prenez vous places dès maintenant sur la billeterie : https://www.welovespeed.com/2023/billetterie/
✅ Many websites are hampered by slow page speeds because they aren’t optimised for a fast Largest Contentful Paint load time.
Here’s how to fix your LCP timings.
😍 WebPerformance Report Week #12. Delivered ✅
If you wants to receive the @webperfreport the next week, all you have to do is subscribe from our website:
👉 https://webperformancereport.com
🍻 https://www.buymeacoffee.com/webperfreport
#webperf #corewebvitals #webperformance #buildinpublic
Hi everyone, I'm Rodney.
While I'm not means an expert, I do know a number of things on #WordPress #WebPerf (website performance) and #a11y (accessibility).
If any of those interest you, then I'm happy to interact and most likely learn more.
Thanks @nathan for creating this instance.
The slides of my talk about #WebPagetest scripting at Hamburg #WebPerf meetup hosted by baqend are now available on Speakerdeck: https://speakerdeck.com/tbaldauf/exciting-webpagetest-scripting-webperf-meetup-hamburg-20230323
Hat tip to @PatMeenan, @andydavies et al. for continuously providing good documentation about WPT over the past decade! <3
Yes! I'll be speaking at @JNationConf in Coimbra #Portugal about the performance of JavaScript frameworks and meta-frameworks https://jnation.pt/sessions/#sz-session-428356 #webdev #webperf
🦩 The JavaScript main thread only handles one task at a time. Long tasks delay everything else, including user inputs. The shorter your Total Blocking Time, the more responsive your page feels.
Find out how to reduce TBT.
Only a few minutes away from presenting at #WebPerf meetup Hamburg about #WebPagetest scripting opportunities.
https://www.meetup.com/de-DE/hamburg-web-performance-group/events/291206321/
Seriously, do we need yet another version of Low Quality Image Placeholders?
Why do some people want to do additional work just to show useless colourful pixels to users, delaying the rendering of the actual image?
As a user, I hate LQIP. Single colour backgrounds are fine, though.
🖼️ Image optimisation can be a great first step to better web performance. Learn how to fully optimise images without sacrificing their quality.
⚡ i’m so excited about this: we just shipped a big improvement to third party reporting in @calibre.
third party tools & services have a huge impact on web performance, security, privacy and user experience.
the ability to compare how third parties vastly outgrow first-party (your own!) resources, analysing which categories or providers are main offenders is critical.
to illustrate, here’s a report for a site with 92 third parties:
⚡ optimising images is something anyone on your team can help with and it's a great starting point into the world of web performance.
i just published our revamped guide explaining:
🔹 why image optimisation is important
🔹 how to choose the right format
🔹 helpful tools for image compression
🔹 other strategies to lower the negative speed impact of imagery
It's always nice to get the chance to stretch my #WebPerf muscles. Even if it's on a friend’s #WordPress site and I'm not getting paid. 😉
You Really Don't Need All that JavaScript, I Promise 👏 https://www.youtube.com/watch?v=rxlJRydqmk8 GOTO Copenhagen 2019 (includes Chrome Portal demo) #webdev #webperf #javascript #html
https://www.magentix.fr/blog/optimiser-les-web-fonts-sur-son-site.html
#webperf #Performance
📊 Saying the page doesn’t load fast enough doesn’t help; saying we need to hit a Time to First Byte of fewer than 300 milliseconds provides a target and spurs action.
Learn how to set actionable speed goals for your organisation.
New Web Performance Snippet to list all the fonts preloaded via resources hints, all the fonts loaded via CSS, and all the fonts used in the viewport above the fold
https://github.com/nucliweb/webperf-snippets#fonts-preloaded-loaded-and-used-avobe-the-fold
À vos waterfalls, l'édition 2023 approche ! Après Bordeaux, Lille et Lyon, les mordu.e.s de #webperf sont attendu.e.s dans la capitale dans le 3ème arrondissement le 10 mai 2023 !
https://www.welovespeed.com/2023/
Réservez votre place dès aujourd'hui !
Créé en 2018 par et pour la communauté, la #conference à but non-lucratif We Love Speed est née de l’envie de partager le plus largement possible les connaissances et expériences en matière de #WebPerf.
Organisée par une équipe bénévole, elle réunit chaque année plusieurs centaines d'expert·es de la #PerformanceWeb dans une grande ville de #France.
Looks like Google likes it when we start improving websites performance! 🚀
🏅 Anyone can make meaningful improvements to web performance. Learn about the most common issues, such as:
🔻 large media files
🔻 resource bottlenecks
🔻 unoptimised JS and CSS files
🔻 third party scripts
and choose an approachable strategy to fix them!
😍 WebPerformance Report Week #11. Delivered ✅
If you wants to receive the @webperfreport
the next week, all you have to do is subscribe from our website:
👉 https://webperformancereport.com
🍻 https://buymeacoffee.com/webperfreport
#webperf #corewebvitals #webperformance #buildinpublic
🧐 Our first data collected for #Lighthouse Scores (Performance, Accessibility, Best Practices and #SEO) from hundreds of Websites monitored by WebPerformance Report.
Lighthouse Scores Mobile Lab Data (February 2023) 📊
👉 https://webperformancereport.com
#webperf #mobile
🔥 We are ready for tomorrow's delivery. 🚀
You're still in time to receive our #WebPerformance Report for this week. ⚡️
All you have to do is subscribe from our website:👉 https://webperformancereport.com
#webperf #corewebvitals #webperformance #buildinpublic RT!
#Development #Guides
Why you need to know your site’s performance plateau · What it is, how to measure it, and what to do with your new insights https://ilo.im/11nu2z
_____
#WebDevelopment #WebDev #WebPerformance #WebPerf #Measurement #Metric #WebVitals #LCP #RUM
An upcoming Safari Technology Preview will support preconnect via 103 Early hints: https://github.com/WebKit/WebKit/commit/eeb51f0ea0f0e1f38d9330d3113c5392b6dad50f.
And preload support will likely come later per https://bugs.webkit.org/show_bug.cgi?id=253120#c0.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103
We believe in making the web faster, starting with our own site. Thanks for sharing the results of your speed test, @morganm!
https://www.morganwebdev.org/posts/performance-tools/ #webperf #ux
🧐 With dozens of performance metrics available, are you tracking the ones that accurately portray user experience?
Here’s our shortlist of best metrics (and which ones to avoid!).
📢 Après Bordeaux, Lille et Lyon, les mordu.e.s de #webperf sont attendu.e.s dans la capitale dans le 3ème arrondissement le 10 mai 2023 !
https://www.welovespeed.com/2023/
Réserver votre place dès aujourd'hui !
Can multiple web workers boost the speed of your web application?
⚡ Interaction to Next Paint (INP) is still a fairly new metric measuring page responsiveness, which is tightly tied to good user experience.
now is a great time to start monitoring INP, so i wrote an explainer into how it’s calculated, what it measures and how to improve it!
🚦 We built the Core Web Vitals Checker so you could easily look up if your site passes the assessment. And because we love dynamic share cards, you can see the metrics as you share the report!
Here’s ours.
https://calibreapp.com/tools/core-web-vitals-checker/calibreapp.com