Lighthouse scores: how to reduce render-blocking scripts

Lighthouse scores: how to reduce render-blocking scripts(fly.io)

32 points by TheMissingPiece 7 years ago | 5 comments

acconrad 7 years ago |

Kind of a lot of words for using Async, Defer, or IntersectionObserver. But this is a weird case of using IntersectionObserver. I'd rather use it for something like lazy-loading images[1]. They have a much higher download cost and will provide a much greater boost in performance than optimizing your JavaScript. Also, by placing all of your scripts at the bottom (save for a few at the top like Modernizr), you really don't need to worry too much about async vs defer.

[1] https://www.machmetrics.com/speed-blog/how-to-lazy-loading-i...

RobertRoberts 7 years ago | |

It appears Google will be integrating lazy loading into the browser.[0]

In my almost 20 years of development experience, I find my todo list extremely long. And a core principle that has served me well is that if a feature is coming to the browsers for free, it's cheaper and easier to wait for the feature instead of spending real time/money building a cheap copy of it, and then having to rip it out a year later for the native feature.

"Feature patience" seems a fitting description.

I have recently used IntersectionObserver to replace scroll event functionality (modifying sticky positioned headers) and it's great for that, but I don't want to use it for lazy loading, seems like way to much work.

[0] https://groups.google.com/a/chromium.org/forum/#!msg/blink-d...

falsedan 7 years ago |

> If this is too many words, the pretty picture below should help clear things up.

Holy crap, I knew big G hates users but this level on condescension is off the charts!

kaycebasques 7 years ago | |

I write the Lighthouse docs. This is not one of our docs.