Discover and read the best of Twitter Threads about #PerfMatters
Most recents (13)
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
- 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.
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.
Under-the-hood working of the streaming SSR server with the new React 14's suspense.
A thread. 🧵👇
#reactjs #webperf #perfmatters
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`.
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.
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.
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
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.
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
& 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
How Website Speed Impacts Visitors and Sales 🏷️?
Real-world Examples:👇
#pageexperience #Corewebvitals #webperf #pagespeed #wordpress #seo #blogging #Google #sales #perfmatters #WebPerformance #bbc #Amazon #Tokopedia
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.
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
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 🏆👇
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.
Always include size attributes on images and video elements, or provide the necessary space with a CSS aspect ratio box.
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
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.
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.
Load CSS Codes after HTML Loading. To optimize your website, it is also a good idea to remove unused CSS code.
🚨 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 
🎥 Improving the load experience by reducing layout shift by @jensimmons of the @webkit team. #imageReady
bit.ly/image_ready_la…
bit.ly/image_ready_la…
🎥 @DasSurma discussed the details of the client side compression Squoosh! app #imageReady
bit.ly/image_ready_sq…
bit.ly/image_ready_sq…
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
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
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
• 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
How to test for H2 prioritization issues with @usingwpt
Patrick Meenan and the Waterfalls of Doom #perfmatters
belezanaweb.com.br (my team)
The videos from the SPOTLIGHT: Performance have now been published. You can relive the moments now and or during tomorrow's 🇨🇦 holiday. 🎥
@zacman85 @imgix It’s My (Third) Party, and I’ll Cry if I Want To w/ @csswizardry
slides: speakerdeck.com/csswizardry/it…
#webperf
#perfmatters
slides: speakerdeck.com/csswizardry/it…
#webperf
#perfmatters
"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
#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
🌟 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
✅ Critical CSS for current route
✅ Fonts
✅ hero image
✅ initial application route
✅ application bootstrap data"
- @patrickhamann
#webperf #perfmatters
@FluentConf
