tammy, (edited ) to accessibility
@tammy@webperf.social avatar

There's more to web performance than page speed. A performant, usable site needs to be:

⏱️ Fast
✋ Accessible

So happy to see my Complete Guide to Performance Budgets included in the latest issue of A11y Weekly, alongside some fantastic other resources!

https://a11yweekly.com/issue/394/

speedcurve, to random
@speedcurve@webperf.social avatar

NEW: Our latest release includes RUM attribution and subparts for INP! @cliff explains:

🟡 Element attribution
🟢 Where time is spent within INP, leveraging subparts
🔴 How to use this information to fix INP issues

https://www.speedcurve.com/blog/rum-attribution-subparts-interaction-to-next-paint/

tammy, to UX
@tammy@webperf.social avatar

PERFORMANCE HERO • per-FAWR-muhns HEER-oh • noun • A person who has made a huge contribution to the and community, without whom the web would be a sadder, slower place.

Celebrating our inaugural @speedcurve Performance Hero, @paulcalvano!

https://www.speedcurve.com/blog/web-performance-hero-paul-calvano/

piefedadmin, to random
@piefedadmin@join.piefed.social avatar

Fediverse traffic is pretty bursty and sometimes there will be a large backlog of Activities to send to your server, each of which involves a POST. This can hammer your instance and overwhelm the backend’s ability to keep up. Nginx provides a rate-limiting function which can accept POSTs at full speed and proxy them slowly through to your backend at whatever rate you specify.

For example, PieFed has a backend which listens on port 5000. Nginx listens on port 443 for POSTs from outside and sends them through to port 5000:

upstream app_server {   server 127.0.0.1:5000 fail_timeout=0;}
server {   listen 443 ssl;   listen [::]:443 ssl;   server_name piefed.social www.piefed.social;   root /var/www/whatever;   location / {       # Proxy all requests to Gunicorn       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;       proxy_set_header X-Forwarded-Proto $scheme;       proxy_set_header Host $http_host;       proxy_redirect off;       proxy_http_version 1.1;       proxy_set_header Connection "";       proxy_pass http://app_server;       ssi off;   }

To this basic config we need to add rate limiting, using the ‘limit_req_zone’ directive. Google that for further details.

limit_req_zone $binary_remote_addr zone=one:100m rate=10r/s;

This will use up to 100 MB of RAM as a buffer and limit POSTs to 10 per second, per IP address. Adjust as needed. If the sender is using multiple IP addresses the rate limit will not be as effective. Put this directive outside your server {} block.

Then after our first location / {} block, add a second one that is a copy of the first except with one additional line (and change it to apply to location /inbox or whatever the inbox URL is for your instance):

location /inbox {       <strong>limit_req zone=one burst=300;</strong>#       limit_req_dry_run on;       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;       proxy_set_header X-Forwarded-Proto $scheme;       proxy_set_header Host $http_host;       proxy_redirect off;       proxy_http_version 1.1;       proxy_set_header Connection "";       proxy_pass http://app_server;       ssi off;  }

300 is the maximum number of POSTs it will have in the queue. You can use limit_req_dry_run to test the rate limiting without actually doing any limiting – watch the nginx logs for messages while doing a dry run.

It’s been a while since I set this up so please let me know if I mixed anything crucial out or said something misleading.

https://join.piefed.social/2024/04/17/handling-large-bursts-of-post-requests-to-your-activitypub-inbox-using-a-buffer-in-nginx/

#nginx #webPerformance

tammy, to UX
@tammy@webperf.social avatar

Another great analysis from @cliff. If your site uses a consent management platform (CMP), it's probably messing with your performance metrics.

Cliff breaks down the five most common issues – which affect all three Core Web Vitals, among other things – and he also provides some helpful scripting workarounds.

https://www.speedcurve.com/blog/web-performance-cookie-consent/

speedcurve, to UX
@speedcurve@webperf.social avatar

Cookie consent popups and banners are everywhere – and they're silently hurting the speed and UX of your pages. @cliff explains common issues – and solutions – related to measuring performance for consent popups.

https://www.speedcurve.com/blog/web-performance-cookie-consent/

tammy, to UX
@tammy@webperf.social avatar

Your time is the most precious thing you have. When I talk to customers, one of the best things I hear is how much time they DON'T spend using @speedcurve:

"We actually don't log in much. We've set up performance budgets and deploy testing. We just wait to get alerts and then dive in to fix things."

Learn more about how to efficiently fight regressions in @tkadlec's excellent post: https://www.speedcurve.com/blog/continuous-web-performance/

tammy, to UX
@tammy@webperf.social avatar

The best time to set up performance budgets was years ago. The next best time is today.

If you're not using budgets to fight page speed regressions, you're missing a vital tool in your / toolkit. Here's everything you need to get started.

https://www.speedcurve.com/blog/performance-budgets/

speedcurve, to UX
@speedcurve@webperf.social avatar

Web performance budgets help your team fight regressions and create a UX-first culture. Here's a collection of inspiring case studies from companies – like Farfetch, Leroy Merlin, GOV.UK, and Zillow – that use performance budgets to stay fast: https://www.speedcurve.com/customers/tag/performance-budgets/

speedcurve, to UX
@speedcurve@webperf.social avatar

Fighting regressions is more important than optimizations. Some resources to help you:

👉 @tkadlec's excellent governance post: https://www.speedcurve.com/blog/continuous-web-performance/
👉 @tammy's opinionated guide to performance budgets: https://www.speedcurve.com/blog/performance-budgets/
👉 @Joseph_Wynn's detailed CI/CD integration how-to post: https://www.speedcurve.com/blog/web-performance-test-pull-requests/

tammy, to UX
@tammy@webperf.social avatar

Every year I revisit the topic of web performance budgets. Here's my updated guide, including:

✅ What are performance budgets?
✅ Why are they a crucial tool in fighting page speed regression?
✅ Best metrics to track
✅ Determining thresholds
✅ Pro tips

https://www.speedcurve.com/blog/performance-budgets/

benwis, to rust
@benwis@hachyderm.io avatar

Using Rust for full stack web development has a lot of advantages, and represents a competitive advantage for some applications.

My talk from Rust Nation UK is now a blog post!
https://benw.is/posts/full-stack-rust-with-leptos

tammy, to UX
@tammy@webperf.social avatar

One thing fast sites have in common: they use performance budgets to fight regressions and deliver a consistently fast experience to their users. Here's a VERY detailed guide that covers:

⭐ Budgets vs goals
⭐ Which metrics to track (including and beyond Core Web Vitals)
⭐ How to set thresholds
⭐ Getting stakeholder buy-in
⭐ Integrating budgets with your CI/CD process

https://www.speedcurve.com/blog/performance-budgets/

speedcurve, to UX
@speedcurve@webperf.social avatar

Data Viz of the Day: Competitive benchmarks!

Showing your team (and your boss!) how fast you are compared to your competitors can be a great way to get buy-in and budget for investing in and optimization. Here's how to create your own: https://support.speedcurve.com/docs/competitive-benchmarking

tammy, to UX
@tammy@webperf.social avatar

Now that the INP hoopla has died down, here's a must-read post about how to improve it.
@andydavies shares:

▶ How he helps people identify causes of poor INP
▶ Examples of common issues
▶ Approaches he uses to optimize INP

https://speedcurve.com/blog/debugging-interaction-to-next-paint-inp/

cory, to random
@cory@social.lol avatar

Well that's wild: pyftsubset Poppins-Bold.woff2 --output-file=Poppins-Bold.min.woff2 --unicodes=U+0020-007E &amp;&amp; pyftsubset Poppins-Regular.woff2 --output-file=Poppins-Regular.min.woff2 --unicodes=U+0020-007E

tammy, to UX
@tammy@webperf.social avatar

"Putting up the appropriate guardrails to protect ourselves from regressions – then pairing that with a trail of breadcrumbs so that we can dive in and quickly identify what the source is when a regression occurs – are essential steps to ensure that when we make our sites fast, they stay that way."

Awesome post by @tkadlec, filled with high-level wisdom and ground-level best practices.

https://www.speedcurve.com/blog/continuous-web-performance/

screenspan, to random
@screenspan@mastodon.green avatar

Hilarious! My colleague Fabian Krumbholz just landed 🚀 an excellent explanation of Google‘s new metric of responsiveness, Interaction to Next Paint (INP), and why it’s important. We in the #webperformance community are super excited about the metric and have been working hard either to measure it, optimize it and help people make their sites more responsive to user interaction. https://www.inp-check.com

tammy, to UX
@tammy@webperf.social avatar

Keeping your site fast is a crucial and endless game. Yet it's perilously easy to lose focus and suffer from regressions. In this excellent, detailed, best-practice-filled post, @tkadlec uses the analogy of guardrails (automated testing & alerts) and breadcrumbs (deployment tracking) to make performance more visible throughout the dev process.

https://www.speedcurve.com/blog/continuous-web-performance/

tammy, to UX
@tammy@webperf.social avatar

INP is here! Not sure what that means or why it matters? No worries – that's what this post is for. :)

🟡 What is INP?
🟡 How does it correlate with business metrics, e.g. conversion rate?
🟡 Mobile vs desktop
🟡 How to improve it

https://www.speedcurve.com/blog/check-core-web-vitals-inp/

ryantownsend, to SEO
@ryantownsend@webperf.social avatar

⚠️ Today is a monumental day for the web ⚠️

Today marks the day Google replaces one of it’s Core Web Vitals, a metric called “First Input Delay”, with “Interaction to Next Paint”—INP for short.

But this may not be as monumental as people are making out...

Featured Links:

RUMvision's Core Web Vitals History: https://www.rumvision.com/tools/core-web-vitals-history/

SpeedCurve's research on INP to Conversion Rate Correlation:
https://www.speedcurve.com/blog/INP-user-experience-correlation/

video/mp4

tammy, to random
@tammy@webperf.social avatar

You've been able to integrate @speedcurve into your CI/CD process for quite a while now, but in late 2023 we introduced some powerful new functionality that you might not be aware of. @tkadlec wrote this great post to tie it all together: https://www.speedcurve.com/blog/continuous-web-performance/

speedcurve, to UX
@speedcurve@webperf.social avatar

Debugging INP can be tricky! You're in great hands with @andydavies. In this post, Andy walks through:

🔵 How he helps people identify the causes of poor INP
🟡 Examples of the most common issues
🟢 How to actually improve INP

https://www.speedcurve.com/blog/debugging-interaction-to-next-paint-inp/

tammy, to UX
@tammy@webperf.social avatar

The next edition of Speed Matters is dedicated to INP: what it is, how to track it, how to validate it against your business/UX metrics, and – most important – how to improve it.

Coming to your inbox next week! Join our 13K+ subscribers: https://www.speedcurve.com/newsletter/

monospace, to SEO
@monospace@floss.social avatar

You don't need a CDN! With Varnish, the open source cache proxy, you can shield your website from traffic spikes and speed up its content delivery by orders of magnitude. In my Varnish Master Course, you'll learn everything you need to set it up and configure it for optimal performance. https://www.monospacementor.com/courses/varnish-master-course/

  • All
  • Subscribed
  • Moderated
  • Favorites
  • Leos
  • InstantRegret
  • magazineikmin
  • hgfsjryuu7
  • Durango
  • Youngstown
  • slotface
  • everett
  • ngwrru68w68
  • rosin
  • kavyap
  • mdbf
  • PowerRangers
  • DreamBathrooms
  • anitta
  • osvaldo12
  • thenastyranch
  • vwfavf
  • khanakhh
  • tacticalgear
  • cisconetworking
  • modclub
  • GTA5RPClips
  • ethstaker
  • cubers
  • tester
  • normalnudes
  • provamag3
  • All magazines