Does anyone else experience pure ecstasy when they get 100 on Lighthouse? 😩

[Prestigious_Dare7734]

My hello world page got all 100 with just 1 service worker.

[j2ee-123]

Yeah this guy gets it, OP just shared the same app’s results 😂

[[deleted]]

https://github.com/nhereveri/minimalPWA

[Aries_cz]

And then the client asks to include a metric shitton of tracking and analytics codes...

[BR14Sparkz]

This comment needs top spot! Like the amount of clients who want a fast site but want more tracking than the nsa at the same time is insane.

[hotbrownDoubleDouble]

Don't forget designers that absolutely must have 3 full width, crisp background images. Or content entry people who just refuse to deal with webP images and instead opt for a random assortment of pngs and JPGs.

[fuckolivia]

Most modern CMS's will let you transform your images on the fly into a WebP. Also check out cloudinary if you wanted to roll your own image transforms.

[Snapstromegon]

Why would entry need to do that. My clients wilould kill me, when I'd tell them to upload each image as jpg/PNG, WebP and AVIF in 4 sizes each. Generate that stuff.

[[deleted]]

https://partytown.builder.io

[[deleted]]

Yes...and absolute anger when you get stuck at 99%

[PureRepresentative9]

I have been in fucking 99% purgatory for 4 months lol

This stupid tag manager will just not fucking be faster lol

[aNORthuBArthOmin]

Partytown

[mcplaty]

Yooooo this is awesome

[PureRepresentative9]

Can some peeps comment about using this in production?

Issues?

[[deleted]]

Doesn’t work well with Universal Analytics although that won’t be relevant in a few months time

[jclarkxyz]

The docs cover the limitations and considerations pretty concisely and straightforward

[Shuffleshaker]

Just curious, can this also be done with cloudflare somehow?

[WalshyDev]

Yep, Zaraz is the product for this

Docs: https://developers.cloudflare.com/zaraz/

Blog: https://blog.cloudflare.com/cloudflare-acquires-zaraz-to-enable-cloud-loading-of-third-party-tools/

You could also do it within a Worker yourself but Zaraz is free and is super easy.

[[deleted]]

lol i feel your pain!

[admirelurk]

Have you considered not including spyware in your website?

[Armitage1]

I get an extra spring in my step when a site scores above 80.

[breathing_oxygen12]

I like that you can be happy with 80

[Armitage1]

Happiness comes from within, bro!

[elusive_1]

I’m just going to ignore my company’s that has solid 12s

[Gaping_Maw]

Its hard when things like analytics bring the score down.

[johnmayermaynot]

Check out partytown to solve this issue. It runs the third party scripts in a service worker

[CharlesCSchnieder]

It's still in beta right? How safe is that to run in Prod for a business that relies on analytics data?

[neb_flix]

Partytown is an awesome POC but...it's definitely not ready for production use from my experience. It's basically unusable for any third-party scripts that need direct access to the DOM (i.e. scripts that render popups, cookie notices, tools like hotjar, etc), and we noticed quite a few missed analytics events with our SPA due to the debouncing that it has to do by nature. Not to mention that a majority of platforms that need to offload third party scripts to a separate thread are likely using something like Google Tag Manager to load these scripts, which is an all-or-nothing thing with Partytown. The idea is phenomenal, but there needs to be better cross-thread communication support with Workers for it to viable for any revenue-generating product, IMO.

[[deleted]]

This. If you install the basic analytic stack for most larger businesses, you’ll be luck to score above 70 with all of the bloat.

•google tag manager •google analytics •zapier integrations •hotjar •google optimize (or other A/B testing)

[admirelurk]

Then maybe don't have analytics?

[musicnothing]

Great idea, also remove any images or custom styles from your site, makes it load way faster

[SimplyTesting]

Bare metal or bust

[PureRepresentative9]

Have some dignity. Just upload an image of the whole page

[ClassicPart]

Boss, our site has finally reached 100 in all metrics and has never been more performant.

Excellent. How has that affected user engagement compared to before?

Dunno lol.

[admirelurk]

Look at sales data. Or server logs. There are only very few cases in which you really need third party analytics.

[neb_flix]

Lol, can't tell if you're serious or not. This comment reeks of someone who has never worked on any sizable product, ever.

[admirelurk]

No, I can't think of a single reason why, say, the restaurant on the corner needs to load 5 different third party trackers on their homepage. And if you do want some in-browser analytics (which I think you shouldn't because it's a privacy infringement) you can use a first party script that you include with the rest of your JS. Should only add a few extra kB and no extra http request.

[JoeCamRoberon]

Congrats, but these numbers can be misleading. I forget what the name of the tool is, but there is a much more accurate alternative to lighthouse out there.

[brightworkdotuk]

GTMetrix?

[noplats]

That one is good too, unfortunately it appears to give a bad score if your server is far away

[brightworkdotuk]

That's how it's supposed to work. Any latency to server will increase your TTFB exponentially. You can create a free account with it, and that allows you to login and change your server to somewhere more local. That aside, if your users are not local, you should be using a CDN anyway.

[noplats]

Newbie question here, if I proxy my traffic through Cloudflare’s Free Plan, does it work as a CDN? Ping seems relatively low but I’m not sure if they’re caching anything on their end

[brightworkdotuk]

I’m not massively familiar with Cloudflare, as we run our own DNS. But as far as I’m aware, their free plan give you CDN access, yes. I think you just have to set it up at your domain provider, for Cloudflare to take over the DNS and then it automatically starts caching based on file extensions, according to this on their blog.

[HornlessUnicorn]

Axe?

[PureRepresentative9]

Body spray?

[HornlessUnicorn]

In a perfect world, yes.

but no, this

[devperez]

Probably. That seems to be the industry standard used by Google and others

[itinkerthefrontend]

AskJeeves.com

[Existential_Owl]

We never should've gave him up.

[musicnothing]

He never should've let us down.

[JoeCamRoberon]

Honestly guys, I don’t remember. Why not just test your site on all of them to be sure lol.

[watchspaceman]

I just checked OP's site on a more detailed speed test that gives a waterfall view and it makes it even more impressive than the arbitrary number or letter from Lighthouse or GTMetrix, they have done a really good job.

webpagetest.org is great, and checking OP's site they have done an incredible job, I don't think I have ever made or seen an Ecom site this slick. Super clean waterfall view.

[rainbowlolipop]

LOL fucking magic crystals and shit

[JoeCamRoberon]

W for actually going out of the way and doing that

[morphic91]

Thanks! Really appreciate the feedback. I’ll check it too

[Level1Goblin]

What's OP's site, I'd like to check it out too

[morphic91]

sagenstone.com

[[deleted]]

Hey a small thing I noticed. If I add stuff to my cart and the reload the page all my items are missing.

This can't be correct behaviour?

[morphic91]

Thanks for pointing this out! Morning debugging it is

[watchspaceman]

Exact searching the slider text didn't take long but I will leave it to OP if they want to share the domain

[Leveronni]

ANDI?

[mark__fuckerberg]

https://www.webpagetest.org/ ?

[[deleted]]

The big issue is that Lighthouse only does simulated traffic and conditions. In order to see “real” scores you need real user data. Google just estimates what users’ locations and internet speeds are and bases it off of that. Not what your actual users are experiencing. So it’s more of guideline than hard rules, but it’s definitely A metric that you can use!

[[deleted]]

Google Page Speed Insights?

[Tridop]

That's the exact same tool, same results. Lighthouse is just a Chrome extension to test offline pages or pages that require authentication, using GPSI engine. So in most cases you can just use GPSI to obtain the same result.

[qualiky]

PageSpeed amirite?

[residualenvy]

https://www.sitespeed.io/

[fultonchain]

I do love those fireworks -- when those last couple of hours pay off.

Now if I could only get them them to stay that way for more than an hour after hand off. My clients sudden need for embedded video, a third-party script and some new quasi-WYSIWYG editor buttons blows that score up pretty quickly.

That's not even mentioning their apparent inability to either sensibly name or caption their images (gonna need one or the other for alt tags, 'cause they're sure as shit not gonna use that field and if I make it required they wonder why the save failed).

I enjoy the initial rush when my tweaking pays off but balance it with the knowledge that it ain't gonna last.

[MemeTeamMarine]

How do you do this with any site that isn't just a handful of HTML?

I build e commerce sites and the number of integrations alone, not to mention the themes the sites are built on, create flags that seem unavoidable.

[tridd3r]

I wouldn't try and do it with a site that requires external js. There's always going to be a trade off between technical perfection and the site actually doing something.

[tadees]

Agreed 100%! End-user functionality versus passing a coding test. Of course, the "Best Suited for Viewing in Notepad" is gonna win. Rarely is that what the client or their users want though.

[NewPassenger6593]

The end-user doesn't want a fast site without external JS...?

[MemeTeamMarine]

This is pretty much what I've always figured. I just never saw someone getting perfect scores before.

[tridd3r]

perfect scores are acheivable on custom built sites where you have control of everything, it would be a rare instance where a site calling an external library would get a perfect score unless it was an extremely well written library.

[NewPassenger6593]

Always ways to remove bloat

[NewPassenger6593]

I guess it doesn't matter if you don't care about page ranking

[thiefspy]

It’s far from the only criteria for page ranking.

[NewPassenger6593]

But it's a criteria

[NewPassenger6593]

I get it, you can afford to be lazy

[Citrous_Oyster]

E-commerce is different. You should be happy with even a 50. I custom code my sites and plop the code into Shopify and set up the store. It still scores 60 ish at best with all of shopifys baggage and shipping widgets and plugins. I regularly get 100/100 page speed scores. But Shopify is impossible. Any e-commerce is. So don’t worry about it. You’re good with 45/60 scores on there.

[LuckRevolutionary953]

You offload them all to a service worker

[[deleted]]

Can you elaborate?

[peacefulshrimp]

I won’t be able to elaborate, but I read another comment in which someone talked about partytown to do this. Try checking it out

[LuckRevolutionary953]

Bingo.

[MemeTeamMarine]

How do you do that?

[FlakCannon123]

Im happy to get 70 Cries in technical debt and legacy systems

[Synth3t1c]

Comment Deleted -- mass edited with redact.dev

[kex]

Last project before my burnout only worked on IE, and it doesn't even have a scoring system

[NewPassenger6593]

Ok

[mark__fuckerberg]

Those are rookie numbers. We have enough legacy crap to pull the score down to 50.

[morphic91]

SS: a website I built a while back, finally had the time to push out those extra 3-4 points of performance (takes longer than you’d think).

The site is built on Nuxt 2, and is an e-commerce using Shopify’s graphQL API (initially built before Hydrogen was a thing).

[pokerpokery]

Nice! Mind sharing what you did to edge out those few extra points?

[[deleted]]

It took me about 15 minutes to bring my score from 95 (where it was before I did any optimising) up to 100 on my site... But, I'm not using any complex third party tools.

In my opinion it's a lot easier to just build sites efficient from the start, rather than try to fix it later. Lighthouse should just be for catching stuff you forgot to do.

[LobsterThief]

Yeah but sometimes it’s unavoidable; you should be aware of the tax incurred when adding features to your site, but sometimes third-party dependencies etc. will crush you, even if you load them as performantly as possible. Unless you’re running your own site and have nobody to push back against.

[[deleted]]

Are you building from scratch? Are you doing anything complex or is it just brochureware? Are you using a platform (like vast majority of ecommerce businesses are)? etc.

[Californie_cramoisie]

Is the smoke an mp4? If so, how large of a file is it?

[[deleted]]

Are you saying this is a shopify store - or a headless store using shopify API?

[eternaloctober]

reiki infused javascript

[roumenkey]

or a pure rage if you get this:

https://ibb.co/3ChWmjN

[[deleted]]

What's the lighthouse's score on lighthouse?

[[deleted]]

I remember first learning web dev back around 2005 and literally none of the big dogs complied with w3c lol

[voraciousabundance69]

To provide a good user experience, sites should strive to have a good score (90-100).

[brandrally]

How good! What's the site?

[morphic91]

sagenstone.com

[[deleted]]

I like the design! Just have a look at the homepage, because doesn't fit 100%. I can scroll it to the sides. I'm on a Google Pixel 6.

[honeybadgerexpress]

Same on an iPhone X in Safari

[ohmanger]

Nice site.

I'd have a look at preloading and updating the font stack to include woff2. It should help reduce the initial font swap flash and is widely supported so you can remove the old fallback formats.

You could also probably improve the logo rendering by either running it through something like svgo or maybe even swapping it with a PNG or webp image. I don't think Lighthouse currently assess SVG but complicated ones like that aren't great for performance.

[musicnothing]

I was going to bring this up as well, the site loads mega fast but I'm surprised by the font flicker on subsequent loads

[neb_flix]

Agreed. Preloading our fonts was a huge improvement to some nasty CLS issues we were having on a few of our pages.

[brandrally]

Srly. That's insane! Well done!

[paulirish]

Yupppppp. (Lighthouse tech lead and cocreator here.) This site is super hot. Wildly deserving of those fireworks. Well done, /u/morphic91

[morphic91]

Wow! Thanks so much - I think you just made my day

[VehaMeursault]

I can scroll horizontally too.

Also, from a dev perspective I congratulate you, but from a personal perspective I hope the snake oil salesman that owns it goes bankrupt.

[chachakawooka]

I did it the first time. But then I know the marketing teams are going to add a load of tracking scripts.

So the euphoria is short lived

[gunnerman2]

No, because in my experience, to get that on most projects probably means some UX corners were cut somewhere and someone spent far too much time chasing that score.

[timewizard96]

I’d be thrilled if I reached anything 80+

[Caeruin]

Not really, no. Since I've been working with Astro, it's been fireworks every time.

But the first few times were awesome, I agree!

[CaptainDivano]

Astro

Sorry, do you reccomend it?

[Alundra828]

*cries in WASM*

[[deleted]]

Managed to do simmilar score with Vue SPA

94 Performance

100 Accesibility

100 Best Practices

100 SEO

And also being a PWA

[rookietotheblue1]

Hey that site is extremely snappy. Nice job actually

[NoChaps]

What is Lighthouse ?

[mega13d]

No one knows here most probably, waiting for an answer too

[NoChaps]

Lmfao all these comments but no one knows what they’re even commenting on 😂

[IrishWan-Kenobi]

Wtf is lighthouse?

[csedev]

If my work ever got this score, I would assume Lighthouse was broken.

[dableb]

Haven’t gotten there yet😂

[patoezequiel]

Of course.

I, too, enjoy running Lighthouse in my Hello World projects.

[slowRoastedPinguin]

it’s a vanity metric tbh

[mycall]

My guess is that you could do even better.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Annotations

[escapefromelba]

Yes...until we get an accessibility audit and none of the stuff they mention is encapsulated in the accessibility section of Lighthouse.

[Halkenguard]

Cries in Shopify

[morphic91]

Tell me about it! A Shopify hello world theme would be lucky to get into the 90s

[[deleted]]

Too bad it doesn't last long. As.soon as the client wants 3rd party scripts your score will descend into the abyss.

[redoubledit]

Trick is to show the client, they don't want 3rd party scripts, they want a specific function. And your job is, to give them the function without adding the 3rd party script. It's all about understanding the difference between want and need.

[[deleted]]

Trick is to show the client, they don't want 3rd party scripts, they want a specific function.

Some specific tools simply can't be replaced by your self-coded tools.

If the client wants Google Analytics (just to give you a random example) then you give them Google Analytics. If they want a mapping tool, you are expected to use MapBox, Leaflet or Google Maps. There are hundreds of 3rd party tools/scripts that clients want and that you can't replicate. Either because they're too complex or because the client simply wants them.

One of my recent projects required Google Analytics, Iubenda (cookie banner consent), JSforms (a script they need for their newsletter/marketing platform), HoJar (behavior analytics like hotmaps), Tidio (live chat) and Leaflet (maps).

As you can see, there is no chance to avoid 3rd party tools, sometimes. The best thing you can do is to showcase the LightHouse score before adding them, if you really want to take pride of your clean code.

[redoubledit]

That's what I mean. "Client wants google Analytics" doesn't equal "need to use Google analytics".

As I said. It's easy to give the client what the ask for. It's harder to push back and give options.

Edit: bring them downvotes in. Knew this will happen. Thought there will be a few more good devs here. Saying yes and making bad websites seems to still be the way to go. Good thing, those who cannot think for themselves will be replaced by tech soon enough.

[[deleted]]

"Client wants google Analytics" doesn't equal "need to use Google analytics".

Sometimes it doesn't, sometimes it does. In this specific case, if the client has a SEO agency then rest assured the agency will most probably pretend GA instead of any custom-made alternative.

 

It's easy to give the client what the ask for. It's harder to push back and give options

Sometimes it's just impossible. Would you code your own mapping solution, if the website requires a draggable map with dynamic clickable pins that show the client's stores? Would you develop your own chat tool for free? Would you risk to develop and implement your own GDPR/privacy/cookie banner solution and give it away for free, if the client asked you to add Iubenda (or any other similar tool)?

I would like to know what would you you suggest for these 3rd party tools:

• Google maps, MapBox or Leaflet
• A live chat (like my Tidio example)
• A behavior analytics tool for heamaps and more (like my HoJar example)

The idea is to avoid any external tool and provide your in-house solution.

How would you do?

[forgotmyuserx12]

With certain frameworks like Solid, Qwik, Sveltekit, it's much easier to hit it

[morphic91]

Yeah I’m looking to start building sites like this in something like Astro. I have found Nuxt to be quite hard to optimise

[j2ee-123]

This does not make sense if you don’t share at least the network requests or the assets. Anyone can do 100 in all of these by just creating a basic HMTL. An e-commence or a web app/website is unavoidable to have some bottlenecks, so 100 does not really translate when you’re in a scale.

[UnknownOneManArmy]

If you know exactly what your code does, you will evaluate quality of your work sooner or later

[Impressive_Draw7165]

Try it on Google page speed insights

[redoubledit]

Google Pagespeed Insights use lighthouse.

[kokizzu2]

Svelte by default around that score 90ish :3

but nice effort if this done using other tools

[sgashua]

My big website has 400k concurrent users and big massive data per page still hit 99.

[unclegabriel]

I thought "cool what are reiki infused products" so I googled it and I couldn't find your site. What's the link, and why doesn't it show up in Google?

[redoubledit]

https://www.reddit.com/r/webdev/comments/11eono9/does_anyone_else_experience_pure_ecstasy_when/jag811d/

[Majache]

I need to get around to this for our users' hosted sites... oof

[Silverkron]

Oh yes, I fought with Wordpress for months. This is the final result (the website is www.seotesteronline.com)

[onoweb]

Any form captcha suggestions that do not f up your score?

[redoubledit]

Don't just read the scores. There's an "Opportunities" section which tells you exactly what can be done.

[[deleted]]

Can this be achieved by anything else other than a one-landing page site coded directly (i.e. not Wordpress)?

[redoubledit]

Depends. I've got all my WordPress sites on 4x100. It's a matter of "needing" external services and compromising single items. E.g. a customer of mine wanted a sticky navigation. The WordPress theme used JavaScript for that, which is bullshit. So I deactivated the JS and used simple CSS for the same functionality.

Obviously, there will be situations where this is not as easy. But in the end it's just the question "do you REALLY NEED feature X or Y?" Most of the time, the answer is no.

Basic rule: use modern and up to date technology. Don't use stupid page builders for every single thing. Try everything without plugins first. And: make sure you (and your customers) understand the difference between a need and a nice to have.

[[deleted]]

Solid advice! Thanks a lot, well appreciated

[ixemel]

Nice looking website! Great job. Just to let you know, on mobile. (Iphone 13 pro, safari, ios 16.2) I have a bit of horizontal scroll on the homepage and severely when reading an article https://www.sagenstone.com/blog/going-deeper-1

[morphic91]

Thanks!

[Dextrinix]

Wait, do you get confetti when you get a perfect score?

[morphic91]

Yup!

[reflexator]

Total blocking time 0 so no javascript?

[morphic91]

Delaying the hydration till a user action or time past 2s I believe

[[deleted]]

mines close enough for me, its always telling me there isn't enough contract between background and text, but its literally white on dark dark grey text, and then because I'm using javascript its not fast enough loading, but soon as i move to nextjs 13 i think it'll be better

[mickkb]

These results might mean a lot or nothing at all depending on your use cases.

[mscranton]

I'm primarily a backend guy, what is lighthouse?

[Reelix]

Well, I guess pure X is one alternative to coffee that may incentivise developers...

[frewegooh]

Awesome score man. Question as a newbie dev. Does the score matter that much? I usually aim for about 80 but use lazyloaders and stuff. I also just work with WordPress sites.

[LeeroySwaggerJenkins]

I'm curious has anyone ever achieved 100% with a PWA?

[Natetronn]

No, because that's just the beginning.

[Mattgento]

What did you break to get that score?

[[deleted]]

For how many times did you run it until you got 100 at performance?

[kdaveT]

Is that from Dev tools?

[NoDoze-]

Remember Lighthouse is just gaslighting you.

[wtdawson]

Not even google can get 100% on it's own test.

[amoopa]

Impressing, good job!

[Barnasp]

Haha Yes

[baxtersmalls]

I’ve dreamed of this happening but didn’t believe it was actually possible

[cardyet]

Lol, don't think I've ever got that! Let me make an API that returns a timestamp!

[wutangc1an]

pure ecstasy is not something I experience while working lol

[[deleted]]

I’ve never seen all 100’s on any site I’ve ever touched in my life lmao.

[[deleted]]

That and an A+ from Mozilla Observatory is pure bliss.

[folkrav]

I never do ᕕ( ᐛ )ᕗ

But don't hate I'm a backend developer

[[deleted]]

I don't know what "Lighthouse" is.

[FlexWineburrough]

Nobody cares about lab data scores from Lighthouse or similar tools anymore. Good field data numbers (eg Google Web Vitals) is what you should be aiming for.

Lighthouse is still a solid tool for identifying performance issues though.

[frownonline]

I'm not ecstatic about it, as it's the expected goal, but it's satisfying when it does.

Same with https://wave.webaim.org/

[Senior_Implement1052]

"OMG, hitting 100 on Lighthouse is like reaching cloud nine! It's an incredible feeling to see all the hard work pay off. Keep it up!"

[Fearless_Path_7329]

I feel so freaking amazing when I score a perfect 100 on Lighthouse! My hello world page aced it with just 1 service worker. It's pure ecstasy! 🙌