<head> ... <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> ... </head>
This stylesheet doesn't just include the code for the button component. It contains the CSS for all of the Bootstrap components. But you're not using any of the other Bootstrap components. So your page is downloading a bunch of CSS that it doesn't need.
This extra CSS is a problem for the following reasons:
The extra code slows down your page load.
If a user accesses the page on a mobile device, the extra code uses up their cellular data.
Open the Coverage tool
coverage, select the Show Coverage command, and then press
Enter. The Coverage tool opens in the Drawer.
Record code coverage
Click one of the following buttons in the Coverage tool:
Click Start Instrumenting Coverage And Reload Page () if you want to see what code is needed to load the page.
Click Instrument Coverage () if you want to see what code is used after interacting with the page.
Click Stop Instrumenting Coverage And Show Results () when you want to stop recording code coverage.
Analyze code coverage
The table in the Coverage tool displays the resources that were analyzed, and how much code is used within each resource. Click a row to open that resource in the Sources tool and display a line-by-line breakdown of used code and unused code.
A code coverage report:
Columns in the code coverage report:
|URL||The URL of the resource that was analyzed.|
|Total Bytes||The total size of the resource in bytes.|
|Unused Bytes||The number of bytes that weren't used.|
|Last, unnamed column||A visualization of the Total Bytes and Unused Bytes columns. The red section of the bar is unused bytes. The green section is used bytes.|
Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).
This work is licensed under a Creative Commons Attribution 4.0 International License.
Submit and view feedback for