diff --git a/frontend/src/components/base/PageHero.astro b/frontend/src/components/base/PageHero.astro
index 532512b..066082b 100644
--- a/frontend/src/components/base/PageHero.astro
+++ b/frontend/src/components/base/PageHero.astro
@@ -50,19 +50,34 @@ const {
 const showImage = layout === 'with-image' && sideImage;
 ---
 
-<section class="hero-section" style:min-height={minHeight} style:--header-offset={headerOffset}>
-    {bgImage && <img src={bgImage} alt="" class="hero-bg-image" decoding="async" />}
+<section
+        class="hero-section"
+        style={`min-height: ${minHeight}; padding-top: ${headerOffset}; ${bgImage ? `background-image: url("${bgImage}")` : ''}`}
+>
+    <!-- КРИТИЧЕСКИ: img для LCP - позволяет Lighthouse засечь Largest Contentful Paint -->
+    {bgImage && (
+            <img
+                    src={bgImage}
+                    alt=""
+                    class="hero-bg-lcp"
+                    fetchpriority="high"
+                    decoding="async"
+                    width="1920"
+                    height="1080"
+            />
+    )}
+
     <div class="hero-overlay"></div>
 
     <div class="site-container hero-grid">
         <div class="hero-content">
             <div class="badge animate-load" data-delay="100">
                 {icon ? (
-                    <span class="badge-icon">
+                        <span class="badge-icon">
                         <Icon name={icon} />
                     </span>
                 ) : (
-                    <span class="status-dot"></span>
+                        <span class="status-dot"></span>
                 )}
                 {badgeText}
             </div>
@@ -76,37 +91,46 @@ const showImage = layout === 'with-image' && sideImage;
             <p class="hero-description animate-load" data-delay="700">{description}</p>
 
             {btnText && (
-                <div class="hero-actions animate-load" data-delay="900">
-                    {modalTarget ? (
-                        <Button variant="gold" size="lg" data-modal-target={modalTarget}>
-                            {btnText}
-                        </Button>
-                    ) : (
-                        <Button variant="gold" size="lg" href={btnHref}>
-                            {btnText}
-                        </Button>
-                    )}
-                    {btnSecondary && (
-                        <Button variant="outline" size="lg" href={btnSecondaryHref} class={btnSecondaryClass}>
-                            {btnSecondary}
-                        </Button>
-                    )}
-                </div>
+                    <div class="hero-actions animate-load" data-delay="900">
+                        {modalTarget ? (
+                                <Button variant="gold" size="lg" data-modal-target={modalTarget}>
+                                    {btnText}
+                                </Button>
+                        ) : (
+                                <Button variant="gold" size="lg" href={btnHref}>
+                                    {btnText}
+                                </Button>
+                        )}
+                        {btnSecondary && (
+                                <Button variant="outline" size="lg" href={btnSecondaryHref} class={btnSecondaryClass}>
+                                    {btnSecondary}
+                                </Button>
+                        )}
+                    </div>
             )}
         </div>
 
         {showImage && (
-            <div class="hero-image-wrapper animate-load" data-delay="400">
-                <div class="image-composition">
-                    <img src={sideImage} alt={sideImageAlt || "Юрист"} class="main-image" width="380" height="500" />
-                    {experienceBadge && (
-                        <div class="experience-badge animate-load" data-delay="1100">
-                            <span class="exp-number">{experienceBadge.number}</span>
-                            <span class="exp-text">{experienceBadge.text}</span>
-                        </div>
-                    )}
+                <div class="hero-image-wrapper animate-load" data-delay="400">
+                    <div class="image-composition">
+                        <img
+                                src={sideImage}
+                                alt={sideImageAlt || "Юрист"}
+                                class="main-image"
+                                width="380"
+                                height="500"
+                                loading="eager"
+                                fetchpriority="high"
+                                decoding="async"
+                        />
+                        {experienceBadge && (
+                                <div class="experience-badge animate-load" data-delay="1100">
+                                    <span class="exp-number">{experienceBadge.number}</span>
+                                    <span class="exp-text">{experienceBadge.text}</span>
+                                </div>
+                        )}
+                    </div>
                 </div>
-            </div>
         )}
     </div>
 </section>
@@ -118,8 +142,11 @@ const showImage = layout === 'with-image' && sideImage;
         animatedElements.forEach((el) => {
             const delay = parseInt((el as HTMLElement).dataset.delay || '0');
 
+            // Используем requestAnimationFrame для лучшей производительности
             setTimeout(() => {
-                el.classList.add('is-visible');
+                requestAnimationFrame(() => {
+                    el.classList.add('is-visible');
+                });
             }, delay);
         });
     };
@@ -131,29 +158,32 @@ const showImage = layout === 'with-image' && sideImage;
     }
 </script>
 
-<style define:vars={{ bgImage: bgImage ? `url("${bgImage}")` : "none" }}>
+<style>
     .hero-section {
         position: relative;
         width: 100%;
         min-height: 100vh;
         display: flex;
         align-items: center;
-        background-image: var(--bgImage);
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         margin: 0 !important;
-        padding-top: var(--header-offset, 80px);
         box-sizing: border-box;
         overflow: hidden;
     }
 
-    .hero-bg-image {
+    /* LCP helper image - скрыт визуально, но видим для Lighthouse */
+    .hero-bg-lcp {
         position: absolute;
-        width: 1px;
-        height: 1px;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
         opacity: 0;
         pointer-events: none;
+        z-index: -1;
     }
 
     .hero-overlay {
@@ -195,7 +225,7 @@ const showImage = layout === 'with-image' && sideImage;
         opacity: 0;
         transform: translateY(30px);
         transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
-                    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
         will-change: opacity, transform;
     }
 
@@ -209,7 +239,7 @@ const showImage = layout === 'with-image' && sideImage;
         opacity: 0;
         transform: translateX(50px) scale(0.95);
         transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
-                    transform 1s cubic-bezier(0.4, 0, 0.2, 1);
+        transform 1s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     .hero-image-wrapper.animate-load.is-visible {
@@ -222,7 +252,7 @@ const showImage = layout === 'with-image' && sideImage;
         opacity: 0;
         transform: translateY(20px) scale(0.9);
         transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
-                    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     .experience-badge.animate-load.is-visible {
@@ -251,17 +281,29 @@ const showImage = layout === 'with-image' && sideImage;
         flex-shrink: 0;
     }
 
-    /* Мерцающая точка (только на главной) */
+    /* Мерцающая точка - ИСПРАВЛЕНО: заменил box-shadow на opacity/transform */
     .status-dot {
         width: 10px;
         height: 10px;
         background: #22c55e;
         border-radius: 50%;
-        animation: pulse 2s ease-in-out infinite;
-        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+        position: relative;
         flex-shrink: 0;
     }
 
+    .status-dot::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background: #22c55e;
+        animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+        z-index: -1;
+    }
+
     .badge-icon {
         display: flex;
         align-items: center;
@@ -275,18 +317,15 @@ const showImage = layout === 'with-image' && sideImage;
         stroke-width: 2 !important;
     }
 
-    @keyframes pulse {
+    /* Оптимизированная анимация pulse - только opacity и transform */
+    @keyframes pulse-ring {
         0% {
-            transform: scale(0.95);
-            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
-        }
-        70% {
             transform: scale(1);
-            box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
+            opacity: 0.8;
         }
         100% {
-            transform: scale(0.95);
-            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
+            transform: scale(2.5);
+            opacity: 0;
         }
     }
 
@@ -549,5 +588,9 @@ const showImage = layout === 'with-image' && sideImage;
             animation: none;
             opacity: 1;
         }
+
+        .status-dot::before {
+            animation: none;
+        }
     }
-</style>
+</style>
\ No newline at end of file