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.

Transcript

34. # 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
35. # 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
36. # 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
57. # Make Cypress aware of commands (../support/commands.js) import "cypress-web-vitals"; # Install $ npm install --save-dev cypress-web-vitals cypress-real-events
58. # Make Cypress aware of commands (../support/commands.js) import "cypress-web-vitals"; # Install $ npm install --save-dev cypress-web-vitals cypress-real-events
59. # Make Cypress aware of commands (../support/commands.js) import "cypress-web-vitals"; # Install $ npm install --save-dev cypress-web-vitals cypress-real-events
62. 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 } }); }); });
63. 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 } }); }); });