https://github.com/andrevarandas/websize
⚖️ A library for measuring webpage sizes and render times.
https://github.com/andrevarandas/websize
pagesize performance performance-monitoring web-resources website website-analytics
Last synced: 9 months ago
JSON representation
⚖️ A library for measuring webpage sizes and render times.
- Host: GitHub
- URL: https://github.com/andrevarandas/websize
- Owner: AndreVarandas
- License: mit
- Created: 2024-10-28T15:44:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-28T22:26:09.000Z (over 1 year ago)
- Last Synced: 2025-01-04T07:26:33.594Z (over 1 year ago)
- Topics: pagesize, performance, performance-monitoring, web-resources, website, website-analytics
- Language: TypeScript
- Homepage: https://jsr.io/@varandas/websize
- Size: 153 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WebSize 📏
[](https://jsr.io/@varandas/websize)
[](https://codecov.io/gh/AndreVarandas/websize)
A Deno library for measuring webpage sizes and render times. Get accurate
measurements of:
- Raw HTML size
- Rendered page size (after JavaScript execution)
- Network transfer size
- Render time
## Features
- 🚀 Simple static method for quick measurements
- ⚙️ Configurable options for detailed control
- 📊 Detailed size metrics and timing
- 🌐 Supports custom user agents
- 🔄 Multiple wait conditions for accurate rendering
- 📝 Optional verbose logging
## Installation
```bash
# Import from JSR
import { WebSize } from "jsr:@varandas/websize";
```
## Quick Start
```typescript
// Quick single measurement
const result = await WebSize.measure("https://example.com");
console.log(result);
// {
// rawSizeKB: 15.2,
// renderedSizeKB: 25.7,
// renderTimeSeconds: 1.2,
// transferSizeMB: 0.35
// }
```
## Advanced Usage
### With Custom Options
```typescript
const result = await WebSize.measure("https://example.com", {
waitUntil: "networkidle2", // Wait for network to be idle
verbose: true, // Enable detailed logging
userAgent: "Custom Agent", // Set custom user agent
});
```
### Multiple Measurements
```typescript
// Create a reusable instance
const webSize = new WebSize({
verbose: true,
waitUntil: "load",
});
// Measure multiple sites
const sites = ["https://deno.land", "https://example.com"];
for (const site of sites) {
const result = await webSize.calculatePageSize(site);
console.log(`${site}: ${result.renderedSizeKB}KB`);
}
```
## API Reference
### WebSize Class
#### Constructor Options
| Option | Type | Default | Description |
| ----------- | ----------- | -------------- | ------------------------- |
| `userAgent` | `string` | Chrome/122... | Browser user agent string |
| `waitUntil` | `WaitUntil` | `networkidle2` | Page load condition |
| `verbose` | `boolean` | `false` | Enable console logging |
#### Wait Conditions
- `load`: Wait for load event
- `networkidle0`: No network connections for 500ms
- `networkidle2`: ≤ 2 network connections for 500ms
- `none`: Don't wait
### Result Object
```typescript
interface PageSizeResult {
rawSizeKB: number; // Size of raw HTML
renderedSizeKB: number; // Size after JavaScript
renderTimeSeconds: number; // Processing time
transferSizeMB: number; // Network transfer size
}
```
## Development
```bash
# Run tests
deno task test
# Run example
deno task example
# Type check
deno task check
```
## Under the Hood
WebSize uses [Astral](https://jsr.io/@astral/astral) as its headless browser
engine to:
1. Fetch raw HTML content
2. Execute JavaScript
3. Measure rendered page size
4. Track network transfers
## License
[MIT License](LICENSE) - © André Varandas
---
Found a bug? [Open an issue](https://github.com/AndreVarandas/websize/issues)