How To Reduce Your Webpage Size

Learn how to reduce the size of a webpage using Browser Developer Tools.

SwitchUpCB, PhD

--

Photo by Negative Space on Pexels

Studies show that every 100-millisecond delay in website loading times hurts conversion rates by 7%. In addition, page speed is one of the most critical factors in search engine ranking. One aspect of your page speed is the time it takes to download the page. So this guide teaches you how to optimize your page speed by reducing the size of a web page with the Browser Developer Tools: Coverage tab.

What Are Browser Developer Tools?

Browser Developer Tools let you test and debug your website (from the browser). Chrome DevTools is a modern example of a popular browser developer tool for the Google Chrome Browser. For more information on frontend (HTML, CSS, JS) debugging with developer tools, check out this list: The Developer Tools Guide.

The Coverage Tab

The Coverage tab in Chrome DevTools helps you find unused JavaScript and CSS code. Removing unused code will reduce the size of the files that the user downloads a page load. It will also lower the amount of time spent loading render-blocking resources. These optimizations result in a faster page load.

How To Open The Coverage Tab

A screenshot showing the steps to opening the coverage tab from Chrome DevTools.

To open the coverage tab, you must visit a webpage in your browser:

  • Right-click anywhere on the page to bring up the context menu and select “Inspect”.
  • Click the vertical dots in the DevTools menu.
  • Hover over “More tools”.
  • Navigate to the “Coverage” tab.

These actions are equivalent to Right Click > Inspect Element > Vertical Dots > More tools > Coverage.

How To Use The Coverage Tab

A screenshot of the Chrome DevTools coverage tab sorted by unused bytes.
The Coverage Tab

--

--