186 | {/* Header Section */}
187 |
188 |
251 |
252 | {/* Metadata Section */}
253 | setShowModal(false)}
363 | />
364 | )}
365 |
366 | );
367 | }
368 | );
369 |
370 | BrowserCard.displayName = "BrowserCard";
371 |
372 | export default BrowserCard;
373 |
--------------------------------------------------------------------------------
/app/components/Header.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | import DarkModeToggle from "./DarkModeToggle";
4 | import Image from "next/image";
5 | import Link from "next/link";
6 |
7 | export default function Header({ darkMode, toggleDarkMode }) {
8 | const [isVisible, setIsVisible] = useState(false);
9 | const [currentPlatform, setCurrentPlatform] = useState(0);
10 |
11 | const platforms = [
12 | { name: "macOS", icon: "🍎", color: "from-blue-500 to-purple-500" },
13 | { name: "Windows", icon: "🪟", color: "from-blue-600 to-cyan-500" },
14 | { name: "Android", icon: "🤖", color: "from-green-500 to-emerald-500" },
15 | { name: "iPad", icon: "📱", color: "from-purple-500 to-pink-500" },
16 | ];
17 |
18 | // Animation on mount
19 | useEffect(() => {
20 | setIsVisible(true);
21 | }, []);
22 |
23 | // Rotating platform showcase
24 | useEffect(() => {
25 | const interval = setInterval(() => {
26 | setCurrentPlatform((prev) => (prev + 1) % platforms.length);
27 | }, 3000);
28 | return () => clearInterval(interval);
29 | }, [platforms.length]);
30 |
31 | const currentDate = new Date().toLocaleDateString("en-US", {
32 | year: "numeric",
33 | month: "long",
34 | day: "numeric",
35 | });
36 |
37 | return (
38 |
42 | {/* Animated Background Pattern */}
43 |
416 | );
417 | }
418 |
--------------------------------------------------------------------------------
/app/components/BrowserBarChart.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useMemo, useRef, useState } from "react";
2 |
3 | export default function BrowserBarChart({
4 | browsers,
5 | platform,
6 | getEngineColor,
7 | }) {
8 | const [sortOrder, setSortOrder] = useState("desc");
9 | const [hoveredBar, setHoveredBar] = useState(null);
10 | const [selectedBars, setSelectedBars] = useState([]);
11 | const chartRef = useRef(null);
12 |
13 | const chartData = useMemo(() => {
14 | if (!browsers || !platform) return [];
15 |
16 | let data = browsers
17 | .filter((browser) => {
18 | const platformData = browser[platform];
19 | const scores = platformData?.versions?.[0]?.scores;
20 | return scores && typeof scores.speedometer3 === "number";
21 | })
22 | .map((browser) => {
23 | const platformData = browser[platform];
24 | const currentScore = platformData.versions[0].scores.speedometer3;
25 | const previousScore = platformData.versions[1]?.scores?.speedometer3;
26 |
27 | return {
28 | name: browser.name,
29 | score: currentScore,
30 | previousScore: previousScore,
31 | trend: previousScore
32 | ? ((currentScore - previousScore) / previousScore) * 100
33 | : 0,
34 | engine: platformData.engine || "unknown",
35 | ramUsage: platformData.versions[0].scores.ram,
36 | adblockScore: platformData.versions[0].scores.adblock,
37 | };
38 | });
39 |
40 | // Sort data based on selected order
41 | switch (sortOrder) {
42 | case "asc":
43 | return data.sort((a, b) => a.score - b.score);
44 | case "alphabetical":
45 | return data.sort((a, b) => a.name.localeCompare(b.name));
46 | default: // desc
47 | return data.sort((a, b) => b.score - a.score);
48 | }
49 | }, [browsers, platform, sortOrder]);
50 |
51 | const maxScore = useMemo(() => {
52 | return Math.max(...chartData.map((item) => item.score), 1);
53 | }, [chartData]);
54 |
55 | // Performance categories
56 | const getPerformanceCategory = (score) => {
57 | if (score >= maxScore * 0.9)
58 | return {
59 | label: "Excellent",
60 | color: "text-green-600 dark:text-green-400",
61 | };
62 | if (score >= maxScore * 0.7)
63 | return { label: "Good", color: "text-blue-600 dark:text-blue-400" };
64 | if (score >= maxScore * 0.5)
65 | return { label: "Fair", color: "text-yellow-600 dark:text-yellow-400" };
66 | return { label: "Poor", color: "text-red-600 dark:text-red-400" };
67 | };
68 |
69 | const handleBarClick = (itemName) => {
70 | setSelectedBars((prev) =>
71 | prev.includes(itemName)
72 | ? prev.filter((name) => name !== itemName)
73 | : [...prev, itemName]
74 | );
75 | };
76 |
77 | const handleKeyDown = (e, itemName) => {
78 | if (e.key === "Enter" || e.key === " ") {
79 | e.preventDefault();
80 | handleBarClick(itemName);
81 | }
82 | };
83 |
84 | // Clear selection when clicking outside
85 | useEffect(() => {
86 | const handleClickOutside = (event) => {
87 | if (chartRef.current && !chartRef.current.contains(event.target)) {
88 | setSelectedBars([]);
89 | }
90 | };
91 |
92 | document.addEventListener("mousedown", handleClickOutside);
93 | return () => document.removeEventListener("mousedown", handleClickOutside);
94 | }, []);
95 |
96 | if (!browsers || !platform || !getEngineColor) {
97 | console.warn("BrowserBarChart: Missing required props");
98 | return null;
99 | }
100 |
101 | if (chartData.length === 0) {
102 | return (
103 |
149 | {/* Header */}
150 |
488 | );
489 | }
490 |
--------------------------------------------------------------------------------
189 |
205 |
206 |
194 | setImageLoaded(true)}
201 | priority={rank <= 3}
202 | />
203 |
204 |
207 |
225 |
226 | {browser.website && (
227 | e.stopPropagation()}
233 | aria-label={`Visit ${browser.name} website`}
234 | >
235 |
248 |
249 | )}
250 | 211 | {browser.name} 212 |
213 |
214 |
215 | {performance.level}
216 |
217 |
218 | •
219 |
220 |
221 | Rank #{rank}
222 |
223 |
224 |
254 |
255 | v{latestVersion.version}
256 |
257 |
262 | {platformEngine}
263 |
264 |
265 |
266 | {/* Performance Metrics */}
267 |
271 | {/* Speedometer Score */}
272 |
356 |
357 |
358 | {showModal && (
359 |
273 |
304 |
305 | {/* RAM Usage */}
306 | {latestVersion.scores.ram && (
307 |
274 | Speedometer 3.1
275 |
276 |
277 |
303 |
280 | {latestVersion.scores.speedometer3.toFixed(1)}
281 |
282 | {scoreDifference !== null && (
283 |
284 | 0
287 | ? "bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400"
288 | : scoreDifference < 0
289 | ? "bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-400"
290 | : "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400"
291 | }`}
292 | >
293 | {scoreDifference > 0
294 | ? "↗"
295 | : scoreDifference < 0
296 | ? "↘"
297 | : "→"}
298 | {Math.abs(scoreDifference).toFixed(1)}
299 |
300 |
301 | )}
302 |
308 |
317 | )}
318 |
319 | {/* Adblock Score */}
320 | {latestVersion.scores.adblock && (
321 |
309 | Memory Usage
310 |
311 |
312 | {latestVersion.scores.ram >= 1000
313 | ? `${(latestVersion.scores.ram / 1000).toFixed(1)}GB`
314 | : `${latestVersion.scores.ram.toFixed(0)}MB`}
315 |
316 |
322 |
348 |
349 | {/* Action Hint */}
350 |
323 | Ad Blocking
324 |
325 |
326 | {latestVersion.scores.adblock.toFixed(0)}%
327 |
328 |
329 |
346 | )}
347 | = 80
332 | ? "bg-green-500"
333 | : latestVersion.scores.adblock >= 60
334 | ? "bg-yellow-500"
335 | : "bg-red-500"
336 | }`}
337 | style={{ width: `${latestVersion.scores.adblock}%` }}
338 | role="progressbar"
339 | aria-valuenow={latestVersion.scores.adblock}
340 | aria-valuemin="0"
341 | aria-valuemax="100"
342 | aria-label={`Ad blocking effectiveness: ${latestVersion.scores.adblock}%`}
343 | />
344 |
345 |
351 |
352 | Click for detailed history
353 |
354 |
355 |
44 |
87 |
88 |
89 | {/* Floating geometric shapes */}
90 |
91 |
95 |
99 |
103 |
107 |
108 |
109 | {/* Dark Mode Toggle */}
110 |
111 |
113 |
114 | {/* Main Content */}
115 |
116 |
394 |
395 | {/* Bottom Wave */}
396 |
121 | {/* Top Section - Logo and Navigation */}
122 |
393 |
123 | {/* Logo */}
124 |
174 |
175 | {/* Hero Section */}
176 |
125 |
145 |
146 | {/* Quick Stats */}
147 |
126 |
127 |
144 |
128 |
133 |
143 |
148 |
173 |
149 |
156 |
150 | 100+
151 |
152 |
153 | Browsers Tested
154 |
155 |
157 |
164 |
158 | 5
159 |
160 |
161 | Platforms
162 |
163 |
165 |
172 |
166 | Monthly
167 |
168 |
169 | Updates
170 |
171 |
177 | {/* Main Title */}
178 |
392 | 185 | 186 | Browserating 187 | 188 |
189 | 190 | {/* Subtitle with animated platform showcase */} 191 |
198 |
215 |
216 | {/* Description */}
217 | 199 | Browser Performance Ranking for 200 |
201 | 202 | {/* Animated Platform Showcase */} 203 |
204 | {platforms.map((platform) => (
205 |
214 |
209 | {platform.icon}
210 | {platform.name}
211 |
212 | ))}
213 |
224 |
281 |
282 | {/* Call to Action */}
283 | 225 | Discover the fastest browsers across different platforms using 226 | the industry-standard 227 | 228 | {" "} 229 | Speedometer 3.1 benchmark 230 | 231 | . Our comprehensive testing reveals real-world performance 232 | differences to help you choose the best browser for your needs. 233 |
234 | 235 | {/* Key Features */} 236 | {/*
237 |
*/}
280 |
238 |
249 | Real-world Testing
250 |
251 |
252 |
263 | Cross-Platform
264 |
265 |
266 |
277 | Monthly Updates
278 |
279 |
290 |
294 | View Rankings
295 |
308 |
309 |
310 |
314 |
327 | Learn More
328 |
329 |
330 |
331 | {/* Last Updated Info */}
332 |
339 |
391 |
340 |
378 |
379 |
341 |
368 |
369 |
370 |
371 |
342 |
343 |
344 | Last updated:
345 |
346 |
347 |
348 |
349 |
355 |
356 | {/* ? Tooltip */}
357 |
358 | ?
359 |
360 |
361 |
367 |
362 | I ran into several issues during this testing cycle, so
363 | results will be rolled out gradually. Follow me on X
364 | (@kawaiier101) for updates.
365 |
366 |
372 | Next update:
373 |
374 | ~ January 10, 2026
375 |
376 |
377 | 380 | 💡 Want weekly updates? 381 | 385 | Support the project 386 | {" "} 387 | to get more frequent performance insights and help us test more 388 | browsers! 389 |
390 |
397 |
414 |
415 |
104 |
128 | );
129 | }
130 |
131 | const platformNames = {
132 | "macos-arm": "macOS ARM",
133 | "macos-intel": "macOS Intel",
134 | windows: "Windows",
135 | android: "Android",
136 | ipad: "iPad OS",
137 | };
138 |
139 | const platformName = platformNames[platform] || platform;
140 |
141 | return (
142 |
105 |
127 |
106 |
119 |
120 | 121 | No Performance Data 122 |
123 |124 | No performance data available for the selected platform and filters. 125 |
126 |
143 | {/* Header */}
144 |
481 | );
482 | }
483 |
--------------------------------------------------------------------------------
/app/components/About/About.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | export default function About() {
4 | const [activeSection, setActiveSection] = useState("methodology");
5 | const [expandedSystem, setExpandedSystem] = useState(null);
6 |
7 | const systemConfigs = [
8 | {
9 | id: "macos-silicon",
10 | title: "macOS (Apple Silicon)",
11 | icon: "🍎",
12 | gradient: "from-blue-500 to-purple-500",
13 | specs: {
14 | os: "macOS Tahoe 26.1",
15 | device: "14-inch MacBook Pro (2023)",
16 | processor: "M3 Pro",
17 | memory: "36 GB RAM",
18 | highlights: ["Apple Silicon", "Latest macOS", "High Performance"],
19 | },
20 | },
21 | {
22 | id: "macos-intel",
23 | title: "macOS (Intel)",
24 | icon: "💻",
25 | gradient: "from-gray-500 to-blue-500",
26 | specs: {
27 | os: "macOS Ventura 13.6.9",
28 | device: "15-inch MacBook Pro (2019)",
29 | processor: "2.3 GHz 8-core Intel Core i9",
30 | memory: "16 GB RAM",
31 | highlights: [
32 | "Intel Architecture",
33 | "Stable Release",
34 | "Professional Grade",
35 | ],
36 | },
37 | },
38 | {
39 | id: "windows",
40 | title: "Windows",
41 | icon: "🪟",
42 | gradient: "from-blue-600 to-cyan-500",
43 | specs: {
44 | os: "Windows 10 Pro",
45 | device: "Lenovo Ideapad Gaming 3",
46 | processor: "AMD Ryzen 5 5600H with Radeon Graphics 3.3 GHz",
47 | memory: "16 GB RAM",
48 | highlights: ["Gaming Laptop", "AMD Architecture", "Real-world Setup"],
49 | },
50 | },
51 | {
52 | id: "android",
53 | title: "Android",
54 | icon: "🤖",
55 | gradient: "from-green-500 to-emerald-500",
56 | specs: {
57 | os: "Nothing OS 2.6 (Android 14)",
58 | device: "Nothing Phone (2a)",
59 | processor: "Dimensity 7200 Pro CPU with Mali-G610 MC4 GPU",
60 | memory: "8 GB RAM",
61 | highlights: ["Modern Android", "Mid-range Performance", "Custom OS"],
62 | },
63 | },
64 | {
65 | id: "ipad",
66 | title: "iPad",
67 | icon: "📱",
68 | gradient: "from-purple-500 to-pink-500",
69 | specs: {
70 | os: "iPadOS 18.5",
71 | device: "iPad Mini 7th Generation",
72 | processor: "A17 Pro CPU",
73 | memory: "8 GB RAM",
74 | highlights: ["Latest iPadOS", "Pro Chip", "Compact Form Factor"],
75 | },
76 | },
77 | ];
78 |
79 | const testingSteps = [
80 | {
81 | icon: "⚡",
82 | title: "Speedometer 3.1 Benchmark",
83 | description:
84 | "Five tests conducted per browser, eliminating best and worst results, averaging the middle three for accuracy.",
85 | details:
86 | "The benchmark tests a wide range of JavaScript frameworks and technologies, including TodoMVC implementations (using vanilla JavaScript, Web Components, React, Angular, Vue, jQuery, Preact, Svelte, and Lit), code and rich text editors (CodeMirror, TipTap), and charting libraries (observable-plot, chartjs, React-Stockcharts-SVG, Perf-Dashboard). It also includes workloads that mimic browsing a typical news site, testing how well a browser handles large DOM and CSSOM changes during navigation.",
87 | },
88 | {
89 | icon: "🧠",
90 | title: "Memory Usage Analysis",
91 | description:
92 | "Cumulative RAM consumption measured across seven diverse websites including IGN, ESPN, Figma, and Reddit.",
93 | details:
94 | "Memory tracking via Activity Monitor provides real-world usage patterns rather than theoretical limits. All processes RAM usage is summed up to get the total RAM usage.",
95 | },
96 | {
97 | icon: "🛡️",
98 | title: "Ad-Blocking Effectiveness",
99 | description:
100 | "Comprehensive testing using AdBlock Tester to evaluate built-in and extension-based blocking capabilities.",
101 | details:
102 | "Tests various ad types including display ads, video ads, trackers, and social media widgets.",
103 | },
104 | ];
105 |
106 | const scoreGuide = [
107 | {
108 | metric: "Speedometer 3.1",
109 | description:
110 | "Higher scores indicate faster JavaScript and DOM performance",
111 | scale: "0-100+",
112 | good: "40+",
113 | average: "25-40",
114 | poor: "<25",
115 | color: "text-blue-600 dark:text-blue-400",
116 | },
117 | {
118 | metric: "RAM Usage",
119 | description: "Lower values indicate more efficient memory management",
120 | scale: "MB",
121 | good: "<500MB",
122 | average: "500-1000MB",
123 | poor: ">1000MB",
124 | color: "text-green-600 dark:text-green-400",
125 | },
126 | {
127 | metric: "Ad Blocking",
128 | description: "Higher scores indicate better ad-blocking capabilities",
129 | scale: "0-100%",
130 | good: "80-100%",
131 | average: "50-80%",
132 | poor: "<50%",
133 | color: "text-purple-600 dark:text-purple-400",
134 | },
135 | ];
136 |
137 | const sections = [
138 | { id: "methodology", label: "Testing Methodology", icon: "🔬" },
139 | { id: "systems", label: "Test Systems", icon: "💻" },
140 | { id: "scores", label: "Score Guide", icon: "📊" },
141 | ];
142 |
143 | return (
144 |
145 |
216 |
217 | {/* Chart */}
218 |
146 |
187 |
188 | {/* Legend */}
189 |
147 |
155 |
156 | {/* Controls */}
157 | 148 | Performance Comparison 149 |
150 |151 | Speedometer 3.1 scores on {platformName} • {chartData.length}{" "} 152 | browsers 153 |
154 |
158 |
186 |
159 |
165 |
175 |
176 |
177 | {selectedBars.length > 0 && (
178 |
184 | )}
185 |
190 |
215 |
191 |
192 |
193 | Excellent (90-100%)
194 |
195 |
196 |
197 |
198 |
199 | Good (70-89%)
200 |
201 |
202 |
203 |
204 |
205 | Fair (50-69%)
206 |
207 |
208 |
209 |
210 |
211 | Poor (<50%)
212 |
213 |
214 |
219 |
385 |
386 | {/* Selected Browser Comparison */}
387 | {selectedBars.length > 1 && (
388 |
226 |
372 |
373 | {/* Chart Instructions */}
374 |
233 | {chartData.map((item, index) => {
234 | const percentHeight = (item.score / maxScore) * 100;
235 | const barHeight = Math.max(percentHeight * 3.2, 20); // Minimum 20px height, scale by 3.2 for visibility
236 | const scoreFormatted = item.score.toLocaleString(undefined, {
237 | maximumFractionDigits: 1,
238 | });
239 | const isHovered = hoveredBar === item.name;
240 | const isSelected = selectedBars.includes(item.name);
241 | const performance = getPerformanceCategory(item.score);
242 |
243 | return (
244 |
371 | handleBarClick(item.name)}
248 | onKeyDown={(e) => handleKeyDown(e, item.name)}
249 | onMouseEnter={() => setHoveredBar(item.name)}
250 | onMouseLeave={() => setHoveredBar(null)}
251 | tabIndex="0"
252 | role="button"
253 | aria-pressed={isSelected}
254 | aria-label={`${item.name}: ${scoreFormatted} points using ${
255 | item.engine
256 | } engine${
257 | item.trend !== 0
258 | ? `, trend: ${
259 | item.trend > 0 ? "+" : ""
260 | }${item.trend.toFixed(1)}%`
261 | : ""
262 | }`}
263 | style={{ height: "400px" }}
264 | >
265 | {/* Rank and Score */}
266 |
368 | );
369 | })}
370 |
267 |
286 |
287 | {/* Bar Container */}
288 |
268 | #{index + 1}
269 |
270 |
271 | {scoreFormatted}
272 |
273 | {item.trend !== 0 && (
274 | 0
277 | ? "text-green-600 dark:text-green-400"
278 | : "text-red-600 dark:text-red-400"
279 | }`}
280 | >
281 | {item.trend > 0 ? "↗" : "↘"}{" "}
282 | {Math.abs(item.trend).toFixed(1)}%
283 |
284 | )}
285 |
292 | {/* Bar */}
293 |
348 |
349 | {/* Browser name and engine */}
350 |
306 |
347 |
315 | {/* Performance indicator */}
316 |
346 | = maxScore * 0.9
319 | ? "bg-green-400"
320 | : item.score >= maxScore * 0.7
321 | ? "bg-blue-400"
322 | : item.score >= maxScore * 0.5
323 | ? "bg-yellow-400"
324 | : "bg-red-400"
325 | }`}
326 | >
327 |
328 | {/* Hover tooltip */}
329 | {isHovered && (
330 |
331 |
344 | )}
345 | {item.name}
332 | Score: {scoreFormatted}
333 | Engine: {item.engine}
334 | {item.ramUsage && (
335 | RAM: {item.ramUsage.toFixed(0)} MB
336 | )}
337 | {item.adblockScore && (
338 |
339 | Adblock: {item.adblockScore.toFixed(0)}%
340 |
341 | )}
342 |
343 |
351 |
367 |
357 | {item.name}
358 |
359 |
364 | {item.engine}
365 |
366 |
375 |
384 | 376 | Click or tap bars to select • Hover for details • 377 | 378 | {" "} 379 | Scroll horizontally to view all browsers 380 | 381 | Swipe to scroll 382 |
383 |
389 |
453 | )}
454 |
455 | {/* Screen reader summary */}
456 | 390 | Comparison ({selectedBars.length} selected) 391 |
392 |
393 | {chartData
394 | .filter((item) => selectedBars.includes(item.name))
395 | .map((item) => (
396 |
452 |
400 |
450 | ))}
451 |
401 |
402 | {item.name}
403 |
404 |
421 |
422 |
423 |
449 |
424 | Score:{" "}
425 |
426 | {item.score.toFixed(1)}
427 |
428 |
429 |
430 | Engine: {item.engine}
431 |
432 | {item.ramUsage && (
433 |
434 | RAM:{" "}
435 |
436 | {item.ramUsage.toFixed(0)} MB
437 |
438 |
439 | )}
440 | {item.adblockScore && (
441 |
442 | Adblock:{" "}
443 |
444 | {item.adblockScore.toFixed(0)}%
445 |
446 |
447 | )}
448 |
457 |
480 | Summary of browser performance on {platformName}
458 |459 | Sorted by{" "} 460 | {sortOrder === "desc" 461 | ? "highest to lowest" 462 | : sortOrder === "asc" 463 | ? "lowest to highest" 464 | : "alphabetical order"} 465 | : 466 |
467 |-
468 | {chartData.map((item, index) => (
469 |
- 470 | {item.name} ranked #{index + 1} with a score of{" "} 471 | {item.score.toFixed(1)} using {item.engine} engine 472 | {item.trend !== 0 && 473 | `, showing a ${ 474 | item.trend > 0 ? "positive" : "negative" 475 | } trend of ${Math.abs(item.trend).toFixed(1)}%`} 476 | 477 | ))} 478 |
151 |
163 |
164 | {/* Navigation Tabs */}
165 | 155 | Testing Methodology & Systems 156 |
157 |158 | Transparent, consistent, and thorough testing across multiple 159 | platforms to give you reliable browser performance insights you can 160 | trust. 161 |
162 |
166 | {sections.map((section) => (
167 |
179 | ))}
180 |
181 |
182 | {/* Content Sections */}
183 |
184 | {/* Testing Methodology */}
185 | {activeSection === "methodology" && (
186 |
487 |
187 |
245 | )}
246 |
247 | {/* Test Systems */}
248 | {activeSection === "systems" && (
249 |
188 | {testingSteps.map((step, index) => (
189 |
216 |
217 | {/* Key Points */}
218 |
190 |
214 | ))}
215 |
191 |
213 |
192 |
196 |
193 | {step.icon}
194 |
195 |
197 |
212 | 198 | {step.title} 199 |
200 |201 | {step.description} 202 |
203 |
204 |
211 | 205 | Technical Details → 206 |
207 |208 | {step.details} 209 |
210 |
219 |
244 | 220 | ✨ 221 | Why Our Testing Matters 222 |
223 |
224 |
243 |
225 | ✓
226 |
227 | Consistent testing environment across all browsers
228 |
229 |
230 |
231 | ✓
232 |
233 | Statistical accuracy through multiple test runs
234 |
235 |
236 |
237 | ✓
238 |
239 | Real-world scenarios and websites
240 |
241 |
242 |
250 |
364 | )}
365 |
366 | {/* Score Guide */}
367 | {activeSection === "scores" && (
368 |
251 | {systemConfigs.map((system) => (
252 |
345 |
346 |
258 | setExpandedSystem(
259 | expandedSystem === system.id ? null : system.id,
260 | )
261 | }
262 | >
263 |
343 | ))}
344 |
266 |
342 |
267 |
341 |
268 | {system.icon}
269 |
282 |
283 |
270 |
281 | 271 | {system.title} 272 |
273 |274 | Click to{" "} 275 | {expandedSystem === system.id 276 | ? "collapse" 277 | : "expand"}{" "} 278 | details 279 |
280 |
284 |
340 |
285 |
286 | Operating System:
287 |
288 |
289 | {system.specs.os}
290 |
291 |
292 |
293 |
294 | Device:
295 |
296 |
297 | {system.specs.device}
298 |
299 |
300 |
301 | {expandedSystem === system.id && (
302 |
303 |
338 | )}
339 |
304 |
305 | Processor:
306 |
307 |
308 | {system.specs.processor}
309 |
310 |
311 |
312 |
313 | Memory:
314 |
315 |
316 | {system.specs.memory}
317 |
318 |
319 |
320 |
321 |
337 | 322 | Key Features: 323 |
324 |
325 | {system.specs.highlights.map(
326 | (highlight, index) => (
327 |
331 | {highlight}
332 |
333 | ),
334 | )}
335 |
336 |
347 |
363 |
348 | ⚠️
349 |
362 |
350 |
361 | 351 | Important Testing Notes 352 |
353 |354 | Performance results may vary based on your specific hardware 355 | configuration, operating system version, installed 356 | extensions, and system load. These tests represent 357 | controlled conditions and should be used as relative 358 | comparisons rather than absolute benchmarks. 359 |
360 |
369 |
485 | )}
486 |
370 |
384 |
385 |
371 |
383 | 372 | 🎯 373 | Understanding Performance Metrics 374 |
375 |376 | 377 | Higher Speedometer scores = Faster browser performance. 378 | 379 | Our comprehensive testing evaluates multiple aspects of 380 | browser performance to give you a complete picture. 381 |
382 |
386 | {scoreGuide.map((metric, index) => (
387 |
448 |
449 |
391 |
446 | ))}
447 |
392 |
445 |
395 |
396 | {index === 0 ? "⚡" : index === 1 ? "🧠" : "🛡️"}
397 |
398 |
399 |
400 |
444 | 403 | {metric.metric} 404 |
405 |406 | {metric.description} 407 |
408 | 409 |
410 |
443 |
411 |
412 | Scale:
413 |
414 |
418 |
415 | {metric.scale}
416 |
417 |
419 |
420 | Excellent:
421 |
422 |
426 |
423 | {metric.good}
424 |
425 |
427 |
428 | Average:
429 |
430 |
434 |
431 | {metric.average}
432 |
433 |
435 |
436 | Needs Improvement:
437 |
438 |
442 |
439 | {metric.poor}
440 |
441 |
450 |
484 | 451 | 💡 452 | Pro Tips for Interpreting Results 453 |
454 |
455 |
483 |
456 | →
457 |
458 | Focus on consistent performance across metrics rather than
459 | just peak scores
460 |
461 |
462 |
463 | →
464 |
465 | Consider your specific use case: gaming, productivity, or
466 | general browsing
467 |
468 |
469 |
470 | →
471 |
472 | Balance performance with features that matter to you
473 |
474 |
475 |
476 | →
477 |
478 | Remember that browser updates can significantly impact
479 | performance
480 |
481 |
482 |