nucliweb

nucliweb, 8 days ago to javascript

Comprehensive guide to JavaScript performance analysis using Chrome DevTools

https://blog.jiayihu.net/comprenhensive-guide-chrome-performance/

#WebPerf #DevTools #JavaScript

nucliweb, 2 months ago to random

Mesure the TTFB sub-parts

https://webperf-snippets.nucliweb.net/Loading/TTFB#mesure-the-ttfb-sub-parts

#WebPerf #TTFB #WebPerfSnippets #PerfTools

nucliweb, 2 months ago to CSS

An Interactive Guide to CSS Container Queries

https://ishadeed.com/article/css-container-query-guide

#CSS

nucliweb, 2 months ago to random

Here is a graphical explanation of the use of percentiles in Web Performance

p75 2.29 s

• 75% of visitors waited less than 2.29 s
• 25% of visitors waited longer than 2.29 s

#WebPerf #Performance #PerfMetrics

nucliweb, 3 months ago to random

Averages, medians & percentiles

https://support.speedcurve.com/docs/average-median-percentiles by @speedcurve

#WebPerf #Metrics

nucliweb, 4 months ago to random

📣 #WebPerfTip

Please be sure to avoid fade-in effects when loading the page. It seems a good UX resource to maintain good visual stability, but the Core Web Vitals LCP metric reports a terrible experience.

#WebPerf #Performance #CoreWebVitals #CWV #LCP

nucliweb, 4 months ago to random

It will be hard work, but it will be gratifying to achieve improvements

Tool: Lighthouse report on @speedcurve

#WebPerf #SpeedCurve #WebPerfTools

nucliweb, 5 months ago to random

When you change the device from desktop to mobile 😬

#WebPerf #CoreWebVitals

nucliweb, 5 months ago to random

Network request timing instrumentation, by @paul_irish

#WebPerf #Network

nucliweb, 6 months ago (edited 6 months ago) to random

🥺 Please, optimize your images, do it for your users.

1️⃣ Use correct size, you can use Responsive Images
2️⃣ Use modern image format: WebP, AVIF, JPEG XL
3️⃣ Ensure a correct optimization, config your codec
4️⃣ Bonus: Use Cloudinary as Image CDN service

#WebPerf #ImagePerf

nucliweb, 6 months ago to random

Mobile INP performance: The elephant in the room

https://www.speedcurve.com/blog/core-web-vitals-inp-mobile/ by @cliff

#WebPerf #INP #CoreWebVitals

nucliweb, 6 months ago to random

In Adevinta we are monitoring the INP sub-parts to give more info to the dev teams to improve the new Core Web Vital metric.

#WebPerf #Performance #CoreWebVitals #INP

nucliweb, 6 months ago to CSS

Serious question: In which cases would you use media-queries with decimals?

#CSS #LookingForOptimiceTheCSS

nucliweb, 6 months ago to random

📣 New WebPerf Snippet

Mesure the TTFB sub-parts

https://webperf-snippets.nucliweb.net/Loading/TTFB#mesure-the-ttfb-sub-parts

#WebPerf #Performance #PerfTools #WebPerfSnippets

nucliweb, 6 months ago to random

2 minutes to find the error 🙈

#DyslexicDeveloper

nucliweb, 7 months ago to random

“Attribution can transform RUM into a full-on diagnostic tool” - @tkadlec

#perfnow #WebPerf

nucliweb, 7 months ago to random

The #webperf community is wonderful!
@TheRealNooshu

#perfnow

nucliweb, 7 months ago to random

Web Performance Budget Flow, @tammy

#perfnow

nucliweb, 7 months ago to UX

Don't prioritise developer experience over user experience, Mark Zeman

#perfnow #WebPerf #UX

nucliweb, 7 months ago to random

Run a Snippet with the Command Menu

1️⃣ Focus your cursor somewhere in DevTools
2️⃣ Press Ctrl+Shift+P (Win, Linux) or Cmd+Shift+P (macOS) to open the Command Menu
3️⃣ Delete the > character and type the ! character followed by the name of the Snippet to run it
4️⃣ Press Enter

video/mp4

nucliweb, 7 months ago to random

Today I was able to meet @tomayac in person at GDG Girona DevFest 23.

We talked about Web Performance, and WebAssembly, in catalan ☺️

#DevFest2023

nucliweb, 7 months ago to random

📣 New WebPerf Snippet

Find Images With Loading Lazy and Fetchpriority
https://webperf-snippets.nucliweb.net/Loading/Find-Images-With-Lazy-and-Fetchpriority

Thanks to @csswizardry

#WebPerf #Performance #PerfTools #WebPerfSnippet

nucliweb, 8 months ago to ArtificialIntelligence

Inside Look at Modern Web Browser, by @kosamari

1️⃣ https://developer.chrome.com/blog/inside-browser-part1/
2️⃣ https://developer.chrome.com/blog/inside-browser-part2/
3️⃣ https://developer.chrome.com/blog/inside-browser-part3/
4️⃣ https://developer.chrome.com/blog/inside-browser-part4/

#Browser #DeepLearning

image/png

nucliweb, 8 months ago to random

🤩 Safari 17 supports JPEG-XL image format

Check your browser's image support
👉 https://lab.nucliweb.net/image-format-test/

#Image #ImagePerf #Performance

nucliweb, 8 months ago (edited 8 months ago) to random

⚡️ #WebPerfTip

Detect the largest images on a website:

1️⃣ Open Chrome DevTools
2️⃣ Select Network Tab
3️⃣ Open filters and select "Img"
4️⃣ Write "larger-than:1M" in the filter input
5️⃣ Reload the page
6️⃣ Optimize the images listed

#WebPerf #ImagePerf #Image