Skip to content
18 / 36

Как ΠΈΠ·ΠΌΠ΅Ρ€ΠΈΡ‚ΡŒ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Largest Contentful Paint (LCP)?

LCP -- врСмя Π΄ΠΎ отрисовки самого ΠΊΡ€ΡƒΠΏΠ½ΠΎΠ³ΠΎ Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ элСмСнта (ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π²ΠΈΠ΄Π΅ΠΎ-постСр, тСкстовый Π±Π»ΠΎΠΊ). Норма -- Π΄ΠΎ 2.5 сСкунд. Π˜Π·ΠΌΠ΅Ρ€ΡΠ΅Ρ‚ΡΡ Ρ‡Π΅Ρ€Π΅Π· PerformanceObserver, Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ web-vitals, Chrome DevTools ΠΈ Lighthouse. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ способы ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ: ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ TTFB, ΡƒΠ±Ρ€Π°Ρ‚ΡŒ render-blocking рСсурсы, ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ LCP-рСсурса (preload, fetchpriority, оптимизация ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ) ΠΈ Π½Π΅ Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ клиСнтским JS.

Как ΠΈΠ·ΠΌΠ΅Ρ€ΠΈΡ‚ΡŒ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Largest Contentful Paint (LCP)? | JScriptiser