Инструменты on Den's Hub: Обзоры Технологий, Руководства и Советы.https://denshub.com/ru/tools/Recent content in Инструменты on Den's Hub: Обзоры Технологий, Руководства и Советы.HugoruВся информация лицензирована согласно Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.Sat, 21 Feb 2026 00:00:00 +0000Page Load Timer - Мгновенные метрики производительностиhttps://denshub.com/ru/tools/page-load-timer/Sat, 21 Feb 2026 00:00:00 +0000https://denshub.com/ru/tools/page-load-timer/<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Load Timer - Мгновенные метрики производительности</title> <meta name="description" content="Мгновенно получайте показатели FCP, LCP и DOM для любой вкладки. Находите узкие места, замедляющие ваше приложение, без какой-либо настройки."> <link rel="canonical" href="https://denshub.com/ru/tools/page-load-timer/"> <link rel="alternate" hreflang="en" href="https://denshub.com/en/tools/page-load-timer/"> <link rel="alternate" hreflang="ru" href="https://denshub.com/ru/tools/page-load-timer/"> <link rel="alternate" hreflang="de" href="https://denshub.com/de/tools/page-load-timer/"> <link rel="alternate" hreflang="es" href="https://denshub.com/es/tools/page-load-timer/"> <link rel="alternate" hreflang="x-default" href="https://denshub.com/en/tools/page-load-timer/"> <meta property="og:type" content="website"> <meta property="og:url" content="https://denshub.com/ru/tools/page-load-timer/"> <meta property="og:title" content="Page Load Timer - Мгновенные метрики производительности"> <meta property="og:description" content="Мгновенно получайте показатели FCP, LCP и DOM для любой вкладки. Находите узкие места без какой-либо настройки."> <meta property="og:image" content="https://denshub.com/images/tools/page-load-timer/screenshot-light.png"> <meta property="og:locale" content="ru_RU"> <meta property="og:site_name" content="Den's Hub"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Page Load Timer - Мгновенные метрики производительности"> <meta name="twitter:description" content="Мгновенно получайте показатели FCP, LCP и DOM для любой вкладки. Находите узкие места без какой-либо настройки."> <meta name="twitter:image" content="https://denshub.com/images/tools/page-load-timer/screenshot-light.png"> <style> :root { /* Brand Colors */ --brand-dark: #0f172a; --brand-primary: #3b82f6; --brand-accent: #06b6d4; /* Cyan for speed */ --brand-glow: rgba(59, 130, 246, 0.5); /* Neutral Color Palette */ --bg-body: #f8f9fa; --bg-surface: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border-color: #e2e8f0; /* Status Colors */ --badge-xhr-bg: #fff7ed; --badge-xhr-text: #9a3412; --badge-css-bg: #fef2f2; --badge-css-text: #991b1b; --badge-other-bg: #f1f5f9; --badge-other-text: #475569; /* Spacing & Layout */ --container-width: 1000px; --radius: 8px; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 2rem; --spacing-xl: 4rem; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-body); color: var(--text-main); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* --- HERO SECTION --- */ .hero-wrapper { background-color: var(--brand-dark); color: white; padding: 1.25rem 1rem 6rem 1rem; position: relative; overflow: hidden; background-image: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 20%); } .hero-container { max-width: var(--container-width); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } .hero-content { z-index: 2; } .version-pill { display: inline-flex; align-items: center; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 50px; font-size: 0.85rem; color: #bae6fd; margin-bottom: 1.5rem; font-weight: 500; } .hero-title { font-size: 2.75rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.25rem; letter-spacing: -0.03em; } .text-gradient { background: linear-gradient(to right, #60a5fa, #22d3ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-subtitle { font-size: 1.125rem; color: #94a3b8; margin-bottom: 2rem; max-width: 500px; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; } .btn-hero { padding: 0.875rem 1.75rem; border-radius: 6px; font-weight: 600; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-primary-glow { background: var(--brand-primary); color: white; box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); border: 1px solid transparent; } .btn-primary-glow:hover { background: #2563eb; transform: translateY(-1px); box-shadow: 0 0 25px rgba(59, 130, 246, 0.6); } .btn-secondary { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.2); } .btn-secondary:hover { background: rgba(255,255,255,0.05); border-color: white; } /* Hero Image / Mockup */ .hero-visual { position: relative; perspective: 1000px; } .mockup-window { background: #1e293b; border-radius: 8px; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.1); overflow: hidden; transform: rotateY(-5deg) rotateX(2deg); transition: transform 0.5s ease; position: relative; z-index: 2; } .mockup-window:hover { transform: rotateY(0deg) rotateX(0deg); } .mockup-header { background: #0f172a; padding: 10px 15px; display: flex; gap: 6px; border-bottom: 1px solid rgba(255,255,255,0.1); } .dot { width: 10px; height: 10px; border-radius: 50%; } .dot-red { background: #ef4444; } .dot-yellow { background: #f59e0b; } .dot-green { background: #10b981; } .hero-img { display: block; width: 100%; height: auto; } .glow-blob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120%; height: 120%; background: radial-gradient(circle, var(--brand-glow) 0%, transparent 70%); filter: blur(40px); z-index: 1; opacity: 0.6; pointer-events: none; } .hero-features { margin-top: 2rem; display: flex; gap: 1.5rem; font-size: 0.9rem; color: #cbd5e1; } .hero-feature-item { display: flex; align-items: center; gap: 0.5rem; } .check-icon { color: var(--brand-accent); } /* --- GENERAL LAYOUT --- */ h2 { font-size: 1.75rem; color: var(--brand-dark); font-weight: 700; margin-bottom: 1.5rem; } h3 { font-size: 1.25rem; margin-top: 0; margin-bottom: 0.75rem; color: var(--text-main); position: relative; z-index: 2; } .container { max-width: var(--container-width); margin: -3rem auto 0 auto; padding: 0 1rem 4rem 1rem; position: relative; z-index: 10; } .section-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 2rem; margin-bottom: 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); } .grid-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; } /* --- METRICS DASHBOARD --- */ .dashboard-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 2rem; } .metric-card { background: #f8fafc; border: 1px solid var(--border-color); border-radius: 6px; padding: 1.5rem; text-align: center; } .metric-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 600; margin-bottom: 0.5rem; } .metric-value { font-size: 2rem; font-weight: 800; color: var(--brand-dark); } .metric-value.highlight { color: var(--brand-primary); } /* --- TABLES --- */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .data-table th { text-align: left; padding: 0.75rem; background-color: #f1f5f9; color: var(--text-muted); text-transform: uppercase; font-size: 0.7rem; font-weight: 700; } .data-table td { padding: 0.75rem; border-bottom: 1px solid var(--border-color); } .row-highlight { background-color: #fef2f2; color: #991b1b; font-weight: 600; } /* --- BADGES --- */ .badge { padding: 0.25em 0.6em; font-size: 0.75em; font-weight: 700; border-radius: 4px; text-transform: uppercase; } .badge-xhr { background: var(--badge-xhr-bg); color: var(--badge-xhr-text); } .badge-css { background: var(--badge-css-bg); color: var(--badge-css-text); } .badge-other { background: var(--badge-other-bg); color: var(--badge-other-text); } /* --- FEATURE CARDS (WHY & CUSTOMIZATION) --- */ .feature-block { padding: 0; } .feature-icon-title { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .feature-block p { color: var(--text-muted); font-size: 0.95rem; } /* SVG Icons */ .icon-svg { width: 24px; height: 24px; stroke: var(--brand-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } /* Icon Colors */ .icon-purple { stroke: #9333ea; } .icon-amber { stroke: #d97706; } .icon-rose { stroke: #db2777; } /* Sloppy Paint Brush Effect */ .brush-paint { position: relative; display: inline-block; z-index: 1; } .brush-paint::before { content: ''; position: absolute; bottom: 2px; left: -4px; right: -8px; height: 12px; background-color: #bfdbfe; /* Default Blue Brush */ z-index: -1; transform: skewX(-20deg) rotate(-1deg); border-radius: 4px 10px 10px 4px; opacity: 0.6; } /* Color Variations for Brushes */ .brush-paint-green::before { background-color: #bbf7d0; } .brush-paint-purple::before { background-color: #e9d5ff; } .brush-paint-amber::before { background-color: #fde68a; } .brush-paint-rose::before { background-color: #fbcfe8; } .privacy-card { background: linear-gradient(to right, #f0fdf4, #dcfce7); border: 1px solid #bbf7d0; color: #166534; } .privacy-card .icon-svg { stroke: #166534; } /* --- NEW GALLERY SECTION --- */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 1rem; } .gallery-item { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; background: #fff; cursor: zoom-in; transition: transform 0.2s, box-shadow 0.2s; position: relative; } .gallery-item:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .gallery-item img { width: 100%; height: auto; display: block; } .gallery-caption { font-size: 0.75rem; color: var(--text-muted); text-align: center; padding: 0.5rem; background: #f9fafb; border-top: 1px solid var(--border-color); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } /* --- TESTIMONIALS --- */ .testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; } .testimonial-card { background: #f8fafc; padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color); } .stars { color: #f59e0b; margin-bottom: 0.5rem; } .quote { font-style: italic; color: var(--text-main); margin-bottom: 1rem; display: block; } .author { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; } /* --- FINAL CTA --- */ .bottom-cta { text-align: center; padding: 4rem 2rem; background: var(--brand-dark); border-radius: var(--radius); color: white; margin-top: 4rem; } .bottom-cta h2 { color: white; margin-bottom: 0.5rem; } .bottom-cta p { color: #94a3b8; margin-bottom: 2rem; } /* --- FOOTER --- */ .footer { text-align: center; padding: 3rem 0; color: var(--text-muted); font-size: 0.85rem; margin-top: 2rem; border-top: 1px solid var(--border-color); } .footer a { color: var(--text-muted); text-decoration: none; margin: 0 0.5rem; transition: color 0.2s; } .footer a:hover { color: var(--brand-primary); text-decoration: underline; } /* --- MEDIA QUERIES --- */ @media (min-width: 768px) { .hero-container { grid-template-columns: 1fr 1fr; } .hero-title { font-size: 3.5rem; } .dashboard-grid { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: 1fr 1fr; } .gallery-grid { grid-template-columns: repeat(4, 1fr); } .testimonials-grid { grid-template-columns: repeat(3, 1fr); } /* Feature block divider logic */ .feature-block.border-left { border-left: 2px solid #f1f5f9; padding-left: 2rem; } } /* Mobile specific adjustments */ @media (max-width: 767px) { .feature-block.border-left { border-left: none; border-top: 2px solid #f1f5f9; padding-left: 0; padding-top: 2rem; } } /* --- LIGHTBOX & TEXT MODAL --- */ .modal-overlay { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(15, 23, 42, 0.95); backdrop-filter: blur(5px); align-items: center; justify-content: center; } .lightbox-content { max-width: 90%; max-height: 90%; border-radius: 8px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } /* Text Modal Specifics */ .text-modal-content { background: white; width: 100%; max-width: 600px; max-height: 80vh; overflow-y: auto; border-radius: 8px; padding: 2rem; position: relative; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .text-modal-content h3 { margin-top: 0; } .text-modal-content p { font-size: 0.95rem; color: #4b5563; margin-bottom: 1rem; } .modal-close { position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 2001; background: transparent; border: none; line-height: 1; padding: 0; } .modal-close:focus-visible { outline: 2px solid white; outline-offset: 4px; } /* Close button inside text modal */ .text-modal-close-btn { position: absolute; top: 1rem; right: 1rem; background: transparent; border: none; font-size: 1.5rem; cursor: pointer; color: #6b7280; } .text-modal-close-btn:hover { color: #1f2937; } /* --- HERO NAV BAR --- */ .hero-nav { display: flex; justify-content: space-between; align-items: center; max-width: var(--container-width); margin: 0 auto 1rem auto; } .back-link { color: rgba(255, 255, 255, 0.65); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; } .back-link:hover { color: white; } .lang-nav { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; } .lang-link { color: rgba(255, 255, 255, 0.55); text-decoration: none; font-weight: 600; letter-spacing: 0.05em; transition: color 0.2s; } .lang-link:hover { color: white; } .lang-link.active { color: white; text-decoration: underline; text-underline-offset: 3px; } .lang-sep { color: rgba(255, 255, 255, 0.3); } /* --- FEATURED BADGE --- */ .featured-badge { display: inline-flex; align-items: center; gap: 7px; background: white; border-radius: 50px; padding: 4px 14px 4px 10px; font-size: 0.875rem; font-weight: 700; color: #1a73e8; text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,0.25); transition: box-shadow 0.2s, transform 0.2s; } .featured-badge:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.35); transform: translateY(-1px); } .featured-cta { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 1rem; color: #93c5fd; font-size: 0.875rem; font-weight: 500; } /* --- SKIP LINK --- */ .skip-link { position: absolute; top: -100%; left: 1rem; background: var(--brand-primary); color: white; padding: 0.5rem 1rem; border-radius: 0 0 4px 4px; text-decoration: none; font-weight: 600; z-index: 9999; transition: top 0.2s; } .skip-link:focus { top: 0; } /* --- FOCUS STYLES --- */ .btn-hero:focus-visible, .featured-badge:focus-visible, .back-link:focus-visible, .lang-link:focus-visible, .footer a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 2px; } .gallery-item:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } /* --- REDUCED MOTION --- */ @media (prefers-reduced-motion: reduce) { .mockup-window, .gallery-item, .btn-hero, .featured-badge, .skip-link { transition: none; transform: none !important; } } </style> </head> <body> <a href="#features" class="skip-link">Перейти к содержимому</a> <!-- 1. MODERN HERO SECTION --> <header class="hero-wrapper"> <nav class="hero-nav"> <a href="https://denshub.com/" class="back-link">← denshub.com</a> <div class="lang-nav"> <a href="https://denshub.com/en/tools/page-load-timer/" class="lang-link">EN</a> <span class="lang-sep">|</span> <a href="https://denshub.com/ru/tools/page-load-timer/" class="lang-link active">RU</a> <span class="lang-sep">|</span> <a href="https://denshub.com/de/tools/page-load-timer/" class="lang-link">DE</a> <span class="lang-sep">|</span> <a href="https://denshub.com/es/tools/page-load-timer/" class="lang-link">ES</a> </div> </nav> <div class="hero-container"> <!-- Left: Copy --> <div class="hero-content"> <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap;"> <div class="version-pill" style="margin-bottom: 0;"> <span style="margin-right: 6px;">✨</span> Версия 1.0.1 </div> <a href="https://chromewebstore.google.com/detail/page-load-timer/mnohinnpeihinoeepiphjcgpknehahlf" class="featured-badge"> <svg width="16" height="20" viewBox="0 0 24 28" fill="none" stroke="#1a73e8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="10" r="7.5"/> <circle cx="12" cy="10" r="4"/> <path d="M15.477 16.89L17 26l-5-3-5 3 1.523-9.11"/> </svg> Featured </a> </div> <h1 class="hero-title"> Хватит гадать. <br> Начни <span class="text-gradient">Измерять.</span> </h1> <p class="hero-subtitle"> Мгновенно получай показатели FCP, LCP и DOM для любой вкладки. Находи узкие места, замедляющие твое приложение, без какой-либо настройки. </p>