<script> νκ·Έ μμΉμ λ°λ₯Έ λ λλ§ μ±λ₯ μ°¨μ΄ μ€νμ μ§ννλ€.
λμΌν heavy.js μ€ν¬λ¦½νΈλ₯Ό κ°κ° <head> λ΄λΆ, <body> λ΄λΆμ μμΉμν¨ λ€, Chrome DevToolsμ Performance νμ μ¬μ©ν΄ μ€μ λ λλ§ μ§νλ₯Ό λΉκ΅νμλ€.
μΈ‘μ κΈ°μ€μΌλ‘λ Interaction to Next Paint(INP) κ°μ νμ©νλ€.
κ·Έ κ²°κ³Ό,
<head> λ΄λΆ: μ½ 40ms<body> μλ¨/νλ¨: μ½ 32msλ‘, μ€ν¬λ¦½νΈ μμΉμ λ°λΌ μ€μ λ λλ§ λ°μ μλ(INP)μ λ―Έλ¬νμ§λ§ λͺ νν μ°¨μ΄κ° λ°μν¨μ νμΈνλ€.
index.html
heavy.js
<head>μ μ€ν¬λ¦½νΈλ₯Ό λλ©΄ HTML νμκ° JS μ€νμ κΈ°λ€λ¦¬κΈ° λλ¬Έμ DOM λ λλ§μ΄ μ§μ°λκ³ , λ°λ©΄ <body> νλ¨μ λλ©΄ HTML νμ±μ΄ λͺ¨λ λλ λ€ μ€νλμ΄ λ λλ§μ΄ μ°¨λ¨λμ§ μλλ€.