Today I Learned - Rocky Kev

Tagged “optimization”

  1. TIL Performance tests

    While doing performance tests, I was curious how long a loop was running. I used the performance.now() trick.

  2. TIL self-hosting your own Google Fonts

    I'm all for self-hosting. So seeing this question asked 'Should you self-host Google Fonts?', my immediate answer is ABSOLUTELY. But here's the edge-cases.

  3. TIL loading third-party scripts onto service workers

    An alternative to self-hosting scripts would be using Service Workers to cache them. This can give you greater control over how often they are re-fetched from the network. This could also be used to create a loading strategy where requests for non-essential third parties are throttled until the page reaches a key user moment.

  4. TIL Event Delegation

    Event delegation is one of the most helpful patterns for DOM events! Adding too many event listeners means JavaScript is storing it all in memory. Event Delegation lets you store one listener, that then looks for the target.

  5. TIL using defer/async

    So an old and often-touted best practice for performance has been to load your JavaScript in the footer of the document to avoid render blocking of scripts. By putting it in the footer, the DOM is constructed before your scripts have a chance to run. That's dumb.

  6. TIL Find unused JavaScript

    Chrome's Coverage panel allows you to quickly locate JavaScript (and CSS) code that has — and has not — been used. To start, open Coverage from the More tools sub-menu in the DevTools menu

  7. TIL how a dev cut GTA Online load times by 70%

    In all, t0st estimates that 1,984,531,500 checks take place (nearly two billion!), again taking up a ton of CPU time.

  8. TIL Optimizations with closures

    To reduce the number of times a variable gets computed, you can use closures. Closures work by storing references to the outer function’s variables. They do not store the actual value.

  9. TIL Copy/Paste SVG Icons

    And by inlining the SVG, you make one less call, and it loads faster. heroicons.dev is awesome

  10. TIL this Responsive Image Generator

    With website optimization, it's better to deliver only the image that the browser size needs. Do that here.

  11. TIL Server-side rendering vs Static Generation

    Server-side sends a fully rendered page to the client. Client-side, you cannot interact with the site, and instead will need to wait for all of the JS to download, to allow the SPA framework to operate.

  12. TIL About Native Lazy Loading

    Native Lazy Loading is a thing!

See all tags.