Discover and read the best of Twitter Threads about #PerfMatters

Most recents (13)

Site speed monitoring, 7 pitfalls to avoid

🧡
#webperf #perfmatters
TL;DR
- Synthetic tools only
- Trust Lighthouse Score
- Improper metrics
- Mobile (or Desktop) only
- Confound domain and page-level data
- Slow outcomes validation
- Measure all your internal pages
- ...
Synthetic tools only

They are useful during debug/dev but never represent your real users' experiences.

You should primarily monitor with RUM (Real User Monitoring) tool and combine it with a synthetic one.
Read 11 tweets
Under-the-hood working of the streaming SSR server with the new React 14's suspense.

A thread. πŸ§΅πŸ‘‡

#reactjs #webperf #perfmatters
1/10, at 0ms.
The browser sends an HTTP GET request to the server and the request reaches the handler responsible for SSR and that invokes `react-dom/server`'s `renderToPipeableStream`.
2/10, at 50ms.
The react-dom/server then preps the app for rendering and does an initial rendering of the component tree.

At this point, react-dom/server would have identified the list of suspenses in the tree.
Read 12 tweets
Google's page experience update is now slowly rolling out. And It will be complete by the end of August 2021.

What's new in this Update?🀷

A thread πŸ§΅πŸ‘‡

#pageexperience #Corewebvitals #webperf #pagespeed #wordpress #seo #blogging #Google #perfmatters #website #blogger #chrome
1️⃣ As previously announced, the page experience update will consider several page experience signals, including the three Core Web Vitals metrics: LCP, FID, and CLS.
2️⃣ Top Stories feature on Google Search will be updated to include all news content. This means that using the AMP format is no longer required & that any page, irrespective of its CWV score or page experience status, will be eligible to appear in the Top Stories.
Read 5 tweets
Google announced the release of Lighthouse 8.0 with a mix of stricter
& easier scoring. Most sites are estimated to enjoy improved scores.

What Changes to Google Lighthouse Tool?πŸ‘‡

#Lighthouse #Corewebvitals #webperf #pagespeed #wordpress #seo #blogging #Google #perfmatters
1️⃣ Performance score has been re-weighted
2️⃣ Total Blocking Time (TBT) Scoring is Stricter
Read 5 tweets
How Website Speed Impacts Visitors and Sales 🏷️?

Real-world Examples:πŸ‘‡

#pageexperience #Corewebvitals #webperf #pagespeed #wordpress #seo #blogging #Google #sales #perfmatters #WebPerformance #bbc #Amazon #Tokopedia
1. @amazon: Every 100ms of Latency Cost them lose 1% of sales.
2. @Walmart: +2% conversion per 1 second load time improvement.
Read 6 tweets
Sales are dropping?

88% of online Buyers say they wouldn’t return to a Site after having a bad User Experience.

Poor Cumulative Layout Shift score can be the reason for bad UX.

#pageexperience #Corewebvitals #webperf #pagespeed #wordpress #seo #blogging #UX #perfmatters #Sales
What is Cumulative Layout Shift❓:

The Cumulative Layout Shift (CLS) represents the visual stability of a website. A shift in a layout can occur any time when a visible element changes its position from one rendered frame to the next.

Focus on these to improve CLS πŸ†πŸ‘‡
1️⃣ Add Dimensions for Image and Video Elements:

Always include size attributes on images and video elements, or provide the necessary space with a CSS aspect ratio box.
Read 5 tweets
Out of million sites,Β 

52.01% has a Poor LCP (Largest Contentful Paint) Score that directly affectsΒ  their Ranking and UX.

Only 47.99% has a good LCP Score.

Here's How to Improve LCP πŸš€

#pageexperience #Corewebvitals #webperf #pagespeed #wordpress #seo #blogging #perfmatters
1️⃣ Preload Important Assets:
If you think that a particular resource on a page should be prioritized, use <link rel=”preload”> to load it sooner.
2️⃣ Load CSS after HTML loading:
Load CSS Codes after HTML Loading. To optimize your website, it is also a good idea to remove unused CSS code.
Read 6 tweets
🚨 Did you know the IMG tag was introduced 25 yrs ago TODAY on Nov 24th πŸŽ‚πŸŽ‰, as part of the HTML 2.0 spec -or- RFC 1866. In celebration, I’d like to release the videos from IMAGE READY, a series of talks on modern images, recorded Oct 2. A thread ⬇ #imageReady IMAGE READY: THE VIDEOS. a ...
πŸŽ₯ Improving the load experience by reducing layout shift by @jensimmons of the @webkit team. #imageReady

bit.ly/image_ready_la…
πŸŽ₯ @DasSurma discussed the details of the client side compression Squoosh! app #imageReady

bit.ly/image_ready_sq…
Read 12 tweets
Great to see some fantastic #webperf work happening on GOV.UK at the moment. The team have been gradually removing the shard domain for critical assets, and it's made quite a difference! Images from Chrome on a 3G connection and S4 on 3G. 1/4 ImageImageImageImage
Considering where we were at the start of Feb: HTTP/1.1, SRI, shard domain, ~13 TCP connections. Now down to just 1 TCP connection in many cases. 2/4 ImageImage
And we can finally make the most the features H2 has to offer. Serving all assets off a single domain allows:
β€’ all assets to use a connection that is up to speed (TCP slow start)
β€’ prioritisation can happen across all assets
β€’ no more h2 connection coalescing required

3/4
Read 4 tweets
Next at #perfnow, @patmeenan professes his contempt for web fonts, and something something HTTP/2 😁 ImageImage
How to test for H2 prioritization issues with @usingwpt Image
Patrick Meenan and the Waterfalls of Doom #perfmatters ImageImageImageImage
Read 6 tweets
The videos from the SPOTLIGHT: Performance have now been published. You can relive the moments now and or during tomorrow's πŸ‡¨πŸ‡¦ holiday. πŸŽ₯
HYPER LIGHTWEIGHT WEBSITES w/ @zacman85 of @imgix



#webperf
#perfmatters
@zacman85 @imgix It’s My (Third) Party, and I’ll Cry if I Want To w/ @csswizardry



slides: speakerdeck.com/csswizardry/it…

#webperf
#perfmatters
Read 9 tweets
"I've sat up on stages like this and proclaimed that H/2 was going to solve everything, and i'm sorry for that... but resource loading in the browser is a very very hard thing." - @patrickhamann #britishAccent
#webperf #perfmatters
@FluentConf
"🌟 performance of the loading of your webpages are tightly coupled to latency.
🌟 connection costs are high
🌟 Bandwidth is oft under-utilized
🌟 Script exec is πŸ’°πŸ’°πŸ’°
🌟 critical resources can be hidden"

- @patrickhamann #britishAccent
#webperf #perfmatters
@FluentConf
"what are critical resources??

βœ… Critical CSS for current route
βœ… Fonts
βœ… hero image
βœ… initial application route
βœ… application bootstrap data"

- @patrickhamann
#webperf #perfmatters
@FluentConf
Read 7 tweets

Related hashtags

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3.00/month or $30.00/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!