Posts with the tag: lighthouse
My experience using Lighthouse in the real world
Read in 5 minutes ·Lighthouse has been part of my daily work for the last few months and I shared some snippets in my last few posts. For this particular post, it is time to share how I am using Lighthouse in a product used by millions of people and what I have discovered during this process. Disclaimers: 1. This content may be reviewed in the future as I learn more about web performance and Lighthouse; 2.
Creating HAR files with Lighthouse
Read in 3 minutes ·HAR (HTTP Archive) is a JSON file containing all information about a browser’s interactions with a page. This file is often used for performance analysis. Earlier this year, I shared what kind of information we can get from and today we will automate the HAR creation. There are different ways to automate the HAR creation: puppeteer-har is a NPM package you can add in your tooling or if you are not from the JavaScript world you can use Selenium.
Generating Web Vitals information with Lighthouse
Read in 5 minutes ·Earlier this year, Google announced that “page experience” would impact its search ranking. A few weeks ago, they announced that the new page experience signals will roll out in May 2021. But what are these page experience signals? The page experience signal measures aspects of how users perceive the experience of interacting with a web page. Offering mobile-friendly pages and serving content over HTTPS is something we have been doing for a while but soon slow sites may lose their spot in the Google page ranking algorithm.
Generating screenshots with Lighthouse
Read in 2 minutes ·Lighthouse captures the rendering timeline of a page in 10 images. Do you need to store them? If yes, keep reading in order to learn how to store these images. The filmstrip above reveals how a page is rendered in a browser and gives us an opportunity to understand what is slow. For example, blank screenshots in the beginning is a sign that the First Contentful Paint is too slow.
Getting asset transferred information with Lighthouse
Read in 3 minutes ·Have you ever about thought tracking what is added to a page or web app? Did not know how your website became 15MB? Sounds like it is time to track this data! Calibre, one of my favourite web performance tools, creates charts, such as the one above, to illustrate what is being transferred to users when they visit your page or use your web app. Hi! This post is part of a Lighthouse post series.
The undocumented Lighthouse guide
Read in 4 minutes ·Lighthouse is the go-to tool for improving the quality of web pages. Lately, I have been using Lighthouse a lot at work to identify opportunities for performance optimizations. This post is part of a 6 part series that I have written about how to get the most out of Lighthouse. Lighthouse Post Series Quick Lighthouse intro The Lighthouse Node package Getting asset transferred information with Lighthouse Generating screenshots with Lighthouse Getting Web Vitals information with Lighthouse Generating HAR files with Lighthouse My experience using Lighthouse in the real world Quick Lighthouse intro Lighthouse is an open-source automated tool for auditing the quality of web pages.