Keep your website on a budget, lighthouse-keeper helps you visualize and create your performance budgets using lighthouse audit reports.
\nSetting up a performance budget is a healthy practice for yourself, your team and your users as well. As a developer it gives you a goal that you should meet to improve the experience for your users. As a team leader gives you a metric to track your whole team work.
\nA performance budget for a website is the process of analysing competitors websites, especially around the pages total weight, the first meaningful paint and other metrics that impact performance for the users.
\nThere are plenty of articles describing how and why you should set up a performance budget for your website or web application, generally this can serve as a baseline for improving your website performance or set up a goal for your next project.
\nA good strategy while setting up a performance budget is picking your competitors and set your budget 20% below the best performing competitor.
\nJust as a reminder of how this is important, not only for your users but also for your revenue, google released recently a mobile speed calculator where you can compare how much your performance score can impact your revenue at https://www.thinkwithgoogle.com/feature/mobile/
\n\n\nYour website needs to be at least 20% faster than your competitors.
\n
That’s because for a user to have any noticeable difference, your website needs to be at least 20% faster.
\nThere are various tools to audit and keep track of the performance of your website, the most known probably are:
\nLighthouse is the tool that i will focus on for this article. Lighthouse can be used directly from Chrome, just opening the devtools and then click on the audit panel.
\nOr as cli
\nnpm i -g lighthouseThere are four main audits that lighthouse will perform during an audit:
\nSince we are interesting in setting up performance budgets the one that we will be focusing on will be the performance audit.
\nThe performance audit collect various metrics on the website, more interesting one while setting a performance budget are:
\nIts worth to mention that lighthouse sets some presets for the audit. The default presets are:
\nI recommend to keep those presets so that your audits will be more consistent even if your connectivity is not the same.
\nYou can access lighthouse reports either directly in your browser or save them as json files.
\nIn order to save a report from the browser interface select the download icon
\nor if you are using the cli specify the option --output=json and --output-path to save it locally.
Now that you have the reports in order to get a performance budget you still need to calculate yourself the 20% off all the metrics that we are interested into
\nThat’s why i created lighthouse-keeper, a visual tool that will calculate automatically your performance budget based upon lighthouse reports.
\nTo use it you just need to select/drag all the reports which you are interested into and lighthouse-keeper takes care of the rest, displaying the performance of the website selected in a chart and calculating your budget.
\nThere are three main sections that lighthouse-keeper analyse: score which compares the general score for an audit; timings contains all the metrics relative to performance timings;\nbytes which compare the total bytes size grouped by the different mime/types.
\nIn Ryanair we recently launched Ryanair Rooms, where you can find hotels, B&B, Apartments and Hostels.
\nThe competitors that i will audit here are:
\nI’m now using lighthouse-keeper to compare the reports and calculate the budget that we should aim for.
\nSetting up a performance budget on a new or existing project its a great way to set a trackable and very impactful metric for you and your team.
\nLighthouse-keeper is open-source and available here.
\nAnd remember #perfmatters.
","frontmatter":{"title":"Performance budgets with Lighthouse - Lighthouse keeper","date":"April 17, 2018","description":null,"socialImage":{"childImageSharp":{"fixed":{"src":"/dist/static/8c46113951dec02ed4e114c14cd1eef2/048fd/lighthouse.png"}}},"image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsSAAALEgHS3X78AAABdElEQVQoz2NQSdwNR0oJe+Ti9srH7VWI26sUv1spaZds4n4gqZK0UyVxDxjtRkYMEEo1cbdi/B6XkrXRjUu8ylfbF601TNlvHnxiTnCsk/9WuYjTqok7VBJ34dCctEsudl9y24LpS7t6FvR2TlhcUXWgs2zt/4UKRW5rxc3/qyS8Vk46jKYfxWb7wg3BdcucIq5a27/XMf/i4fb8QOOkYMuTChb/Vaz+K3s+UEnegex4BmSTFJN2ygeeV9H5r2j+Vzzsv4v/wxNZ5RZ2L1UM/qnp/FY1+KUSeUwleSc2zQl7VFO2q7k+VNf9q+n0U9Hvv1n8j/7yi252X5U1/2sY/1bX/6fsdUsldRtQJabm3SBX2bxR0/6vpvdHy/VOQN2Crr5oy/TZ8r431E2/q2n9V3V5iENzIliz520V1weqUYcdFie6bfDWaumSnl4htzBLKW2bivsdFf/LKik7cGiGGwGM2/i9SjFHVKOOqkUfArIR4kgqAX/s6txUvscLAAAAAElFTkSuQmCC","aspectRatio":2.352112676056338,"src":"/dist/static/9a37d9716f7a0500d32f04301023aaa0/a5924/lighthouse2.png","srcSet":"/dist/static/9a37d9716f7a0500d32f04301023aaa0/17cc0/lighthouse2.png 167w,\n/dist/static/9a37d9716f7a0500d32f04301023aaa0/f7869/lighthouse2.png 333w,\n/dist/static/9a37d9716f7a0500d32f04301023aaa0/a5924/lighthouse2.png 666w,\n/dist/static/9a37d9716f7a0500d32f04301023aaa0/4f774/lighthouse2.png 674w","sizes":"(max-width: 666px) 100vw, 666px"}}}}}},"pageContext":{"slug":"/performance-budgets-with-lighthouse-lighthouse-keeper/","previous":{"fields":{"slug":"/multiple-packages-repository-with-angular/"},"frontmatter":{"title":"Multiple packages repository with Angular"}},"next":{"fields":{"slug":"/snapshot-testing-angular-applications/"},"frontmatter":{"title":"Snapshot testing Angular applications"}}}}}