Contents tagged “WebPerf”

There are 162 contents with this tag:

  1. 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’”. 😞

  2. 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

  3. 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

  4. screenshot of Why We're Breaking Up with CSS-in-JS

    Sam Magura

    Why We're Breaking Up with CSS-in-JS

    Thanks for reading this deep dive into runtime CSS-in-JS. Like any technology, it has its pros and cons. Ultimately, it's up to you as a developer to evaluate these pros and cons and then make an informed decision about whether the technology is right for your use case. For us at Spot, the runtime performance cost of Emotion far outweighed the DX benefits, especially when you consider that the alternative of Sass Modules + utility classes still has a good DX while providing vastly superior performance.

  5. screenshot of The Case for JPEG XL

    Jon Sneyers avatar Jon Sneyers

    The Case for JPEG XL

    Jon gives a good overview of everything JPEG XL improves over other image formats. This article can be seen by some as biaised, as Jon is part of the team that created the format, but I really think it honestly shows clear advantages, and I hope it will help people understand JPEG XL support in browsers would be great.

  6. screenshot of Self-Host Your Static Assets

    Harry Roberts avatar Harry Roberts

    Self-Host Your Static Assets

    One of the quickest wins—and one of the first things I recommend my clients do—to make websites faster can at first seem counter-intuitive: you should self-host all of your static assets, forgoing others’ CDNs/infrastructure. In this short and hopefully very straightforward post, I want to outline the disadvantages of hosting your static assets ‘off-site’, and the overwhelming benefits of hosting them on your own origin.

  7. screenshot of Caching Header Best Practices

    Simon Hearne avatar Simon Hearne

    Caching Header Best Practices

    Client-side caching is a key technique to improving front-end speed and user experience. Whilst it may appear complex and risky, investing the time to review your content and setting the correct response headers will reduce bandwidth utilisation and improve speed for return visitors as well as mid-session.

  8. 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?

  9. screenshot of Speeding Up Async Snippets

    Harry Roberts avatar Harry Roberts

    Speeding Up Async Snippets

    For all the resulting script is asynchronous, the <script> block that creates it is fully synchronous, which means that the discovery of the script is governed by any and all synchronous work that happens before it, whether that’s other synchronous JS, HTML, or even CSS. Effectively, we’ve hidden the file from the browser until the very last moment, which means we’re completely failing to take advantage of one of the browser’s most elegant internals… the Preload Scanner.

  10. 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?

  11. 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/

    True!

    But most images are currently not or badly optimized. 😔

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

  12. screenshot of Could sustainable websites increase energy consumption?

    Tom Greenwood avatar Tom Greenwood

    Could sustainable websites increase energy consumption?

    Having lost some sleep over this, I am relieved to find that when it comes to the web, Sustainable Web Design is the solution to the Jevons paradox. By maximising efficiency in web design, development and content creation, we can ensure that we preserve the benefits of more efficient hardware. Then by trying to ensure that the web projects we work on are actually good for the world, we can harness the secondary rebound effect to create positive rather than negative environmental impact.

  13. screenshot of Hydration is Pure Overhead

    Miško Hevery avatar Miško Hevery

    Hydration is Pure Overhead

    The re-execution of code on the client that the server already executed as part of SSR/SSG is what makes hydration pure overhead: that is, a duplication of work by the client that the server already did. The framework could have avoided the cost by transferring information from the server to the client, but instead, it threw the information away.

  14. 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. 🤯

  15. screenshot of Performant A/B Testing with Cloudflare Workers

    Philip Walton avatar Philip Walton

    Performant A/B Testing with Cloudflare Workers

    The problem with the current A/B testing tools is they construct the test on the client. They block rendering until they can determine which experiment group the current user should be in, and then they update the DOM based on that experiment’s parameters. On slow connections or low-end devices, this can mean users are staring at a blank screen for seconds waiting for network requests to finish before rendering can even start.

  16. 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… 🎉

  17. screenshot of The Ethics of Web Performance

    Tim Kadlec avatar Tim Kadlec

    The Ethics of Web Performance

    The business models that support much of the content on the web don’t favor better performance. Nor does the culture of many organizations who end up prioritizing the next feature over improving things like performance or accessibility or security.

  18. screenshot of Letters of exclusion

    Jeremy Keith avatar Jeremy Keith

    Letters of exclusion

    I feel sorry for anyone trying to get into the field of web performance. Not only are there complex browser behaviours to understand, there’s also a veritable alphabet soup of initialisms to memorise. Here’s a really good post on web performance by Harry, but notice how the initialisms multiply like tribbles as the post progresses until we’re talking about using CWV metrics like LCP, FID, and CLS—alongside TTFB and SI—to look at PLPs, PDPs, and SRPs. And fair play to Harry; he expands each initialism the first time he introduces it.

  19. screenshot of Page Weight Matters

    Chris Zacharias avatar Chris Zacharias

    Page Weight Matters

    After a week of data collection, the numbers came back… and they were baffling. The average aggregate page latency under Feather had actually INCREASED. I had decreased the total page weight and number of requests to a tenth of what they were previously and somehow the numbers were showing that it was taking LONGER for videos to load on Feather. This could not be possible. Digging through the numbers more and after browser testing repeatedly, nothing made sense. I was just about to give up on the project, with my world view completely shattered, when my colleague discovered the answer: geography.

  20. screenshot of Legacy and Transition: Creating a New Universal Image Codec

    Jon Sneyers avatar Jon Sneyers

    Legacy and Transition: Creating a New Universal Image Codec

    JPEG XL’s legacy-friendly feature is a game-changer for the transition problems described above. Besides saving both storage and bandwidth from the outset, you can also losslessly preserve legacy images while reaping more compression. In other words, JPEG XL offers only benefits from the start, whereas other approaches require sacrifices in storage to reduce bandwidth.

  21. screenshot of Green by Default

    Brian Louis Ramirez avatar Brian Louis Ramirez

    Green by Default

    We humans are creatures of comfort. We like taking the easy route, the low-hanging fruit, the way that doesn’t make us think. […] In this article, I’ll show you how defaults can be used to save energy and thereby reduce CO₂ emissions in technology.

  22. 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!

  23. 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.

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

    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

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

  25. screenshot of The Fastest Google Fonts

    Harry Roberts avatar Harry Roberts

    The Fastest Google Fonts

    If you're using Google Fonts service instead of self-hosting the fonts (even if they come from Google Fonts), Harry shows here the optimal performance and UX you can get with it, with lot of details, but a really simple solution.

  26. screenshot of Eleventy’s New Performance Leaderboard

    Zach Leatherman avatar Zach Leatherman

    Eleventy’s New Performance Leaderboard

    Eleventy doesn’t do any special optimizations out of the box to make your sites fast. It doesn’t protect you from making a slow site. But importantly it also doesn’t add anything extra either. This sort of developer empowerment over the final product has seemed to attract an amazing group of performance oriented developers using the project and I am so grateful to every one of you.

  27. screenshot of Optimising SVGs for the Web

    Michelle Barker avatar Michelle Barker

    Optimising SVGs for the Web

    Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. […] In this article I’ll share my process for optimising SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web.

  28. screenshot of Caching best practices & max-age gotchas

    Jake Archibald avatar Jake Archibald

    Caching best practices & max-age gotchas

    Used correctly, caching is a massive performance enhancement and bandwidth saver. Favour immutable content for any URL that can easily change, otherwise play it safe with server revalidation. Only mix max-age and mutable content if you're feeling brave, and you're sure your content has no dependancies or dependents that could get out of sync.

  29. 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 far indicates folks who want low-data experiences are far more common than we may think.

  30. screenshot of Font style matcher

    Monica Dinculescu avatar Monica Dinculescu

    Font style matcher

    If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths. This tool helps you do exactly that.

  31. screenshot of Metrics from 1M Sites

    Steve Souders avatar Steve Souders

    Metrics from 1M Sites

    What catches my eye are the gaps between TTFB and the paint metrics, and between the paint metrics and First CPU Idle. These gaps are caused by JavaScript dominating the browser main thread. This happens after TTFB when all the blocking scripts are executed – these have to finish before any rendering can happen.

  32. screenshot of Should I Use JavaScript to Load My Web Fonts?

    Zach Leatherman avatar Zach Leatherman

    Should I Use JavaScript to Load My Web Fonts?

    the advanced web font loading control offered by JavaScript still provides more than sufficient value to keep it around. You can adapt your page’s performance profile to suit a user’s network conditions, user preferences, improving the general loading behavior of self hosted fonts and third party hosting providers.

  33. 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”.

  34. 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[1], 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.

  35. Retrouvons nous à Web UX et Sud Web les 26 et 27 mai

    Vous le savez sans doute si vous me lisez régulièrement, sur ce blog ou via mes tweets, je suis dingue de Web, et toujours intéressé par ses moyens de mise en œuvre, usages et acteurs, et donc très intéressé par tout événement permettant de mixer tout cela. Cette année, en plus de l'incontournable rendez-vous annuel Paris Web en octobre, vous pourrez me croiser fin mai à Nîmes pour Web UX et Sud Web.

  36. Surveillez vos erreurs 404, elles peuvent être très instructives

    A l’heure où tout le monde ne jure que par l’optimisation du référencement — on dit Search Engine Optimization, ou SEO, pour faire branché — afin d’augmenter son trafic, et ainsi ses clients potentiels et/ou son revenu publicitaire, qui se soucie de vérifier ce qui se passe pour les internautes qui arrivent bien sur le site, mais sur une page qui n’existe pas, indiquée comme il se doit par une erreur HTTP 404[1] ?

  37. Bouuuuh-stez votre site web !!!

    La technologie INA (Intelligent Network Acceleration) de BoostWorks utilisé dans le produit BoostWeb Optimizer « est une procédure sophistiquée de mémorisation et de compression qui optimise les performances du réseau tout en préservant l'intégrité et la qualité des données ».

See all tags.