Unlighthouse Tutorial

Рет қаралды 1,464

Meteoric Money Labs by Troy Cherasaro

Күн бұрын

In just 5 min ⏱️ flat my Unlighthouse Tutorial will have you bulk testing multiple web pages at once with Google Lighthouse code running on your own computer!
In this video, we'll explore how to use Unlighthouse, an open-source Lighthouse alternative available on GitHub, to optimize your website's performance, accessibility, and SEO. We'll talk about how Unlighthouse effectively runs Lighthouse on an unlimited number of page in bulk (multiple URLs at once) without the need for an API key and also cover running Unlighthouse with npx, Unlighthouse installation with npm and configuring it to suit your project's needs.
You'll learn how to run Unlighthouse audits on your website, both on the desktop and as part of your continuous integration (CI) pipeline with Unlighthouse CI. We'll dive into the Unlighthouse config file and demonstrate how to customize the auditing process to align with your performance goals.
Chapters:
_______________________________________________
0:00 Introduction
0:06 Bulk PageSpeed Insights
0:28 Why Page Speed is Important
0:56 The Lighthouse Alternative
1:03 Unlighthouse Github Project
1:18 Unlighthouse Tutorial
1:22 How to Setup Unlighthouse
1:44 Unlighthouse Install (Part 1)
1:54 How to Use Unlighthouse
2:51 How Unlighthouse Retrieves URLs
3:12 Navigating the User Interface
3:24 Dynamic Sampling Explanation
4:09 Disabling Dynamic Sampling
4:19 Deleting the .unlighthouse Cache Folder
4:28 Switching Between Light and Dark Mode
5:10 Core Web Vitals Columns
5:25 Unlighthouse Drawbacks & Issues
5:42 Issue 1: Version of Lighthouse Unlighthouse Uses
5:54 Issue 2: Can’t Scan Mobile & Desktop at the Same Time
6:02 Unlighthouse Desktop Results
6:23 Issue 3: Lighthouse Variability
6:47 Issue 4: No Way to Export Data from Web Interface
7:05 Addressing Variability Issues
7:16 Unlighthouse Config File
8:33 Addressing Lighthouse Versions Used
8:53 Using Latest Version with npx unlighthouse
9:51 Addressing Version with Unlighthouse npm Install
10:11 Unlighthouse CI
10:41 Exporting a .csv File
Sources Cited in the Video:
_____________________________________________________
Link to my Unlighthouse default config file (see pinned comment for more info):
bit.ly/MyUnlighthouseConfig
Link to My PageSpeed Insights Tutorial Video:
• PageSpeed Insights Tut...
Google’s Roll Out Timeline for User Experience Ranking update:
bit.ly/GoogleUXUpdate
24% More Traffic when Optimizing Core Web Vitals
bit.ly/WebVitalsScience

Пікірлер: 11

@MeteoricMoney 13 күн бұрын

Here is a link to get the Unlighthouse config file I was using in the video as requested: bit.ly/MyUnlighthouseConfig

@PrajwalShirkar 8 күн бұрын

You are really a great guy! Thanks a ton for this video

@user-pl1dh4zx4i 7 күн бұрын

Awesome video! Found the tool while searching for lightweight performance testing options. This video really clarifies the use of config files, that's what I've been searching for, thnx! Unfortunately, I keep getting "SyntaxError: Unexpected token 'export'" even when using provided config. Could someone possibly tell what I'm missing here? I'm new to node.js and installed it just now, so maybe there is some really stupid issue behind this. Unlighthouse runs fine without the config file, but I could really use it.

@firminrichard5141 Ай бұрын

Amazing video, i just started using unlighthouse a month ago and i was desesperate for a tuto like that haha, would it be possible for you to developp the CI part ? i can figure out how to find the generated report

@MeteoricMoney Ай бұрын

Yes, this has been on my mind lately as I am wrapping initial development on some boiler plate I am working on for my own business. Once I have it implemented myself I will probably make a video on it.

@Anis_ZR 21 күн бұрын

Thx a lot for your video, it really helps ! I went to ask if you can provide the script to save results into CSV file it would be great. Thank you again

@MeteoricMoney 21 күн бұрын

Thanks! Glad it helped. unlighthouse-ci will generate the csv with a couple switches just enter: npx unlighthouse-ci --site "www.example.com" --reporter csvExpanded There are more --reporter options you can get from "npx unlighthouse-ci --help" if you are interested. Sorry, I wasn't real clear about that in the video. Is that what you wanted or did you want the zsh scripts? I created the zsh scripts to run unlighthouse-ci on multiple sites and then aggregate all the results from multiple csv into a single file. If that's what you were really looking for let me know and I will figure out a way to get them to you.

@Anis_ZR 20 күн бұрын

@@MeteoricMoney I managed to generate CSV file, but by opening it the values wasn't organized. could you please provide me the zsh scripts it would be great. thanks again

@DaleFixter-it2lz 2 ай бұрын

good news unlighthouse now uses v11.6! so no workarounds required. I wondered where you got your unlighthouse.config.ts code from? I see lots of useful information in the file you demo

@MeteoricMoney 2 ай бұрын

Thanks for the update! I cobbled my config file together from the docs and maybe another source I can't remember. But, you are right there are some useful things in there so I will put it on my g-drive and provide a link in a pinned comment with some more info. I decided to not go into too much detail about some of it in the video because some of it I am still unsure of and learning about.

@MeteoricMoney 2 ай бұрын

Hi, I pinned a comment with a link to the config file. Enjoy!