Coder Social home page Coder Social logo

lighthouse-plugin-soft-navigation's People

Contributors

adamraine avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

lighthouse-plugin-soft-navigation's Issues

[Question] Is it possible to load the plugin from code directly

Hi there !

I'm trying to do my own plugin, based on your excellent work. But as I'm currently coding it, I would like to load it directly from my local fs and not release it each time.

I tried things like (based on yours) :

import {writeFileSync} from 'fs';
import * as pptrTestingLibrary from 'pptr-testing-library';
import {startFlow, desktopConfig} from 'lighthouse';
import { scrollPageToBottom } from 'puppeteer-autoscroll-down'
import SoftNavigationPlugin from './lighthouse-plugin-soft-navigation/plugin.js'

const {getDocument, queries} = pptrTestingLibrary;

// Setup the browser and Lighthouse.
const browser = await puppeteer
  //.use(StealthPlugin())
  .launch({
    headless: 'false',
  });
const page = await browser.newPage();
const flow = await startFlow(page, {
    config: desktopConfig,
    extends: 'lighthouse:default',
    plugins: [SoftNavigationPlugin]
  });


await flow.navigate('https://www.myURL');
await page.click('#cookie-notice-agree-button');
//await flow.endTimespan();

// Phase 3 - Analyze the new state.
await flow.snapshot();

let lastPosition = await scrollPageToBottom(page, {
  size: 500,
  delay: 1000,
})

await flow.snapshot();

// Get the comprehensive flow report.
const reportHtmlPath = './reports/lighthouse_report.html';
writeFileSync(reportHtmlPath, await flow.generateReport());
// Save results as JSON.
const reportJsonPath = './reports/lighthouse_report.json';
writeFileSync(reportJsonPath, JSON.stringify(await flow.createFlowResult(), null, 2));

console.log('Rapport HTML enregistré à :', reportHtmlPath);
console.log('Rapport JSON enregistré à :', reportJsonPath);

// Cleanup.
await browser.close();

or

plugins: ['lighthouse-plugin-soft-navigation']

Do you know if I'm missing something ? No errors but plugin doesn't show up in reports.

What I'm trying to do : optimize huge lazy loads, particularly on a sustainability side.
Scenario :

  • Navigate on a page
  • Take a snapshot of what is shown : important kpis for me (for now) are DOM size, number of network requests done, and page size (based on ecoindex kpis)
  • Scroll
  • Take a snapshot
  • Scroll... until end of page
  • Analyse the report and see for example that on the third scroll, you loaded an infamous carousel with 50 thumbnails and that could be a problem :)

That's the idea.

Thank you very much if you can help !

How do I use this plugin in desktop mode?

I got an answer here on how to use startFlows in desktop mode. However, I want add a few more things to config like const config = {
extends: 'lighthouse:default',
plugins: ['lighthouse-plugin-soft-navigation'],
} and run them in desktop mode.

can anyone help me out, please?
A sample script would be greatly appreciated
:)

Soft navigation LCP FCP not displaying in report

20240411_143455.jpg

I am using flow.startTimeSpan() and flow.endTimeSpan() for some actions but not seeing FCP and LCP.

Chrome version: 123.0.6312.123
Platform: Mac
Lighthouse version:10.4.0
Lighthouse-plugin-soft-navigation: 1.1.0

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.