Contents tagged “WebPerf”

There are 175 contents with this tag:

  4. General question about synthetic performance monitoring:

    How do you define the device/network settings of your tests?

    • Do you use low end devices / bad network to easily detect issues?
    • Or do you try to be close to your RUM data, to have more predictability when you deploy changes?

    I usualy do the former, but I think both could be useful.

  6. Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?

  9. I still don't understand why using Cloudflare in front of Netlify allows for a much better and stable Time To First Byte (TTFB) than Cloudflare Pages or Netlify alone… 🤷‍♂️

    SpeedCurve graph with Time To First Byte for the 3 hosting solutions

    TTFB for static sites should always be very low.

  19. I have a client site with a header that is hidden when the user scrolls down, but shown again when the user scrolls up, which seems pretty comon nowadays.

    This triggers some CLS, even if the hide/show is done in less than 500 ms, as “continuous interactions such as scrolls, drags, or pinch and zoom gestures are not considered ‘recent input’”. 😞

  22. Same page tested on PageSpeed Insights over a few hours the same day, without anything modified, and the desktop scores vary from 19 to 59… 🤷‍♂️

    A lot of businesses rely on this crap to now if their site is "fast" enough for Google SEO! 😭

    Three different scores: 44, 59, 19

  26. In all #WebPerf reporting tools with graphs, I would like to be able to quickly set a preferred scale, or ignore certain values that I know are incorrect.

    Examples from Contentsquare/Dareboost and SpeedCurve…

    Screenshot of a Contentsquare/Dareboost graph with an incorrect value implying a useless scale

    Screenshot of a SpeedCurve graph with an incorrect value implying a useless scale

  41. When an <img loading="lazy"> is hidden (in a menu for example) but above the fold, when exactly is it downloaded? 🤔

    In all browsers?

    Is JS-based lazy loading after the load event better for above the fold CSS/JS optimization?

  43. How do you deal with images that need to have a fluid width but fixed height?

    I tend to start from the lowest width/height ratio and increase, knowing larger images will have hidden parts above and below… 😔

    Anything better?

  44. Avatar for csswizardry
    Harry Roberts @csswizardry

    I accidentally moved my hero image onto Cloudinary (who I also adore!). But, a less-optimised image served from the same origin is always faster than a more-optimised image from a third party. Self-host your static assets! csswizardry.com/2019/05/self-host-your-static-assets/

    55 06:06 PM · Sep 29, 2022

    True!

    But most images are currently not or badly optimized. 😔

    They would benefit a lot from an image CDN: resize, compression, modern formats, etc.

  59. When you start using an image CDN on a site with oversized JPEGs, without any change to the HTML:

    SpeedCurve test showing a 20 seconds gain in Largest Contentful Paint

    Imagine when there will be accurate srcset/sizes attributes, better formats, etc. 🤯

  85. Once your image CDN is (correctly) set up, support for any new lighter/faster image format is like infinite ROI: "much lighter images" divided by "zero additional cost". 🥰

    It could even cost you less, if you pay based on bandwidth… 🎉

  109. 5 tests for the same page on PageSpeed Insights within 3 minutes, results range from 29 to 60. 🤷‍♂️

    This is ridiculous, our clients rely on this "tool" promoted by Google to assess their performance. 😡

    It should be much more stable and reliable!

  121. How I build my SVG sprites

    I'm using an SVG sprite on this site to make sure I don't repeat SVG code for icons that are used multiple times, and I inline it so the rendering doesn't depend on another resource loading. Here's how I build this sprite from individual SVG icons.

  129. This new monitoring tool based on #Eleventy, built by @zachleat, is awesome! 😍

    Avatar for zachleat
    Zach Leatherman @zachleat

    New project: Speedlify 🐇

    A self-hosted dashboard to continuously measure and publish web site performance statistics using Lighthouse and Axe.

    Demo:speedlify.netlify.app/ssg/c
    Blog post:www.zachleat.com/web/speedlify/L

    471 07:27 PM · Jun 30, 2020

    It took me just a few minutes to built my dashboard for multiple sites:
    https://webperf-monitoring.netlify.app/

  144. screenshot of Save-Data Usage

    Tim Kadlec avatar Tim Kadlec

    Save-Data Usage

    Because while the web keeps getting heavier and we keep moving further away from page weight as a primary performance metric, the data I’ve seen so…

  159. How much data should my Service Worker put upfront in the offline cache?

    I love when Web site/apps work even when I'm offline. I've made my SVG game esviji work offline thanks to appcache just after attending Jake Archibald conference about why Application Cache is a Douchebag during the 2012 edition of the Paris Web conference. Fortunately, we have now Service Workers (in some browsers), which gives us more control over this kind of cache for offline browsing. But as Uncle Ben says, “With Great Power Comes Great Responsibility”.

  160. Le gros impact des raccourcisseurs d'URL sur la performance

    Les raccourcisseurs d'URL sont devenus incontournables sur le Web depuis quelques années, mais initialement pensés comme outils de facilitation de partage, ils ont beaucoup évolué et sont surtout devenus des outils de tracking. Du coup, les sites en abusent de plus en plus, alors que les plateformes où ces liens sont publiés, Twitter par exemple, rajoutent leur propre couche. L'impact sur la performance pour l'utilisateur final est désastreux.

See all tags.