{"id":341494,"date":"2021-06-03T07:25:19","date_gmt":"2021-06-03T14:25:19","guid":{"rendered":"https:\/\/css-tricks.com\/?p=341494"},"modified":"2021-06-03T07:25:21","modified_gmt":"2021-06-03T14:25:21","slug":"monitoring-lighthouse-scores-and-core-web-vitals-with-debugbear","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/monitoring-lighthouse-scores-and-core-web-vitals-with-debugbear\/","title":{"rendered":"Monitoring Lighthouse Scores and Core Web Vitals with DebugBear"},"content":{"rendered":"\n

DebugBear<\/a> takes just a few seconds to start using. You literally point it at a URL you want to watch, and it’ll start watching it. You install nothing.<\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure>\n\n\n\n

It’ll start running tests, and you’ve immediately got performance charts you can start looking at that are tracked over time<\/strong>, not just one-offs.<\/p>\n\n\n\n

\"\"
Five minutes after signing up I’ve got great data to look at, including Core Web Vitals<\/figcaption><\/figure>\n\n\n\n

I’ve got full Lighthouse reports right in there, showing me stuff I really need to work on. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Because all these changes are tracked over time, you can see exactly what changed and when. That’s pretty big.<\/strong> Did your JavaScript bundle jump up in size? When? Why?<\/em> Did your SEO score take a dip? When? Why?<\/em><\/p>\n\n\n\n

\n
\n
\"\"
Now I have an exact idea of what’s causing an issue and how it’s affected performance over time.<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
The best part is being able to see how the site’s Core Web Vitals have performed over time.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Another great thing: DebugBear will email you (or send a Slack message) when you have regressions. So, even though the charts are amazing, it’s not like you have to log in every time to see what’s up. You can also set very clear performance budgets to test against:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Break a performance budget? You’ll be notified:<\/p>\n\n\n\n

\"\"
An email alert of an exceeded performance budget.<\/figcaption><\/figure>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"
A Slack alert warning of HTML validation errors.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Want to compare across different areas\/pages of your site? (You can log in to them before you test them, by the way.) Or compare yourself to competitors to make sure you aren’t falling behind? No problem, monitor those too:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Testing production is a very good thing. It’s measuring reality and you can get started quickly. But it can also be a very good thing to measure things before<\/em> they become a problem. You know how you get deploy previews on services like Netlify and Vercel? Well, DebugBear has integrations built just for for services like Netlify<\/a> and Vercel<\/a>.<\/p>\n\n\n\n

Now, when you’ve got a Pull Request with a deploy preview, you can see right on GitHub<\/strong> if the metrics are in-line.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

That’s an awful lot of value for very little work. But don’t be fooled by the simplicity\u2009\u2014\u2009there are all kinds of advanced things you can do. You can warm the cache. You can test from different geolocations. You can write a script for a login that takes the CSS selectors for inputs and the values to put in them. You can even even have it execute your own JavaScript to do special things to get it ready for testing, like open modals, inject peformance.mark<\/code> metrics, or do other navigation. 🎉<\/p>\n\n\n\n

\n
Get a 14-day Free Trial of DebugBear<\/a><\/div>\n<\/div>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

DebugBear takes just a few seconds to start using. You literally point it at a URL you want to watch, and it’ll start watching it. You install nothing.<\/p>\n","protected":false},"author":3,"featured_media":341627,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4,508],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/debugbear.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":264372,"url":"https:\/\/css-tricks.com\/invision-studio\/","url_meta":{"origin":341494,"position":0},"title":"Invision Studio","date":"December 24, 2017","format":false,"excerpt":"Studio is the name of the new design tool by the team at InVision that\u2019ll launch in January 2018 and it looks like it has a lot of great features, with shared component libraries being one of the more interesting features that I can\u2019t wait to take a closer look\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":207032,"url":"https:\/\/css-tricks.com\/probably-doesnt-do-what-you-think-it-does\/","url_meta":{"origin":341494,"position":1},"title":"“probably doesn’t do what you think it does”","date":"August 26, 2015","format":false,"excerpt":"An interesting post about the odd behaviour of querySelectorAll where it'll match elements that you might not expect at first glance: I think this API is surprising, and the front end engineers I've asked seem to agree with me. This is, however, not a bug; it's definitely how the spec\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":265421,"url":"https:\/\/css-tricks.com\/boilerform-a-follow-up\/","url_meta":{"origin":341494,"position":2},"title":"Boilerform: A Follow-Up","date":"January 30, 2018","format":false,"excerpt":"When Chris wrote his idea for a Boilerform, I had already been thinking about starting a new project. I\u2019d just decided to put my front-end boilerplate to bed, and wanted something new to think about. Chris\u2019 idea struck a chord with me immediately, so I got enthusiastically involved in the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/boilerform.png?fit=1200%2C260&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":291785,"url":"https:\/\/css-tricks.com\/spam-detection-apis\/","url_meta":{"origin":341494,"position":3},"title":"Spam Detection APIs","date":"June 25, 2019","format":false,"excerpt":"I was trying to research the landscape of these the other day \u2014 And by research, I mean light Googling and asking on Twitter. Weirdly, very little comes to mind when thinking about spam detection APIs. I mean some kind of URL endpoint, paid or not, where you can hit\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/trash-plug.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":237234,"url":"https:\/\/css-tricks.com\/revisiting-the-float-label-pattern-with-css\/","url_meta":{"origin":341494,"position":4},"title":"Revisiting the Float Label Pattern with CSS","date":"January 25, 2016","format":false,"excerpt":"The \u201cfloating label\u201d is a common design pattern where the label of a form is displayed on top of an input until someone taps it. It\u2019ll then transition out of the way to reveal the placeholder text beneath, but the label will still be visible above or below. Emil Bj\u00f6rklund\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":250099,"url":"https:\/\/css-tricks.com\/tinder-for-bananas\/","url_meta":{"origin":341494,"position":5},"title":"Tinder for Bananas","date":"January 17, 2017","format":false,"excerpt":"I saw this little web app (live demo) by Das Surma going around the other day. It's funny, but it's also a really compelling demo app for a bunch of modern technologies. I'm sure that's the whole point of it. Minimal build process. Just Gulp to use Babel and PostCSS.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/debugbear.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/341494"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=341494"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/341494\/revisions"}],"predecessor-version":[{"id":341796,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/341494\/revisions\/341796"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/341627"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=341494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=341494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=341494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}