Lighthouse bookmarklet

March 10th, 2020

I use Firefox. You should too. It’s fast, secure, and more privacy-focused than the leading browser from the big G.

When it comes to web development, the CSS developer tooling in Firefox is second-to-none. But when it comes to JavaScript and network-related debugging (like service workers), Chrome’s tools are currently better than Firefox’s (for now). For example, Chrome has a tab in its developer tools that lets you run Lighthouse on the currently open tab.

Yesterday, I got the Calibre newsletter, which always has handy performance-related links from Karolina. She pointed to a Lighthouse extension for Firefox. “Excellent!”, I thought, and I immediately installed it. But I had some qualms about installing a plug-in from Google into a browser from Mozilla, particularly as the plug-in page says:

This is not a Recommended Extension. Make sure you trust it before installing

Well, I gave it a go. It turns out that all it actually does is redirect to the online version of Lighthouse. “Hang on”, I thought. “This could just be a bookmarklet!”

So I immediately uninstalled the browser extension and made this bookmarklet:

Lighthouse

Drag that up to your desktop browser’s bookmarks toolbar. Press it whenever you’re on a site that you want to test.

« Newer Older »

Responses

EDY HEAN

Šime Vidas

The extension is still broken (for folks who block pop-ups in Firefox https://t.co/RLjrjgb9Vo), so I guess I’ll just use your bookmarklet instead. 😂

Chris Heilmann

That @adactio just released a Lighthouse bookmarklet to run Lighthouse in Firefox. adactio.com/journal/16523 Good opportunity to remind people that Firefox also has @webhintio extension that embeds webhint into the devtools: addons.mozilla.org/en-US/firefox/…

Mike Rogers 🛣

I feel like I need to make better use of bookmarklets after reading adactio.com/journal/16523 by @adactio - they work on every browser (even mobile safari) which feels so powerful.

Ethan Marcotte

oh bless you, @adactio adactio.com/journal/16523

CSS Basics

Lighthouse bookmarklet, by @adactio adactio.com/journal/16523

Clive Walker

You’re never too old to learn. Every time I work on a new website, I’m always finding and trying new things. I should probably document these more (mainly to help me remember them, ahem). So, let’s start now…

Details, just little details

The <details> element. Holy moly, why did I not know about this?! It’s easy to create a show-hide toggle without JavaScript using the <details> and <summary> elements as described here. Admittedly, this gives a relatively simple content toggle but it’s ideal for a FAQs section on a site. The simplicity wins for me.

Flexbox

I did a lot more work with Flexbox on a recent project. It’s great. That and Grid Layout means that the era of floats for layout is over. Hurrah for that!

Shaping up nicely

Yay! for triangle shapes using CSS and pseudo elements. Using a tool like this CSS triangle generator it’s easy to create triangles with CSS. Then, it’s possible to use these as list item bullet points by adding them to pseudo elements such as li a::before or li::before. See also this post.

Grid overlay

I find it really useful to overlay a grid on my layouts when I’m building them. If I’m building a site from a designer’s static visuals, this also helps the designer compare the site build with their designs. This grid overlay article describes how to create a grid with CSS.

Overlapping things

Positioning a banner image underneath an overlapping header element. Use position:relative and e.g top: -150px on the banner image.

Tools

Most of the above were used on a single website project. It was a challenging and rewarding site to work on. I enjoyed it.

One more thing

in recent weeks, I’ve been reading posts from Modern CSS Solutions which is a great site exploring new CSS methods. The site has really re-invigorated my enthusiasm for CSS. Kudos to Stephanie Eckles for creating the site.

Right, that’s it for this post …..

See you next time.

6 Shares

# Shared by Paul Downey on Tuesday, March 10th, 2020 at 2:27pm

# Shared by Ben Seven on Tuesday, March 10th, 2020 at 3:26pm

# Shared by Patrick Laubner 💬 on Tuesday, March 10th, 2020 at 6:55pm

# Shared by Christoph Zillgens on Tuesday, March 10th, 2020 at 7:46pm

# Shared by Nina Gerling on Tuesday, March 10th, 2020 at 8:46pm

# Shared by Martin Schierle on Friday, March 13th, 2020 at 11:27pm

49 Likes

# Liked by Dave Verdon on Tuesday, March 10th, 2020 at 12:44pm

# Liked by Søren Birkemeyer 🦊 on Tuesday, March 10th, 2020 at 12:44pm

# Liked by Reinhard Amon on Tuesday, March 10th, 2020 at 12:45pm

# Liked by Pekka Hartikainen on Tuesday, March 10th, 2020 at 12:45pm

# Liked by Nick on Tuesday, March 10th, 2020 at 12:46pm

# Liked by @vanderZwan@vis.social on Tuesday, March 10th, 2020 at 12:46pm

# Liked by Q on Tuesday, March 10th, 2020 at 12:46pm

# Liked by Val Head on Tuesday, March 10th, 2020 at 12:47pm

# Liked by Adam Duncan on Tuesday, March 10th, 2020 at 12:47pm

# Liked by EDY HEAN on Tuesday, March 10th, 2020 at 12:47pm

# Liked by Adam Kuhn on Tuesday, March 10th, 2020 at 12:48pm

# Liked by Lincoln Mongillo on Tuesday, March 10th, 2020 at 12:49pm

# Liked by Brian Hart on Tuesday, March 10th, 2020 at 12:53pm

# Liked by Sarah on Tuesday, March 10th, 2020 at 1:04pm

# Liked by Chris Burnell on Tuesday, March 10th, 2020 at 1:22pm

# Liked by Antoine Renault on Tuesday, March 10th, 2020 at 1:30pm

# Liked by Dimitris Grammatiko on Tuesday, March 10th, 2020 at 1:30pm

# Liked by João Hernâni Andrade on Tuesday, March 10th, 2020 at 1:31pm

# Liked by Jan Skovgaard on Tuesday, March 10th, 2020 at 1:31pm

# Liked by Trey Piepmeier on Tuesday, March 10th, 2020 at 1:32pm

# Liked by Emanuel Jochum on Tuesday, March 10th, 2020 at 1:32pm

# Liked by Clearleft on Tuesday, March 10th, 2020 at 1:33pm

# Liked by Jan Skovgaard on Tuesday, March 10th, 2020 at 1:36pm

# Liked by Sven Schüring on Tuesday, March 10th, 2020 at 1:42pm

# Liked by Miles Tincknell on Tuesday, March 10th, 2020 at 2:02pm

# Liked by ProfClayton on Tuesday, March 10th, 2020 at 2:08pm

# Liked by Tim Kadlec on Tuesday, March 10th, 2020 at 2:08pm

# Liked by Stuart Hull on Tuesday, March 10th, 2020 at 2:09pm

# Liked by Scott Orchard on Tuesday, March 10th, 2020 at 2:09pm

# Liked by Paul Downey on Tuesday, March 10th, 2020 at 2:58pm

# Liked by Ben Seven on Tuesday, March 10th, 2020 at 3:53pm

# Liked by Alex アレックス on Tuesday, March 10th, 2020 at 3:53pm

# Liked by Gregg on Tuesday, March 10th, 2020 at 5:56pm

# Liked by John Keiller on Tuesday, March 10th, 2020 at 5:56pm

# Liked by JØⱤĐ₳₦ 💀 ĐØ฿��Ø₦ on Tuesday, March 10th, 2020 at 6:21pm

# Liked by Dilīp Shukla (दिलीप शुक्ल) on Tuesday, March 10th, 2020 at 6:37pm

# Liked by Nina Gerling on Tuesday, March 10th, 2020 at 10:21pm

# Liked by Christoph Zillgens on Tuesday, March 10th, 2020 at 10:22pm

# Liked by Patrick Laubner 💬 on Tuesday, March 10th, 2020 at 10:22pm

# Liked by David Pich on Tuesday, March 10th, 2020 at 10:23pm

# Liked by Marc Stalfoort on Tuesday, March 10th, 2020 at 10:31pm

# Liked by Kim on Wednesday, March 11th, 2020 at 1:57am

# Liked by Aleksi Peebles on Wednesday, March 11th, 2020 at 2:37am

# Liked by Mark Perry on Wednesday, March 11th, 2020 at 4:07am

# Liked by Batbayar B. on Wednesday, March 11th, 2020 at 4:08am

# Liked by Tolga Eğilmezel on Wednesday, March 11th, 2020 at 6:24am

# Liked by vollepeer on Wednesday, March 11th, 2020 at 7:41am

# Liked by Martin Schierle on Friday, March 13th, 2020 at 11:38pm

# Liked by Elizabeth Sweeny on Friday, March 20th, 2020 at 8:52pm

Time to Interactive (TTI) is the most impactful metric to your performance score.

Therefore, to receive a high PageSpeed score, you will need a speedy TTI measurement.

At a high level, there are two significant factors that hugely influence TTI:

The amount of JavaScript delivered to the page

The run time of JavaScript tasks on the main thread

Wednesday, July 3rd, 2019 7:57am

Tagged with google pagespeed pagerank seo performance speed tti ranking indexing javascript frontend development metrics measurement lighthouse mobile