Continuously Optimize Your Website With Lighthouse CI
Performance has directly impacted the company’s bottom line. – Pinterest
Since the development of the Internet, web page performance has always been an important issue. All major Internet companies are sparing no effort to optimize their web pages, in order to allow users to see the content that users want to see faster.
During the development of the Internet in recent decades, various indicators and terms for measuring web performance have stabilized, and the measurement methods of various products have tended to be consistent.
The BBC found that every 1 second increase in the load time of its website was associated with losing 10% more users. DoubleClick by Google found that 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. DoubleClick by Google research shows that sites with loading times under 5 seconds experience 70% longer sessions, 35% lower bounce rates, and 25% higher ad viewability rates than sites that load about four times as long (19 seconds). Mobify saw a 1.11% increase in session-based conversions for every 100 milliseconds decrease in homepage load time and an average annual revenue increase of nearly $380,000. AutoAnything saw a 12-13% increase in sales after halving its page load time. It can be seen how important the performance of web pages is in today’s Internet of Everything era.
Problems with measuring web performance
Not runnable natively to catch performance issues as early as possible
Many tools cannot be run locally; if the web performance testing tools can be run locally, developers can find problems earlier and solve them locally as soon as possible, avoiding running on CI for a while before finding problems , which can save a lot of time and improve production efficiency in the agile development process of
Shift-left of the web performance test is bound to bring more benefits to the performance of web products, and even more profits for the company.
Inability to continuously measure performance metrics
At present, most of the web performance measurement products on the market are
Sass products. Using its products, we can only get a visual result page after running the performance test, but it cannot continuously record the improvement records of web page performance, and cannot be well quantified the life cycle of a web product performance. Of course there are also web performance testing tools that implement history, such as treo.
There are many open source free web performance testing tools, but they may not be so easy to use; if you need more features, such as continuous recording of web page performance, generally only commercial products will support it, and the fees are not low.
Difficulty with CI integration
As mentioned earlier, many tools either cannot be run locally or are Sass products, which cannot be well integrated with Pipeline, resulting in long feedback cycles of web performance results and make the engineering efficiency too low.
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.
You can run Lighthouse in
Chrome DevTools, from the command line, or as a
Nodemodule. You give
Lighthousea URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.
You can also use Lighthouse CI to prevent regressions on your sites.
It’s very easy to use, take a look at the results of my audit of my open source project Powerboard.
Ways of Lighthouse CI and Lighthouse Server
Lighthouse CI （LHCI）
Automate running Lighthouse for every commit, viewing the changes, and preventing regressions – GoogleChrome/lighthouse-ci
Lighthouse CI is a suite of tools that make continuously running, saving, retrieving, and asserting against Lighthouse results as easy as possible.
How to use
LHCI provides the
npm installation package, which can be well integrated on the Pipeline, just run the
autorun command in the corresponding directory, the command is as follows
After the operation is completed, LHCI will store the results in the
.lighthouseci directory, and you can open the corresponding report with a browser.
The LHCI server saves historical Lighthouse data, displays trends in a dashboard, and offers an in-depth build comparison UI to uncover differences between builds.
Installation and use of LHCI Server
There are many ways to install LHCI Server, please refer to here, the recommended way is to use Docker. Note that the first run needs to create a Lighthouse App, you need to run the
lhci wizard in the container and fill in the corresponding information, finally record the generated
Build token and
Integration with Lighthouse CI and Lighthouse Server
- We have already talked about how to install
lhci server, the next step is to use the two together. Here we take
GitHub Actionsas an example to make a demo.
GitHub workflow. For specific practices, please refer to the implementation details of Powerboard
- Need to store the
Build tokengenerated by
lhci Serverand the address of
lhci Serverin the Secrets of the GitHub project
- Here the
lhcicommand is executed twice. Because
lhci autorunruns the default
assertion, the first time you use the command without assertion, the purpose is to upload the current web page performance to the server side; the second time you configure various indicators Threshold, if it does not meet the requirements, Pipeline will block, to achieve
Shift-left of the web performance test.
- For: Developers, technical leads or marketers
- They want to:
continuously quantifyand demonstrate the
performanceof web pages
- This: Lighthouse CI
- is one: a set of tools written by
Lighthouseresults. It can evaluate web applications and pages, as well as gather information such as performance metrics and insights from development best practices
- It can: test your web page, get web page’s
PWAscores on different
devices, these scores can be used to analyze the product performance, helping to improve user conversion rates, etc.
- Unlike: treo or some other web performance testing tool
- Its advantages are:
Self-hosteddata and Server,
Easy to integrate.
- Get Down to Business: Why the web Matters (Chrome Dev Summit 2018): https://web.dev/i18n/zh/why-speed-matters/
- why Speed Matters？: https://web.dev/i18n/zh/why-speed-matters
- Lighthouse: https://developers.google.cn/web/tools/lighthouse
- WebPageTest: https://www.webpagetest.org/
本文仅代表个人观点，与 Thoughtworks 公司无任何关系。
SHA256 checksum: f2fe1394e4ab9297ed69ff73ac32e9ac1375f01c2102183b509bf9379a5995d6
SHA256 checksum: 964978ecd2059064abe542e51dc02e204d3ee2e6c320ca68e2b1399ce0c6953c
gpg --verify PayForGuzhongren.svg.sig