How to Compare Two Websites: Step-by-Step Tutorial
🚀 Follow along — open the tool in another tab to try each step as you read.
Open Tool →Steps
This tutorial walks you through comparing two versions of a website using the HTML Site Comparator. By the end, you will know how to prepare your files, run a comparison, read the results, and use the line-by-line diff viewer to understand exactly what changed.
1 Prepare Your Zip Files
You need two zip files — one for each version of the website. Each zip should contain the website's files (HTML, CSS, JS, images, etc.) starting from the root directory.
Example: If your site lives in a folder called my-site/, zip the entire folder:
# macOS / Linux
zip -r site-v1.zip my-site/
# Windows (right-click the folder → Send to → Compressed)Do the same for the updated version, producing site-v2.zip.
💡 Tip: Both zips should have the same folder structure. If one uses dist/ as the root and the other uses build/, rename them to match before zipping — otherwise the tool will treat every file as added or deleted.
2 Upload Both Versions
Open the HTML Site Comparator. You will see two drop zones side by side:
- Site A — Original: Drag and drop your first zip (the baseline or production version) here, or click to browse.
- Site B — Updated: Drag and drop the second zip (the updated or staging version) here.
Once each zip is loaded, the drop zone turns green and shows the file name and size. Both zones must have a file before you can proceed.
3 Run the Comparison
Click the Compare Sites button. The tool will:
- Extract both zip files in your browser (no server upload)
- Strip any common root folder prefix
- Match file paths between the two archives
- Compare content for every file that exists in both
For a typical website with a few hundred files, this takes one to three seconds.
4 Review the Summary
After comparison, four stat cards appear at the top:
| Category | Meaning | What to Look For |
|---|---|---|
| Unchanged | Same path, identical content | Should be the majority for a small update |
| Added | Exists in Site B only | New pages, new assets, expected additions |
| Deleted | Exists in Site A only | Check that nothing was removed accidentally |
| Changed | Same path, different content | The most important category — click to inspect |
Below the stats, files are grouped by category. Changed files appear first and are clickable — these are the files you want to review.
5 Inspect Changed Files
Click any changed file to open the diff viewer. The viewer shows:
- Green lines (+): Content that exists in Site B but not Site A (additions)
- Red lines (−): Content that exists in Site A but not Site B (deletions)
- Grey lines: Unchanged context — the lines surrounding the changes
- Line numbers: Two columns showing the line number in the original (left) and updated (right) file
The diff header also shows the total count of additions and deletions for that file. Use the close button (✕) to dismiss the diff and inspect another file.
💡 Pro tip: If a file shows hundreds of changes that look like whitespace or formatting differences, consider running both versions through the HTML Formatter first, then re-zipping and comparing. This normalises indentation and produces a much cleaner diff.
6 Take Action
Based on your review:
- All changes expected? Proceed with your deployment or merge.
- Unexpected additions or deletions? Investigate the source — a template change, a build configuration issue, or an accidental file deletion.
- Too many whitespace diffs? Normalise formatting in your build pipeline so future comparisons are cleaner.
- Need to share results? Take a screenshot of the summary or copy file paths from the changed list to include in your deployment notes.
Common Pitfalls
- Different root folder names. If Site A is zipped from
public/and Site B fromoutput/, rename the root folders to match before zipping. - Cache-busted filenames. Build tools often append hashes to filenames (e.g.,
app.a1b2c3.js). These will always show as added/deleted rather than changed. Consider excluding them or using consistent naming. - Large binary files. The tool works best with text files. Very large images or videos will slow extraction. Exclude them from the zip if you only need to compare code and markup.
🚀 Ready? Compare your websites now.
Open Tool →