Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Measure and improve frontend performance by using test automation

Measure and improve frontend performance by using test automation

Many developers and product managers are obsessed with all-green lighthouse scores. And for a good reason: Semantics, accessibility, and mobile performance are vital for a real-world application. But often, those measurements are only taken manually and at irregular intervals. How does a team of developers know if a merge request affects the application's performance negatively? By monitoring them all the time, manually? With automated performance testing, this can be easier to spot just by looking at code changes. In this session, learn how to set up tools like Lighthouse and Web Core Vitals in your CI and introduce performance thresholds to keep your frontend performance as high as possible.

Ramona Schwering

July 28, 2023
Tweet

More Decks by Ramona Schwering

Other Decks in Programming

Transcript

  1. # Some server configs…
    # See next slide
    # Make Cypress aware of commands (../support/commands.js)
    import "@cypress-audit/lighthouse/commands";
    # Install
    npm install --save-dev @cypress-audit/lighthouse

    View full-size slide

  2. # Some server configs…
    # See next slide
    # Make Cypress aware of commands (../support/commands.js)
    import "@cypress-audit/lighthouse/commands";
    # Install
    npm install --save-dev @cypress-audit/lighthouse

    View full-size slide

  3. # Some server configs…
    # See next slide
    # Make Cypress aware of commands (../support/commands.js)
    import "@cypress-audit/lighthouse/commands";
    # Install
    npm install --save-dev @cypress-audit/lighthouse

    View full-size slide

  4. # Make Cypress aware of commands (../support/commands.js)
    import "cypress-web-vitals";
    # Install
    $ npm install --save-dev cypress-web-vitals cypress-real-events

    View full-size slide

  5. # Make Cypress aware of commands (../support/commands.js)
    import "cypress-web-vitals";
    # Install
    $ npm install --save-dev cypress-web-vitals cypress-real-events

    View full-size slide

  6. # Make Cypress aware of commands (../support/commands.js)
    import "cypress-web-vitals";
    # Install
    $ npm install --save-dev cypress-web-vitals cypress-real-events

    View full-size slide

  7. describe('My First Test', () => {
    it(‘should check core web vitals', () => {
    cy.vitals({
    url: 'https://example.cypress.io',
    thresholds: {
    "lcp": 2500,
    "fid": 100,
    "cls": 0.1,
    "fcp": 1800,
    "ttfb": 600
    }
    });
    });
    });

    View full-size slide

  8. describe('My First Test', () => {
    it(‘should check core web vitals', () => {
    cy.vitals({
    url: 'https://example.cypress.io',
    thresholds: {
    "lcp": 2500,
    "fid": 100,
    "cls": 0.1,
    "fcp": 1800,
    "ttfb": 600
    }
    });
    });
    });

    View full-size slide